HTML基础

根据W3C标准，一个网页主要由三部分组成：结构、表现还有行为。

W3C标准
├── 结构
│ └── HTML
├── 表现
│ └── CSS
└── 行为
└── JavaScript

结构: HTML用于描述页面的结构
表现: CSS用于控制页面中元素的样式
行为: JavaScript用于响应用户操作

H5文档声明

<!doctype html>

h5的文档声明，声明当前的网页是按照HTML5标准编写的
编写网页时一定要将h5的文档声明写在网页的最上边
如果不写文档声明，则会导致有些浏览器会进入一个怪异模式。进入怪异模式以后，浏览器解析页面会导致页面无法正常显示

常用标签

html & head & body & 注释

html

<!-- html根标签，一个页面中只有且只有一个根标签，网页中的所有内容都应该写在html根标签中 -->
<html>
  <!-- head标签，该标签中的内容，不会在网页中直接显示，它用来帮助浏览器解析页面的 -->
  <head>
    <!-- title网页的标题标签，默认会显示在浏览器的标题栏中；
    搜索引擎在检索页面时，会首先检索title标签中的内容，会影响到网页在搜索引擎中的排名 -->
    <title>网页的标题</title>
  </head>
  <!-- body标签用来设置网页的主体内容，网页中所有可见的内容，都应该在body中编写 -->
  <body>
    <!-- 在这个结构中，可以来编写HTML的注释；
    注释中的内容，不会在页面中显示；但是可以在源码中查看
    我们可以通过编写注释来对代码进行描述，从而帮助其他的开发人员工作
    一定要养成良好的编写注释的习惯，但是注释一定要简单明了 -->
    <h1>这是我的第一个网页</h1>
  </body>
</html>

标签的属性

可以通过属性来设置标签如何处理标签中的内容
可以在开始标签中添加属性
属性需要写在开始标签中，实际上就是一个名值对的结构
属性名 = “属性值”，一个标签中可以同时设置多个属性，属性之间需要使用空格隔开

h & p & br & hr

标题

在 HTML 中，一共有六级标题标签：h1 ～ h6
在显示效果上，h1 最大，h6 最小。
使用 HTML 标签时，关心的是标签的语义，我们使用的标签都是语义化标签。
6 级标题中，h1 的重要性最高，表示一个网页中的主要内容，h2 ～ h6 重要性依次降低。
对于搜索引擎来说，h1 的重要性仅次于 title。搜索引擎检索 title 时，会立即查看 h1 中的内容。
h1 标签非常重要，它会影响到页面在搜索引擎中的排名，页面只能写一个 h1。

一般页面中标题标签只使用 h1、h2、h3，h3 以后的基本不使用。

html

<h1>这是一个h1标题</h1>
<h2>这是一个h2标题</h2>
<h3>这是一个h3标题</h3>
<h4>这是一个h4标题</h4>
<h5>这是一个h5标题</h5>
<h6>这是一个h6标题</h6>

p标签、br标签、hr标签

段落标签，段落标签用于表示内容中的一个自然段，使用p标签来表示一个段落
p标签中的文字，默认会独占一行，并且段与段之间会有一个间距
在HTML中，字符之间写再多的空格，浏览器也会当成一个空格解析。换行也会当成一个空格解析。
在页面中可以使用br标签来表示一个换行，br标签是一个自结束标签
hr 标签也是一个自结束标签，可以在页面中生成一条水平线。

html

<p>
  锄禾日当午，<br /><hr />
  汗滴禾下土，<br /><hr />
  谁知盘中餐，<br /><hr />
  粒粒皆辛苦。<br /><hr />
</p>

img

使用 img 标签来向网页中引入一个外部图片。
img 标签也是一个自结束标签。

属性

