象山县城乡和住房建设局网站,怎么线上卖东西,前端框架有哪些,西安市网站搭建【HTML】Day02 1. 列表标签1.1 无序列表1.2 有序列表1.3 定义列表 2. 表格标签2.1 合并单元格 3. 表单标签3.1 input标签基本使用3.2 上传多个文件 4. 下拉菜单、文本域5. label标签6. 按钮button7. div与span、字符实体字符实体 1. 列表标签
作用#xff1a;布局内容排列整齐… 【HTML】Day02 1. 列表标签1.1 无序列表1.2 有序列表1.3 定义列表 2. 表格标签2.1 合并单元格 3. 表单标签3.1 input标签基本使用3.2 上传多个文件 4. 下拉菜单、文本域5. label标签6. 按钮button7. div与span、字符实体字符实体 1. 列表标签
作用布局内容排列整齐的区域。 列表分类无序列表、有序列表、定义列表。 1.1 无序列表
作用布局排列整齐的不需要规定顺序的区域。 标签ul 嵌套 li , ul 是无序列表, li是列表条目 1. ul标签里面只能包裹li标签 2. li标签里面可以包裹任何内容 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyulli列表条目1/lili列表条目2/li/ul
/body
/html1.2 有序列表
作用布局排列整齐的需要规定顺序的区域。 标签ol嵌套li, ol是有序列表,li是列表条目。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyolli第一项/lili第二项/lili第三项/li/ol
/body
/html1.3 定义列表
标签dl嵌套dt和dd, dl是定义列表dt是定义列表的标题dd是定义列表的描述/详情
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydldt列表标题/dtdd列表描述/详情/dddt列表标题x/dtdd列表描述/详情x/dd/dl
/body
/html2. 表格标签
网页中的表格与Excel表格类似用来展示数据。 标签table 嵌套 tr tr嵌套td/th
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- border边框cellspacing单元格间距cellpadding单元格距内容的距离--table aligncenter border1 cellspacing0cellpadding20caption表格标题/caption!-- tr表示行 th表头 加粗并居中 td表示列 16:20上课 --trth编号/thth姓名/thth年龄/th/trtrtd1/tdtd张三/tdtd28/td/trtrtd2/tdtd尼古拉斯赵四/tdtd18/td/tr/table
/body
/html表格标签 2.1 合并单元格
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodytable border cellspacing cellpadding!-- colspan跨列合并 -- !-- rowspan跨行合并 -- trtd aligncenter colspan21-1/tdtd rowspan21-3/td/trtrtd rowspan22-1/tdtd2-2/td/trtrtd colspan2 aligncenter3-2/td/tr/table
/body
/html3. 表单标签
3.1 input标签基本使用
input标签type属性值不同功能也不同。 !DOCTYPE html
htmlheadmeta charsetutf-8title/title/headbody!-- action服务器地址 method提交方式 --form actionhttp://www.tmooc.cn methodget!-- 文本框 name是对传递过去的参数做介绍 id唯一标识 value值 设置文本框的值--input typetext nameusernameplaceholder请输入用户名 id value /!-- 密码框 placeholder占位文本 --input typepassword namepwdplaceholder请输入您的密码 id value /hr !-- 单选 必须写value checked 设置默认选中--性别: input typeradio namegender id valuem /男input typeradio checkedchecked namegender id valuef /女hr !-- 多选 和单选类似--爱好: input typecheckbox namehobby idvaluecy /抽烟input typecheckbox namehobby idvaluehj /喝酒input typecheckbox checkedchecked namehobby idttvaluett /label fortt烫头/label!-- label扩充点击范围 --input typecheckbox namehobby idwz valuewangzhe/label forwz王者荣耀/labelhr !-- 日期选择器--生日:input typedate namebirthday idbirthday/hr !-- 文件选择器--靓照:input typefile namepic idpic/hr input typesubmit value注册//form/body
/html3.2 上传多个文件
默认情况下文件上传表单控件只能上传一个文件添加multiple属性可以实现文件多选功能。 input typefile multiple
4. 下拉菜单、文本域
!DOCTYPE html
htmlheadmeta charsetutf-8title/title/headbodyform actionhttp://www.tmooc.cn methodget!-- 下拉选 --所在城市:select namecityoption valuebj北京/option!-- selected默认选中 --option valuesh selectedselected上海/optionoption valuegz广州/option/selectbr!-- 文本域 rows行 cols列--自我介绍:textarea nameintro rows3 cols20placeholder说点儿啥.../textarea!-- 提交按钮 --input typesubmit value注册/!-- 重置按钮 --input typereset /!-- 自定义按钮 --input typebutton value按钮 /button typebutton按钮/button/formp测试nbsp;nbsp;nbsp;空格lt;abcgt;/pdiv iddiv1/divdiv iddiv2/divdiv iddiv3/divspanspan1/spanspanspan2/spanspanspan3/span/body
/html5. label标签
作用网页中某个标签的说明文本。
经验用label标签绑定文本和表单控件的关系增大表单控件的点击范围。就比如上面的王者荣耀点击文字也能选择到 6. 按钮button
button type按钮 /button7. div与span、字符实体
作用布局网页(划分网页区域摆放内容)
div:独占一行span不换行 字符实体
