ANSI编码：每个国家为了显示本国的语言，都对ASCII码进行了扩展。用2个字节（16位二进制）来表示一个汉字，共可以表示2^16＝65536个汉字。例如：中国的ANSI编码是GB2312编码（简体），对6763汉字进行编码，含600多特殊字符。另外还有GBK（简体）。日本的ANSI编码是JIS编码。台湾的ANSI编码是BIG5编码（繁体）。

GBK：对GB2312进行了扩展，用来显示罕见的、古汉语的汉字。现在已经收录了2.1万左右。并提供了1890个汉字码位。K的含义就是“扩展”。

Unicode编码（统一编码）：用4个字节（32位二进制）来表示一个字符，想法不错，但效率太低。例如，字母A用ASCII表示的话一个字节就够，可用Unicode编码的话，得用4个字节表示，造成了空间的极大浪费。

UTF-8（Unicode Transform Format）编码：根据字符的不同，选择其编码的长度。比如：一个字符A用1个字节表示，一个汉字用3-4个字节表示。毫无疑问，开发中，都用UTF-8编码吧，准没错。

提问：中文网站适合采用什么编码？

3.2、编码的常见问题

① 避免乱码

我们用meta标签声明的当前这个html文档的字库，一定要和保存的文件编码类型一样，否则乱码（重点）。

② UTF-8和gb2312的比较

UTF-8：字多，有各种国家的语言，但是保存尺寸大，文件臃肿；
gb2312：字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。

3.3、情节案例

1）某公司是做日本动漫的，经常出现一些日语动漫的名字，网页要使用UTF-8，如果用gb2312将无法显示日语。

2）某公司就是中文网页，极度的追求网页的显示速度，要使用gb2312。如果使用UTF-8将每个汉字多一个byte，所以5000个汉字，多5kb。

我们是怎么查看网页的编码方式的呢？在浏览器中打开网页，右键，选择“查看网页源代码”，找到meta标签中的charset属性即可。

4、VS Code的介绍

VS Code 的全称是 Visual Studio Code，是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面，都做得很不错。

4.1、IDE 与编辑器的对比

IDE 和编辑器是有区别的：

IDE（Integrated Development Environment，集成开发环境）：对代码有较好的智能提示和相互跳转，同时侧重于工程项目，对项目的开发、调试工作有较好的图像化界面的支持，因此比较笨重。比如 Eclipse 的定位就是 IDE。
编辑器：要相对轻量许多，侧重于文本的编辑。比如 Sublime Text 的定位就是编辑器。再比如Windows 系统自带的「记事本」就是最简单的编辑器。

需要注意的是，VS Code 的定位是编辑器，而非 IDE ，但 VS Code 又比一般的编辑器的功能要丰富许多。可以这样理解：VS Code 的体量是介于编辑器和 IDE 之间。

4.2、VS Code的特点

VS Code 的使命，是让开发者在编辑器里拥有 IDE 那样的开发体验，比如代码的智能提示、语法检查、图形化的调试工具、插件扩展、版本管理等。
跨平台支持 MacOS、Windows 和 Linux 等多个平台。
VS Code 的源代码以 MIT 协议开源。
支持第三方插件，功能强大，生态系统完善。
VS Code 自带了 JavaScript、TypeScript 和 Node.js 的支持。也就是说，你在书写 JS 和 TS 时，是自带智能提示的。当然，其他的语言，你可以安装相应的扩展包插件，也会有智能提示。

4.3、VS Code的安装

VS Code 官网：https://code.visualstudio.com

VS Code 的安装很简单，直接去官网下载安装包，然后双击下一步下一步安装即可。

4.4、VS Code插件推荐

① 汉化插件：Chinese (Simplified) Language Pack for Visual Studio Code

② Live Server

在本地启动一个服务器，代码写完后可以实现「热更新」，实时地在网页中看到运行效果。就不需要每次都得手动刷新页面了。使用方式：安装插件后，开始写代码；代码写完后，右键选择「Open with Live Server」。