src：设置一个外部图片的路径。
alt：可以用来设置在图片不能显示时，对图片的描述。
搜索引擎可以通过 alt 属性来识别不同的图片。
如果不写 alt 属性，则搜索引擎不会对 img 中的图片进行收录。
width：可以用来修改图片的宽度，一般使用 px 作为单位。
height：可以用来修改图片的高度，一般使用 px 作为单位。
宽高只设置一个，另一个也会同时等比例调整大小。同时指定，则按照指定值来设置
src 后面必须加上图片的格式（如 .jpg, .png 等）。

src属性配置的是图片的路径，目前我们所要使用的路径全都是相对路径。

相对路径

相对路径指相对于当前资源所在目录的位置。

html

<img src="abc/bcd/2.gif" alt="这是一个大松鼠" />

可以使用 ../ 来返回一级目录，返回几级目录就写几个 ../。

html

<img src="../img/2.gif" alt="这是一个大松鼠" />

a & iframe

使用超链接可以让我们从一个页面跳转到另一个页面
使用a标签来创建一个超链接

属性：
href：指向链接跳转的目标地址，可以写一个相对路径也可以写一个完整的地址
创建超链接时，如果地址不确定可以直接写一个"#"作为占位符。

target属性可以用来指定打开链接的位置，可选值：
_self：表示在当前窗口中打开（默认值）
_blank：在新的窗口中打开链接
内联框架中的name属性值，链接将会在指定的内联框架中打开

html

<a href="http://www.baidu.com">我是一个超链接</a>

<a href="demo03.html" target="tom">我是一个超链接</a>
<iframe src="demo02.html" name="tom"></iframe>

特殊用法：

如果将链接地址设置为#，则点击超链接后，会自动跳转到当前页面的顶部。
HTML中id属性可以作为标签的唯一标识，id在同一个页面中不能重复。
跳转到 id 为 bottom 的元素所在的位置，直接在 href 中写 #id 属性值。
发送电子邮件的超链接，点击链接以后可以自动打开计算机中默认的邮件客户端，href = "mailto:邮件地址"

iframe

使用内联框架可以引入一个外部的页面
使用iframe来创建一个内联框架

属性：
src：指向一个外部页面的路径，可以使用相对路径
width：设置内联框架的宽度
height：设置内联框架的高度
name：可以为内联框架指定一个name属性

在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索

html

<iframe src="demo02.html" name="tom"></iframe>

div & span

div 这个标签没有任何语义，就是一个纯粹的块元素(会独占一行的元素，无论他的内容有多少，他都会独占一行)，并且不会为它里面的元素设置任何的默认样式。主要用来对页面进行布局的。
span 没有任何的语义，span 标签专门用来选中文本，然后为文字来设置样式。只占自身大小的元素，不会占用一行。

em & strong & b & i

标签	语义	默认样式	推荐场景
`<em>`	强调	斜体	需要语气强调的内容
`<strong>`	重要	粗体	警告、关键信息
`<b>`	无	粗体	纯视觉加粗
`<i>`	无	斜体	外语、术语、图标（旧用法）

cite & q & blockquote

引用标签	默认样式	推荐场景
`<cite>`	斜体	引用书籍、文章、作品的标题
`<q>`	引号	引用短文本内容
`<blockquote>`	缩进	引用长篇文本内容

small & sup & sub

标签	默认样式	推荐场景
`<small>`	小号字体	辅助文本、法律声明等
`<sup>`	上标	数学公式、脚注等
`<sub>`	下标	化学公式、下标等

del & ins

标签	默认样式	推荐场景
`<del>`	删除线	表示被删除的内容
`<ins>`	下划线	表示被添加的内容

code & pre

标签	语义	默认样式	推荐场景
`<code>`	代码	等宽字体	显示代码片段
`<pre>`	预格式化文本	等宽字体	显示预格式化的文本

html

<pre><code>
function hello() {
  console.log("Hello");
}
</code></pre>

ul & ol & dl & li & dt & dd

