HTML 笔记

type

Post

status

Published

date

Aug 14, 2022

slug

html-1

summary

入门HTML是很容易的，但深入学习HTML却并不简单。HTML最开始就和HTTP、URI一起提出，学习HTML会涉及到很多计网的知识；HTML发展到今天的HTML5，引入了很多新特性，学习它们的同时还需要注意浏览器的兼容性。可谓是难点多多。

HTML简介

HTML即HyperText Markup Language（超文本标记语言）。1989年蒂姆·伯纳斯-李在他发表的一篇论文中提出了HTTP、HTML、URI三项关键技术，奠定了当今web的基础。

HTML是HTTP请求的基本对象之一，HTML中可以引用其他对象（图片、视频等），也可以链接到其他HTML页面，从而形成了一个复杂的网络。

基本标签

💡

网页的HTML代码由许许多多不同的标签构成。学习HTML，就是学习各种标签的用法。

vscode自动生成的HTML模板为：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Pycharm自动生成的HTML模板为：


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

</body>
</html>

Pycharm的模板要精简一些，但五脏俱全

<!doctype>或<!DOCTYPE>告诉浏览器文档的类型，浏览器可以根据文档类型来渲染页面。

<html>是HTML文档的根元素，一个网页只能有一个<html>标签。lang属性表示文章的语言。

<head>标签是<html>的第一个子标签。它的作用是包含HTML文件的元信息，为网页渲染提供额外信息，而不会被渲染到页面上。

<meta>对应一项元数据，一个HTML可以有多个<meta>标签。比较重要的charset属性，用来指定网页的编码方式；
<title>指定浏览器标题栏显示的标题。

<body>标签紧跟在<head>后面，用于放置网页的主体内容。浏览器显示的页面内容，都放置在它的内部。

注释

HTML中的注释格式为（只有这一种）。这样的注释可以是多行的。多行注释比较标准的格式是各占一行，或每行一个。


<!--
<meta charset="UTF-8">
<title>Title</title>
-->

<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->

空格和换行

HTML有特殊的空白处理规则：

标签首尾的空格一律忽略不计。如<p> hello world </p>和<p>hello world</p>一样。

标签内容中多个连续的空格会被浏览器合并为一个。如<p>hello world</p>和<p>hello world</p>一样。

代码中的换行和制表符会被浏览器替换为空格，连续的多个也会被替换为一个空格。

💡

HTML中要实现多个空格，就需要使用空格字符实体 

元素的属性

元素属性是在标签中设置的键值对(属性=”值”)，用于定制元素的行为。和标签名一样，元素属性也不区分大小写。

id属性

id属性在HTML中必须唯一。它除了在css中作为id选择器外，还可以在url中作为锚点。打开如下html文件后可以使用#p1、#p2、#p3来定位相应id的位置。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="p1">
        paragraph1
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </p><hr>
    <p id="p2">
        paragraph2
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </p><hr>
    <p id="p3">
        paragraph3
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </p>
</body>
</html>

class属性

class的作用是给元素分类。一个标签可以有多个class，一个class也可以对应多个标签。多个class之间用空格隔开。它的主要作用是在css中作为class选择器。

title属性

title属性用来为元素添加附加说明。当鼠标移上去时就会显示title的内容。

style属性

style属性可以简单地指定元素的css样式。样式之间用分号隔开。

💡

其他不常用的属性见网道文档：网页元素的属性 - HTML 教程 - 网道 (wangdoc.com)

语义结构

大多数HTML标签都是有语义的，比如<p>表示段落文字、<a>表示链接、<strong>表示强调。使用语义化标签的作用一是增强文档的可读性，二是优化SEO，三是便于使用语音进行网页的阅读。

但是在文章结构方面却清一色地使用div和span这种没有语义的标签。为了提高网页结构的可读性，引入了语义化标签。

一个典型语义结构的网页如下：


<main>
  <article>
    <header>
      <h1>文章标题</h1>
    </header>
  </article>
</main>

而早期无语义的网页结构为：


<div class="main">
  <div class="article">
    <div class="title">
      <h1>文章标题</h1>
    </div>
  </div>
</div>

`<header>`标签

<header>有多种使用场景：

<header>放在外面，表示整个网页的头部。如导航栏。

<header>放在<article>里面，表示页眉。如标题、作者、时间等。

`<nav>`标签

<nav>标签用于放置页面或文档的导航信息。它通常放在<header>标签内部。