③ PHP环境（后面学习PHP时会使用）

④ indent-rainbow：突出显示代码缩进

⑤ Code Spell Checker：单词拼写错误检查

这是我安装的插件，可以根据自己的喜好习惯前往插件商店进行安装

5、书写第一个HTML页面

5.1、书写第一个HTML页面

VS Code 执行代码需要代码在一个文件夹中。
我们打开 VS Code 软件，新建一个文件，名叫 index.html （注意，文件名是 index ，后缀名是
html ），保存到本地。
紧接着，在文件里，输入 html:5 ，然后按一下键盘上的 Tab 键，就可以自动生成如下内容：

<!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>
    
</body>
</html>

上面的内容就是HTML页面的骨架，我们在此基础上新增几个标签，完整代码如下：

<!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>
    <h3>我是三级标题</h3>
    <a href="https://www.baidu.com">我是超链接，可以点击一下</a>
</body>
</html>

标签写完之后，我们用右键（Open With Live Server）通过默认浏览器打开上面这个 test.html 文件，看看页面效果：

5.2、HTML结构详解

HTML标签通常是成对出现的（双边标记），比如 <div> 和 </div> ；也有少部分单标签（单边标
记），如： <br /> 、 <hr /> 和 <img src="images/1.jpg" /> 等。

属性与标记之间、各属性之间需要以空格隔开。属性值以双引号括起来。

HTML骨架标签分类

5.2.1、文档声明头

任何一个标准的HTML页面，第一行一定是一个以 <!DOCTYPE ……> 开头的语句。这一行，就是文档声明头，即 DocType Declaration，简称DTD。

DTD可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
在HTML5中极大的简化了DTD，也就是说HTML5中就没有XHTML了。

HTML5的DTD（文档声明头）如下：

<!DOCTYPE html>

5.2.2、页面语言lang

下面这行标签，用于指定页面的语言类型：

<html lang="en">

5.2.3、头标签head

html5 的比较完整的骨架：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="Keywords" content="你只需要记住，我叫叶良辰。" />
<meta name="Description" content="呵呵，良辰最喜欢对那些自认为能力出众的人出手。" />
<title>Document</title>
</head>
<body>
</body>
</html>

头标签内部的常见标签如下：

<title> ：指定整个网页的标题，在浏览器最上方显示。
<base> ：为页面上的所有链接规定默认地址或默认目标。
<meta> ：提供有关页面的基本信息。
<link> ：定义文档与外部资源的关系。

面试题：
问：网页的head标签里面，表示的是页面的配置，有什么配置？
答：字符集、关键词、页面描述、页面标题、IE适配、视口、iPhone小图标等等。

5.2.3.1、meta标签

meta表示“元”。“元”配置，就是表示基本的配置项目。

常见的几种 meta 标签如下：

（1）字符集 charset：

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

字符集用meta标签中的 charset 定义，charset就是character set（即“字符集”），即网页的编码方式。
字符集(Character set)是多个字符的集合。计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。
上面这行代码非常关键，是必须要写的代码，否则可能导致乱码。比如你保存的时候，meta写的和声明的不匹配，那么浏览器就会出现乱码。
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312等。

（2）视图窗口 viewport：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width ：表示视口宽度等于屏幕宽度。

（3）定义“关键词”：

<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />

这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。

（4）定义“页面描述”：

<meta name="Description" content="呵呵，良辰最喜欢对那些自认为能力出众的人出手。" />

meta除了可以设置字符集，还可以设置关键字和页面描述。
只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（searchengine optimization，搜索引擎优化）。

上面的几种 <meta> 标签都不用记，但是另外还有一个 <meta> 标签是需要记住的：这个标签的意思是说，3秒之后，自动跳转到百度页面。

<meta http-equiv="refresh" content="3;https://www.baidu.com">

5.2.3.2、title标签和base标签

