HTML学习HTML是什么? 全称:HyperText Markup Language 译为:超文本标记语言，超文本:

HTML是什么?

全称:HyperText Markup Language 译为:超文本标记语言，
超文本:暂且理解为“超级的文本”，和普通文本比，内容更丰富。
标记:文本要变成超文本，就需要用到各种标记符号。
语言:每一个标记的写法、读音、使用规则，构成标记语言。

HTML初体验

1.第一步:鼠标右键=>新建=>文本文档=>输入以下内容，并保存。

<marquee>让天下没有难学的技术!</marquee>

2.第二步:修改后缀为.html，然后双击打开即可。

这里的后缀名，使用.htm也可以，但推荐使用更标准的.html。

3.程序员写的叫源代码，要交给浏览器进行渲染。

4.借助浏览器看网页的源代码，具体操作:

在网页空白处:鼠标右键==>查看网页源代码

HTML标签

标签又称元素，是HTML的基本组成单位。
标签分为:双标签与单标签(绝大多数都是双标签)
标签名不区分大小写，但推荐小写，因为小写更规范。
双标签: <标签名>标签体</标悠名>

起始标签结束标签

示例代码:

<marquee>让天下没有难学的技术!</marquee>

5. 单标签:

<标签名/>

单标签

备注:/可以省略

示例代码:

html

6.标签之间的关系:并列关系、嵌套关系，可以使用tab键进行缩进:

<marquee>让天下没有难学的技术!</marquee>

HTML标签属性

用于给标签提供附加信息。
可以写在:起始标签或单标签中，形式如下:

标签属性

<标签名属性名="属性值”属性名="属性值">

起始标签或单标签

例如:

<marquee loop="1" bgcolor="orange">让天下没有难学的技术!</marquee>

3. 有些特殊的属性，没有属性名，只有属性值，例如:

<input disabled>

4. 注意点:

不同的标签，有不同的属性;也有一些通用属性(在任何标签内都能写，后面会详细总结)。
属性名、属性值不能乱写，都是W3C规定好的。
属性名、属性值，都不区分大小写，但推荐小写。
双引号，也可以写成单引号，甚至不写都行，但还是推荐写双引号。
标签中不要出现同名属性，否则后写的会失效，例如:

<input type="text" type="password">

HTML基本结构

1.在网页中，如何查看某段结构的具体代码?--点击鼠标右键，选择“检查”。

2.检查和查看网页源代码的区别:

查看网页源代码看到的是:程序员编写的源代码。

检查看到的是:经过浏览器“处理”后的源代码。

备注:日常开发中，检查用的最多。

3.网页的基本结构如下:

想要呈现在网页中的内容写在body标签中。
head标签中的内容不会出现在网页中。
head标签中的title标签可以指定网页的标题。

<html>
    <head>
    <title>网页标题</title>
    </head>
    <body>
    ....
    </body>
</html>

安装VSCode

1.安装中文语言包。

2.使用VSCode打开文件夹的两种方式。

3.调整字体大小。

4，设置主题。

5.安装图标主题:vscode-icons,

安装Live Server插件

1.可以更加方便的打开网页。

2.打开网页的方式更贴近项目上线。

3.代码出现改动后，可以自动刷新。

4、根据自己的情况，去配置一下VSCode的自动保存。

注意1:务必使用VSCode打开的是文件夹，否则Live Server插件无法正常工作!

注意2:打开的网页必须是标准的HTML结构，否则无法自动刷新!

HTML注释

1.特点:注释的内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见。

2.作用:对代码进行解释和说明。

3.写法:

<!--下面的文字只能滚动一次-->

<marquee loop="1">zhouzhou</marquee>

<!--下面的文字可以无限滚动-->

<marquee>zhouzhou</marquee>

4.注释不可以嵌套，以下这么写是错的。

(反例)

<!-- 我是一段注释 <!--我是一段注释--> -->

HTML文档声明

1.作用:告诉浏览器当前网页的版本。

2.写法:

旧写法:要依网页所用的HTML版本而定，写法有很多。