`<main>`标签

<main>标签表示页面的主体内容。一篇文章只能有一个<main>标签。

`<article>`标签

<article>标签表示页面里面一段完整的内容，如论坛的一个帖子。一篇文章可以有多个<article>。它一般放在<main>里面。


<article>
  <h2>文章标题</h2>
  <p>文章内容</p>
</article>

`<section>`标签

<section>是章节的意思，用于表示一个含有主题的独立部分。如一个二级标题就可以作为一个<section>。一篇规范的文章<section>总是多个一起出现。

`<aside>`标签

<aside>也有多种使用场景：

网页级的<aside>：网页的侧边栏，显示网页的信息。如站点信息等。

文章级的<aside>：文章的侧边栏，显示和文章相关的信息。如注释、目录等。

结合hexo博客可以很好地理解这一点，所以图略。

`<footer>`标签

<footer>和<header>一样，也有多种使用场景：

放在外面，表示网页的尾部。如版权等信息。

放在<article>里面，表示文章的尾部，但和内容无关。如禁止转载声明、相关文章推荐等。

总结

一个完善的网页结构的demo为：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一篇文章</title>
</head>
<body>
    <header>
        <nav>导航栏</nav>
    </header>
    <aside>网页侧边栏</aside>
    <main>
        <article>
            <header>
                <h1>文章标题</h1>
                <small>作者、时间</small>
            </header>
            <section>
                <h2>章节1</h2>
                <p>内容</p>
            </section>
            <section>
                <h2>章节2</h2>
                <p>内容</p>
            </section>
            <aside>文章目录</aside>
            <footer>版权声明，禁止转载</footer>
        </article>
    </main>
    <footer>
        备案xxxxx
    </footer>
</body>
</html>

列表标签

有序列表

有序列表的标签为<ol>，<ol></ol>中套<li>标签，就形成了一个有序列表。

有序列表默认以整数进行编号，通过指定type属性可以使用其他方式编号：

a：小写字母

A：大写字母

i：小写罗马数字

I：大写罗马数字

1：整数（默认值）

此外<li>还有value属性指定当前表项的编号值：

无序列表

无序列表的标签为<ul>。对于<ul>，一般要要消去前面的·，做法是添加style属性：style="list-style: none"。

💡

不常用的<dl>、<dt>、<dd>见列表标签 - HTML 教程 - 网道 (wangdoc.com)

图像标签

`<img>`标签

<img>是最常用的图像标签。它的关键属性有：

src：指定图像的链接。

alt：指定图像未成功加载的替代性文字。

width、height：图像的宽高。因为可以在css中设置，所以不推荐使用这两个属性。

referrerpolicy：指定为no-referrer取消Referer的头信息。

loading：lazy（懒加载）和eager（立刻加载）两种。

`<picture>`标签

<picture>是新引入的标签，主要作用是解决响应式图片的问题。

<img>标签的srcset和size属性也可以解决这问题。但<picture>的用法更直观。

使用<picture>的一个简单例子（会用即可）：

💡

<picture>中的图片大小在<img>中统一设置。


<picture>
    <source media="(max-width: 600px)" srcset="1.png">
    <source media="(max-width: 900px)" srcset="2.png">
    <img src="3.png" alt="" width="800px">
</picture>

屏幕宽度600px以下，显示1.png；屏幕宽度601-900px，显示2.png；屏幕宽度大于900px，或浏览器不支持<picture>标签，显示3.png。

链接标签

`<a>`标签

<a>标签是最常用的链接标签，里面可以套其他标签。点击内部元素就可以跳转到相应的网址。

基本属性

herf属性指定跳转的链接。当链接需要暂时留空时，最好用herf=”#”来占位。

title属性指定鼠标放上去时的提示文字。

target属性指定打开的窗口，可以有的值为：

_self：默认打开方式，在当前浏览器窗口打开。
_blank：创建一个无名窗口，在该窗口打开。
自定义：浏览器检查有无名为该字符串的窗口。如果没有，就新创建一个这个名字的窗口，然后在该窗口打开链接；如果有，就覆盖这个窗口的内容。


<a href="https://notion.fullcomb.top/article/python-1" target="a">链接1</a>
<a href="https://notion.fullcomb.top/article/python-2" target="a">链接2</a>

第一次点击两个链接中的一个会在新窗口中打开；第二次点击就会在刚才创建的窗口打开。

`rel`属性

