第一部分：HTML
目录
1、HTML初识
1.1、标签
1.2、HTML代码基本结构
1.3、标签的层次结构
1.4、快速生成代码框架
2、HTML常见标签
2.1、注释
2.2、标题标签
2.3、段落标签
2.4、换行标签
2.5、格式化标签
2.6、图片标签
2.7、超链接标签
2.8、表格标签
2.8.1、基本使用
2.8.2、合并单元格
2.9、列表标签
2.10、表单标签
2.10.1、form标签
2.10.2、input标签
2.10.3、label标签
2.10.4、select标签
2.10.5、textarea标签
2.11、无语义标签
2.12、特殊字符
Web前端，用来给用户呈现一个一个的网页，一个软件通常情况下是由后端加前端完成的。生活中，基本就以下几种前端页面：
1、Web页面
2、PC端程序页面
3、移动端APP页面
等等。
HTML是运行在浏览器上的。
1、HTML初识
HTML是一个超文本标记语言。
超文本：支持文本、声音、图片、视频、表格、链接等数据。
标记：由许许多多的标签组成。
1.1、标签
HTML代码是由“标签”构成的。例如：
<body>hello</body>1、标签名放到< > 中。例如<body>。
2、大部分标签成对出现。<body> 为开始标签，</body> 为结束标签。
3、少数标签只有开始标签，称为 "单标签"。例如：<br/>
4、开始标签和结束标签之间， 写的是标签的内容，例如hello。
5、开始标签中可能会带有 "属性"，id 属性相当于给这个标签设置了一个唯一的标识符。例如：
<body id="myId">hello</body>1.2、HTML代码基本结构
<html><head><title>第一个页面</title></head><body>hello world</body>
</html>1、html 标签是整个 html 文件的根标签(最顶层标签)。
2、head 标签中写页面的属性。
3、body 标签中写的是页面上显示的内容。
4、title 标签中写的是页面的标题。
1.3、标签的层次结构
1、父子关系。
2、兄弟关系。
例如：在上面的代码中，head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)。title 是 head 的子标签，head 是 title 的父标签。head 和 body 之间是兄弟关系。所有的标签都是html的子标签。
标签之间的结构关系，构成了一个 DOM 树（DOM 是 Document Object Mode (文档对象模型) 的缩写。）每个标签相当于一个对象，程序员可以通过代码拿到这些对象，拿到之后就可以对这些对象进行增删查改。
1.4、快速生成代码框架
在VScode中创建文件xxx.html，直接输入!，按enter键，此时能自动生成代码的主体框架。例如：
<!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>解释：
1、<!DOCTYPE html> 称为 DTD (文档类型定义)， 描述当前的文件是一个 HTML5 的文件（当前我们看到的网页基本上都是HTML5）。
2、<html lang="en"> 其中 lang （是language的缩写），en（是English的缩写）属性表示当前页面是一个 "英语页面"， 这里暂时不用管(有些浏览器会根据此处的声明提示是否进行自动翻译)。
3、<meta charset="UTF-8"> 描述页面的字符编码方式，没有这一行可能会导致中文乱码。这个就是告诉浏览器解码规则。编码规则就是在VScode右下角默认的UTF-8。
4、<meta name="viewport" content="width=device-width, initial-scale=1.0">
name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域。
content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽，并设置初始缩放为不缩放(这个属性对于移动端开发更重要一些)。
2、HTML常见标签
2.1、注释
注释不会显示在界面上，目的是提高代码的可读性。例如：
<!-- 我是注释 -->ctrl + /：快捷键可以快速进行注释或取消注释。
注释的原则：要和代码逻辑一致，尽量使用汉语，不要传递负能量。
2.2、标题标签
有六个，从 h1 到 h6，数字越大，则字体越小。例如：
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>2.3、段落标签
p 标签表示一个段落。例如：
<p>这是一个段落</p>注意：
1、p 标签之间存在一个空隙。
2、当前的 p 标签描述的段落，前面还没有缩进(未来 CSS 会讲)。
3、自动根据浏览器宽度来决定排版。
4、html 内容首尾处的换行，空格均无效。
5、在html中文字之间输入的多个空格只相当于一个空格。
6、html中直接输入换行不会真的换行，而是相当于一个空格。
2.4、换行标签
br 是 break 的缩写，表示换行。例如：
<br/>1、br 是一个单标签(不需要结束标签)。
2、br 标签不像 p 标签那样带有一个很大的空隙。
3、<br/>是规范写法，不建议写成<br>。
例如：html01.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><!-- 这是注释 --><!-- 可以使用ctrl+/来进行快速注释 --><!-- 标题标签 --><h1>标题1</h1><h2>标题2<h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6><!-- 段落标签 --><p>css中的1px并不等于设备的1px</p><p>在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于这点，在文章后面的部分还会讲到。</p><p>在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在些许的兼容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章。</p> <!-- 换行标签 --><p>在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。<br/>后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。<br>其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。</p></body>
</html>2.5、格式化标签
1、加粗：strong 标签 和 b 标签。
2、倾斜：em 标签 和 i 标签。
3、删除线：del 标签 和 s 标签。
4、下划线：ins 标签 和 u 标签。
注：前面的这些标签和他对应的后面的标签的区别是前面的这些标签还起到强调的作用，通过强调就可以让爬虫获取当前的文本。
例如：
<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>em 倾斜</em>
<i>i 倾斜</i>
<del>del 删除线</del>
<s>s 删除线</s>
<ins>ins 下划线</ins>
<u>u 下划线</u>使用 CSS 也可以完成类似的效果，实际开发中以 CSS 方式为主。
2.6、图片标签
img 是图片标签，必须带有 src 属性，表示图片的路径。img 标签中的其他属性：
1、alt：替换文本。当图片不能正确显示的时候，会显示一个替换的文字。
2、title：提示文本。鼠标放到图片上, 就会有提示。
3、width 和 height：控制宽度高度。高度和宽度一般改一个就行，另外一个会等比例缩放，否则就会图片失衡。
4、border：边框。也就是给图片加一个框。但是一般使用 CSS 来设定。
注意：
1、属性可以有多个，不能写到标签之前。
2、属性之间用空格分割，可以是多个空格，也可以是换行。
3、属性之间不分先后顺序。
4、属性使用 "键值对" 的格式来表示。（也就是前面是属性名，后面是属性值，中间使用“=”号连接，相当于key和value的形式）。
例如：
<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px" border="5px">其中 border 中的值越大，边框就越大；width/height 的值越大，图片也就越大。
例如：html02.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><!-- 格式化标签 --><strong>strong 加粗</strong><b>b 加粗</b><em>em 倾斜</em><i>i 倾斜</i><del>del 删除线</del><s>s 删除线</s><ins>ins 下划线</ins><u>u 下划线</u><!-- 图片标签 --><br/><img src="./中国风国潮群山水墨背景.gif">相对路径<br/><img src="C:\Users\15997\Desktop\html_css_javascript\中国风国潮群山水墨背景.gif">绝对路径<br/><img src="https://img.shetu66.com/2023/07/04/1688452147066774.png">网路路径<br/><img src="123456" alt="图片展示出错" title="这是一张不能显示的图片">故意制造的错误路径<br/><img src="https://img.shetu66.com/2023/07/04/1688452147066774.png" width="500px" height="300px" border="10px">改变图片大小，加边框<br/></body>
</html>2.7、超链接标签
a是超链接标签。
href：必须具备的属性，表示点击后会跳转到哪个页面。
target：打开方式。默认是 _self。如果是 _blank 则用新的标签页打开，也就是另起一个页面展示链接所指向的内容，而不是在原来的页面上展示链接所指向的内容。
例如：
<a href="https://www.baidu.com/">百度网址</a>标签中间的“百度网址”就是代表链接进行展示的文字，如果标签中间啥也不写，则展示不出任何效果。
链接的几种形式：
1、外部链接：href 引用其他网站的地址。就比如上面的例子。
2、内部链接：网站内部页面之间的链接。写相对路径即可。例如：在一个目录中，先创建一个 1.html，再创建一个 2.html。
<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>3、空链接：使用 # 在 href 中占位（效果就是不做任何跳转）。例如：
<a href="#">空链接</a>4、下载链接：href 对应的路径是一个文件。 (可以使用 zip 文件)。例如：
<a href="test.zip">下载文件</a>5、网页元素链接：可以给图片等任何元素添加链接(把元素放到 a 标签中)。例如：
<a href="https://www.baidu.com"><img src="https://img.onlinedown.net/download/202012/160049-5fc9ecb16e8a5.png">
</a>6、锚点链接：可以快速定位到页面中的某个位置。例如：
<!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><a href="#one">第一集</a><a href="#two">第二集</a><a href="#three">第三集</a><p id="one">第一集剧情 <br>第一集剧情 <br>...</p><p id="two">第二集剧情 <br>第二集剧情 <br>...</p><p id="three">第三集剧情 <br>第三集剧情 <br>...</p>
</body></html>例如：html03.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><!-- 超链接标签 --><a href="https://www.baidu.com/">百度网址</a><a href="html01.html">跳转到html01页面</a><a href="#">空链接</a><br/><a href="https://www.baidu.com"><img src="https://img.onlinedown.net/download/202012/160049-5fc9ecb16e8a5.png"></a>
</body>
</html>2.8、表格标签
2.8.1、基本使用
1、table 标签：表示整个表格。
2、thead：表格的头部区域(注意和 th 区分，范围是比 th 要大的)。
3、tbody：表格的主体区域。
4、tr：表示表格的一行。
5、td：表示一个单元格。
6、th：表示表头单元格，会居中加粗。
其中，thead和tbody是两个区域，通常将表头放在thead中，内容放到tbody中。
表格标签有一些属性，可以用于设置大小边框等，但是一般使用 CSS 方式来设置。下面的这些属性都要放到 table 标签中：
1、align：是表格相对于周围元素的对齐方式，也就是表格整体在页面中的位置，align="center" (不是内部元素的对齐方式)，还可以设置成为right。
2、border：表示边框，1表示有边框(数字越大，边框越粗)，"" 表示没边框，默认是没有边框的。
3、cellpadding：内容距离边框的距离，默认1 像素。
4、cellspacing：单元格之间的距离，默认为 2 像素。
5、width 和 height：设置尺寸，也就是设置表格的宽度和高度。
例如：
<!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><table align="center" border="2" cellpadding="20" cellspacing="0" width="500" height="500"><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>张三</td><td>男</td><td>10</td></tr><tr><td>李四</td><td>女</td><td>11</td></tr></table>
</body></html>例如：html04.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><table align="center" border="2" cellpadding="20" cellspacing="0" width="500" height="500"><thead><th>姓名</th><th>性别</th><th>年龄</th></thead><tbody><tr><td>张三</td><td>男</td><td>10</td></tr><tr><td>李四</td><td>女</td><td>11</td></tr></tbody></table>
</body></html>2.8.2、合并单元格
1、跨行合并：rowspan="n"（从写代码的那一行向下合并）
2、跨列合并：colspan="n"（从写代码的那一列向右合并）
步骤：先确定跨行还是跨列，找好目标单元格，删除的多余的单元格。
例如：html05.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><!-- 合并单元格 --><table align="center" border="10" cellpadding="20" cellspacing="0" width="500" height="500"><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>张三</td><td colspan="2">男</td></tr><tr><td>李四</td><td>女</td><td>11</td></tr></table><br /><!-- 合并单元格 --><table align="center" border="10" cellpadding="20" cellspacing="0" width="500" height="500"><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>张三</td><td>男</td><td rowspan="2">10</td></tr><tr><td>李四</td><td>女</td></tr></table>
</body></html>2.9、列表标签
主要是用来布局的，整齐好看。
1、无序列表：ul 和 li （其中属性type默认是disc，disc展示的是实心圆点，square展示的是方块，circle展示的是空心圆）。
2、有序列表：ol 和 li （属性type默认是1，1展示数字编号，a表示展示小写字母编号，A表示展示大写英文字母编号，i表示小写罗马数字编号，I表示大写的罗马数字编号；除了type外，还有一个属性是start，表示从什么开始展示）。
3、自定义列表：dl (总标签)，dt (小标题)，dd (围绕标题来说明)。
注意：
1、元素之间是并列关系。
2、ul 和 ol 中只能放 li 不能放其他标签，dl 中只能放 dt 和 dd。
3、li 中可以放其他标签。
4、列表带有自己的样式，可以使用 CSS 来修改。
例如：html06.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><ul type="square"><li>咬人猫</li><li>兔总裁</li><li>阿叶君</li></ul><h3>有序列表</h3><ol type="i" start="2"><li>咬人猫</li><li>兔总裁</li><li>阿叶君</li></ol><h3>自定义列表</h3><dl><dt>我的同学</dt><dd>张三</dd><dd>李四</dd><dd>王五</dd></dl>
</body></html>2.10、表单标签
表单是让用户输入信息的重要途径。用表单标签来完成与服务器的交互。主要有两个部分：
1、表单域：包含表单元素的区域，重点是 form 标签。
2、表单控件：输入框，提交按钮等，重点是 input 标签。
2.10.1、form标签
<form action="">... [form 的内容]</form>其中action里面填写的是服务器的地址。描述了要把数据按照什么方式，提交到哪个页面中。关于 form 需要结合服务器和网络编程来进一步理解，不在此多讲。
2.10.2、input标签
各种输入控件，单行文本框，按钮，单选框，复选框。
1、type(必须有)：取值种类很多，button，checkbox，text，file，image，password，radio等。
2、name：给 input 起了个名字。尤其是对于单选按钮，具有相同的 name 才能多选一。
3、value：input 中的默认值。
4、checked：默认被选中(用于单选按钮和多选按钮)。
5、maxlength：设定最大长度。
文本框，例如：
姓名：<input type="text">密码框，例如：会加密展示
密码：<input type="password">单选框，例如：
性别:<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女注意：单选框之间必须具备相同的 name 属性，才能实现多选一的效果，否则这两个选项可以同时被选上。
复选框，例如：可以选多个
爱好:<input type="checkbox"> 吃饭
<input type="checkbox"> 睡觉
<input type="checkbox">打游戏普通按钮，例如：
<input type="button" value="我是个按钮">当前点击了没有反应，需要搭配 JS 使用。例如：
<input type="button" value="我是个按钮" onclick="alert('hello')">其中onclick的作用就是一旦点击按钮，就会弹出一个hello。
提交按钮，例如：
<form action=""><input type="text" name="username"><input type="submit" value="提交">
</form>注：提交按钮必须放到 form 标签内，点击后就会尝试给服务器发送。
清空按钮，例如：
<form action=""><input type="text" name="username"><input type="submit" value="提交"><input type="reset" value="清空">
</form>注：清空按钮必须放在 form 中，点击后会将 form 内所有的用户输入内容重置。
选择文件，例如：
<form action=""><input type="text" name="username"><input type="submit" value="提交"><input type="reset" value="清空"><input type="file">
</form>点击选择文件，会弹出对话框，选择文件。
例如：html07.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><form action="">姓名：<input type="text"><br />密码：<input type="password"><br />性别:<input type="radio" name="sex">男<input type="radio" name="sex" checked="checked">女<br />爱好:<input type="checkbox"> 吃饭<input type="checkbox"> 睡觉<input type="checkbox">打游戏<br /><input type="button" value="我是个按钮"><br /><input type="button" value="我是个按钮" onclick="alert('hello')"><br /></form><form action=""><input type="text" name="username"><input type="submit" value="提交"><input type="reset" value="清空"><input type="file"></form>
</body></html>2.10.3、label标签
搭配 input 使用，点击 label 也能选中对应的单选或复选框，能够提升用户体验。
for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应(此时点击才是有用的)。
例如：
<label for="male">男</label>
<input type="radio" name="sex" id="male">
<label for="female">女</label>
<input type="radio" name="sex" checked="checked" id="female">2.10.4、select标签
下拉菜单。在option中定义 selected="selected" 表示默认选中。
例如：
<select><option>北京</option><option selected="selected">上海</option>
</select>
注意：默认第一个选项，作为默认选项。例如：
<select><option>--请选择年份--</option><option>1991</option><option>1992</option><option>1993</option><option>1994</option><option>1995</option>
</select>2.10.5、textarea标签
文本域中的内容，就是默认内容，注意，空格也会有影响。
<textarea rows="10" cols="30">默认内容</textarea>当输入的行数超过了rows的行数时，就会出现滚轮效果。
注：rows 和 cols 也都不会直接使用，都是用 css 来改的。
例如：html08.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><!-- label标签 --><label for="male">男</label><input type="radio" name="sex" id="male"><label for="female">女</label><input type="radio" name="sex" checked="checked" id="female"><!-- select标签 --><select><option>北京</option><option selected="selected">上海</option></select><br /><select><option>--请选择年份--</option><option>1991</option><option>1992</option><option>1993</option><option>1994</option><option>1995</option></select><br /><!-- taxtarea标签 --><textarea rows="10" cols="30">默认内容</textarea>
</body></html>2.11、无语义标签
无语义标签就是没有固定的用途，所以拿这样的标签干啥都行。通常会用来进行布局设计。
1、div标签，含义是分割。
2、span标签，含义是跨度。
其中，div 是独占一行的，是一个大盒子；span 不独占一行，是一个小盒子。
例如：
<div><div><span>吃饭</span><span>睡觉</span><span>休息</span></div><div>吃饭</div><div>睡觉</div><div>休息</div>
</div>2.12、特殊字符
有些特殊的字符在 html 文件中是不能直接表示的，例如：
空格：
小于号： <
大于号：>
按位与：&
例如：
<P>这里有四个空格 看看效果如何</P>
<P>这里有四个空格 看看效果如何</P>小于号：< <br />大于号：> <br />按位与：&例如：html09.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><!-- 无语义标签 --><div><div><span>吃饭</span><span>睡觉</span><span>休息</span></div><div>吃饭</div><div>睡觉</div><div>休息</div></div><!-- 特殊字符 --><P>这里有四个空格 看看效果如何</P><P>这里有四个空格 看看效果如何</P>小于号：< <br />大于号：> <br />按位与：&
</body></html>HTML只是描述了页面的骨架结构，使用CSS可以针对页面进行进一步美化，下一篇就会讲CSS。