HTML5从入门到精通（复习查漏向
冷知识
万维网之始：第一个网站·蒂姆伯纳斯-李
HTML5
html5文档类型声明:
头部： <!doctype html>
字符集(charset)：编码与解码采用的规则
UTF-8：万国码
<head>
<meta charset="UTF-8"> <!-- gb2322 -->
</head>
常用html实体
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 | |
|
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| " | 引号 | " |
| ‘ | 撇号 | ' (IE不支持) |
| ￠ | 分（cent） | ¢ |
| ￡ | 镑（pound） | £ |
| ￥ | 元（yen） | ¥ |
| € | 欧元（euro） | € |
| § | 小节 | § |
| ? | 版权（copyright） | © |
| ? | 注册商标 | ® |
| ? | 商标 | ™ |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
重要标签
??HTML决定网页结构，因此多注意标签意义，而不是决定大小形态颜色等属性
<meta> 元标签
| 属性Attribute | 用法Usage | 例Exaples |
|---|---|---|
| name - content | 一起使用设置网站元数据 |
<meta name="keywords" content="xx,yy">、<meta name="description" content="xx.com-zz"> 为百度等搜索引擎提供关键字key以及描述description
|
| charset | 定义网站字符编码形式 |
utf-8、gb2322
|
| http-equiv | 容纳一些特殊 HTTP headers
|
<meta http-equiv="refresh" content="2;url=https://www.baidu.com"> 2秒后跳转指定url
|
块元素包裹行内元素，块元素默认上下换行
布局标签-结构化语义标签
| 标签名 | 语义 |
|---|---|
| header | 网页头部 |
| footer | 网页底部 |
| main | 网页主体 |
| nav | 网页导航 |
| aside | 网页侧边栏 |
| article | 文章 |
| section | 独立区块 |
| div | 块（主要使用 |
| span | 同div（行内元素，其他是块元素 |
列表
| 标签（均为块元素 | 语义 |
|---|---|
| ul | 无序列表 |
| ol | 有序列表 |
| li | 列表项 |
| dl | 定义列表 |
| dd | dl解释说明 |
| dt | dl内容 |
超链接-<a>
| Attribute | 语义 |
|---|---|
| href | 链接url |
| target | 链接显示窗口（如默认本窗口 _blank => 新窗口
|
href="#id" |
id：标签唯一标识，重复则第一个生效 |
| -- | 跳转到当前页面指定id位置 |
href="javascript:;" |
占位 |
图片元素-<img>
-
自结束标签
-
属性Attribute 语义 src ≈href alt 图片获取失败会默认显示 -
图片形式：gif、png、jpg、
webp、base64<img src="data:image/jpeg;base64,···">
内联框架-<iframe>
| 属性Attribute | 语义 |
|---|---|
| src | ≈href |
| width-height | 定义长宽 |
frameborder |
定义边框厚度 |
音视频
<audio src="your music" controls autoplay loop></audio>
<audio controls autoplay loop>
<source src="···" type="···">
<embed src="···" ··· width ···>
</audio>
<video controls autoplay loop>
<source src="···" type="···">
<embed src="···" ··· width ···>
</video>
// controls 用户可控
// autoplay 自动播放
// loop 循环播放
table
<table border="1" width=‘50%‘ align="center">
<!-- 在table中使用tr表示表格中的一行，有几个tr就有几行 -->
<tr>
<!-- 在tr中使用th表示表头
<th>B1</th>
<th>C1</th>
<th>D1</th>
</tr>
<tr>
<!-- 在tr中使用td表示一个单元格，有几个td就有几个单元格
<!-- rowspan 纵向的合并单元格 -->
<td rowspan="2">B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<!--
colspan 横向的合并单元格
-->
<td colspan="2">C4</td>
</tr>
</table>
结构固定-长表格
<table border="1" width=‘50%‘ align="center">
<!--
可以将一个表格分成三个部分：
头部 thead
主体 tbody
底部 tfoot
这三部分页面显示位置固定，论出现在html中位置如何
-->
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</tr>
</thead>
<tbody>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>300</td>
</tr>
</tfoot>
</table>
form
<!-- action 表单要提交的服务器的地址 -->
<form action="target.html">
文本框 <input type="text" name="username">
<br><br>
密码框 <input type="password" name="password">
<br><br>
<!-- 当选按钮选择框，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器
- checked 可以将单选按钮设置为默认选中 -->
单选按钮 <input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>
<br><br>
多选框 <input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked>
<br><br>
<!-- 下拉列表 -->
<select name="haha">
<option value="i">选项一</option>
<option selected value="ii">选项二</option>
<option value="iii">选项三</option>
</select>
<br><br>
<!-- 提交按钮 -->
<input type="submit" value="注册">
<!-- <input type="file" accept="">-->
<!-- <input type="image" >-->
//button按钮无效果，需要其他效果需要自行设置
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
//常用属性
autocomplete="off" 关闭自动补全
readonly 将表单项设置为只读，数据会提交
disabled 将表单项设置为禁用，数据不会提交
autofocus 设置表单项自动获取焦点
其他标签查询文档