HTML之所以称为超文本标记语言，不仅是因为他通过标记描述网页内容，同时也由于文本中包含了所谓的“超级链接”点。通过超链接将网站与网页以及各种网页元素链接起来，构成了丰富多彩的Web页面HTML之所以称为超文本标记语言，不仅是因为他通过标记描述网页内容，同时也由于文本中包含了所谓的“超级链接”点。通过超链接将网站与网页以及各种网页元素链接起来，构成了丰富多彩的Web页面

发展史：

HTML创始人（蒂姆·伯纳斯-李）

蒂姆·伯纳斯-李除了是HTML的创始人，还是w3c组织(万维网联盟)的主席

目前使用的是HTML5版本

二、互联网原理

1、基础概念及原理

互联网原理：上网即请求数据
HTML：制作网页文件
上网时，用户通过客户端发送HTTP请求到服务端，服务端将请求对于的数据找到后，通过HTTP响应，将数据回传给本地计算机，计算机加载网页
上网过程中有实际的、物理文件的传输

(1)服务器（server）

本质：是一种计算机，有自己的内存和处理器
作用：用来存储网页文件，包含网页的所有文件，比如HTML、css、js、图片、视频、音频等
可以通过客户端软件远程控制服务器，为保证用户随时访问，需保证24小时不关机

(2)浏览器（browser）

作用：发送HTTP请求，接收回传的数据，渲染网页
浏览器根据厂商和版本的不同，区分为不同的品牌版本
主流浏览器：chrome（谷歌）、Firefox（Mozilla）、IE（微软）、opera（欧朋）、safari（苹果）
工作原理：在网址栏输入网址后向服务器发送请求，服务器响应后返回数据到浏览器后渲染
第一次加载一个网页时时间较长，但是会将大部分文件存储到本地，所以第二次访问相同的网站的速度会变快，因为会先从本地进行查找

(3)HTTP协议

http是无连接的,每一次都需要重新连接

一次浏览器的请求过程

浏览器通过 DNS 把域名解析成对应的IP地址；
根据这个 IP 地址在互联网上找到对应的服务器，建立连接；
客户端向服务器发送HTTP协议请求包，请求服务器里的资源文档；
在服务器端，实际上还有复杂的业务逻辑比如服务器可能有多台，到底指定哪台服务器处理请求。都需要一个负载均衡设备来平均分配所有用户的请求，还有请求的数据是存储在分布式缓存里还是一个静态文件中，或是在数据库里，完成以上操作之后，服务器将相应的数据资源返回给浏览器
客户端与服务器断开。由客户端解析HTML文档，在客户端屏幕上渲染图形结果

(4)纯文本和超文本之间的区别

纯文本：纯文本只包含文字内容，不能包含文字以外的，例如图片、视频等，不能传输文字样式，常见的纯文本格式文件.txt,.html,.css,.js。

超文本：超文本文件是一种含有特殊标记的文本文件，其作用类似于word中的排版标记，常用格式.doc，.ppt

在不同格式文件中输入相同的内容,但是其大小不同的原因是,纯文本文件只储存文字的,但是超文本文件比如word中有很多预存的格式或字体等

三、开发工具的使用

1、基础介绍

所有的纯文本编辑器都能编辑HTML文件.例如记事本等

目前市场上活跃度高的代码编辑器

2、code使用

①安装

code无需购买安装简便所有使用code进行学习

code官网:https://code.visualstudio.com/

下载安装后是英文版本,可安装中文插件汉化及常用必备插件:Elm Emmet、HTML CSS Support、HTML Snippets、Sublime Text Keymap and Settings Importer

② 基本使用

直接在页面输入html:5之后会直接给出HTML5的骨架

②快捷键

四、HTML骨架

1、DTD

即骨架中的第一行,DTD（Document Type Definition，文本类型定义），必须出现在第一行。让浏览器知道是什么格式的文件

<!>,表示警示标签
DOCTYPE表示文档类型,html就是HTML超文本标记语言

2、关于html标签

整个网页必须被<html></html>包裹，它里面有<head></head>和<body></body>两部分。

<head></head> ：网页的配置,比如配置文件的字符集,配置文件的关键字等
<body></body> ：网页的正式内容，浏览器可视区域,书写代码的地方

