文章目录
一、列表标签
1、无序列表
- 列表的每一项默认显示圆点标识
- ul标签表示无序列表的整体,只允许包含li标签
- li标签表示无序列表的每一项,可以包含任意内容
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
<li>火龙果</li>
</ul>
代码运行效果:
2、有序列表
- 列表的每一项默认显示序号标识
- ol标签表示有序列表的整体,只允许包含li标签
- li标签表示有序列表的每一项,可以包含任意内容
<ol>
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
<li>火龙果</li>
</ol>
代码运行效果:
3、自定义列表
标签名 | 说明 |
---|---|
dl | 表示自定义列表的整体,只允许包含dt/dd标签 |
dt | 表示自定义列表的主题 |
dd | 表示定义列表针对主题的每一项内容,默认显示缩进效果 |
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dt>服务支持</dt>
<dd>售后中心</dd>
<dd>自助服务</dd>
</dl>
代码运行效果:
二、表格标签
- 嵌套关系:table > tr > td
标签名 | 说明 |
---|---|
table | 表格整体,用于包裹多个tr |
tr | 表格每行,用于包裹td |
td | 表格单元格,可包裹内容 |
caption | 表格大标题,默认在表格整体顶部居中位置显示 【位于table标签内部】 |
th | 表头单元格,表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示【位于tr标签内部,用于替换td标签】 |
thead | 表格头部,包裹tr标签【结构标签,了解】 |
tbody | 表格主体,tr标签 【结构标签,了解】 |
tfoot | 表格底部,tr标签【结构标签,了解】 |
- 相关属性:
属性名 | 说明 |
---|---|
border | 边框宽度 |
width | 表格宽度 |
height | 表格高度 |
rowspan | 合并单元格的个数, 跨行合并(垂直合并) |
colspan | 合并单元格的个数, 跨行合并(水列合并) |
- 合并单元格原则:上下合并保留上,左右合并保留左
- 不能跨结构标签合并(即不能跨:thead、tbody、tfoot)
<table border="1" width="400" height="200">
<caption>学生成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评价</th>
</tr>
</thead>
<tbody>
<tr>
<td>小红</td>
<td rowspan="2">100</td>
<td>优秀</td>
</tr>
<tr>
<td>小黑</td>
<td>优秀</td>
</tr>
<tr>
<td>小白</td>
<td>90</td>
<td>不错</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="2"> 大家都是最棒的!</td>
</tr>
</tfoot>
</table>
代码运行效果:
三、表单标签
1、input系列标签
- input标签根据type属性值的不同,展示不同效果
- type属性值:
type属性值 | 说明 |
---|---|
text | 文本框,用于输入单行文本 |
password | 密码框,用于输入密码 |
radio | 单选框,用于多选一 |
chekbox | 多选框,用于多选多 |
file | 文件选择,用于上传文件 |
submit | 提交按钮,用于提交数据给后端服务器,需配合form标签使用, |
reset | 重置按钮,用于重置(恢复表单默认值),需配合form标签使用 |
button | 普通按钮,默认无功能,之后配合JS添加功能 |
- placeholder属性:占位符,提示用户输入内容的文本
- name属性:对单选框有分组功能,相同name属性值的单选框为一组,一组只能同时选一个
- checked属性:默认选中
- multiple属性:多文件选择
- value属性:按钮上的文字
- form使用方法:用form标签把表单标签包裹起来
<form action="">
单选框:<input type="text" placeholder="输入昵称">
<br>
密码框:<input type="password" placeholder="输入密码">
<br>
单选框: <input type="radio" name="sex" checked>男<input type="radio" name="sex" >女
<br>
多选框:<input type="checkbox" checked>篮球<input type="checkbox" >足球<input type="checkbox">羽毛球
<br>
上传文件:<input type="file" multiple>
<br><br>
<input type="submit" value="注册">
<input type="reset" >
<input type="button" value="普通按钮">
</form>
代码运行效果:
2、button按钮标签
- button标签根据type属性值的不同,展示不同作用
- 谷歌浏览器中,默认是提交按钮
- 双标签,便于包裹其他内容:文字、图片等
- type属性值(同input按钮系列):
type属性值 | 说明 |
---|---|
submit | 提交按钮,用于提交数据给后端服务器 |
reset | 重置按钮,用于重置(恢复表单默认值) |
button | 普通按钮,默认无功能,之后配合JS添加功能 |
<form action="">
账户:<input type="text" placeholder="输入昵称">
<br>
密码:<input type="password" placeholder="输入密码">
<br><br>
<button>我是按钮</button>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>
代码运行效果:
3、select下拉菜单标签
- select标签:下拉菜单的整体
- option标签:下拉菜单的每一项
- selected下拉菜单的默认选中,没有此属性时,默认选中第一个
<select>
<option>北京</option>
<option>上海</option>
<option selected>广州</option>
<option>澳门</option>
</select>
代码运行效果:
4、textarea文本域标签
- cols属性:规定文本域的可见宽度
- rows属性:规定文本域的可见行数
- 右下角可以拖拽改变大小
<textarea></textarea>
<textarea cols="30" rows="10"></textarea>
代码运行效果:
5、label标签
使用方法一
- 使用label标签把内容(如:文本)包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值
使用方法二
- 直接使用label标签把内容(如:文本)和表单标签一起包裹起来
- 需要把label标签的for属性删除即可
性别:
<input type="radio" name="sex" id="nan"><label for="nan">男</label><!-- 方法一 -->
<label><input type="radio" name="sex">女</label><!-- 方法二 -->
四、语义化标签
1、没有语义的布局标签
- div标签:一行只显示一个
- span标签:一行可以显示多个
普通文本
<div>我是div标签</div>
<div>我是div标签</div>
<span>我是span标签</span>
<span>我是span标签</span>
代码运行效果:
2、有语义的布局标签(了解)
- 多用于移动端,html5推出
- 显示特点与div一致,但比div多了不同的语义
标签名 | 语义 |
---|---|
header | 网页头部 |
nav | 网页导航 |
footer | 网页底部 |
aside | 网页侧边栏 |
section | 网页区块 |
article | 网页文章 |
五、字符实体
- 对大小写敏感
描述 | 实体名称 |
---|---|
空格【最常用】 | |
< 小于号 | < |
> 大于号 | > |
& 和号 | & |
" 引号 | " |
’ 撇号 | ' (IE不支持) |
¢ 分(cent) | ¢ |
£ 镑(pound) | £ |
¥ 元(yen) | ¥ |
€ 欧元(euro) | € |
§ 小节 | § |
© 版权(copyright) | © |
® 注册商标 | ® |
™ 商标 | ™ |
× 乘号 | × |
÷ 除号 | ÷ |