rel属性说明链接与当前页面的关系。如果要跳转的网页不太可靠，为了避免安全风险，设置rel="noreferrer”。这样http请求头就不会有Referer，从而隐藏点击的来源。而对于可靠的跳转网页，可以按需设置：

alternate：当前文档的另一种形式，比如翻译、RSS链接。

author：作者链接。

bookmark：用作书签的永久地址。

external：当前文档的外部参考文档。

help：帮助链接。

license：许可证链接。

`<link>`标签

<link>标签主要用于将当前网页与相关的外部资源联系起来，通常放在<head>中。

常见用途

引入样式表：


<link rel="stylesheet" type="text/css" href="style.css">

引入favicon图标文件：


<link rel="icon" type="image/x-icon" href="/favicon.ico">

💡

要从外部引入js文件，需要使用<script>标签：<script type="text/javascript" src="javascript.js"></script>

资源预加载

在rel属性中按需指定预加载选项，可以一定程度上提升网页的访问速度。

预加载

<link rel="preload">告诉浏览器尽快下载并缓存资源。这种资源的优先级较高，适用于网页中需要尽快加载的文件，如样式表。该属性需要搭配as属性，告诉浏览器预处理资源的类型，以便正确处理。

如果不指定as属性或as后面的类型浏览器不认识，那么preload就没什么用。as可以指定的值有：script、style、image、media、document。

💡

preload的文件仅仅作为缓存提前加载而不会立即生效。需要该文件的时候就会立即生效。


<!--预先加载css和js文件-->
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">

<!--引入css和js的时候可以立即生效-->
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="javascript.js"></script>

也可以通过onload属性指定回调函数在文件下载完成后就应用：


<link rel="preload" as="style" href="style.css" onload="this.rel='stylesheet'">

预连接

<link rel="prerender" href="#">可以提前与另一个网页建立好TCP链接，接下来访问目标链接就不用建立连接了。这样可以加快网页的打开速度，通常设置为接下来要访问的网址或文件中引用的网址。

预渲染

预渲染相当于预连接的进一步预加载。<link rel="prerender" href="#">要求浏览器加载某个网页，并且提前渲染它。用户点击指向该网页的链接时，就会立即呈现该页面。如果确定用户下一步会访问该页面，这会很有帮助。

多媒体标签

嵌入视频

嵌入视频使用<video>和<source>标签。<video>中指定播放器相关的信息，<source>中指定视频相关的信息。

<video>常用的属性：

width、height：指定播放区域的大小。

controls：显示播放控件。如果需要使用自定义的播放器，那么不应该使用这个属性。

poster：视频未播放时显示的封面。

<source>的属性：

src：视频的url

type：指定视频的格式


<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="referrer" content="no-referrer">
    <meta charset="UTF-8">
    <title>视频测试</title>
    <link>
</head>
<body>
    <video width="500px"
           controls
           preload="auto"
           poster="https://i0.hdslb.com/bfs/archive/c808d4c0726cf208f4a9b4fea74b9d084fbbdb44.png@256w_144h_1c.webp">
        <source src="https://cloud.fullcomb.top/public/major/Python%E7%88%AC%E8%99%AB/01.selenium%E7%AE%80%E4%BB%8B.mp4"
                type="video/mp4">
    </video>
</body>
</html>

💡

某些外链对http请求头的Referer进行了限制。所以需要在<head>中添加<meta name="referrer" content="no-referrer">取消请求头的Referer字段才能成功导入视频。

嵌入音频

嵌入音频使用<audio>和<source>标签，使用方法和<video>差不多。

表格标签

表格的标签是<table>，里面可以有很多子标签。表格的基本使用格式为：


<table>
	<tr>
	    <th>学号</th><th>姓名</th>
	</tr>
	<tr>
	    <td>001</td><td>张三</td>
	</tr>
	<tr>
	    <td>002</td><td>李四</td>
	</tr>
</table>

`<tr>`、`<th>`、`<td>`

<tr>即table row，表示表格的一行。<th>、<td>都需要放在<tr>里面。

<th>是表格的标题单元格，<td>是数据单元格。

`<colgroup>`，`<col>`

使用<col>可以直接选择到表的列，从而在css中指定表一列的样式。<col>要放在<colgroup>标签中，且有几列就需要几个<col>标签，或设置span属性表示多列。


