【Web前端】HTML与HTML5 知识点梳理总结（自用笔记版）

🌈 个人主页：王子玉博客

🔆 收录专栏：HTML&CSS

❤️ 分享网站：《Python自学网》👉👉基础入门到逐步深入 | 适合新手入门到精通 | Web开发、爬虫、自动化运维、自动化测试、GUI图形界面化

🙏 如果觉得博主文章对你有所帮助的话，还望大家多多支持呀！关注 | 点赞 | 收藏 | 评论

3.10 媒体标签 video audio（HTML5新增）

网页页面常用标签有：标题标签h1~h4、段落标签p、超链接标签a、图片标签img、列表标签ul / li、表单标签from相关、无语义布局标签div/span、H5新增语义布局标签header、article、nav、footer、main、aside、section。用的最多就是div标签，页面的样式统统用css编写，尽管浏览器给一些默认样式不喜欢也照样修改。

一、HTML文档结构

<!DOCTYPE html>
<!-- 文档声明，告诉浏览器当前使用的HTML标准是HTML5,一定在第一行 -->
<html lang="en">
  <!-- 
    <html></html>：根标签，告诉浏览器自己是HTML文档，所有的标签都写在它的里面
    lang="en"：lang属性，表示该元素使用的文字是哪一种语言，en英文，zh-CN中文
  -->
  <head>
    <!-- <head></head>:文档头，在它里面的内容一般设置网页相关信息，不会被渲染在网页页面上-->
    <meta charset="UTF-8" />
    <!-- 
      <meta/>：元属性描述，文档的原数据(附加信息),单标签
      charset="UTF-8"：字符编码，制定网页内容编码为UTF-8
    -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 
      http-equiv="X-UA-Compatible" ：文档兼容模式的定义
      Edge模式告诉IE以最高级 模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。 
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 
      手机端适配，不写手机端页面不用
      viewport：用于指定用户是否可以缩放Web页面，并对相关的选项进行设定
      width或height:指定视区的逻辑宽度和高度，取值可以是以像素单位的数字，也可以是特殊的标记符号（device-width：视区宽度应为设备的屏幕宽度，device-width同理）
      initial-scale：设置Web页面的初始缩放比例，值设为1.0则显示未经缩放的Web页面
     -->
    <title>Document</title>
    <!-- <title></title>:网页标题-->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="index.js"></script>
    <!-- 页面图标、加载外部的css/js文件......-->
  </head>
  <body>
  <!-- <body></body>:写网页的主体，里面放内容标签，如a、p、img、h1~h6等  -->
  </body>
</html>

简单文档结构：如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body></body>
</html>

保存以上，文件格式为.html就是一个html文件了。

二、注释、标签、元素、属性

注释：快捷键 ctrl+/ ,注释的内容不会被浏览器渲染在页面上，给开发者自己看的

1.1标签

标签概念：由尖括号“< >”包围的关键词，一般是成对出现的，标签对中第一个标签是开始标签如<body>，第二个标签是结束标签如</body>

标签格式：

双标签：<开始标签> </结束标签>

单（空）标签：<标签名/> (没有结束标签)

标签内容：

双标签，其内容在两个标签中间

<h1>标题</h1>

单标签，则在标签属性中赋值

<input type="text" value="标签内容"/>

1.2元素

HTML 元素：指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

元素的内容：是开始标签与结束标签之间的内容

某些 HTML 元素具有空内容如：</br>

元素格式：<开始标签属性名=”属性值”>元素内容</结束标签>

元素 = 开始标签 + 结束标签 + 元素内容 + 属性

1.3标签属性

键值对的格式，属性名不用加双引号，属性值必须加双引号

属性分为局部属性和全局属性：

局部属性：某些标签特有的属性，如（a标签的href）

全局属性：所有元素通用，如：( title lang )

 <a href="#" title="超链接说明">超链接</a>

 <p title="段落">段落</p>

总结：

一个标签可以拥有多个属性，必须写在开始标签中，位于标签名后面；

属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开；

任何标签都有默认属性，省略该属性则取默认值；

三、内容标签

学习标签就是学习标签的语义，而不是样式，一些标签浏览器自带的样式都可以通过css自己修改

3.1标题系列标签：h1~h6

语义：标题，描述文本的重要程度，表示该文本比较重要，重要性从1到6递减

语法格式：双标签

<!-- vscode编辑器书写快捷方式：h1*6{我是标题$}，按住tab键一次生成6个标签和内容-->
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>

3.2段落标签 p

语义：表示描述的内容是一个段落

语法格式：双标签

