列表
无序列表
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
……
</ul>
ul 标签里面只能包裹 li 标签
li 标签里面可以包裹任何内容
有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
……
</ol>
ol 标签里面只能包裹 li 标签
li 标签里面可以包裹任何内容
定义列表
<dl>
<dt>列表标题</dt>
<dd>列表描述 / 详情</dd>
……
</dl>
dl嵌套dd dt,dd dt嵌套其他
表格
table 嵌套 tr,tr 嵌套 td / th。
表格默认没有边框线,使用 border 属性可以为表格添加边框线。
表格标签
<caption> 大标题 居中
thead 表格头部
tbody 表格主体
tfoot 表格底部
标签使用看上去没变化,结构清晰。可省略×
实际上若改变了表格的height,头脚很窄,body均分
合并单元格
保留最左最上的单元格,添加属性(取值是数字,表示需要合并的单元格数量)
跨行合并,保留最上单元格,添加属性 rowspan
跨列合并,保留最左单元格,添加属性 colspan
在th td里合并<td rowspan="2">100</td>
不能跨表格结构标签合并单元格(thead、tbody、tfoot)。
表单
input标签
<input type="..." >
占位文本 文本框 密码框 使用
<input type="..." placeholder="提示信息">
单选框
<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女//"男 女"是选项信息
name自定义
多文件上传
<input type="file" multiple>
多选框
默认选中:checked
下拉菜单
select 嵌套 option,select 是下拉菜单整体,option是下拉菜单的每一项。
selected 属性实现默认选中功能。
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>武汉</option>
</select>
文本域
<textarea>默认提示文字</textarea>
实际开发中,使用 CSS 设置 文本域的尺寸
实际开发中,一般禁用右下角的拖拽功能
label标签
用 label 标签绑定文字和表单控件的关系,增大表单控件的点击范围。
写法一(for id 属性相同)
<input type="radio" id="man">
<label for="man">男</label>
写法二(不要属性)
<label><input type="radio"> 女</label>
提示:支持 label 标签增大点击范围的表单控件:文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。
butthon
<button type="">按钮</button>
按钮需配合 form 标签框起来(表单区域)才能实现对应的功能。
无语义布局标签
<div>div 标签,独占一行</div>
<span>span 标签,不换行</span>
字符实体
字符串加入多个空格只显示一个,所以需要字符实体