标签有一个属性lang，是英语language语言的意思，表示整个网页的主体语言。

en表示英语。中文的表示法有三种。zh、cn、zh-CN。

需要注意的是，无论哪种语言，都使用英文开发。

<html lang="en">
<heml lang="zh-CN">

3、字符集

在head标签对儿中，是一个个文件的配置。几乎所有的配置都是写在meta标签中的。

meta就是“元”的意思，表示基本配置。

首先是配置字符集：

<meta charset="UTF-8">　　　　
<meta charset="gb2312">
<meta charset="gbk">
#charset是英语character set即文字集合的意思

什么是字符集呢？

在计算机中所有的字实际上都是按某种规律排列而成。这个规律是什么呢？不同的字符集有不同的规律。

不同字符集中的字，在计算机内部表达不一样的：

gbk是gb2312的升级版

不同字符集的使用场景:如果你的网页使用场景是面向群体是国际化的，使用utf-8，比如中华网；如果面向群体主要是国内，使用gbk比如腾讯网

修改字符集

若要将gbk修改为UTF-8

4、视口标签

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

如果不加这个视口，手机看这个网页是“俯瞰”模式，将以980px宽度俯瞰页面;如果加上这个视口，手机看网页就是“APP”模式，将以APP的状态、字号看页面。

5、浏览器私有设置

edge是win10中的IE升级版浏览器，这句话的意思表示设置兼容性为让edge和ie渲染方式一样。

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

类似的还有一些“双核浏览器”比如360浏览器、QQ浏览器、搜狗高速浏览器、百度浏览器、猎豹浏览器等，都可以加上这句话，表示尽可能的用高级核打开页面：

<meta name="renderer" content="webkit">

6、title标签

title就是在浏览器选项卡的区域显示的文字：

7、keywords关键字

SEO（search engine optimization，搜索引擎优化）

最基本的SEO技术就是把keywords写好。keywords就是网页关键字。

name属性一定要设置为keywords，content就是关键字的内容，中间用逗号隔开

8、description页面描述

页面描述就是搜索引擎搜到你之后，展示的文字

<meta name="description" content=" 网页的描述" />

以腾讯网为例，看到源码，keywords和description

五、HTML基本语法

1、标签

标签必须书写在一对尖括号内部<>
标签分为单标签和双标签，双标签必须成对出现，有开始标签和结束标签；

双标签，是指由开始和结束两个标签符号组成的标签，语法“<标签名>内容</标签名>”；常见双标签有html、head、body、body、body、div、p。2

单标签，是指用一个标签符号即可完整的描述某个功能的标签，语法“<标签名 />”；常见单标签有br、hr、img、input、link、meta。
结束标签必须要有关闭符号/
根据标签内部存放的内容不同，将不同的标签分为两个级别

根据标签的种类区分为两个标签，分别是容器级和文本级

容器级：元素内部除了可以存放文本之外，还可以嵌套标签

文本级：元素内部只能存放文本或者文本级标签

容器级标签	文本级标签
div,ol,ul,li,dl,dt,dd,h1-h6	span,img,b,u,i

2、标签属性

标签属性是标签身上的一些特殊性质，通俗讲，给标签加上某个属性就相当于给标签赋予了这些职能，但是前提是标签本身就具备这些职能

书写位置：在开始标签或单标签的标签名后面，添加一个空格，空格后面书写属性
属性以键值对的方式呈现，包含属性名（key）和属性值（value）两部分，习惯将属性写法称为键值对写法，标签属性的键值对写法是：k=”v”

<a href="www.baidu.com" title="我是title"></a>
#多个属性之间用空格隔开

3、标签之间对空白换行缩进不敏感

文字的位置不会根据书写标签位置决定，而是根据标签的种类决定

标签与其他标签之间对空白、换行、缩进等不敏感，有没有空白不影响浏览器加载效果
HTML语法中，认识标签的开始和结束，不论有没有换行都只认标签开始结束
标签之间还认识嵌套关系
在书写过程中，为了让代码是容易解读的，建议进行合理的换行和缩进
在上传代码过程中，为了提高传输速度，可以将代码进行压缩，删除多余的空白，目的就是问了压缩文件的大小

4、文本的空白折叠现象

在普通文字之间，如果有空格、换行、缩进导致的空白，在浏览器中加载时会被折叠成一个空格显示，这就是空白折叠现象