具体有哪些写法请参考:W3C官网-文档声明(了解即可，千万别背!)
新写法:一切都变得简单了!W3C推荐使用HTML5的写法。

<!DOCTYPE html>

或

<!DOCTYPE HTML>

或

<!doctype html>

3.注意:文档声明，必须在网页的第一行，且在html标签的外侧。

HTML字符编码

1.计算机对数据的操作:

存储时，对数据进行:编码。
读取时，对数据进行:解码。

2.编码、解码，会遵循一定的规范--字符集。

3.字符集有很多中，常见的有(了解):

ASCII:大写字母、小写字母、数字、一些符号，共计128个。
IS0 8859-1:在ASCII基础上，扩充了一些希腊字符等，共计是256个。
GB2312:继续扩充，收录了 6763个常用汉字、682个字符。
GBK:收录了的汉字和符号达到20000+，支持繁体中文。
UTF-8:包含世界上所有语言的:所有文字与符号。--很常用。

4.使用原则是怎样的?

原则1:存储时，务必采用合适的字符编码。

否则:无法存储，数据会丢失!
原则2:存储时采用哪种方式编码，读取时就采用哪种方式解码。

否则:数据错乱(乱码)!

例如下面文字中，包含有:中文、英文、泰文、缅甸文

我爱你

I love you!

dunl6aus

2|$67q6couSn

若使用 IS08859-1编码存储，在存入的那一刻，就出问题了，因为IS08859-1仅支持英文!
为保证所有的输入，都能正常存储和读取，现在几乎全都采用: UFT-8编码。
所以我们编写html文件时，也都统一用UFT-8编码。

5. 总结:

平时编写代码时，统一采用 UTF-8编码(最稳妥)。
为了让浏览器在渲染html文件时，不犯错误，可以通过meta 标签配合charset 属性指定字符编码。

<head>
    <meta charset="UTF-8"/>
</head>

HTML设置语言

主要作用:

让浏览器显示对应的翻译提示。有利于搜索引擎优化。

具体写法:

扩展知识:lang属性的编写规则(作为一个课外扩展知识，了解即可)

第一种写法(语言-国家/地区)，例如:
- zh-CN: 中文-中国大陆(简体中文)
- zh-TW:中文-中国台湾(繁体中文)
- zh:中文
- en-US:英语-美国
- en-GB:英语-英国
第二种写法(语言一具体种类)已不推荐使用，例如:
- zh-Hans :中文-简体
- zh-Hant :中文-繁体
W3School上的说明:《语言代码参考手册》、《国家/地区代码参考手册》

W3C官网上的说明:《Language tags in HTML》

HTML标准结构

HTML标准结构如下:

<!DOCTYPE html>

<html lang="zh-CN">

    <head>

        <meta charset="UTF-8">

        <title>我公一个标题</title>

    </head>

    <body>

    </body>

</html>

输入!，随后回车即可快速生成标准结构。

生成的结构中，有两个meta标签，我们暂时用不到，可以先删掉。

配置VScode的内置插件emmet，可以对生成结构的属性进行定制。

在存放代码的文件夹中，存放一个favicon.ico图片，可配置网站图标。

1.开发者文档

W3CE: www.w3c.org

W3School: www.w3school.com.cn

MDN: developer.mozilla.org --平时用的最多

排版标签

标签名	标签含义	单/双标签
h1~h6	标题	双
p	段落	双
div	没有任何含义，用于整体布局(生活中的包装袋)	双

h1最好写一个，h2~h6能适当多写。
h1~h6不能互相嵌套，例如:h1标签中最好不要写h2标签了。
p标签很特殊!它里面不能有:h1~h6、p、div标签(暂时先这样记，后面会说规律)。

语义化标签

概念:用特定的标签，去表达特定的含义。

原则:标签的默认效果不重要(后期可以通过CSS随便控制效果)，语义最重要!

举例:对于h1标签，效果是文字很大(不重要)，语义是网页主要内容(很重要)。

优势:

代码结构清晰可读性强。
有利于SEO (搜索引擎优化)。
方便设备解析(如屏幕阅读器、盲人阅读器等)。