<!--  lorem，乱数假文，没有任何实际含义的文字
用法：lorem  + tab键   随机生成一些英文文字   lerom100 + tab键 ：随机生成100个文字-->
<p>段落内容</p>

3.3 实体字符

作用：实体字符通常用于在页面中显示一些特殊符号

常用实体字符：

大于号 >	`>`
小于号 <	`<`
空格符号	` `
和号 &	`&`
引号 “	`"`
元￥	`¥`
注册商标 ®	`®`

3.4 图片标签 img

语义：在对应位置, 加载指定路径的图片。图片格式有：.jpg、.png、.gif ……

语法格式：单标签

<img src="图片路径" alt="路径不存在提示信息" title=“图片”>

属性：

src：文件的路径

alt：当图片加载不出来时的替代文本

title：鼠标悬停时显示的内容

height：图片的高度。单位可为Px

width：图片的宽度度。单位可为Px 或 %

3.5 相对路径和绝对路径

路径分类：相对路径、绝对路径

1）相对路径：（站内资源：当前网站的资源）

1.1书写格式：

1.2举例：

2.1、图像文件和HTML文件位于同一文件夹

只需输入图像文件的名称即可，如

<img src="img.png">

2.2、图像文件位于HTML文件的下一级文件夹

输入文件夹名和图像文件名，之间用“/”隔开，如

<img src="images/img.png">

2.3、图像文件位于HTML文件的上一级文件夹

在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如

<img src="../img.png">

<img src="../../img.png">

2）绝对路径：（站外资源：非当前网站的资源）

2.1 本地绝对路径

c:\images/image.jpg d:\images/image.jpg

2.2 网络绝对路径：url地址

协议名://主机名：端口号/路径 schema://host:port/path 如：https://www.baidu.com/img/flexible/logo/pc/result.png

3.6 超链接标签 a

语义：定义超链接，点击后跳转到另一个链接

语法格式：双标签

<a href="超链接URL">超链接内容</a>

常用属性： href target

1）href：规定链接指向的页面的 URL地址

普通链接（跳转地址:站内站外）

锚链接定位（跳转到同一个页面内的不同位置）

<a href="#id标记名">链接文本</a>
<p id="标记名">跳转的目标位置</p> <!-- 锚链接定位-->
<a href="#"></a> <!-- 回到顶部、空链接-->

功能链接（点击后，执行某个功能）

<!-- 1、执行js代码 ：   语法：javascript:js代码; -->
<a href="javascript:alert('你好啊');">执行js代码弹出你好啊</a>  <!-- 执行js代码-->
<a href="javascript:;">执行js代码弹出你好啊</a>   <!-- javascript:;  一个空链接-->

<!--  2、发送邮件 ：     语法：mailto:     邮箱地址  -->
<a href="mailto:123456789@qq.com">点击给我发送邮件</a>
<!--  要求：用户计算机上安装有邮件发送软件 exchange -->

<!--  3、拨打电话：      语法; tel:   电话号码  -->
<a href="tel:12345678911">点击给谁拨打电话</a>
<!--   要求：用户计算机上安装有拨号软件，或使用的是移动端访问  -->

2）target ：用于指定链接页面的打开方式

2个属性值：

_self 原窗口（默认值，如果不写target 属性就默认这个值）

_blank 新窗口

注意：不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接

3.7 列表标签 ul ol dl

语义：描述一组相关的数据，数据的关联性 (有序或无序)

分类：无序列表、有序列表、自定义列表

1）无序列表：无序列表的各个列表项之间没有顺序级别之分，是并列的（无先后之分）

<!-- ul（定义无序列表）  li（定义列表项目） -->
<ul>    
    <li>列表的项目1</li>
    <li>列表的项目2</li>
    <li>列表的项目3</li>
</ul>

2）有序列表：有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义（有先后之分）

<!-- ol（定义有序列表）  li（定义有序列表项目） -->
<ol>    
    <li>列表的项目1</li>
    <li>列表的项目2</li>
    <li>列表的项目3</li>
</ol>

3）自定义列表：列表的同时,进行简单的分组

<!-- dl（定义 自定义列表）   dt（定义 列表项目）   dd（定义 项目内容）  -->
<dl>
  <dt>名词</dt>
  <dd>名词解释1</dd>
  <dd>名词解释2</dd>
  ...
  <dt>名词</dt>
  <dd>名词解释1</dd>
  <dd>名词解释2</dd>
  ...
</dl>

注意：