<colgroup>
  <col class=c1> <!--对应第一列-->
  <col span="2" class=c23> <!--对应第二三列-->
  <col class=c4> <!--对应第四列-->
</colgroup>

`<thead>`、`<tbody>`、`<tfoot>`

这三个标签都是可选的。它们的作用是增强表格的可读性，同时便于css使用标签选择器定位到表的各部分。

一个完整使用上述标签的示例为：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style>
        /*设置表列的样式*/
        .c1{
            background-color: red;
        }
        .c2{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <table>
        <colgroup>
            <col class="c1">
            <col class="c2">
        </colgroup>

        <caption><small>示例表格</small></caption>
        <tr>
            <th>学号</th><th>姓名</th>
        </tr>
        <tr>
            <td>001</td><td>张三</td>
        </tr>
        <tr>
            <td>002</td><td>李四</td>
        </tr>
    </table>
</body>
</html>

表单标签

表单是用户与网页互动的一种方式。常见的表单如登录、注册、搜索等。

表单的原理是将用户输入的信息以get请求（查询字符串）或post请求的方式通过指定的url访问服务器，服务器再将请求的页面发送给用户。get请求一般是公开的信息，如搜索框；post请求一般是隐私信息，如登录注册。

基本使用

表单使用的标签是<form>，一个表单的基本格式为：


<form action="#" method="post">
    <!-- 各种表单控件-->
    <label for="POST-name">用户名：</label>
    <input id="POST-name" type="text" name="uname">
    <input type="submit" value="提交">
</form>

<form>标签几个比较重要的属性：

action：服务端接收数据的URL。如果没有指定，则默认为该页面的URL。

method：向服务端发送请求的方法。

target：指定展示返回数据的窗口。和<a>标签的target属性一样，有_self、_blank等值。

常用控件

控件分组

使用<fieldset>标签将一组相关控件组合成一组。

使用<legend>标签来设置控件组的标题。

控件说明

使用<label>标签为相应控件提供文字说明。它有两种使用方式：

<label>标签包含控件及其说明性文字。


<label>年龄：
<input type="text" name="age">
</label>

<label>标签内只包含说明性文字，使用for属性的值来选择相应id的控件。


<label for="age">年龄：</label>
<input type="text" name="age" id="age">

使用label标签和在控件旁边直接显示文字看起来没有区别：

但实际上，使用了label标签后直接点击描述文字（年龄）即可选中控件，增加了控件的可用性。

`<input>`控件

<input>是最常用的控件。不同的控件使用type属性来确定。

💡

对于需要获取用户输入并将其传递给服务端的控件，需要指定name属性，然后以键值的方式返回给服务器。如果没有指定name，那么就不会提交。

💡

除此之外，一个控件一般都要添加<label>。所以常常还需要添加id属性。

常见的type如下：

text：默认的控件类型，表示一个单行的文本输入框。placeholder属性当输入字段为空时，用于提示的示例值。

submit：提交整个表单的控件。value属性指定提交按钮中的文字，如value="提交"。

password：密码输入框。用户的输入会被遮挡。

email：特指填写的信息为邮箱。表单提交之前，浏览器会自动验证是否符合电子邮箱的格式。

此外还可以添加pattern属性使用正则表达式来对邮箱进一步限制。

url：同理。浏览器会自动检查链接格式是否正确。也可以在pattern中进一步限制，如必须是https协议。

tel：同理。但是电话号码全世界没有统一的格式，浏览器不会自动匹配，所以需要自己在pattern中对格式进行限制。

color：生成一个颜色选择滑块。不常用，但是挺有趣。

`<select>`控件

<select>的作用是生成一个下拉菜单。选择的元素通过<option>来指定。

键在<select>中用name属性来表示，值在<option>中用value属性来表示。


<form action="#" method="post" target="_self">
    <label for="pet-select">选择你的宠物：</label>
    <select id="pet-select" name="pet-select">
        <option value="dog">狗</option>
        <option value="cat">猫</option>
        <option value="others">其他</option>
    </select>
</form>

`<button>`控件

<button>顾名思义就是按钮。可以使用type属性来设置其功能；可以在button标签中设置按钮里面的内容。

有时候提交按钮会使用<button>标签：<button type="submit">提交</button>。

HTML简介

基本标签

注释

空格和换行

元素的属性

id属性

class属性

title属性

style属性

语义结构

<header>标签

<nav>标签

<main>标签

<article>标签

<section>标签

<aside>标签

<footer>标签

总结