块级元素与行内元素

1，块级元素:独占一行(排版标签都是块级元素)。

2.行内元素:不独占一行(目前只学了:input，稍后会学习更多)。

3.使用规则:

1.块级元素中能写行内元素和块级元素(简单记:块级元素中几乎什么都能写)。

2.行内元素中能写行内元素，但不能写块级元素。

3.一些特殊的规则:

h1~h6 不能互相嵌套。

p中不要写块级元素。

我们以后还会学到一些特殊的规则，但不会很多。

4、备注说明:

marquee元素设计的初衷是:让文字有动画效果，但如今我们可以通过CSs来实现了，而且还可以实

现的更加炫酷，所以marquee标签已经:过时了(废弃了)，不推荐使用。我们只是在开篇的时候，用

他做了一个引子而已，在后续的学习过程中，这些已经废弃的标签，我们直接跳过。

文本标签

1.用于包裏:词汇、短语等。

2.通常写在排版标签里面。

3.排版标签更宏观(大段的文字)，文本标签更微观(词汇、短语)

4.文本标签通常都是行内元素。

常用的:

标签名	标签语义	单/双标签
em	要着重阅读的内容	双
strong	十分重要的内容(语气比em要强)	双
span	没有语义，用于包裹短语的通用容器	双

生活中的例子:div是大包装袋，

span是小包装袋。

不常用的文本标签

不常用的:

标签名	标签语义	单/双标签
cite	作品标题(书籍、歌曲、电影、电视节目、绘画、雕塑)	双
dfn	特殊术语，或专属名词	双
del与ins	删除的文本[与]插入的文本	双
sub与 sup	下标文字[与]上标文字	双
code	一段代码	双
samp	从正常的上下文中，将某些内容提取出来，例如:标识设备输出	双
kbd	键盘文本，表示文本是通过键盘输入的，经常用在与计算机相关的手册中	双
abbr	缩写，最好配合上title属性	双
bdo	更改文本方向，要配合dir属性，可选值:ltr(默认值)、rtl	双
var	标记变量，可以与 code标签一起使用	双
small	附属细则，例如:包括版权、法律文本。--很少使用	双
b	摘要中的关键字、评论中的产品名称。一-很少使用	双
i	本意是:人物的思想活动、所说的话等等。现在多用于:呈现字体图标(后面要讲的内容)。	双
u	与正常内容有反差文本，例如:错的单词、不合适的描述等。--很少使用	双
q	短引用--很少使用	双
blockquote	长引用--很少使用	双
address	地址信息	双

备注:

这些不常用的文本标签，编码时不用过于纠结(酌情而定，不用也没毛病)。
blockquote与 address是块级元素，其他的文本标签，都是行内元素。
有些语义感不强的标签，我们很少使用，例如:
  small、b、U、q、blockquote
HTML标签太多了!记住那些:重要的、语义感强的标签即可;截止目前，有这些:
  h1~h6、p、div、em、 strong、 span

图片标签

7.1基本使用

标签名	标签语义	常用属性	单/双标签
img	图片	src:图片路径(又称:图片地址) --图片的具体位置 alt:图片描述 width:图片宽度，单位是像素，例如:200px或200 height :图片高度，单位是像素，例如:200px 或200	单

总结:

1.像素(px)是一种单位，学到CSs时，我们会详细讲解。

2.尽量不同时修改图片的宽和高，可能会造成比例失调。

3.暂且认为img是行内元素(学到CSs时，会认识一个新的元素分类，目前咱们只知道:块、行内)，

alt属性的作用:
- 搜索引擎通过alt属性，得知图片的内容。--最主要的作用。
- 当图片无法展示时候，有些浏览器会呈现alt属性的值。
- 盲人阅读器会朗读alt属性的值。

路径的分类

1、相对路径:以当前位置作为参考点，去建立路径。

符号	含义
./	同级
/	下一级
../	上一级

注意点:

相对路径中的./可以省略不写。
相对路径依赖的是当前位置，后期若调整了文件位置，那么文件中的路径也要修改。
绝对路径:以根位置作为参考点，去建立路径。
本地绝对路径:E:/a/b/c/奥特曼.jpg。(很少使用)
网络绝对路径:www.atguigu.com/images/inde…

使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用。

使用网络绝对路径，确实方便，但要注意:若服务器开启了防盗链，会造成图片引入失败。

常见图片格式

jpg格式:

概述:扩展名为.jpg或.jpeg，是一种有损的压缩格式(把肉眼不容易观察出来的细节丢弃了)。
主要特点:支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。
使用场景:对图片细节没有极高要求的场景，例如:网站的产品宣传图等。--该格式网页中很常见。

png 格式:

概述:扩展名为.png，是一种无损的压缩格式，能够更高质量的保存图片。
主要特点:支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。
使用场景:①想让图片有透明背景;②想更高质量的呈现图片;例如:公司logo图、重要配图等。

bmp格式:

概述:扩展名为.bmp，不进行压缩的一种格式，在最大程度上保留图片更多的细节。
主要特点:支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图。
使用场景:对图片细节要求极高的场景，例如:一些大型游戏中的图片。(网页中很少使用)

gif 格式:

概述:扩展名为.gif,仅支持256种颜色，色彩呈现不是很完整。

主要特点:支持的颜色较少、支持简单透明背景、支持动态图。

使用场景:网页中的动态图片。

webp 格式:

概述:扩展名为.webp，谷歌推出的一种格式，专门用来在网页中呈现图片。

主要特点:具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。

使用场景:网页中的各种图片。

base64 格式

本质:一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。

原理:把图片进行base64编码，形成一串文本。

如何生成:靠一些工具或网站。

如何使用:直接作为img标签的src属性的值即可，并且不受文件位置的影响。

使用场景:一些较小的图片，或者需要和网页一起加载的图片。

图片的格式非常多，上面这些，只是一些常见的、我们前端人员常接触到的。

超链接

主要作用:从当前页面进行跳转。

标签名	标签语义	常用属性	单/双标签
a	超链接	href :要跳转的具体位置。 target :跳转时如何打开页面，常用值如下: _self :在本页签中打开。 _blank :在新页签中打开。	双

6.1跳转到页面

<!--跳转其他网页-->
<a href="https://www.jd.com/" target="_blank">去京东</a>
    
<!--跳转本地网页-->
<a href="./10_HTML排版标签.html" target="_self">去看排版标签</a>

注意点:

1.代码中的多个空格、多个回车，都会被浏览器解析成一个空格!

2.虽然a是行内元素，但a元素可以包裹除它自身外的任何元素!

想展示多个回车或空格，怎么办呢?--后面会讲。

跳转到文件

<!--浏览器能直接打开的文件-->

<a href="./resource/自拍.jpg">看自拍</a>

<a href="./resource/小电影.mp4">看小电影</a>

<a href="./resource/小姐姐.gif">看小姐姐</a>

<a href="./resource/如何一夜暴富.pdf">点我一夜暴富</a>

<!--浏览器不能打开的文件，会自动触发下载 -->

<a href="./resource/内部资源.zip">内部资源</a>

<!--强制触发下载 -->

<a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>

注意1:若浏览器无法打开文件，则会引导用户下载。

注意2:若想强制触发下载，请使用download属性，属性值即为下载文件的名称。

跳转到锚点

什么是锚点?--网页中的一个标记点。

具体使用方式:

第一步:设置锚点

<!--第一种方式:a标签配合name属性 -->
<a name="test1"></a>

<!--第二种方式:其他标签配合id属性-->
<h2 id="test2">我是一个位置</h2>

注意点:

1.具有href 属性的a标签是超链接，具有 name属性的a标签是锚点。

name 和id都是区分大小写的，且id最好别是数字开头。

第二步:跳转锚点

<!--跳转到test1锚点-->

<a href="#test1">去test1锚点</a>

<!--跳到本页面顶部-->

<a href="#">回到顶部</a>

<!--跳转到其他页面锚点-->