ul 和 li 成对出现，ul中只能嵌套l，直接在ul标签中输入其他标签或者文字的做法是不规范的写法，虽然显示上没有错误
li里面可以包括其他元素
多级列表可以嵌套（列表里嵌套列表）

3.8 表格标签table（了解就行）

语义：定义一个类似于excel的表格

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

先指定行, 在行内部指定列

完整复杂表格：(带有 thead、tbody 以及 tfoot 元素的 HTML 表格)

<caption>表格标题</caption> 
<!-- 表格标题:caption   显示在表格的正上方、居中、位置, 紧跟在table标签里面第一个 -->  

<thead>表格表头，组合表格的表头内容</thead>  
<!-- 表格的表头  thead： 应该与 tbody 和 tfoot 元素结合起来使用,用于对 HTML 表格中的内容进行分组 -->

<tbody>表格内容主体</tbody>  
<!-- 表格的内容主体 tbody：存放真正的数据 -->

 <tfoot>表格页脚</tfoot>
<!-- 表格的页脚 tfoot：如果放在tbody前面, 是为了更快的加载，渲染出来会自动放在表格身体后面 -->

<!-- table  ：定义一个表格，所有表格相关元素都写在table标签中 -->
<!-- border属性 ：表框宽度   （一定要加不然很丑） -->
<!-- tr:  行 -->
<!-- th:  表头 ，效果文本会自动加粗居中 （ 一个表头也是一个单元格，但是我们使用th使用的是语义，表格第一行用的是表格，解释每列的含义）-->
<!-- td : 单元格   一个td代表一个单元格，也就是一列-->
<!-- 表格宽度：在不设置的情况下由单元格内容决定  -->

<table border="1">
    <caption>表格标题</caption> 
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>表尾1</td>
            <td>表尾2</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>值1</td>
            <td>值2</td>
            <td>值3</td>
        </tr>
        <tr>
            <td>值1</td>
            <td>值2</td>
            <td>值3</td>
        </tr>
        <tr>
            <td>值1</td>
            <td>值2</td>
            <td>值3</td>
        </tr>
    </tbody>  
</table>

注意：

表格的格式, 如果是复杂版的, 一定要写完整

单元格内, 可以存放其他元素（如：input）

样式都用css写，border-collapse:collapse （合并边框）写在table标签上

3.9 表单标签 form

概念：表单用于搜集不同类型的用户输入，如用户注册、用户登录等

书写方式：

<form action="提交服务端的url地址" method="提交方式（get/post）" name="表单名称" target=“_blank”>
    各种表单控件和提示信息
</form>

get：表单数据在页面地址栏中是可见的

post：安全性更好，在页面地址栏中被提交的数据是不可见的
target属性值：_blank（新窗口打开） _self（默认，当前窗口打开） _parent（显示在父框架中） _top(显示在窗口的整个 body 中) framename(显示在命名的 iframe )

1）表单控件 input系列

概念：单标签，通过type属性来指定不同的控件类型

快捷输入 : input:type值 —–> 按下tab键

1/常用属性

1.1收集信息类

text：普通文本框

password：密码框（输入是密文效果）

radio：单选按钮（name值一样，设置value值区分是哪个按钮）

checkbox：复选框（name值一样，设置value值区分是哪个按钮）

file：文件（选择一些文件提交）

1.2 按钮类

reset：重置（把所有输入的或选择的控件内容一键清空）
submit：提交（把收集的信息提交给后台服务器）
button：按钮（普通按钮，关联js代可自定义行为）

2/必填信息

name: 表单提交时，有name的字段才会背提交，name名就是参数名

value：在单选按钮或复选框上，value属性是必填属性，其他控件类型的控件不是必填的

input控件中默认的文本值（输入的文本框中文本内容就是value值）

value以此来区分提交的是什么值，提交的value是给后台看的

<!--   收集信息类   -->
<form action="" method="get">
    文本框：<input type="text" name="text"><br/>        
    密码框：<input type="password" name="paw"><br/>
    单选按钮：
    <input type="radio" name="sex" value="nan">男
    <input type="radio" name="sex" value="nv">女
    <br/>
    多选按钮：
    <input type="checkbox" name="move" value="zzx">蜘蛛侠
    <input type="checkbox" name="move" value="gtx">钢铁侠
    <input type="checkbox" name="move" value="ljr">绿巨人
    <input type="checkbox" name="move" value="fczlm">复仇者联盟
    <br/>      
    文件：<input type="file" name="file">            
</form> 