（1）title 标签:
用于设置网页标题：

<title>叶良辰语录</title>

title标签也是有助于SEO搜索引擎优化的。

（2）base标签：

<base href="/">

base 标签用于指定基础的路径。指定之后，所有的 a 链接都是以这个路径为基准。

5.2.3.3、body 标签

<body> ：用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签內。

<body> 标签的属性有：

bgcolor ：设置整个网页的背景颜色。
background ：设置整个网页的背景图片。
text ：设置网页中的文本颜色。
leftmargin ：网页的左边距。IE浏览器默认是8个像素。
topmargin ：网页的上边距。
rightmargin ：网页的右边距。
bottommargin ：网页的下边距。

6、HTML标签之排版标签

6.1、标题标签

标题使用 <h1> 至 <h6> 标签进行定义。 <h1> 定义最大的标题， <h6> 定义最小的标题。具有align属性，属性值可以是：left、center、right。

<!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>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
</body>
</html>

6.2、HTML注释

HTML 注释的格式如下：

<!-- 我是 html 注释 -->

注释快捷键：Ctrl + /

6.3、段落标签

作用：可以把 HTML 文档分割为若干段落。在网页中如果要把文字有条理地显示出来，离不开段落标签。就如同我们平常写文章一样，整个网页也可以分为若干个段落。

<p>This is a paragraph</p>
<p>This is another paragraph</p>

属性：

align="属性值" ：对齐方式。属性值包括left、center、right。

HTML标签是分等级的，HTML将所有的标签分为两种：

文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。（a标签里不能放a和input）
容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。

从学习p标签开始，就要牢牢记住：p标签是一个文本级标签，里面只能放文字、图片、表单元素，其他的一律不能放。

6.4、水平线标签

水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。

代码举例：

<!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>
<p>网络安全</p>
<hr />
<p>渗透测试</p>
</body>
</html>

效果如下：

6.5、换行标签

如果希望某段文本强制换行显示，就需要使用换行标签。

代码举例：

<!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>
    This <br/> is a para<br/>graph with line breaks
</body>
</html>

效果如下：

6.6、容器标签div和span

div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”

div和span的介绍：

div标签：可以把标签中的内容分割为独立的区块，必须单独占据一行。
span标签：和div的作用一致，但不换行。

代码举例：

<body>
    <div>
        div标签1
    </div>
    <div>
        div标签2
    </div>
    <div>
        <span>
            span标签1
        </span>
        <span>
            span标签2
        </span>
    </div>
</body>

效果如下：

div标签的属性：

align="属性值" ：设置块儿的位置。属性值可选择：left、right、 center。

<span> 和 <div> 唯一的区别在于： <span> 是不换行的，而 <div> 是换行的。

说明：

如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说，DIV+CSS来实现各种样式。
div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。 div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。
span也是表达“小区域、小跨度”的标签，但只是一个文本级的标签。就是说，span里面只能放置文字、图片、表单元素。

span标签举例：

div标签举例：

我们称这种模式叫做“div+css”：div标签负责布局、结构、分块，css负责样式。

7、字体标签和超链接

7.1、字体标签

特殊字符（转义字符）

常见的特殊字符

  ：空格
< ：小于号< <>
> ：大于号>
& ：符号 &
" ：双引号
' ：单引号
© ：版权 ©
™ ：商标 ™
绐 ：文字绐。其实， #32464 是汉字绐的unicode编码

我们通常所说的HTML实体编码就是将特殊字符进行编码，它可以有效地防范XSS（跨站脚本攻击），如果不使用HTML实体编码：

前端页面没有办法显示
HTML和JS代码出现符号混用，可能会造成安全漏洞

比如说，你想把 <p> 作为一个文本在页面上显示，直接写 <p> 是肯定不行的，因为这代表的是一个段落标签，所以这里需要用到转义字符。应该这么写：

这是一个HTML语言的&lt;p&gt;标签

常见特殊字符的HTML实体编码表：

