1、转义字符
< // 小于号
> // 大于号
// 空格（不会被折叠）
© // 版权符号©
2、a标签
- title：悬停文本
- target ：设置为blank，可在新窗口中打开网页
- href：跳转到其它页面时，给跳转到的页面内标签添加id，可以链接到指定锚点
<a href="https://www.baidu.com#tt" target="_blank" title="悬停文本">超级链接</a>
- 当href指向exe、zip、rar、dmg文件格式的链接，将自动成为下载链接
- 链接添加mailto:前缀是邮件链接，系统将自动打开Email相关软件
- 链接添加tel:前缀是电话链接，系统将自动打开拨号盘
- 实际开发中不建议去掉href属性，而是建议设置href="#"或者设置href="javascript:;"，禁止链接刷新或跳转
3、html5区块标签
| 区块标签 |
说明 |
| <section> |
文档的区域，语义比div大 |
| <article> |
文档的核心文章内容，会被搜索引擎主要抓取 |
| <aside> |
文档的非必要相关内容，比如广告 |
| <nav> |
导航条 |
| <header> |
页头 |
| <main> |
网页核心部分 |
| <footer> |
页脚 |
4、语义化标签
| 语义化标签 |
说明 |
| <span> |
文本中的“区块”标签，本身没有任何特殊的显示效果，可以结合css来丰富样式 |
| <b> |
被加粗的文字，css已经替代了它的功能 |
| <u> |
加下划线的文字，css已经替代了它的功能 |
| <i> |
倾斜的文字，css已经替代了它的功能 |
| <strong> |
代表特别重要文字 |
| <em> |
代表强调文字 |
| <mark> |
代表一段需要被高亮的文字 |
| <figure><figcaption> |
<figure>代表一段独立的内容，与说明<figcaption>配合使用，它是一个独立的引用单元，比如建议读者拓展视野的图片等，当这部分转移到附录中或其它页面时不会影响到主体 |
5、form表单
| input type属性值 |
控件 |
| text |
单行文本框 |
| radio |
单选按钮 |
| checkbox |
多选按钮 |
| password |
密码框 |
| button |
普通按钮 |
| reset |
充值按钮 |
| submit |
提交按钮 |
html5中新增的表单控件
| input type属性值 |
控件 |
| color |
颜色选择控件 |
| date、time |
日期时间选择控件 |
| email |
电子邮件输入控件 |
| file |
文件选择控件 |
| number |
数字输入控件 |
| range |
拖拽条 |
| search |
搜索框 |
| url |
网址输入控件 |
<form action="" method="post">
<p>
请输入姓名：<input type="text">
</p>
<p>
请输入学校：<input type="text" value="国防科技大学" disabled>
</p>
<p>
专业：<input type="text" placeholder="请输入">
</p>
<!--
// 互斥的单选按钮应该设置他们的name为相同值
// 单选按钮要有value属性值，向服务器提交的就是value值
// 按钮加上checked属性，表示默认被选中
// html4时代label需要和for绑定，性别是html4语法，兴趣爱好是html5语法
-->
<p>
性别：
<input type="radio" name="sex" value="女" id="woman"><label for="woman">女</label>
<input type="radio" name="sex" value="男" id="man" checked><label for="man">男</label>
</p>
<p>
兴趣爱好：
<label><input type="checkbox" name="ball" value="篮球">篮球</label>
<label><input type="checkbox" name="ball" value="足球">足球</label>
<label><input type="checkbox" name="ball" value="乒乓球">乒乓球</label>
<label><input type="checkbox" name="ball" value="羽毛球">羽毛球</label>
<label><input type="checkbox" name="ball" value="橄榄球">橄榄球</label>
<label><input type="checkbox" name="ball" value="冰球">冰球</label>
</p>
<p>
请输入密码：<input type="password">
</p>
<!-- 下拉菜单 -->
<p>
请选择支付方式：
<select>
<option value="wxpay">微信支付</option>
<option value="alipay">支付宝支付</option>
<option value="wxpay">微信支付</option>
</select>
</p>
<!-- 多行文本框 -->
<p>留言：</p>
<p>
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<!-- 按钮 -->
<p>
<button>我是一个普通按钮</button>
</p>
<p>
<input type="button" value="我是一个普通按钮">
</p>
<p>
<input type="submit" value="提交按钮">
</p>
<p>
<input type="reset" value="重置按钮">
</p>
<!-- html5中新增的表单控件 -->
<p>
颜色选择：
<input type="color">
</p>
<p>
日期选择：
<input type="date">
</p>
<p>
时间选择：
<input type="time">
</p>
<p>
<!-- 提交的时候会进行邮箱格式校验 -->
电子邮件输入：
<input type="email" required>
</p>
<p>
<!-- required为必填项，提交的时候会校验 -->
必填：
<input type="text" required>
</p>
<p>
数字：
<input type="number" min="10" max="100">
</p>
<p>
<!-- 需要结合js使用 -->
拖拽条：
<input type="range" min="10" max="20">
</p>
<p>
<!-- 输入之后多了一个清除的叉号 -->
搜索框：
<input type="search">
</p>
<p>
<!-- 提交的时候会校验格式 -->
网址：
<input type="url" required>
</p>
<p>
请选择省份：
<input type="text" list="province-list">
<datalist id="province-list">
<option value="山东"></option>
<option value="山西"></option>
<option value="河北"></option>
<option value="河南"></option>
<option value="湖北"></option>
<option value="湖南"></option>
<option value="安徽"></option>
</datalist>
</p>
</form>
6、table表格
table.png
<table border="1" width="600" style="border-collapse: collapse;">
<thead>
<tr>
<th></th>
<th colspan="2">第一季度</th>
<th colspan="2">第二季度</th>
<th colspan="2">第三季度</th>
<th colspan="2">第四季度</th>
</tr>
<tr>
<th></th>
<th>国内</th>
<th>国外</th>
<th>国内</th>
<th>国外</th>
<th>国内</th>
<th>国外</th>
<th>国内</th>
<th>国外</th>
</tr>
</thead>
<tbody>
<tr>
<th>农产品</th>
<td>213</td>
<td>213</td>
<td>213</td>
<td>213</td>
<td>213</td>
<td>213</td>
<td>213</td>
<td>213</td>
</tr>
<tr>
<th>手机</th>
<td>213</td>
<td>213</td>
<td>213</td>
<td>213</td>
<td>213</td>
<td>213</td>
<td>213</td>
<td>213</td>
</tr>
<tr>
<th>水产品</th>
<td>213</td>
<td>213</td>
<td>213</td>
<td>213</td>
<td>213</td>
<td>213</td>
<td>213</td>
<td>213</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>汇总</th>
<td>2312</td>
<td>2312</td>
<td>2312</td>
<td>2312</td>
<td>2312</td>
<td>2312</td>
<td>2312</td>
<td>2312</td>
</tr>
</tfoot>
</table>
网友评论