一些空白要想在浏览器中正常显示，需要使用一些替换写法书写不同的空白。

空格：可以使用字符实体替换书写，在代码中书写 替换空格

换行：可以使用br单标签进行书写

<body>
    12                         3
</body>

如果需要给文本增加多个空格需要使用字符实体 

<body>
    12&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3
</body>

六、HTML常见标签

1、h系类标签（headline标题）

包含一共六级标题，有h1,h2,h3,h4,h5,h6；都是双标签，容器级标签；

作用：给内部内容添加对应级别标题的语义

标签根据重要性不同，认为权重不同，所有的标题标签的权重都比别的标签要高

<body>
    <h1>我是h1标签</h1>
    <h2>我是h2标签</h2>
    <h3>我是h3标签</h3>
    <h4>我是h4标签</h4>
    <h5>我是h5标签</h5>
    <h6>我是h6标签</h6>
</body>

从我们对文本的定义来讲，权重就是文本的权重，比如设置h标签的文字就富裕了标题的语义

如果从浏览器的角度去考虑，他的权重在搜索引擎的优化，搜索引擎的优化除了会抓取meta标签配置的keywords之外还会优先抓取标题的内容，h1标签的权重是最高的，一个页面只使用一个h1，通常用来制作网页的logo，如果在页面设置多个h1标签，搜索引擎会认为是在作弊，而降低排名

2、p标签（paragraph（段落））

双标签，文本级标签

作用：添加一个完整段落的语义

基本使用：

3、img标签（image）

单标签，文本级标签

作用：在指定位置插入一张图

image标签的属性：

1) src: 作用是引入图片的路径（图片存放路径必须是在html文件的存放路径下）

2) alt: 图片加载不出来时候的替换文本

3) width: 设置图片的宽度

4) height: 设置图片的高度

实际工作中宽度和高度并不会共同使用，因为如果只单独设置一个属性比如宽度，高度会等比例进行缩放

（5）border：作用是给图片添加边框

图片的border属性用来了解就可以了，因为我们真正加边框的时候是通过CSS实现的，因为边框不可能只有黑色

<body>
    <img src="3.png" alt="实例" width="220px" title="测试" border="10" >
    <img src="2.png" alt="出错啦">
</body>

4、相对路径

相对路径：从html文件出发，找到对应图片位置的路径

如果进入到某个文件夹使用‘/’，如果出某个文件夹使用‘../’

5、绝对路径

绝对路径重要分为盘符绝对地址，和网站的绝对地址

盘符绝对地址

<img src="C:/Users/lmpc/Desktop/1.jpg" alt="">

通过c盘根目录出发去查找你对应文件位置，工作中不使用这种方法，因为服务器没有c盘...这些目录

网站的绝对地址

<img src="https://bkimg.cdn.bcebos.com/pic/472309f79052982253a702cad8ca7bcb0a46d426?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg" alt="">

6、锚点<a></a> (anchor)

双标签，文本级标签

作用：在指定位置添加一个超级链接，从而实现相应的跳转

a标签属性（给超级链接添加相应的作用）：

1) href: 英文hypertext reference （超文本引用）

<body>
    <a href="http://www.baidu.com">百度</a>
</body>

可点击百度跳转

上面的代码href属性跳转到百度网站，这个是绝对路径，我们也可以设置相对路径跳转

<body>
    <a href="7_标签跳转.html" >跳转相对路径文件</a>
</body>

（2）target：作用是是否在新的标签页打开链接，值一定是“_blank”

<body>
    <a href="7_标签跳转.html" target="_blank" >跳转相对路径文件</a>
</body>

(3)title属性：作用是鼠标移上文字之后的悬停文本

<body>
    <a href="7_标签跳转.html" target="_blank" title="悬停文本">跳转相对路径文件</a>
</body>

页面锚点的使用

锚点的作用：实现点击超级链接从而实现页面内的跳转

有两种方法：

方法一

设置一个空锚点，然后给这个空锚点设置一个name属性值和锚的href属性是一的

锚，href属性，后面一定要加#号

<a href="#bt1">标题一</a>

锚点的点，name属性设置被跳转的点

 <a name="bt1"></a>