7.2、超链接

代码举例：

<a href="XX页面.html">点击进入另外一个文件</a>

<a href="https://www.baidu.com" target="_blank">点我点我</a>

a是英语 anchor “锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。当然，我们也可以直接点进链接，访问一个网址。

超链接的属性：

href ：目标URL
title ：悬停文本。
name ：主要用于设置一个锚点的名称。
target ：告诉浏览器用什么方式来打开目标页面。 target 属性有以下几个值：
- _self ：在同一个网页中显示（默认值）
- _blank ：在新的窗口中打开
- _parent ：在父窗口中显示
- _top ：在顶级窗口中显示

属性都是以键值对的形式，举例：

<a href="1.html" title="悬停文本" target="_blank">链接的内容</a>

blank就是“空白”的意思，就表示新建一个空白窗口。为啥有一个_ ，就是规定，无需解释。也就是说，如果不写 target=”_blank” 那么就是在相同的标签页打开，如果写了 target=”_blank” ，就是在新的空白标签页中打开。

注意：

（1）分清楚img和a标签的各自的属性

<img src="1.jpg" />
<a href="1.html"></a>

（2）a是一个文本级的标签

比如一个段落中的所有文字都能够被点击，那么应该是p包裹a，而不是a包裹p。

8、图片标签和列表标签

8.1、图片标签

8.1.1、img标签介绍

img：英文全称 image（图像），代表的是图片。
如果要想在网页中显示图像，就可以使用 img 标签，它是一个单标签。语法如下：

<img src="图片的URL" />

能插入的图片类型：

能够插入的图片类型是：jpg(jpeg)、gif、png、bmp等。
HTML页面不是直接插入图片，而是插入图片的引用地址，所以要先把图片上传到服务器上。

8.1.2、img标签的属性

（1）src属性：

指图片的路径，英文名称 source。
在写图片的路径时，有两种写法：相对路径、绝对路径

写法一：图片的相对路径

相对当前页面所在的路径。两个标记 . 和 .. 分表代表当前目录和上一层目录。

<!-- 当前目录中的图片 -->
<img src="1.jpg">
<img src=".\1.jpg">

<!-- 上一级目录中的图片 -->
<img src="..\2.jpg">

<!-- 当前html页面有一个并列的文件夹 images ，在文件夹 images 中存放了一张图片 3.jpg -->
<img src="image/3.jpg">

说明：../ 要么不写，要么就写在开头。

写法二：图片的绝对路径

<img src="https://img0.baidu.com/it/u=2069094534,1629570942&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=776">

（2）width、height 属性

width ：图像的宽度。
height ：图像的高度。

width和height，在 HTML5 中的单位是 CSS 像素，在 HTML 4 中既可以是像素，也可以是百分比。可以只指定 width 和 height 中的一个值，浏览器会根据原始图像进行缩放。
重要提示：如果要想保证图片等比例缩放，请只设置width和height中其中一个。

（3）Alt 属性

alt ：当图片不可用（无法显示）的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思，代表替换资源。

（4）title 属性

title ：提示性文本。鼠标悬停时出现的文本。

举例：

<img src="https://img0.baidu.com/it/u=2069094534,1629570942&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=776" width="255" height="300" title="My wife">

title 属性不该被用作一幅图片在 alt 之外的补充说明信息。如果一幅图片需要小标题，使用 figure 或figcaption 元素。

title 元素的值一般作为提示条（tooltip）呈现给用户，在光标悬停在图片上然后显示出来。尽管这确实能给用户提供更多的信息，但是不能保证用户真的能看到：用户可能只有键盘或触摸屏。如果要把特别重要的信息提供给用户，可以选择上面提供的一种方法将其内联显示，而不是使用 title。

8.2、列表标签

8.2.1、无序列表 ul，里面的每一项是 li

举例：

<ul>
<li>默认1</li>
<li>默认2</li>
<li>默认3</li>
</ul>

