HTML入门到进阶【2023年7月笔记版】

一. 背景

刚开始学习HTML时的复习笔记，就当做个人成长的一份记录，有兴趣的盆友也可以参考下~

二 .前端内容简介

2.1 前端学习路线

基础阶段：学习HTML、CSS和JavaScript的基本语法、结构和功能，能够使用它们制作静态网页和简单的交互效果。
进阶阶段：学习HTML5、CSS3和ES6等新特性，以及jQuery、Ajax等常用的库和技术，能够使用它们实现更复杂的网页功能和效果。
工具阶段：学习Git、SVN等版本控制工具，以及Webpack、Gulp等项目构建工具，能够使用它们进行代码管理和优化。
框架阶段：学习Vue.js、React、AngularJS等主流的前端框架，以及Bootstrap等响应式框架，能够使用它们快速开发高质量的网页应用。
拓展阶段：学习移动Web开发、Node.js服务端开发、TypeScript等类型语言、WebAssembly等高性能技术，能够拓展前端开发的范围和水平。

以上全部掌握要花太多时间，可以暂时跳过一些不大常用的。建议路线：HTML+CSS+JavaScript+Vue2/Vue3+Element

2.2 相关技术

HTML，全称“Hyper Text Markup Language（超文本标记语言）”，是一门描述性语言。网页是用HTML语言制作的。

CSS，全称“（层叠样式表）”。

JavaScript，是一门脚本语言。

Ajax，即“Asynchronous Javascript And XML（异步JavaScript和XML）”，是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个页面。Ajax是前后端交互的技术，主要实现在前端。

SEO，即“Search Engine Optimization（搜索引擎优化）”。SEO优化是专门利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。

后端技术，ASP.NET（或PHP）、SQL Server等；