<body>
    <h2>周杰伦</h2>
    <a href="#bt1">标题一</a>
    <a href="#bt2">标题二</a>
    <a href="#bt3">标题三</a>
    <h3>标题一</h3>
    <a name="bt1"></a>
    <p>周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，祖籍福建省泉州市永春县，中国台湾流行乐男歌手、原创音乐人、演员、导演等，毕业于淡江中学。
        2000年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格 [1]  。2002年举行“The One”世界巡回演唱会 [2]  。2003年成为美国《时代周刊》封面人物 [3-4]  。2004年获得世界音乐大奖中国区最畅销艺人奖 [5]  。2005年凭借动作片《头文字D》获得台湾电影金马奖、香港电影金像奖最佳新人奖 [6]  。2006年起连续三年获得世界音乐大奖中国区最畅销艺人奖 [7]  。2007年自编自导的文艺片《不能说的秘密》获得台湾电影金马奖年度台湾杰出电影奖 [8]  。
        周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，祖籍福建省泉州市永春县，中国台湾流行乐男歌手、原创音乐人、演员、导演等，毕业于淡江中学。
        2000年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格 [1]  。2002年举行“The One”世界巡回演唱会 [2]  。2003年成为美国《时代周刊》封面人物 [3-4]  。2004年获得世界音乐大奖中国区最畅销艺人奖 [5]  。2005年凭借动作片《头文字D》获得台湾电影金马奖、香港电影金像奖最佳新人奖 [6]  。2006年起连续三年获得世界音乐大奖中国区最畅销艺人奖 [7]  。2007年自编自导的文艺片《不能说的秘密》获得台湾电影金马奖年度台湾杰出电影奖 [8]  。
        2008年凭借歌曲《青花瓷》获得第19届金曲奖最佳作曲人奖。2009年入选美国CNN评出的“25位亚洲最具影响力的人物” [9]  ，同年获得第20届金曲奖最佳国语男歌手奖 [10]  。2010年入选美国《Fast Company》评出的“全球百大创意人物” [11]  。2011年再度获得金曲奖最佳国语男歌手奖，并且第4次获得金曲奖最佳国语专辑奖；同年主演好莱坞电影《青蜂侠》 [12]  。2012年登福布斯中国名人榜榜首 [13]  。
        周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，祖籍福建省泉州市永春县，中国台湾流行乐男歌手、原创音乐人、演员、导演等，毕业于淡江中学。
        2000年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格 [1]  。2002年举行“The One”世界巡回演唱会 [2]  。2003年成为美国《时代周刊》封面人物 [3-4]  。2004年获得世界音乐大奖中国区最畅销艺人奖 [5]  。2005年凭借动作片《头文字D》获得台湾电影金马奖、香港电影金像奖最佳新人奖 [6]  。2006年起连续三年获得世界音乐大奖中国区最畅销艺人奖 [7]  。2007年自编自导的文艺片《不能说的秘密》获得台湾电影金马奖年度台湾杰出电影奖 [8]  。
        2008年凭借歌曲《青花瓷》获得第19届金曲奖最佳作曲人奖。2009年入选美国CNN评出的“25位亚洲最具影响力的人物” [9]  ，同年获得第20届金曲奖最佳国语男歌手奖 [10]  。2010年入选美国《Fast Company》评出的“全球百大创意人物” [11]  。2011年再度获得金曲奖最佳国语男歌手奖，并且第4次获得金曲奖最佳国语专辑奖；同年主演好莱坞电影《青蜂侠》 [12]  。2012年登福布斯中国名人榜榜首 [13]  。
        周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，祖籍福建省泉州市永春县，中国台湾流行乐男歌手、原创音乐人、演员、导演等，毕业于淡江中学。
        2000年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格 [1]  。2002年举行“The One”世界巡回演唱会 [2]  。2003年成为美国《时代周刊》封面人物 [3-4]  。2004年获得世界音乐大奖中国区最畅销艺人奖 [5]  。2005年凭借动作片《头文字D》获得台湾电影金马奖、香港电影金像奖最佳新人奖 [6]  。2006年起连续三年获得世界音乐大奖中国区最畅销艺人奖 [7]  。2007年自编自导的文艺片《不能说的秘密》获得台湾电影金马奖年度台湾杰出电影奖 [8]  。
        2008年凭借歌曲《青花瓷》获得第19届金曲奖最佳作曲人奖。2009年入选美国CNN评出的“25位亚洲最具影响力的人物” [9]  ，同年获得第20届金曲奖最佳国语男歌手奖 [10]  。2010年入选美国《Fast Company》评出的“全球百大创意人物” [11]  。2011年再度获得金曲奖最佳国语男歌手奖，并且第4次获得金曲奖最佳国语专辑奖；同年主演好莱坞电影《青蜂侠》 [12]  。2012年登福布斯中国名人榜榜首 [13]  。
    </p>