<a href="demo.html#test1">去demo.html页面的test1锚点</a>

<!--刷新本页面-->

<a href="">刷新本页面</a>

<!-- 执行一段js,如果还不知道执行什么，可以留空，javascript:;-->

<a href="javascript:alert(1);">点我弹窗</a>

唤起指定应用

通过a标签，可以唤起设备应用程序。

<!--唤起设备拨号-->
<ahref="tel:10010">电话联系</a>

<!--唤起设备发送邮件-->
<a href="mailto:10010@qq.com">邮件联系</a>

<!--唤起设备发送短信-->
<ahref="sms:10086">短信联系</a>

超文本的真正含义

超文本:是一种组织信息的方式，通过超链接将不同空间的文字、图片、等各种信息组织在一起，能从当前阅读的内容，跳转到超链接所指向的内容（页面、文件、锚点、应用）。

列表

有序列表

概念:有顺序或侧重顺序的列表。

<h2>要把大象放冰箱总共分几步</h2>

<ol>
    <li>把冰箱门打开</li>
    <li>把大象放进去</li>
    <1i>把冰箱门关上/1i>
</ol>

无序列表

概念:无顺序或不侧重顺序的列表。

<h2>我想去的几个城市</h2>

<ul>
    <li>成都</li>
    <li>上海</li>
    <li>西安</li>
    <li>武汉</li>
</ul>

列表嵌套

概念:列表中的某项内容，又包含一个列表(注意:嵌套时，请务必把解构写完整)

<h2>我想去的几个城市</h2>

<ul>
    <li>成都</li>
    <li>
        <span>上海</span>
        <ul>
            <li>外滩</li>
            <li>杜莎夫人蜡像馆</li>
            <li> 
                <a href="https://www.opg.cn/">东方明珠</a> 
            </li>
            <li>迪士尼乐园</li>
        </ul>
    </li>
    <li>西安</li>
    <li>武汉</li>
</ul>

注意:li标签最好写在ul 或 ol中，不要单独使用。

自定义列表

概念:所谓自定义列表，就是一个包含术语名称以及术语描述的列表。

一个dl就是一个自定义列表，一个dt就是一个术语名称，一个dd就是术语描述(可以有多个)。

<h2>如何高效的学习?</h2>

<dl>
<dt>做好笔记</dt>
<dd>笔记是我们以后复习的一个抓手</dd>
<dd>笔记可以是电子版，也可以是纸质版</dd>
<dt>多加练习</dt>
<dd>只有敲出来的代码，才是自己的</dd>
<dt>别怕出错</dt>
<dd>错很正常，改正后并记住，就是经验</dd>
</dl>

表格

基本结构

一个完整的表格由:表格标题、表格头部、表格主体、表格脚注，四部分组成。

表格涉及到的标签:

table:表格

caption :表格标题

thead :表格头部

tbody:表格主体

tfoot:表格注脚

tr:每一行

th、td:每一个单元格

(备注:表格头部中用th，表格主体、表格脚注中用:td)

代码：

<table>
    <!--表格标题-->
    <caption>学生信息</caption>
    <!--表格头部-->
    <thead></thead>
    <!--表格主体 -->
    <tbody>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
        </tr>
    </tbody>
    <!--表格脚注-->
    <tfoot></tfoot>
</table>

常用属性

标签名	标签语义	常用属性	单/双标签
table	表格	width:设置表格宽度。 height:设置表格最小高度，表格最终高度可能比设置的值大。 border :设置表格边框宽度。 cellspacing :设置单元格之间的间距。	双
thead	表格头部	height : 设置表格头部高度。 align:设置单元格的水平对齐方式，可选值如下: 1. left:左对齐 2. center: 中间对齐 3. right:右对齐 valign :设置单元格的垂直对齐方式，可选值如下: 1. top:顶部对齐 2.middle: 中间对齐 3. bottom:底部对齐	双
tbody	表格主体	常用属性与thead相同。	双
tr	行	常用属性与thead 相同。	双
tfoot	表格脚注	常用属性与thead相同。	双
td	普通单元格	width:设置单元格的宽度，同列所有单元格全都受影响。 heigth:设置单元格的高度，同行所有单元格全都受影响。 align :设置单元格的水平对齐方式。 valign :设置单元格的垂直对齐方式。 rowspan :指定要跨的行数。 colspan :指定要跨的列数。	双
th	表头单元格	常用属性与td相同。	双

