HTML5 基础总结1. html 骨架（页面固定结构）2. html 注释3. html 标题标签4. 换行标签5. 水平线标签6. 文本格式化标签7. 图片标签8. 路径9. 音频标签10. 视频标签11. 链接标签12. 段落标签13. 列表14. 表格15. 表单16. 语义化标签17. 字符实体18. 综合案例

71 阅读 0 评论 47 点赞

我是靠谱客的博主羞涩星星，最近开发中收集的这篇文章主要介绍HTML5 基础总结1. html 骨架（页面固定结构）2. html 注释3. html 标题标签4. 换行标签5. 水平线标签6. 文本格式化标签7. 图片标签8. 路径9. 音频标签10. 视频标签11. 链接标签12. 段落标签13. 列表14. 表格15. 表单16. 语义化标签17. 字符实体18. 综合案例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

文章目录

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>