<!--   按钮类  reset  submit   button-->
<form action="" method="get">
    用户名：<input id="username" type="text" name="username" placeholder="请输入用户名"><br/> 
    
    重置：<input type="reset" value="一键清空"><br/> 
    提交：<input type="submit" value="保存提交">
    普通按钮：<input type="button" value="点击一键清空" onclick="clearAll()"><br/> 
</form> 

<!--  结合普通按钮js代码  onclick:点击事件  clearAll()函数  ----》  点击按钮执行函数，函数最终是清空有id名为username的文本框内容 -->
<script>
    function clearAll(){
        var name = document.getElementById('username');  //获取id为名username的元素
        name.value = '';
    }
</script>

3/ 部分可选属性

maxlength：控件允许输入的最多字符

disabled：禁用此元素，一旦设置后此字段不会被提交，布尔属性，值为disabled

checked：定义选择控件默认被选中的项，布尔属性，值为checked

accept：上传文件时类型筛选

autofocus：当页面加载时自动获得焦点，布尔属性，值为autofocus

placeholder：文本框里显示的提示信息
readonly：只读，布尔属性，值为readonly
注意：但凡是布尔属性，属性值和属性名是一样的，写一个就行

<!--type属性输入字段、以及可选属性和新增属性演示说明-->
文本框：<input type="text" name="text" value="默认的文本框内容" autofocus>
密码框：<input type="password" name="pwd">
性别：
<label>
    <input type="radio" name="sex" value="nan">男
</label>
<label>
    <input type="radio" name="sex" value="nv">女
</label>
喜欢的漫威电影：
<input type="checkbox" name="move" value="zzx">蜘蛛侠
<input type="checkbox" name="move" value="gtx" checked>钢铁侠
<input type="checkbox" name="move" value="ljr">绿巨人
<input type="checkbox" name="move" value="fczlm">复仇者联盟
文件：
<input type="file" name="file" accept="image/jpeg,image/png">
<input type="submit" value="提交测试">

4/ label标签

概念：用于绑定一个表单元素, 当点击label标签内容的时候, 被绑定的表单元素就会获得输入焦点

for 属性规定 label 与哪个表单元素绑定。

<label for=”username”>用户名：</label>

id ：与label标签绑定 id = for属性的属性值

方式一：
<label for="username1">用户名：</label>
<input type="text" id="username1" name="username2"  value="username2">

方式二：
<label for="username2">用户名：<input type="text" id="username2" name="username2"  value="username2"></label>

5/注意：

表单元素必须要有name属性，因为要用name属性把数据传到服务器

其实，表单中提交的是value值，而value值和文本值是对应的

提交到后台的书写方式是 name=value&name=value&name=value

2）表单控件textarea（多行文本输入框）

定义：定义多行输入字段（文本域）（如果需要输入大量的信息，就需要用到，如文章简介之类的）

书写格式：双标签

<textarea>
  大量文本内容
</textarea>

属性：

cols：文本区内的可见宽度

rows：文本区内的可见行数

注意：最好用css的width和height来规定文本框的宽和高

很多属性都适用，如readonly 、disabled、autofocus、placeholder……….

右下角自由拖动输入框大小：

默认可随意拖动，利用css可设置不能拖动——> resize ：none

3）表单控件select+option（下拉菜单）

定义：下拉框选项（地址选择、分类选择等场景）

书写格式：select双标签、至少包含一对option标签

select可包含的标签：

option标签：可用选项

optgroup标签：选项组（不加选项组也行）

<select>
    <optgroup> 
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
</select>

属性：

1、select标签：

name：下拉列表的名称

multiple：是否允许多选 (按住ctrl或shift多选)

size：下拉列表可见的条目（数字值）

2、option标签

value：默认的文本值

selected：默认选中项，布尔属性

3、optgroup 标签

    label：分组项名字

<!--提交的是下拉列表的名字    name的值=option的value的值    address=gl  -->
<form action="" methed="get" >
    <label for="dizhi">地址：</label>
    <select name="address" id="dizhi">
        <optgroup label="南京市">
            <option value="gl">鼓楼区</option>
            <option value="pk">浦口区</option>
            <option value="yht">雨花台区</option>
        </optgroup>
        <optgroup label="合肥市">
            <option value="yh">瑶海区</option>
            <option value="bh">包河区</option>
            <option value="ly">庐阳区</option>
        </optgroup>
    </select>
    <input type="submit">
</form>

4）数据列表 datalist

子元素：option ——》有value属性

注意：name属性一定要有

该元素本身不会显示到页面，与 input 元素配合使用，来定义 input 可能的值 ——-》利用list 和 id 来关联
input框列表里， option标签里的value值和文本都会显示出来