注意点:

1. <table>元素的border属性可以控制表格边框，但border值的大小，并不控制单元格边框的宽度，
    只能控制表格最外侧边框的宽度，这个问题如何解决?--后期靠CSS控制。
2.给某个th或td设置了宽度之后，他们所在的那一列的宽度就确定了。
3.给某个th或td设置了高度之后，他们所在的那一行的高度就确定了。

常用的几个标签

标签名	标签含义	单/双标签
br	换行	单
hr	分隔	单
pre	按原文显示(一般用于在页面中嵌入大段代码)	双

注意点:

1.不要用<br>来增加文本之间的行间隔，应使后面即将学到的 CSS margin 属性。
2.<hr>的语义是分隔，如果不想要语义，只是想画一条水平线，那么应当使用 CSS 完成。

表单

基本结构

简单梳理:

标签名	标签语义	常用属性	单/双标签
form	表单	action :用于指定表单的提交地址(需要与后端人员沟通后确定)。 target:用于控制表单提交后，如何打开页面，常用值如下: 1._self :在本窗口打开。 2._blank :在新窗口打开。 method:用于控制表单的提交方式，暂时只需了解，在后面Ajax的课程中，会详细讲解。	双
input	输入框	type : 设置输入框的类型，目前用到的值是text，表示普通文本。 name:用于指定提交数据的名字，(需要与后端人员沟通后确定)。	单
button	按钮	本小节暂不涉及	双

在本小节，我们先记住表单的整体形式，稍后会对表单控件进行详细讲解。

示例代码:

<form action="https://www.baidu.com/s" target="_blank" method="get">
<input type="text" name="wd">
<button>去百度搜索</button>
</form>

常用表单控件

文本输入框

<input type="text">

常用属性如下:
name属性:数据的名称。
value属性:输入框的默认输入值。
maxlength 属性:输入框最大可输入长度。

密码输入框

<input type="password">

常用属性如下:
name属性:数据的名称。
value属性:输入框的默认输入值(一般不用，无意义)。
maxlength属性:输入框最大可输入长度。

单选框

<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男

常用属性如下:
name属性:数据的名称，注意:想要单选效果，多个radio的 name属性值要保持一致。
value属性:提交的数据值。
checked 属性:让该单选按钮默认选中。

复选框

<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头

常用属性如下::
name属性:数据的名称。
value属性:提交的数据值。
checked属性:让该复选框默认选中。

隐藏域

<input type="hidden" name="tag" value="100">

用户不可见的一个输入区域，作用是:提交表单的时候，携带一些固定的数据。
name属性:指定数据的名称。
value属性:指定的是真正提交的数据。

提交按钮

<input type="submit" value="点我提交表单">
<button>点我提交表单</button>

注意:
1. button 标签 type 属性的默认值是 submit。
2. button不要指定name属性
3. input标签编写的按钮，使用value属性指定按钮文字。

重置按钮

<input type="reset" value="点我重置">
<button type="reset">点我重置</button>

注意点:
1. button不要指定name属性
2. input标签编写的按钮，使用value属性指定按钮文字。

普通按钮

<input type="button" value="普通按钮">
<button type="button">普通按钮</button>

注意点:普通按钮的type值为button，若不写type值是submit 会引起表单的提交。

文本域

<textarea name="msg"rows="22"cols="3">我是文本域</textarea>

常用属性如下:
1. rows 属性:指定默认显示的行数，会影响文本域的高度。
2. cols属性:指定默认显示的列数，会影响文本域的宽度。
3.不能编写type属性，其他属性，与普通文本输入框一致。

下拉框