<ul>
<li><b>北京市</b>
    <ul>
        <li>海淀区</li>
        <li>朝阳区</li>
        <li>东城区</li>
    </ul>
</li>

<li><b>广州市</b>
    <ul>
        <li>天河区</li>
        <li>越秀区</li>
    </ul>
</li>
</ul>

8.2.2、有序列表 ol ，里面的每一项是 li

举例：

<ol >
    <li>默认1</li>
    <li>默认2</li>
    <li>默认3</li>
</ol>

属性：

type="属性值" 。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合 start 属性表示从几开始。

举例：

    <ol type="1">
        <li>呵呵</li>
        <li>呵呵</li>
        <li>呵呵</li>
    </ol>
        <ol type="a">
        <li>嘿嘿</li>
        <li>嘿嘿</li>
        <li>嘿嘿</li>
    </ol>
        <ol type="i" start="4">
        <li>哈哈</li>
        <li>哈哈</li>
        <li>哈哈</li>
    </ol>
        <ol type="I" start="10">
        <li>么么</li>
        <li>么么</li>
        <li>么么</li>
    </ol>

效果如下：

ol和ul就是语义不一样，怎么使用都是一样的。 ol里面只能有li，li必须被ol包裹。li是容器级。

8.2.3、定义列表dl

定义列表的作用非常大。

<dl> 英文单词：definition list，没有属性。dl的子元素只能是dt和dd。

<dt> ：definition title 列表的标题，这个标签是必须的
<dd> ：definition description 列表的列表项，如果不需要它，可以不加

备注：dt、dd只能在dl里面；dl里面只能有dt、dd；dd是描述dt的。

举例：

<dl>
    <dt>第一条</dt>
    <dd>你若是觉得你有实力和我玩，良辰不介意奉陪到底</dd>
    <dd>我会让你明白，我从不说空话</dd>
    <dd>我是本地的，我有一百种方式让你呆不下去；而你，无可奈何</dd>

    <dt>第二条</dt>
    <dd>良辰最喜欢对那些自认能力出众的人出手</dd>
    <dd>你可以继续我行我素，不过，你的日子不会很舒心</dd>
    <dd>你只要记住，我叫叶良辰</dd>
    <dd>不介意陪你玩玩</dd>
    <dd>良辰必有重谢</dd>
</dl>

8.2.4、表格标签

表格标签用 <table> 表示。一个表格 <table> 是由每行 <tr> 组成的，每行是由每个单元格 <td> 组成的。所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。在以前，要想固定标签的位置，唯一的方法就是表格。现在可以通过CSS定位的功能来实现。但是在做页面的时候，表格作用还是有一些的。

例子：3行4列的单元格

    <table>
        <tr>
        <td>周杰伦</td>
        <td>23</td>
        <td>男</td>
        <td>北京</td>
        </tr>
        <tr>
        <td>许嵩</td>
        <td>29</td>
        <td>男</td>
        <td>安徽</td>
        </tr>
        <tr>
        <td>邓紫棋</td>
        <td>23</td>
        <td>女</td>
        <td>香港</td>
        </tr>
    </table>

table的属性：

border ：边框。像素为单位。
style="border-collapse:collapse;" ：单元格的线和表格的边框线合并（表格的两边框合并为一条）
width ：宽度。像素为单位。
height ：高度。像素为单位。
bordercolor ：表格的边框颜色。
align ：表格的水平对齐方式。属性值可以填：left、right、center。注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签 <td> 进行设置）
cellpadding ：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性 dir="rtl" ，那就指的是内容到右边那条线的距离。
cellspacing ：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
bgcolor="#99cc66" ：表格的背景颜色。
background="路径src/..." ：背景图片。背景图片的优先级大于背景颜色。
bordercolorlight ：表格的上、左边框，以及单元格的右、下边框的颜色
bordercolordark ：表格的右、下边框，以及单元格的上、左的边框的颜色这两个属性的目的是为了设置3D的效果。
dir ：公有属性，单元格内容的排列方式(direction)。可以取值： ltr ：从左到右（left toright，默认）， rtl ：从右到左（right to left）既然说 dir 是共有属性，如果把这个属性放在任意标签中，那表明这个标签的位置可能会从右开始排列。