<h3>标题二</h3>
<a name="bt2"></a>
<p>2008年凭借歌曲《青花瓷》获得第19届金曲奖最佳作曲人奖。2009年入选美国CNN评出的“25位亚洲最具影响力的人物” [9]  ，同年获得第20届金曲奖最佳国语男歌手奖 [10]  。2010年入选美国《Fast Company》评出的“全球百大创意人物” [11]  。2011年再度获得金曲奖最佳国语男歌手奖，并且第4次获得金曲奖最佳国语专辑奖；同年主演好莱坞电影《青蜂侠》 [12]  。2012年登福布斯中国名人榜榜首 [13]  。2014年发行华语乐坛首张数字音乐专辑《哎呦，不错哦》 [14]  。2019年起举行“嘉年华”世界巡回演唱会 [15]</p>
<h3>标题三</h3>
<a name="bt3"></a>
<p>2001年9月，周杰伦发行了第二张专辑《范特西》，他除了担任专辑的制作人外，还包办了专辑中所有歌曲的作曲；该专辑是周杰伦确立其唱片风格的作品，其中结合中西方音乐元素的主打歌《双截棍》成为饶舌歌曲的代表作之一 [32-33]  ；该专辑发行后也让周杰伦打开东南亚市场 [32]  ，并于次年获得第13届台湾金曲奖最佳专辑制作人奖、最佳作曲人奖、最佳流行音乐专辑奖以及香港唱片销量大奖颁奖典礼十大销量国语唱片等奖项 [34]  ；10月，为李玟创作融合中西方音乐元素的歌曲《刀马旦》 [35]  ；12月24日，发行EP《Fantasy + Plus》，收录了他在桃园巨蛋演唱会上演唱的《你比从前快乐》、《世界末日》等歌曲；同年，获得第19届十大劲歌金曲颁奖典礼最受欢迎唱作歌星金奖、叱咤乐坛流行榜颁奖典礼叱咤乐坛生力军男歌手金奖等奖项</p>
</body>

方法二

设置锚点的点为标签的id属性

<a href="#bt1">标题一</a>

锚点的点：由原来的a标签的name属性变为了其他标签id属性，id属性的值要和href一样

<h3 id="bt1">标题一</h3>

七、列表

列表通常是一组标签组成

1、无序标签

作用：定义一个没有顺序的标签列表

由两个标签组成，ul（容器标签），li(容器级)

ul：英文unordered list（无序列表）

li：英文list item（列表项）

无序列表的基本使用

<body>
    <h2>古典四大名著</h2>
    <ul>
        <li>三国演义</li>
        <li>水浒传</li>
        <li>红楼梦</li>
        <li>水浒传</li>
    </ul>
</body>

注意：

需要在ul里面嵌套li，他们是子级和父级的关系
ul标签的内部必须只能嵌套li，但是li内部可以嵌套任何标签，甚至是ul
但是若强行在ul标签里面嵌套别的标签也是可以的，只是不规范，可能会出现这样或那样的问题

列表扩展，li标签内部可以继续嵌套列表结构

<body>
    <h2>四大名著</h2>
<ul>
    <li>
        <h3>西游记</h3>
        <ul>
            <li>唐僧</li>
            <li>孙悟空</li>
            <li>猪八戒</li>
            <li>沙悟净</li>
        </ul>
    </li>
    <li>
        <h3>水浒传</h3>
        <ul>
            <li>宋江</li>
            <li>武松</li>
            <li>林冲</li>
            <li>卢俊义</li>
        </ul>
    </li>
    <li>
        <h3>红楼梦</h3>
        <ul>
            <li>林黛玉</li>
            <li>薛宝钗</li>
            <li>王熙凤</li>
            <li>贾宝玉</li>
        </ul>
    </li>
    <li>
        <h3>三国演义</h3>
        <ul>
            <li>刘备</li>
            <li>曹操</li>
            <li>孙权</li>
            <li>张飞</li>
        </ul>
    </li>

