3.12笔记

一、列表标签（标签必须组合使用）

1.无序列表（常用）

ul表示无序列表的整体，用于包裹里标签

li表示无序列表的每一项

备注：ul标签中只允许包含li标签        li标签可以包含任意内容

2.有序列表（排行表用的比较多）

ol表示有序列表的整体，用于包裹li标签

li表示有序列表的每一项，用于包含每一行的内容

列表的每一项前默认显示序号标识

备注： ol标签中只允许包含li标签                li标签可以包含任意内容自定义

3.自定义列表

dl表示自定列表的整体，用于包裹dd/dt标签

dt表示自定义列表的主题

dd表示自定义列表的针对主题每一项内容

自定义列表(dd前会显示缩进效果)——经常用于底部导航

备注：dl标签中只允许包含dt/dd标签            dt/dd标签可以包含任意内容

二、表格标签（后台管理系统用得比较多）

1、基本标签  （标签的嵌套关系：table > tr> td）

table表示表格的整体可用于包裹多个tr

tr表示表格中的每行，可以包公多个td

td表示单元格，用于包裹内容

caption在table标签内部使用，表示表格的整体标题

th可代替td  作为表格的表头

2、表格的属性标签

border属性后加数字表示表格边框宽度

width表示表格的宽度  也是数值

height表示表格的高度 数值表示

相关属性（实际开发时针对样式一般用css设置）表格里面的标题、表头单元格标签（在table标签内使用）

操作：可以按ctrl+d 选中替换原有的代码 caption跟tr是并列关系

3、表格的结构标签

thead表示表格头部

tbody表示表格主体

tfoot表示表格的底部

备注：以上三个标签内部必须包裹tr标签，也可以忽略不写

4、合并单元格（将水平或垂直多个单元格合并成一个单元格）

左右合并——colspan（跨列合并）

上下合并——rowspan（跨行合并）

备注：合并标签在要合并的行或列开始标签内使用，标签内数值 = 要合并几个单元格的数量。只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）

操作：用>符号可以快速生成嵌套关系 在相关代码后×需要打的数量 ，并列关系中用+符号

比如：要3行3个单元格 table>tr×3>td×3

          有表头：table>thead>tr×3>th×3    tbody>tr×3>td×3

三、表单（与用户进行互动的）

1、input系列常用标签     value属性显示文字

input  type=“ ”  type=的属性有

text(文本框、输入文本使用，属性placeholder是占位符标签提示用户需要输入的文本、 )

password（密码框，输入密码并加密属性placeholder是占位符标签提示用户需要输入的文本 ）

radio（单选框，需要在同一组后加属性name= 同一个数值时才能生效单选、checked是默认属性）

checkbox（多选框，大多数情况需要用label标签来绑定框与内旋文字的关系、checked是默认属性）

file（选择文件上传至网页，属性multiple 可以多个文件上传）

submit、reset、button是按钮后续多用button代替

备注：当type=text、password时，占位符标签是placeholder（提示用户需要输入的文本），name=username跟后端交互，value= 的内容跟后端交互

重置按钮，只在form范围内生效

button是双标签有type属性（谷歌中默认时提交）可以包含文字、图片等。后续用这个代替input按钮标签type=的数值代表这个按钮的做哟个与功能

2、下拉框标签由select+option组成 默认标签是selected

3、文本域标签textarea，属性cols代表可见宽度，row代表可见行数

4、label标签常用于绑定内容与表单标签之间的    操作：1.用lable标签吧内容包裹住 2.在表单中加id 3.再在for里加相同的id    第二种办法也可以直接把文本跟标签一起包裹住把for删除（id是唯一标识）

四、语义化标签

无语义化标签div（独占一行）、span（一行多个）

有语义化标签（独占一行）

header、footer比较常用其余做了解部分

浏览器识别不出多个空格、换行等因此需要符号代替

比较常用的有  <是&lt、>是&gt、空格是&nbsp