<select name="from">
    <option value="黑">黑龙江</option>
    <option value="辽">辽宁</option>
    <option value="吉">吉林</option>
    <option value="粤"selected>广东</option>
</select>

常用属性及注意事项:
1. name属性:指定数据的名称。
2. option标签设置 value属性，如果没有 value属性，提交的数据是option 中间的文字;如果设置
了value属性，提交的数据就是value的值(建议设置 value属性)
3. option 标签设置了selected属性，表示默认选中。

禁用表单控件

给表单控件的标签设置disabled既可禁用表单控件。

input、 textarea、 button、 select、 option 都可以设置 disabled 属性
label标签

label标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。两种与label关联方式如下:
```
 1.让label标签的for属性的值等于表单控件的id。
 2.把表单控件套在 label标签的里面。
```
fieldset与legend 的使用(了解) fieldset可以为表单控件分组、legend 标签是分组的标题。示例：

<fieldset>
    <legend>主要信息</legend>
    <label for="zhanghu">账户: </label>
    <input id="zhanghu" type="text" name="account" maxlength="10"><br>
    <label>
        密码:<input id="mima" type="password" name="pwd" maxlength="6">
    </label>
    <br>性别:
    <input type="radio" name="gender" value="male" id="nan">
    <label for="nan">男 </label>
    <label>
        <input type="radio" name="gender" value="female" id="nv">女
    </label>
</fieldset>

框架标签

标签名	功能和语义	属性	单/双标签
iframe	框架(在网页中嵌入其他文件)	name :框架名字，可以与 target属性配合。 width:框架的宽。 height:框架的高度。 frameborder:是否显示边框，值:0或者1。	双

iframe标签的实际应用:

在网页中嵌入广告。
与超链接或表单的 target 配合，展示不同的内容。

HTML字符实体

在HTML中我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，就是HTML实体。比如小于号用于定义HTML标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在HTML源码中插入字符实体。

字符实体由三部分组成:一个&和一个实体名称(或者一个#和一个实体编号)，最后加上一个分号;。

常见字符实体总结:

HTML全局属性

常用的全局属性:

属性名	含义
id	给标签指定唯一标识，注意: id是不能重复的。作用:可以让label标签与表单控件相关联;也可以与 CSS、 JavaScript 配合使用。注意:不能在以下HTML元素中使用: `<head>、<html>、<meta>、<script>、<style>、<title>`
class	给标签指定类名，随后通过CSS 就可以给标签设置样式。
style	给标签设置CSS样式。
dir	内容的方向，值:ltr、rtl。注意:不能在以下 HTML 元素中使用: `<head>、<html>、<meta>、<script>、<style>、<title>.`
title	给标签设置一个文字提示，一般超链接和图片用得比较多。
lang	给标签指定语言，具体规范和可选值请参考[10. HTML设置语言]。注意:不能在以下 HTML元素中使用: `<head>、<html>、<meta>、<script>、<style>、<title>.`

完整的全局列表，请参考:全局属性-HTML(超文本标记语言)|MDN

meta元信息

1、配置字符编码

<meta charset="utf-8">

2.针对IE浏览器的兼容性配置。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

3.针对移动端的配置(移动端课程中会详细讲解)

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

4、配置网页关键字

<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语"”>

5、配置网页描述信息

<meta name="description" content="80字以内的一段话，与网站内容相关">

6.针对搜索引擎爬虫配置:

<meta name="robots" content="此处可选值见下表”>

值	描述
index	允许搜索爬虫索引此页面。
noindex	要求搜索爬虫不索引此页面。
follow	允许搜索爬虫跟随此页面上的链接。
nofollow	要求搜索爬虫不跟随此页面上的链接。
all	与index, follow等价
none	与 noindex, nofollow等价
noarchive	要求搜索引擎不缓存页面内容。
nocache	noarchive的替代名称。

7.配置网页作者:

<meta name="author" content="tony">

8.配置网页生成工具

<meta name="generator" content="Visual Studio Code">

9.配置定义网页版杈信息:

<meta name="copyright" content="2023-2027@版权所有">

10.配置网页自动刷新

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