</body>

无序列表项之间没有先后顺序之分的，列表项之前的前缀样式是有css去控制的，目前只负责结构的搭建

2、有序列表

作用：定义一个有序列表的列表结构

需要两个标签组成ol和li

ol：英文ordered list（有序列表）

li：英文list item（列表项）

ol与ul一样，是在ol的内部嵌套li，他们是父子关系

规定：ul标签的内部必须只能嵌套li，li标签的内部可以嵌套任何标签，甚至是ul

基本使用：

<body>
    <h2>乐队排名表</h2>
    <ol>
        <li>新裤子</li>
        <LI>康姆士</LI>
        <li>刺猬</li>
        <li>五条人</li>
    </ol>
</body>

ol标签的嵌套

<body>
  <h2>著名景点排行榜</h2>
  <ol>
    <li>      
        <h3>北京</h3>
        <ol>
        <LI>故宫</LI>
        <li>颐和园</li>
    </ol>
    </li>
    <li>
        <h3>西安</h3>
        <ol>
        <li>大雁塔</li>
        <li>城墙</li>
    </ol>
    </li>
  </ol>
</body>

ol和ul最大的区别就是使用场景，一个是有序，一个是无序

实际使用场景

ul标签嵌套li标签：

ol标签嵌套li标签：

3、定义列表

作用：定义一个标题和内容自定义的列表结构

组成：由三个标签组成，dl、dt、dd

dl英文：definition list 表示创建一个自定义列表结构

dt英文：definition term定义主题或者定义术语，表示一个列表的主题

dd英文：definition description 定义解释项，表示解释和说明前面的主题内容

dl内部只能存放dt和dd，dt和dd是同级关系

<body>
    <h2>当季新品</h2>
    <dl>
   
        <dt>女装</dt>
        <dd>特点：材质柔软，偏小</dd>
        <dd>类别：裙装</dd>
        <dd>风格：小香风</dd>

        <dt>男装</dt>
        <dd>特点:耐穿</dd>
        <dd>类别：牛仔</dd>
        <dd>风格：帅气</dd>  
</dl>
</body>

每个dt主题的后面可以跟0或多个解释的dd，每个dd解释的就是上一个最近的dt

dt和dd都是容器级标签，内部可以存放任意内容

定义列表的使用场景：

我们通过查看京东网站的源码之后发现，dl、dt和dd都是一套标签组成，一个页面有多个dl并不是一个dl内部嵌套多个dt和dd，原因是因为这样会方便搭建布局

下面的定义列表结构是工作中常用的

<body>
    <h2>当季新品</h2>
    <dl>  
    <dt>女装</dt>
        <dd>
        <p>特点：材质柔软，偏小</p>
        <p>类别：裙装</p>
        <p>风格：小香风</p>
        </dd>
    </dl>
    <dl>
        <dt>男装</dt>
        <dd>
        <p>特点:耐穿</p>
        <p>类别：牛仔</p>
        <p>风格：帅气</p>
        </dd>
    </dl>
</body>

八、表格

1、表格基础

表格主要由三个标签组成

table英文：table，作用是定义了一个表格的结构

tr英文是table rows作用定义了表格的行

td英文是table dock作用是定义表格的单元格

关系：table里面嵌套tr，tr里面嵌套td，即table>tr>td

案例：做一个三行四列的表格

<body>
    <table border="1" style="border-collapse: collapse;">
        <tr>
            <td>第一行第1列</td>
            <td>第一行第2列</td>
            <td>第一行第3列</td>
            <td>第一行第4列</td>
        </tr>
        <tr>
            <td>第二行第1列</td>
            <td>第二行第2列</td>
            <td>第二行第3列</td>
            <td>第二行第4列</td>
        </tr>
        <tr>
            <td>第三行第1列</td>
            <td>第三行第2列</td>
            <td>第三行第3列</td>
            <td>第三行第4列</td>
        </tr>
    </table>
</body>

table标签上有两个属性，一个是border=“1”，这个属性是用来设置表格的标签的，如果没有这个属性，标签不显示，第二个属性是style=“border-collapse:collapse”是css样式，作用就是用来合并表格