8.2.5、表单标签

表单标签用 <form> 表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写的、选择的。
属性：

name ：表单的名称，用于JS来操作或控制表单时使用；
id ：表单的唯一标识，方便对表单进行操作；
action ：指定表单数据的处理程序，一般是PHP，如：action=“login.php”
method ：表单数据的提交方式，一般取值：get(默认)和post

注意：表单和表格嵌套时，是在 <form> 标记中套 <table> 标记。
form标签里面的action属性和method属性：action属性表示表单将提交到哪里；method属性表示用什么HTTP方法提交，有get、post两种。

get提交和post提交的区别：

GET方式：将表单数据以"name=value"形式追加到action指定的处理程序的后面，两者间用"?"隔开，每一个表单的"name=value"间用"&"号隔开。
POST方式：将表单数据直接发送（隐藏）到action指定的处理程序。POST发送的数据不可见（在body标签中）。Action指定的处理程序可以获取到表单数据。

8.2.6、input 输入标签（文本框）

用于接收用户输入。

举例：

<input type="text" />

还有很多属性，可以自行下去查询

8.2.7、textarea 多行文本输入框

先来看下面的一段代码：

<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女

对于上面这样的单选框，我们只有点击那个单选框（小圆圈）才可以选中，点击“男”、“女”这两个文字时是无法选中的；于是，label标签派上了用场。

本质上来讲，“男”、“女”这两个文字和 input 标签是没有关系的，而label就是解决这个问题的。我们可以通过label把input和汉字包裹起来作为整体。

解决方法如下：

<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
<input type="radio" name="sex" id="nv" /> <label for="nv">女</label>

上方代码中，让 label 标签的for 属性值，和 input 标签的 id 属性值相同，那么这个label和input就有绑定关系了。
当然了，复选框也有label：（任何表单元素都有label）

<input type="checkbox" id="kk" />
<label for="kk">10天内免登陆</label>

上一篇：怎样才能高效学习HT

下一篇： html：ul 列表

Document

一、安全基础之HTML

1、web的相关知识

1.1、web概念解读

1.2、web标准

1.2.1、为什么要制定并遵循web标准呢

1.2.2、web标准的三个方面

1.3、浏览器的组成

1.3.1、渲染引擎

1.3.2、JS引擎

2、HTML 概述

2.1、概念解读

2.2、HTML的专有名词

3、计算机编码

3.1、常用的编码

3.2、编码的常见问题

3.3、情节案例

4、VS Code的介绍

4.1、IDE 与 编辑器的对比

4.2、VS Code的特点

4.3、VS Code的安装

4.4、VS Code插件推荐

5、书写第一个HTML页面

5.1、书写第一个HTML页面

5.2、HTML结构详解

5.2.1、文档声明头

5.2.2、页面语言lang

5.2.3、头标签head

5.2.3.1、meta标签

5.2.3.2、title标签和base标签

5.2.3.3、body 标签

6、HTML标签之排版标签

6.1、标题标签

6.2、HTML注释

6.3、段落标签

6.4、水平线标签

6.5、换行标签

6.6、容器标签div和span

7、字体标签和超链接

7.1、字体标签

7.2、超链接

8、图片标签和列表标签

8.1、图片标签

8.1.1、img标签介绍

8.1.2、img标签的属性

8.2、列表标签

8.2.1、无序列表 ul，里面的每一项是 li

8.2.2、有序列表 ol ，里面的每一项是 li

8.2.3、定义列表dl

8.2.4、表格标签

8.2.5、表单标签

8.2.6、input 输入标签（文本框）

8.2.7、textarea 多行文本输入框

4.1、IDE 与编辑器的对比