列表类型	标签	适用场景	子元素
无序列表	`<ul>`	无顺序的并列项	`<li>`
有序列表	`<ol>`	有顺序/步骤/排名	`<li>`
定义列表	`<dl>`	术语 + 解释	`<dt>` + `<dd>`

表格元素 table

标签	作用
`<table>`	表格容器
`<caption>`	表格标题（必须是第一个子元素，对可访问性至关重要）
`<thead>`	表头部分（通常包含列标题）
`<tbody>`	表格主体（数据行）
`<tfoot>`	表尾（如总计、平均值）
`<tr>`	表格行（Table Row）
`<th>`	表头单元格（Table Header，默认加粗居中）
`<td>`	数据单元格（Table Data）

表单元素 form

标签	作用
`<form>`	表单容器
`<input>`	输入字段（文本、密码、单选框、复选框等）
`<select>`	下拉选择框
`<textarea>`	多行文本输入框
`<button>`	提交按钮或普通按钮
`<label>`	标签，用于关联表单元素
`<fieldset>`	字段集，用于对表单元素进行分组
`<legend>`	字段集的标题，必须是字段集的第一个子元素

label标签用法：
推荐：label标签的for属性 + 表单元素的id属性关联
包裹表单元素

块元素和内联元素

⚠️ 注意

块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式。
一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素。
a 元素可以包含任意元素，除了他本身。
p 元素不可以包含任何其他的块元素。

块元素

div 是一个块元素。
所谓的块元素就是会独占一行的元素，无论他的内容有多少，他都会独占一行。
p h1 h2 h3 ... 等标题标签都是块元素。
div 这个标签没有任何语义，就是一个纯粹的块元素，并且不会为它里面的元素设置任何的默认样式。
div 元素主要用来对页面进行布局的。

内联元素

span 是一个内联元素（行内元素）
所谓的行内元素，指的是只占自身大小的元素，不会占用一行。
常见的内联元素：a img iframe span
span 没有任何的语义，span 标签专门用来选中文本，然后为文字来设置样式。

特性

内联元素不能设置 width 和 height
内联元素可以设置水平方向的内边距
内联元素可以设置垂直方向内边距，但是不会影响页面的布局
内联元素可以设置边框，但是垂直的边框不会影响到页面的布局
内联元素支持水平方向的外边距
内联元素不支持垂直外边距
水平方向的相邻外边距不会重叠，而是求和

常用属性

title 属性可以为元素添加额外的信息。当鼠标悬停在元素上时，会显示 title 属性的内容。
id 属性可以为元素指定一个唯一的标识符。可以使用 id 属性来为元素添加一个唯一的标识，方便在 CSS 或 JavaScript 中对元素进行操作。
class 属性可以为元素指定一个或多个类名。可以使用 class 属性来为元素添加一个或多个类名，方便在 CSS 或 JavaScript 中对元素进行操作。
style 属性可以为元素添加行内样式。

附录

附1：乱码

乱码问题

乱码的问题 —— 乱码出现的原因 计算机是一个非常笨的机器，它只认识两个东西：0 和 1。
在计算机中保存的任何内容，最终都需要转换为 0 和 1 这种二进制编码来保存。例如：中国，在计算机底层，可能会被转换为：1010001001010101011010 在读取内容时，需要将二进制编码，再转换为正确的内容。
编码与解码编码：依据一定的规则，将字符转换为二进制编码的过程。解码：依据一定的规则，将二进制编码转换为字符的过程。编码和解码所采用的规则，我们称为 字符集。
常见的字符集 ASCII
├── ISO-8859-1
├── GBK
│ └── 国标
├── GB2312 中文系统的默认编码
├── UTF-8 万国码，支持地球上所有的文字
└── ANSI 自动以系统的默认编码来保存文件
产生乱码的根本原因 编码和解码采用的字符集不同。在中文系统的浏览器中，默认都是使用 GB2312 进行解码的。

附2：图片格式