如果要设置表头可以使用tr-th设置

<tr>
            <th>第1列</th>
            <th>第2列</th>
            <th>第3列</th>
            <th>第4列</th>
        </tr>

2、单元格合并

一部分单元格需要进行跨行跨列合并，可以给对应的td和th标签设置相关的属性

rowspan：上下跨行合并

colspan：左右跨列合并

属性值是数字，数字是几就代表跨几行或者跨几列

案例：

<body>
    <table border="1" style="border-collapse: collapse;">
        <tr>
            <td colspan="2">1</td>
            <td rowspan="2">2</td>
            <td colspan="3">3</td>
            <td>4</td>
        </tr>
        <tr>
            <td rowspan="2">5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td rowspan="2">9</td>
            <td>10</td>
        </tr>
        <tr>
            <td rowspan="2">11</td>
            <td>12</td>
            <td colspan="2">13</td>
            <td rowspan="2">14</td>
        </tr>
        <tr>
            <td>15</td>
            <td>16</td>
            <td>17</td>
            <td colspan="2">18</td>
        </tr>
    </table>
</body>

3、表格分区

一个完整的表格主要包含三个部分：表格标题、表格表头、表格的主体

一个table内部实际还有三个分区标签组成

caption：定义表格的主题

thead：定义表格的头部，内部嵌套tr>th

tbody:定义表格主题，内部嵌套tr>td

<body>
    <table border="1">
        <caption>各地区固定资产投资情况</caption>
        <thead>
            <tr>
                <td rowspan="2">地区</td>
                <td colspan="2">按总量分</td>
                <td colspan="2">按比重分</td>
            </tr>
            <tr>
                <td>自年初累计（亿元）</td>
                <td>去年同期增长（%）</td>
                <td>自年初累计（%）</td>
                <td>去年同期增长（%）</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>全国</td>
                <td>25845</td>
                <td>9.8</td>
                <td>54646</td>
                <td>100.0</td>
            </tr>
            <tr>
                <td>全国</td>
                <td>25845</td>
                <td>9.8</td>
                <td>54646</td>
                <td>100.0</td>
            </tr>
            <tr>
                <td>全国</td>
                <td>25845</td>
                <td>9.8</td>
                <td>54646</td>
                <td>100.0</td>
            </tr>
            <tr>
                <td>全国</td>
                <td>25845</td>
                <td>9.8</td>
                <td>54646</td>
                <td>100.0</td>
            </tr>
            <tr>
                <td>全国</td>
                <td>25845</td>
                <td>9.8</td>
                <td>54646</td>
                <td>100.0</td>
            </tr>
        </tbody>
    </table>

</body>

九、表单元素

表单元素是网页中提供用户进行点击或者输入的控件

1、form标签

form是表单的意思，form是容器标签，内部存放可输入的控件。如果输入的表单需要提交到数据，所有的控件需要被form表单包裹

method：方法，指的是数据提交的方法，属性值是post和get

action：是数据提交的位置

2、input标签

input标签是输入框的一种，但不仅仅只是输入框，通过type属性，可以拓展多功能

input的type属性非常丰富

①输入框

输入框有两个属性：value 和 placeholder

value：设置默认显示的内容，属性值为自定义的内容

placeholder：属性作用是如果没有value的时候提示用户的文字占位符

姓名：<input type="text" placeholder="请输入姓名">

②密码框

通过type值为password设置的，显示效果是输入后通过掩码形式显示的

密码：<input type="password" placeholder="请输入密码">

③单选框

通过type的值为radio设置的，单选按钮都是成组出现的，要想实现一组单选按钮的互斥，需要设置相同的name属性

性别：<input type="radio" placeholder="请选择性别" name="sex">女
     <input type="radio" placeholder="请选择性别" name="sex">男
     <input type="radio" placeholder="请选择性别" name="sex">保密

④复选框

即多选框，通过type值为checkbox设置；复选框可以通过对自身进行多次点击实现选择或者取消；同时也可以选择一个或者多个，建议同一组设置相同的name属性