<form action="" methed="get" >
    <input type="text" list="url_list" name="link">
    <datalist id="url_list">
        <option value="百度">https://www.baidu.com</option>
        <option value="网易">https://www.163.com</option>
    </datalist>
    <input type="submit">
</form>

5）button标签

定义：元素定义可点击的按钮

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

6）其他input系列：（HTML5新增）

type属性：一般都有兼容性问题

url： URL类型
date：日期类型
time：时间类型
month：月类型
week：周类型
number：数字类型
tel：手机号码
search：搜索框
color：会显示一个取色板，可以选择颜色
email：邮件类型

3.10 媒体标签 video audio（HTML5新增）

1）video（视频）标签：

src ：要播放的视频的URL

controls ：（控件） —— 如果出现该属性，则向用户显示控件，比如播放按钮。布尔属性 controls

autoplay ：（自动播放） —— 如果出现该属性，则视频在就绪后马上播放。布尔属性 autoplay

loop ：（循环播放）—— 如果出现该属性，则当媒介文件完成播放后再次开始播放。布尔属性 loop

muted ：（静音）——规定视频的音频输出应该被静音。布尔属性 muted

preload ：（预加载） —— 如果出现该属性，则视频在页面加载时进行加载，并预备播放。布尔属性 preload (如果使用 “autoplay”，则忽略该属性)
poster ：（视频封面）—— URL规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
width ：设置视频播放器的宽度

height：设置视频播放器的高度。

<video src="视频地址" controls></video>

解决视频格式适配问题

source标签：如果存在兼容性问题，可以将多个视频格式的数据源放到source标签中

<video width="320" height="240" controls="controls"  src="">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.mvbm" type="video/mvbm">
    <p>你的浏览器不支持video标签 </p>
</video>

注意：不同的浏览器支持的音视频格式可能不一致

2）audio（音频）标签

和视频几乎一样，只是没有宽高、视频封面

<audio src="音频地址" controls loop></audio>

四、语义化容器布局标签(html5新增)

新特性都有兼容性问题，基本都是IE9以上版本才支持，如果不考虑兼容性问题，才可以使用这些新特性

header：通常用于表示网页页头，也可以用于表示文章的头部

footer：通常用于表示网页页脚，也可以用于表示文章的尾部

页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

在一个网页页面中可以使用多个 <footer>元素

main：代表页面的主要部分

main元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。

在一个文档中，不能出现一个以上的 <main>元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header>或 <nav>。

article：<article>标签中的内容是独立的、完整的、摘自外部的内容。通常用于表示整篇文章

可以是：博客文章、新闻文章、论坛帖子、网友评论等独立的内容

标签中的内容通常有它自己的标题，甚至有时候还有自己的脚注。

可以嵌套使用，但是一般需要外部内容和内部内容有关系。比如：一篇博客文章，它的评论就可以使用嵌套的形式，将评论内容嵌套在整体内容中。

section: 定义文档某个区域的标签。比如章节、页眉、页脚或文档中的其他部分

aside：<aside>元素的内容应该与附近的内容相关，用于添加与主要内容相关的内容。通常用于表示侧边栏

nav：定义导航链接的部分，通常，向其中添加一个ul或ol列表

五、布局常用无语义标签 div span

1）div

无实际语义，代表一个块区域，内部用于放置其他标签。通用容器元素，什么标签都可以放在里面，包括它本身

结合CSS，对网页结构进行划分布局

2）span

无实际语义，一般是结合CSS，控制同一行内的某一小段样式

六、元素包含关系

以前：块级元素独占一行，行级元素不换行，块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外

现在：元素的包含关系由元素的内容类别决定

查找元素包含关系：

百度： h1 mdn，查看允许内容（去mdn查看）

总结：

容器元素中可以包含任何元素

a元素几乎可以包含任何元素

某些元素有固定的子元素（ul>li,ol>li,dl>dt+dd………)

标题元素和段落元素不能相互嵌套，并且不能包含容器元素

七、常见的文本格式化标签

<b>粗体</b>            （bold）
<strong>粗体</strong>   语气更强的强调内容
粗体，推荐使用strong

<i>斜体</i>    
<em>斜体</em>           强调的内容
斜体，推荐使用em

<s>加删除线的文本</s>      加删除线的文本  
<del>已被删除的文本</del>  已被删除的文本
加删除线，推荐使用del

<u>下划线</u>   
<ins>下划线</ins>
下划线，推荐使用ins

</sup>上标</sup> 上标
<sub>下标</sub> 下标

<small>小号字</small> 小号字