Web标准三个构成：让不同的浏览器按照相同的标准显示结果，展示效果统一

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式(如:颜色、大小等
行为	JavaScript	网页模型的定义与页面交互

2.3 HTML、XHTML和HTML5区别

（一）HTML 和 XHTML

HTML,全称HyperText Mark-up Language (超文本标记语言)，是构成网页文档的主要语言。常说的HTML指的是HTML 4.01。

XHTML,全称 Extensible HyperText Mark-up Language (扩展的超文本标记语言), 它是XML风格的HTML 4.01,可称之为更严格、更纯净的HTML 4.01。HTML语法书写比较松散，利于开发者编写。但是对于机器，如电脑、手机等来说，语法越松散，处理起来越困难。因此为了让机器更好地处理HTML,在HTML基础上引入了 XHTMLXHTML相对于HTML来说，在语法上更加严格。

（二）XHTML和HTML主要区别如下:

XHTML标签必须闭合。

在XHTML中，所有标签必须闭合，例如“<p></p>" “<div></div>”等。此外，空标签也需要闭合，例如<br>要写成<br/>。

错误写法：<p>欢迎来到绿叶学习网 ;正确写法：<p>欢迎来到绿叶学习网</p>

XHTML标签以及属性必须小写。

在XHTML中，所有标签以及标签属性必须小写，不能大小写混合，也不能全部都是大写。不过标签的属性值可以大写。

错误写法：<Body><DIV></DlV></Body>; 正确写法：<body><div></div></body>

XHTML标签属性必须用引号

在XHTML中，标签属性值必须用引号括起来，单引号、双引号都可以。

错误写法：<input id=txt type=text/>; 正确写法：<input id="txt" type="text"/>

XHTML标签用id属性代替name属性

在XHTML中，除了表单元素之外的所有元素，都应该用id而不是name。

错误写法：<div name="wrapper"></div>; 正确写法：<div id="wrapper"></div>

（三）HTML5特点

HTML指的是HTML 4.01, XHTML是HTML的过渡版本，XHTML是XML风格的HTML 4.01。而HTML 5指的是下一代的HTML,也就是HTML 4.01的升级版。

不过HTML 5已经不再是单纯意义上的标签了，它已经远远超越了标签的范畴。HTML 5 除了新增部分标签之外，还增加了一组技术，包括canvas、SVG、WebSocket.本地存储等。这些新增的技术都是使用JavaScript来操作。也就是说，HTML 5使得HTML从一门“标记语言” 转变为一门“编程语言”。

单纯从新增的标签上来看，HTML 5有以下几个特点。

文档类型说明

基于HTML 5设计准则中的“化繁为简”原则，页面的文档类型<!DOCTYPE>被极大地简化了。

XHTML文档声明如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtdn>

HTML5文档声明如下：

<!DOCTYPE html>

标签不再区分大小写

<div>绿叶学习网</DIV>

上面这种写法也是完全符合HTML5规范的。但是在实际开发中，建议所有标签以及属性都采用小写方式。

允许属性值不加引号

<div id=wrapper style=color: red> 绿叶学习网 </div>

上面这种写法也是完全符合HTML5规范的。但是在实际开发中，建议标签所有属性值都加引号，单引号或双引号都可以。

允许部分属性的属性值省略

三、HTML骨架结构

html：整个网页

head：网页头部，定义一些特殊内容，这些内容是不可见的，用来存放给浏览器看的信息

body：网页主体，用来存放给用户看的信息，例如图片、文字

表1 <head>内部标签

<head>内部标签	说明
<title>	定义网页的标题
<meta>	定义网页的基本信息（供搜索引擎）
<style>	定义CSS样式
<link>	链接外部CSS文件或脚本文件
<script>	定义脚本语言
<base>	定义页面所有链接的基础定位（用得很少）

HTML 文件开头的 Doctype 的作用：

- 用来声明文档类型，告知浏览器应该以何种规范来解析

- 这叫 W3C 标准，如果不加浏览器会用自己的规范去解析文档，可能在不同浏览器会造成不同的效果

四、标签分类

4.1单双标签

单标签：没有结束符号，不能插入其他标签或文字，只能定义自身的属性。如<br/>、<hr/>

双标签：有开始符号和结束符号

4.2块元素、行内元素和行内快元素

块标签：

独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
块元素内部可容纳其他块元素或行元素；
常见块元素有：h1~h6、p、hr、div等。

行内标签：

可以与其他行内元素位于同一行；
行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；
行内标签就是在页面内只占据刚好能包裹自己内容的空间，设置宽高属性值不生效，宽高由内容撑开；
对margin仅设置左右有效，上下无效； padding上下左右有效；不会自动换行

行内块标签：

标签类型转换：

转换为行内标签：display:inline;

转换为块级标签：display:block

4.3标签关系

父子关系（嵌套关系）：子级标签换行且缩进（Tab键）

兄弟关系（并列关系）：兄弟标签换行要对齐

五、段落与文字标签

表1 段落与文字标签
标签	语义	说明
<h1>~<h6>	header	标题（文字加粗、字号逐渐减小、独占一行）；h1 标签仅用一次，用来放新闻标题或网页的logo
<p>	paragraph	段落（独占一行、段落之间存在间隙）
<br>	break	换行
<hr>	horizontal rule	水平线
<div>	division	分割（块元素）
<span>	span	区域（行内元素）

六、文本格式化标签

七、多媒体标签

7.1 img 图像自闭合标签

表1 img标签常用属性

属性	说明
src	图像的文件地址
alt	图片显示不出来时的提示文字
title	鼠标移到图片上的提示文字

7.2 audio 音频标签

7.3 video 视频标签

7.4 a 超链接标签

<a href="https://www.baidu.com">跳转到百度</a>

href 属性值是跳转地址，是超链接的必须属性。 href 属性值为 #，表示空链接，页面不会跳转，在当前页面刷新一次。

超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现新窗口打开页面。点击跳转到其他页面。

八、列表、表格和表单

8.1 列表

（1） ul 无序列表

作用：布局排列整齐的不需要规定顺序的区域。

标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。

（2）ol 有序列表

作用：布局排列整齐的需要规定顺序的区域。

标签：ol 嵌套 li，ol 是有序列表，li 是列表条目

（3） dl 自定义列表

标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。

8.2 table表格

(1) 表格语义化

标签：table 嵌套 tr，tr 嵌套 td / th。

表格默认没有边框线，使用 border 属性可以为表格添加边框线。

表1 表格结构标签

标签	语义	说明
caption	caption	caption
thead	table head	表格头部内容
tbody	table body	表身主要内容区域
tfoot	table foot	表脚汇总信息区域

表2 表格基本标签

标签	语义	说明
table	table（表格）	表格
tr	table row（表格行）	行
th	table header	表头单元格
td	table data cell（表格单元格）	内容单元格

(2)合并单元格的步骤：

1. 明确合并的目标

2. 保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）

跨行合并，保留最上单元格，添加属性 rowspan

跨列合并，保留最左单元格，添加属性 colspan

3. 删除其他单元格

8.3 表单

作用：收集用户信息。

使用场景：登录页面注册页面搜索区域

(1) <textarea>文本域

作用：多行输入文本的表单控件

<textarea rows="行数" cols="列数">默认提示文字</textarea>

(2) <select>下拉菜单

标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。 selected默认选中

(3) <button>按钮

提示：按钮需配合 form 标签（表单区域）才能实现对应的功能。

8.4 input 标签

<input type="..." > ： type 属性值不同，则功能不同。

上传文件

默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能

单选框

<input type="radio" name="gender" checked> 男

<input type="radio" name="gender"> 女

多选框

<input type="checkbox" checked>敲前端代码

多选框也叫复选框，默认选中：checked。

8.5 label 标签

label 是有语义标签。label 只适用于表单中，用于显示在输入控件旁边的说明性文字。

(1)两个作用

作用1：网页中，某个标签的说明文本。

作用2：用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围。

tips：支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等

写法一 :label 标签只包裹内容，不包裹表单控件；设置 label 标签的 for 属性值和表单控件 id 属性值相同

写法二：使用 label 标签包裹文字和表单控件，不需要属性

九、HTML5

9.1 HTML5的定义和概念

HTML5 定义了 HTML 标准的最新版本，第五次重大修改，号称下一代的 HTML。

说法一，是一个新版本的 HTML 语言，定义了新的标签、特性和属性

说法二，拥有一个强大的技术集，包括HTML5 、CSS3 、javascript, 这也是广义上的 HTML5

9.2 HTML5 拓展内容

语义化标签、本地存储、兼容特性、2D/3D、动画、过渡、CSS3 特性、性能与集成

9.3 HTML5 新增标签

（1）语义化概念

“语义化”: 根据内容的结构化 (内容语义化), 选择合适的标签(代码语义化)便于开发者阅读, 和写出更优雅的代码的同时, 让爬虫和浏览器很好地解析。

（2）语义化的作用

对 '搜索引擎' 友好, 有良好的结构和语义的网页内容, 更容易被搜索引擎抓取。
有利于 'SEO': 和搜索引擎建立良好沟通, 有助于爬虫抓取更多的有效信息。爬虫依赖于标签来确定, 上下文和各个关键字的权重。
方便其他设备解析 (如屏幕阅读器, 盲人阅读器, 移动设备) 以语义化的方式来渲染网页。
便于团队开发和维护, 语义化更具可读性, 遵循 W3C 标准的团队都遵循这个标准, 可以减少差异化。
为了在没有 CSS 的情况下, 页面也能呈现出很好地内容结构; 代码结构:为了裸奔时好看。
用户体验: 例如 title, alt 用于解释名词或解释图片信息的标签, 尽量填写有含义的词语, label 标签的活用。

（3）如何进行HTML语义化

尽可能少的使用无语义的标签 div / span 。
在语义不明显时, 既可以使用 div 或者 p 时, 尽量用 p, 因为 p 在默认情况下有上下间距, 对兼容特殊终端有利。
不要使用纯样式标签, 如: b / font / u 等, 改用 css 设置。
需要强调的文本, 可以包含在 strong 或者 em 标签中(浏览器预设样式, 能用 CSS 指定就不用他们), strong 默认样式是加粗 (不要用 b), em 是斜体(不用 i) 。
使用表格时, 标题要用 caption, 表头用 thead, 主体部分用 tbody 包围, 尾部用 tfoot 包围。表头和一般单元格要区分开, 表头用 th, 单元格用 td 。
表单域要用 fieldset 标签包起来, 并用 legend 标签说明表单的用途。
每个 input 标签对应的说明文本都需要使用 label 标签包裹, 并且通过为 input 设置 id 属性, 在 lable 标签中设置 for=someld 来让说明文本和相对应的 input 关联起来。

（4）新增语义化标签

（6）使用语义化标签的注意

语义化标签主要针对搜索引擎
新标签可以使用一次或者多次
在 IE9 浏览器中，需要把语义化标签都转换为块级元素
语义化标签，在移动端支持比较友好