爱好：<input type="checkbox" placeholder="请选择爱好" name="hobby">篮球
     <input type="checkbox" placeholder="请选择爱好" name="hobby">足球
     <input type="checkbox" placeholder="请选择爱好" name="hobby">乒乓球
     <input type="checkbox" placeholder="请选择爱好" name="hobby">游泳
     <input type="checkbox" placeholder="请选择爱好" name="hobby">健身

单选框和复选框都有默认选择的功能，需要给input标签添加一个checked=“checked”

<input type="checkbox" placeholder="请选择爱好" name="hobby" checked="checked">游泳
<input type="radio" placeholder="请选择性别" name="sex" checked="checked">女

此时我们选择的时候只能点击圆圈或方框才能进行选择，点击文字是不能触发对应单选或者多选框的点击事件的，所以需要label标签去扩大触发范围

<label>
     <input type="radio" placeholder="请选择性别" name="sex" checked="checked">女
</label>

⑤文本域

标签是textarea，之前的input只能输入单行的文本，使用textarea标签可以输入多行文本

textarea是一个双标签，是文本级标签；属性值rows和cols

rows：定义文本域的可视区域有几行，单位是数字

cols：当前行显示的字节数量（以英文为准），单位是数字

placeholder：占位符

此时text area默认是可以通过拖动右下角实现放大或缩小文本域的，如果不希望缩放文本域，可以通过设置style的resize属性值为none，去掉可拖拽区域

 自我介绍：<textarea  cols="40" rows="2" placeholder="请输入自我介绍内容" style="resize: none;"></textarea>

⑥下拉菜单

需要一组标签进行制作，select 和 option

select即选择的意思，表示搭建下拉项

option 是选项的意思，表示搭建下拉项

关系：select>option

设置完成后，显示是默认第一个显示，并不是被选中，使用selected属性，也是selected，即可显示并默认选中

籍贯：<select >
            <option >北京</option>
            <option >上海</option>
            <option >广州</option>
            <option >深圳</option>
            <option selected="selected">贵州</option>
        </select>

十、HTML注释

在代码中的一些特殊的结构，在编辑器中能看到，在浏览器中看不到，这种结构叫做注释，特点是浏览器不加载

作用：

①用来注释代码，添加合理的解释，从而能实现对代码的可读性

<table border="1">
        <!-- 标题部分 -->
        <caption>各地区固定资产投资情况</caption>
        <!-- 表头部分 -->
        <thead>
            <tr>
                <td rowspan="2">地区</td>
                <td colspan="2">按总量分</td>
                <td colspan="2">按比重分</td>
            </tr>

语法为：

快捷键：CTRL + /

②第二个作用是先注释掉一部分不用的代码，便于后期恢复，多用于代码调试

十一、字符实体

w3c手册：https://www.w3school.com.cn/html/html_entities.asp

在网页中普通文字部分，在键盘中是打不出来的，比如我们的版权符号，商标符号等等。还有一种场景就是替代字符，HTML会识别一部分字符

例如以下场景：

浏览器会识别文中的<h1>标签，并单独进行加载；所以可以利用字符实体进行转换

使用字符实体将 < 替换

规定：字符实体以“ & ”符号开头，“ ； ”结尾

实体空格
小于号	<
大于号	>
版权符号	©
注册商标	®
引号	"
和号	&

十二、div和span

div和span都是常用的布局标签，俗称盒子

div：分割跨度大跨度，div是容器标签，双标签，HTML+css又叫div+css；主要作用是进行网页布局的拆分，没有明确的语义

span：小区域小跨度；作用是一个极限小，只适用于文字的跨度划分

作用：分割页面的布局，div指的是跨度布局分割，span是文字分割

原文地址：https://www.cnblogs.com/mykoala6225/p/16915481.html

网安学习-HTML

DTD | 关于html标签 | 字符集 | 视口标签 | 浏览器私有设置 | title标签 | keywords关键字 | description页面描述

标签 | 标签属性 | 标签之间对空白换行缩进不敏感 | 文本的空白折叠现象

h系类标签（headline标题）| p标签（paragraph（段落） ）| img标签（image）| 相对路径 | 绝对路径 | 锚点<a></a> (anchor)

无序标签(ul) | 有序列表（ol) | 定义列表（dl、dt、dd)

表格基础 | 单元格合并 | 表格分区

输入框 | 密码框 | 单选框 | 复选框 | 文本域 | 下拉菜单|

HTML

一、HTML概述及发展史