网站顶部下拉广告代码,电器网站建设流程,wordpress怎么加动态背景图图片,宾馆在什么网站做推广效果好html 文件结构
html 标签是整个 html 文件的根标签(最顶层标签) head 标签中写页面的属性. body 标签中写的是页面上显示的内容 title 标签中写的是页面的标题
htmlheadtitle这是一个标题/title/headbody/body
…html 文件结构
html 标签是整个 html 文件的根标签(最顶层标签) head 标签中写页面的属性. body 标签中写的是页面上显示的内容 title 标签中写的是页面的标题
htmlheadtitle这是一个标题/title/headbody/body
/htmlhtml 的代码显示的结果我们可以通过浏览器观察得到。
标签的层次关系 head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签) title 是 head 的子标签。 head 是 title 的父标签. head 和 body 之间是兄弟关系
html 快速入门
作为后端人员我们只需要知道即可这些内容是为了项目做铺垫的。
在 VScode 上敲击一个 然后回车就可以生成一个基本的 html 的框架
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body/body
/html我们可以通过浏览器的开发者模式会代码进行调试。
titile 标签
titile 是给网页命名的 title这是一个标题/title标题标签 h1-h6
标题标签一共有六个字体大小从大到小排列。 h1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6段落标签 p
在HTML中段落换行符空格都会失效如果需要分成段落需要使用专门的标签
p标签描述的段落前面没有缩进 自动根据浏览器宽度来决定排版。 html 内容首尾处的换行空格均无效。 在 html 中文字之间输入的多个空格只相当于一个空格。 html 中直接输入换行不会真的换行而是相当于一个空格。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title这是一个标题/title
/head
bodyp这是一个段落。/pp这还是一个段落。/pp这又是一个段落。/pp这又是一个段落。/p
/body
/html换行标签 br/
br 是 break 的缩写. 表示换行。 br 是⼀个单标签(不需要结束标签) br 标签不像 p 标签那样带有⼀个很大的空隙 br/ 是规范写法 这是⼀个br标签br/这是⼀个br标签br/这是⼀个br标签br/br 标签和 p 标签的区别
图片标签 img
img 标签必须带有 src 属性表示图片的路径
这个路径可以是我们电脑的相对路径或者如果是网络图片那就是网络路径不推荐使用绝对路径因为这份代码在别人的电脑上就运行不了了。
还可以设置宽度高度一般改一个就行另外⼀个会等比例缩放。否则就会图片失衡 border 是边框一般通过 CSS 设置
img src width height border超链接 a
a href target/ahref必须具备表示点击后会跳转到哪个页面 target不是一定要写的默认是 _selef如果是 _blank 则用新的页面打开
连接分为三种 外部链接跳转到别的网站 内部链接跳转到本网站的别的页面 空链接这是当后端还没写好的时候前端把这个与后端链接的先置为空 a hrefhttps://www.baidu.com/index.htm target_blank百度/aa hrefDemo1.html target_blankDemo1.html/aa href#空链接/a表格标签
table 标签表示整个表格 tr表示表格的一行 td表示一个单元格 table stylewidth: 500px; height: 400px; border1px red cellspacing0trtdcat/tdtddog/td/trtrtdbaitang/tdtd402/td/trtrtd314/tdtd1024/td/tr/table表单属性
表单是让用户输入信息的重要途经。分成两个部分 表单域包涵表单元素的区域重点是 form 标签 表单控件输入框提交按钮等等重点是 input 标签。
form标签
action表示表单提交时数据发送到哪个URL method表示表单提交时使用的 http 方法通常是 get 和 post
input 标签
各种输入控件单行文本框按钮单选框复选框 • type(必须有)取值种类很多buttoncheckboxtextfileimagepasswordradio 等。 • name: 给 input 起了个名字。尤其是对于单选按钮具有相同的 name 才能多选⼀。 • value: input 中的默认值. • checked默认被选中.(用于单选按钮和多选按钮)
文本框
input typetext size30 nameusernamebr/密码框
密码input typepassword namepasswordbr/单选框
性别input typeradio namegender男input typeradio namegender女注意单选框只有当有相同的name 属性的时候才能实现单选的效果。 复选框 兴趣爱好input typecheckbox玩游戏input typecheckbox打球input typecheckbox唱歌要想实现点击字体也能实现选择那么就要设置号 id 属性然后通过 label 标签包裹 字体label 对应 id 值 兴趣爱好input typecheckbox namehobby id1 value1label for1玩游戏/labelinput typecheckbox namehobby id2 value2label for2打球/labelinput typecheckbox namehobby id3 value3label for3唱歌/label普通按钮
input typebutton value我是一个按钮提交按钮
input typesubmit value提交提交按钮必须放在 form 标签内部并且提交的数据只会提交 form 标签包裹的数据。 下拉菜单标签 select
select 标签内部搭配 option 标签可以做出下拉菜单的效果
专业selectoption计算机科学与技术/optionoption软件工程/optionoption物联网/optionoption通信工程/optionoption电子信息/option
/select如果你想默认先显示哪个专业你可以加上selectedselected
专业selectoption计算机科学与技术/optionoption软件工程/optionoption物联网/optionoption selectedselected通信工程/optionoption电子信息/option
/select文本框标签 textarea
说明你的优点textarea rows10 cols50/textarea无语义标签 div 与 span
div 标签独占一行是一个大盒子 span 不独占一行是一个小盒子
这两个标签的作用是用于网页的布局。
divhello world!/div
divhello world!/div
divhello world!/div
spanjava /spanspanjava /spanspanjava /span实践
写出对应的 html 代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title登录页面/title
/head
bodyh1用户注册/h1tabletrtd用户名/tdtdinput typetext placeholder请输入用户名/td/trtrtd手机号/tdtdinput typetext placeholder请输入手机号/td/trtrtd密码/tdtdinput typetext placeholder请输入密码/td/tr/tabledivbutton注册/button span已有账号/span a href#登录/a/div
/body
/html