JPEG (JPG)
JPEG 图片支持的颜色比较多，图片可以压缩，但是不支持透明。
一般使用 JPEG 来保存照片等颜色丰富的图片。
GIF
GIF 支持的颜色少，只支持简单的透明，支持动态图。
图片颜色单一或者是动态图时可以用 GIF。
PNG
PNG 支持的颜色多，并且支持复杂的透明。
可以用来显示颜色复杂的透明的图片。

附3：xHtml的语法规则

xHtml的语法规则

HTML中不区分大小写，但是我们一般都使用小写
HTML中的注释不能嵌套
HTML标签必须结构完整，要么成对出现，要么自结束标签

html

<!-- ✅️ -->
<p>我是一个p标签</p>
<!-- ❌️ -->
<p>我是一个p标签</p>

浏览器尽最大的努力正确的解析页面，你所有的不符合语法规则的内容，浏览器都会为你自动修正，但是有些情况也会修正错误
HTML标签可以嵌套，但是不能交叉嵌套

html

 <!-- ✅️ -->
<p>今天天气<font color="red">真不错</font></p>
<!-- ❌️ -->
<p>今天天气<font color="red">真不错</p></font>

HTML标签中的属性必须有值，且值必须加引号（双引号单引号都可以）

html

<!-- ✅️ -->
<p>今天天气<font color="red">真不错</font></p>
<!-- ❌️ -->
<p>今天天气<font color>真不错</font></p>

附4：实体字符

实体字符

在HTML中，一些如< >这种特殊字符是不能直接使用，
需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称为实体（转义字符串）
浏览器解析到实体时，会自动将实体转换为其对应的字符
遇到其他不常用的符号时，直接查符号的实体表就行。

< → &lt;
> → &gt;
空格 → &nbsp;
版权号 → &copy;

附5：IE 条件hack（仅IE9及以下有效）

IE（Internet Explorer）的条件注释（Conditional Comments）是一种仅被 IE 浏览器识别的 HTML 注释语法，用于针对不同版本的 IE 应用特定的 HTML 或 CSS。这种技术在 IE9 及更早版本中有效，从 IE10 开始，微软已完全移除对条件注释的支持。

html

<!--[if 条件]> HTML 内容（仅在满足条件的 IE 中显示） <![endif]-->

条件	含义
`lt IE 7`	小于 IE7（即 IE6 及以下）
`lte IE 7`	小于或等于 IE7（即 IE7 及以下）
`gt IE 7`	大于 IE7（即 IE8 及以上）
`gte IE 7`	大于或等于 IE7（即 IE7 及以上）
`IE 8`	仅 IE8
`!IE`	非 IE 浏览器（但注意：非 IE 浏览器会将其视为普通 HTML 注释，不会执行其中内容）

HTML基础 ​

H5文档声明 ​

常用标签 ​

html & head & body & 注释 ​

h & p & br & hr ​

meta ​

img ​

a & iframe ​

div & span ​

em & strong & b & i ​

cite & q & blockquote ​

small & sup & sub ​

del & ins ​

code & pre ​

ul & ol & dl & li & dt & dd ​

表格元素 table ​

表单元素 form ​

块元素和内联元素 ​

块元素 ​

内联元素 ​

常用属性 ​

附录 ​

附1：乱码 ​

附2：图片格式 ​

附3：xHtml的语法规则 ​

附4：实体字符 ​

附5：IE 条件hack（仅IE9及以下有效） ​

HTML基础

H5文档声明

常用标签

html & head & body & 注释

h & p & br & hr

meta

img

a & iframe

div & span

em & strong & b & i

cite & q & blockquote

small & sup & sub

del & ins

code & pre

ul & ol & dl & li & dt & dd

表格元素 table

表单元素 form

块元素和内联元素

块元素

内联元素

常用属性

附录

附1：乱码

附2：图片格式

附3：xHtml的语法规则

附4：实体字符

附5：IE 条件hack（仅IE9及以下有效）