文章目录
- 1. html 骨架（页面固定结构）
- 2. html 注释
- 3. html 标题标签
- 4. 换行标签
- 5. 水平线标签
- 6. 文本格式化标签
- 7. 图片标签
- 7.1 图片标签的使用
- 7.2 图片标签的属性
- 8. 路径
- 8.1 绝对路径
- 8.2 相对路径
- 9. 音频标签
- 10. 视频标签
- 11. 链接标签
- 12. 段落标签
- 13. 列表
- 13.1 无序列表
- 13.2 有序列表
- 13.3 自定义列表
- 14. 表格
- 14.1 基本标签
- 14.2 表格属性
- 14.3 表格标题和表头单元格标签
- 14.4 结构标签
- 14.5 合并单元格
- 15. 表单
- 15.1 input 系列标签
- 15.2 button 按钮标签
- 15.3 select 下拉菜单标签
- 15.4 textarea 文本域标签
- 15.5 label 标签
- 16. 语义化标签
- 16.1 没有语义的布局标签 - div 和 span
- 16.2 有语义的布局标签（了解）
- 17. 字符实体
- 18. 综合案例
- 18.1 优秀学生信息表
- 18.2 相亲会员注册表单
1. html 骨架（页面固定结构）
整体、头部、标题、主体
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主体内容
</body>
</html>
-
html 标签：网页的整体
-
head 标签：网页的头部
-
body 标签：网页的身体
-
title 标签：网页的标题
2. html 注释
注释格式
<!-- 这是注释的内容 -->
3. html 标题标签
格式：h 系列标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
标题大小根据级别逐渐缩小，标题标签写在 body 标签中。
4. 换行标签
格式：
<br>
换行标签让文字强制换行显示，是单标签。
5. 水平线标签
格式：
<hr>
单标签，在页面中显示一条水平线。
6. 文本格式化标签
文本格式化标签完成文字的加粗、下划线、倾斜、删除线等效果。
| 标签 | 说明 |
|---|---|
| b/strong | 加粗 |
| u/ins | 下划线 |
| i/em | 倾斜 |
| s/del | 删除线 |
7. 图片标签
7.1 图片标签的使用
在网页中显示图片需要用到图片标签。
格式：
<img src="URL" alt="">
// src 为属性名，后面跟属性值。
// URL 可以是本地地址，也可以是公网上的地址。
// alt 属性用来为图像定义一串预备的可替换的文本。
是单标签，展示对应的效果需要借助标签的属性进行设置。
7.2 图片标签的属性
必需的属性
| 属性 | 值 | 描述 |
|---|---|---|
| alt | text | 规定图像的替代文本，当图片加载失败会显示替换的内容。 |
| src | URL | 规定显示图像的 URL。 |
可选的属性
| 属性 | 值 | 描述 |
|---|---|---|
| title | 提示文本 | 鼠标悬停时显示的文本。 |
| align | top/bottom/middle/left/right | 不推荐使用。规定如何根据周围的文本来排列图像。 |
| border | pixels | 不推荐使用。定义图像周围的边框。 |
| height | pixels*%* | 定义图像的高度。 |
| hspace | pixels | 不推荐使用。定义图像左侧和右侧的空白。 |
| ismap | URL | 将图像定义为服务器端图像映射。 |
| longdesc | URL | 指向包含长的图像描述文档的 URL。 |
| usemap | URL | 将图像定义为客户器端图像映射。 |
| vspace | pixels | 不推荐使用。定义图像顶部和底部的空白。 |
| width | pixels*%* | 设置图像的宽度。 |
示例
<img src="./cat.gif" alt="图片加载失败" title="这是一只猫" width="500" height="500">
8. 路径
8.1 绝对路径
示例：
<img src="D:图片素材表情包2020_1111.png" alt="图片加载失败">
<img src="http://101.34.22.188/tupian/girl-01.jpg" alt="图片加载失败">
8.2 相对路径
示例：
<img src="./test.jpg" src="图片加载失败">
9. 音频标签
音频标签用于在页面中插入音频，支持的格式：MP3、Wav、Ogg。
格式：
<audio src="./music.mp3" controls></audio>
常用属性：
| 属性名 | 功能 |
|---|---|
| loop | 循环播放 |
| autoplay | 自动播放（部分浏览器不支持） |
| controls | 显示播放的控件 |
| src | 音频的路径 |
示例：
<audio src="http://music.163.com/song/media/outer/url?id=4873075.mp3" controls autoplay loop></audio>
10. 视频标签
视频标签用于在网页中插入视频。
格式：
<video src="./video.mp4" controls></video>
常用属性：
| 属性名 | 功能 |
|---|---|
| loop | 循环播放 |
| autoplay | 自动播放（谷歌浏览器需配合muted实现静音播放） |
| controls | 显示播放的控件 |
| src | 视频的路径 |
示例：
<video src="https://video.699pic.com/videos/79/59/32/a_JTV8yrQGFrNy1613795932.mp4" controls autoplay muted loop></video>
11. 链接标签
-
场景：点击之后，从一个页面跳转到另一个页面。
-
称呼：a 标签、超链接、锚链接。
-
特点：双标签，需要设置 a 标签的 href 属性。
格式：
<a href="./destination.html">超链接</a>
target 属性：目标网页的打开形式
| 取值 | 效果 |
|---|---|
| _self | 默认值，当前窗口跳转（覆盖原网页） |
| _blank | 在新窗口跳转（保留原网页） |
示例：
<a href="https://blog.csdn.net/shenyuanhaojie?spm=1000.2115.3001.5343">我的博客</a>
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
当开发网站初期，我们还不知道跳转地址的时候， href 的值书写为 # ，是空链接的意思。
12. 段落标签
p 标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，也可以在样式表中规定。所有主流浏览器都支持 p 标签。
格式：
<p>This is some text in a very short paragraph</p>
可选属性：
| 属性 | 值 | 描述 |
|---|---|---|
| align | left/right/center/justify | 不赞成使用。请使用样式取代它。规定段落中文本的对齐方式。 |
示例：
<p>
秦时明月主题曲《情动》，旋律优美，扣人心弦，推荐收听！
<a href="http://www.zgei.com/?name=%E6%83%85%E5%8A%A8&type=netease">《情动》</a>
</p>
13. 列表
-
列表的使用场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等。
-
特点：按照行的方式，整齐的显示内容。
-
种类：无序列表、有序列表、自定义列表。
13.1 无序列表
标签组成：
| 标签名 | 说明 |
|---|---|
| ul | 表示无序列表的整体，用于包裹标签 |
| li | 表示无序列表的每一项，用于包含每一行的内容 |
列表的每一项前默认显示圆点标识；ul 标签中只允许包含 li 标签，li 标签可以包含任意内容。
示例：
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>榴莲</li>
</ul>
13.2 有序列表
标签组成：
| 标签名 | 说明 |
|---|---|
| ol | 表示有序列表的整体，用于包裹 li 标签 |
| li | 表示有序列表的每一项，用于包含每一行的内容 |
列表的每一项前默认显示序号标识；ol 标签中只允许包含 li 标签，li 标签可以包含任意内容。
示例：
<ol>
<li>香蕉</li>
<li>苹果</li>
<li>榴莲</li>
</ol>
13.3 自定义列表
标签组成：
| 标签名 | 说明 |
|---|---|
| dl | 表示自定义列表的整体，用于包裹 dt/dd 标签 |
| dt | 表示自定义列表的主题 |
| dd | 表示自定义列表的针对主题的每一项内容 |
dd 前会默认显示缩进效果；dl 标签中只允许包含 dt/dd 标签，dt/dd 标签可以包含任意内容。
示例：
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
14. 表格
14.1 基本标签
| 标签名 | 说明 |
|---|---|
| table | 表格整体，可用于包裹多个 tr |
| tr | 表格每行，用于包裹 td |
| td | 表格单元格，可用于包裹内容 |
嵌套关系：table > tr > td
示例：
<table>
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>小红</td>
<td>100</td>
<td>优秀</td>
</tr>
<tr>
<td>小蓝</td>
<td>90</td>
<td>优秀</td>
</tr>
</table>
上面示例显示效果是没有边框的，需要设置属性。
14.2 表格属性
相关属性：
| 属性名称 | 属性值 | 效果 |
|---|---|---|
| align | left/center/right | 规定表格相对周围元素的对齐方式 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
PS：在实际开发中样式效果推荐用 CSS 设置。
示例：
<table border="1" width="500" height="500">
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>小红</td>
<td>100</td>
<td>优秀</td>
</tr>
<tr>
<td>小蓝</td>
<td>90</td>
<td>优秀</td>
</tr>
</table>
14.3 表格标题和表头单元格标签
用处：在表格中表示整体大标题和一系列小标题。
其他标签：
| 标签名 | 名称 | 说明 |
|---|---|---|
| caption | 表格大标题 | 表示表格整体大标题，默认在表格整体顶部居中位置显示 |
| th | 表头单元格 | 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示 |
PS：caption 标签书写在 table 标签内部；th 标签书写在 tr 标签内部（用于替换 td 标签）。
示例：
<table border="1">
<caption><strong>学生成绩单</strong></caption>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>小红</td>
<td>100</td>
<td>优秀</td>
</tr>
<tr>
<td>小蓝</td>
<td>90</td>
<td>优秀</td>
</tr>
</table>
14.4 结构标签
用处：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰。
结构标签：
| 标签名 | 名称 |
|---|---|
| thead | 表格头部 |
| tbody | 表格主题 |
| tfoot | 表格底部 |
PS：表格结构标签内部用于包裹 tr 标签，表格的结构标签可以省略。
示例：
<table border="1">
<caption><strong>学生成绩单</strong></caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>小红</td>
<td>100</td>
<td>优秀</td>
</tr>
<tr>
<td>小蓝</td>
<td>90</td>
<td>优秀</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>非常优秀</td>
<td>非常优秀</td>
</tr>
</tfoot>
</table>
14.5 合并单元格
合并单元格方式：
-
跨行合并：rowspan=“合并单元格的个数” ；最上侧单元格为目标单元格, 写合并代码。
-
跨列合并：colspan=“合并单元格的个数”；最左侧单元格为目标单元格, 写合并代码。
合并单元格三步曲：
-
先确定是跨行还是跨列合并。
-
找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：
<td colspan=“2”></td>。 -
删除多余的单元格。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>合并单元格</title>
</head>
<body>
<table width="500" height="249" border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
效果：
15. 表单
15.1 input 系列标签
-
用处：在网页中显示收集用户信息的表单效果，如：登录页、注册页。
-
input 标签可以通过 type 属性值的不同展示不同的效果。
type 属性值
示例
请输入内容：<input type="text">
<br>
请输入密码：<input type="password"> <!--输入的内容会隐藏-->
<br>
单选框：<input type="radio">
<br>
多选框：<input type="checkbox">
<br>
上传文件：<input type="file">
input 按钮系列标签
| 标签名 | type 属性值 | 说明 |
|---|---|---|
| input | submit | 提交按钮，点击之后提交数据给后端服务器 |
| input | reset | 重置按钮，点击之后恢复表单默认值 |
| input | button | 普通按钮，默认无功能，之后配合 js 添加功能 |
PS：如果需要实现以上按钮功能，需要配合 form 标签使用。form 使用方法：用 form 标签把表单标签一起包裹起来即可。
示例：
<form action=""> <!--表单域标签，框定范围，action 后跟提交地址-->
用户名：<input type="text">
<br>
密码：<input type="password">
<br>
<!--按钮-->
<input type="submit" value="免费注册">
<input type="reset">
<input type="button" value="普通按钮，暂无功能">
</form>
15.2 button 按钮标签
button 标签用于在网页中显示用户点击的按钮。
type 属性值同 input
| 标签名 | type 属性值 | 说明 |
|---|---|---|
| input | submit | 提交按钮，点击之后提交数据给后端服务器 |
| input | reset | 重置按钮，点击之后恢复表单默认值 |
| input | button | 普通按钮，默认无功能，之后配合 js 添加功能 |
PS：谷歌浏览器中 button 默认是提交按钮，button 标签是双标签，便于包裹其他内容：文字、图片等。
示例：
<button>我是按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>
15.3 select 下拉菜单标签
场景：在网页中提供多个选择项的下拉菜单表单控件
标签组成：
-
select标签：下拉菜单的整体
-
option标签：下拉菜单的每一项
常见属性：
- selected：下拉菜单的默认选中
示例：
<select>
<option selected>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
15.4 textarea 文本域标签
场景：在网页中提供可输入多行文本的表单控件。
常见属性：
-
cols：规定了文本域内可见宽度
-
rows：规定了文本域内可见行数
注意点：
-
右下角可以拖拽改变大小
-
实际开发时针对于样式效果推荐用 CSS 设置
示例：
<textarea cols="60" rows="30">默认内容</textarea>
15.5 label 标签
场景：常用于绑定内容与表单标签的关系。
使用方法一：
-
使用 label 标签把内容（如：文本）包裹起来
-
在表单标签上添加 id 属性
-
在 label 标签的 for 属性中设置对应的 id 属性值
使用方法二：
-
直接使用 label 标签把内容（如：文本）和表单标签一起包裹起来
-
需要把 label 标签的 for 属性删除即可
示例：
性别：
<input type="radio" name="sex" id=""> <label for="">男</label>
<label><input type="radio" name="sex">女</label>
<!--两种方式-->
16. 语义化标签
16.1 没有语义的布局标签 - div 和 span
-
场景：实际开发网页时会大量频繁的使用到 div 和 span 这两个没语义的布局标签。
-
div 标签：一行只显示一个（独占一行） 。
-
span 标签：一行可以显示多个。
示例：
普通文字
<div>这是 div 标签</div>
<div>这是 div 标签</div>
<span>这是 span 标签</span>
<span>这是 span 标签</span>
16.2 有语义的布局标签（了解）
| 标签 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
PS：以上标签显示特点和 div 一致，但是比 div 多了不同的语义。
示例：
<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>侧边栏</aside>
<section>网页区块</section>
<article>文章</article>
17. 字符实体
场景：在网页中展示特殊符号效果时，需要使用字符实体替代。
常见字符实体：
18. 综合案例
18.1 优秀学生信息表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="400" height="400">
<!-- 表格整体的大标题 -->
<caption><h3>优秀学生信息表格</h3></caption>
<!-- 表格的头部 -->
<thead>
<tr>
<th>年级</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
</thead>
<!-- 表格的主体 -->
<tbody>
<tr>
<!-- 保留 -->
<td rowspan="2">高三</td>
<td>张三</td>
<td>110</td>
<td>三年二班</td>
</tr>
<tr>
<!-- 删除 -->
<!-- <td>高三</td> -->
<td>赵四</td>
<td>120</td>
<td>三年三班</td>
</tr>
</tbody>
<!-- 表格的底部 -->
<tfoot>
<tr>
<td>评语</td>
<!-- 保留 -->
<td colspan="3">你们都很优秀</td>
<!-- 统统删除掉 -->
<!-- <td>你们都很优秀</td> -->
<!-- <td>你们都很优秀</td> -->
</tr>
</tfoot>
</table>
</body>
</html>
18.2 相亲会员注册表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>青春不常在，抓紧谈恋爱</h1>
<hr>
<form>
昵称：
<input type="text" placeholder="请输入昵称">
<br><br>
性别：
<label>
<input type="radio" name="sex" checked>男
</label>
<label>
<input type="radio" name="sex">女
</label>
<br><br>
所在城市：
<select>
<option>上海</option>
<option>北京</option>
<option>广州</option>
<option>深圳</option>
</select>
<br><br>
婚姻状况：
<input type="radio" name="marry" checked>未婚
<input type="radio" name="marry">已婚
<input type="radio" name="marry">保密
<br><br>
喜欢的类型：
<input type="checkbox" checked>可爱
<input type="checkbox" checked>性感
<input type="checkbox">御姐
<input type="checkbox">萝莉
<input type="checkbox">小鲜肉
<input type="checkbox">大叔
<br><br>
个人介绍：<br><br>
<textarea name="" id="" cols="60" rows="10"></textarea>
<h3>我承诺</h3>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
<input type="checkbox">我同意所有条款
<br><br>
<input type="submit" value="免费注册">
<input type="reset">
</form>
</body>
</html>
最后
以上就是羞涩星星最近收集整理的关于HTML5 基础总结1. html 骨架（页面固定结构）2. html 注释3. html 标题标签4. 换行标签5. 水平线标签6. 文本格式化标签7. 图片标签8. 路径9. 音频标签10. 视频标签11. 链接标签12. 段落标签13. 列表14. 表格15. 表单16. 语义化标签17. 字符实体18. 综合案例的全部内容，更多相关HTML5内容请搜索靠谱客的其他文章。
发表评论 取消回复