1.HTML入门
1.1 HTML&CSS&JavaScript的作用
HTML主要用于网页主体结构的搭建。
1.2 什么是HTML
HTML是Hyper Text Markup Language的缩写，意思是超文本标记语言。它的作用是搭建网页结构，在网页上展示内容。HTML5在2008年正式发布，在2012年已形成了稳定的版本，2014年10月28日，W3C发布了HTML5的最终版。
1.3 什么是超文本
HTML文件本质上是文本文件，而普通的文本文件只能显示字符。通过标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义：本身是文本，但是呈现出来的最终效果超越了文本。
1.4 什么是标记语言
HTML是一种标记语言，因为它是由一系列标签组成的，没有常量、变量、流程控制、异常处理、IO等功能。HTML很简单，每个标签都有它固定的含义和确定的页面显示效果。
• 双标签：标签是通过一组尖括号+标签名的方式来定义的。
html
<p>HTML is a very popular fore-end</p>这个例子中使用了一个p标签来定义一个段落，<p>叫开始标签，</p>叫结束标签。开始标签和结束标签一起构成了一个完整的标签。开始标签和结束标签之间的部分叫文本标签体，也简称：标签体。
• 单标签
html
<input type="text" name="username"/>• 属性
html
<a href="http://www.xxx.com">show detail</a>href="http://www.xxx.com"就是属性，href是属性名，"http://www.xxx.com"是属性值。
1.5 HTML基础结构
- 文档声明 ：HTML文件中第一行的内容，用来告诉浏览器当前HTML文档的基本信息以及HTML文档遵循的语法标准。
<!DOCTYPE html>。 - 根标签 ：
<html></html>标签是整个文档的根标签，所有其他标签都必须放在这对标签里面。 - 头部元素 ：
<head></head>标签是<html></html>第一个一级子标签，用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等。 - 主体元素 ：
<body></body>标签是<html></html>第二个一级子标签，用于标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内。 - 注释 ：
<!--注释内容-->。
1.6 HTML的入门程序
-
准备一个纯文本文件，拓展名为html。
-
使用记事本打开网页，在网页内开发代码。
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的第一个网页</title> </head> <body> hello html!!! </body> </html> -
使用浏览器打开文件，查看显示的内容。
1.7 HTML概念词汇解释
• 标签 ：代码中的一个<和>叫做一个标签，有些标签成对出现，称之为双标签，有些标签单独出现，称之为单标签。
• 属性 ：在开始标签中，用于定义标签的一些特征。
• 文本 ：双标签中间的文字，包含空格换行等结构。
• 元素：经过浏览器解析后，每一个完整的标签（标签+属性+文本）可以称之为一个元素。
1.8 HTML的语法规则
- 根标签是
<html></html>，有且只能有一个。 - 无论是双标签还是单标签都需要正确关闭。
- 标签可以嵌套但不能交叉嵌套。
- 注释语法为
<!--注释内容-->，注意不能嵌套。 - 属性必须有值，值必须加引号，H5中属性名和值相同时可以省略属性值。
- HTML中不严格区分字符串使用单双引号。
- HTML标签不严格区分大小写，但是不能大小写混用。
- HTML中不允许自定义标签名，强行自定义则无效。
1.9 开发工具VsCode的安装和使用
- 安装过程：安装过程比较简单，一路next，注意安装路径不要有中文、空格和特殊符号即可。
- 安装插件 ：
• Auto Rename Tag：自动修改标签对插件。
• Chinese Language Pack：汉化包。
• HTML CSS Support：HTML CSS支持。
• Intellij IDEA Keybindings：IDEA快捷键支持。
• Live Server：实时加载功能的小型服务器。
• open in browser：通过浏览器打开当前文件的插件。
• Prettier-Code formatter：代码美化格式化插件。
• Vetur：VScode中的Vue工具插件。
• vscode-icons：文件显示图标插件。
• Vue3 snipptes：生成VUE模板插件。
• Vue language Features：Vue3语言特征插件。 - 准备工作空间：提前在合适位置创建一个空目录，直接用VSCode打开，即可直接将该目录作为项目代码存放的根目录，即工作空间。
- 在工作空间下创建目录和文件 ：
• 点击带有"+"号的按钮即可创建文件或者目录。
• 在html中，输入"!"并回车即可快速出现html的基本结构。 - 点击右下角Go Live ，或者在html编辑视图上右击
open with live Server，会自动启动小型服务器，并自动打开浏览器访问当前资源。
• Live Server支持实时加载更新，但是使用完毕后，要记得关闭，点击右下角"Port:5500"即可关闭。 - 其他常见设置 ：
• 设置字体：齿轮>search>搜索"字体大小"。
• 设置字体大小可以用滚轮控制：齿轮>设置>搜索"Mouse Wheel Zoom"。
• 设置左侧树缩进：齿轮>设置>搜索"树缩进"。
• 设置文件夹折叠：齿轮>设置>搜索"compact"取消第一个勾选。
• 设置编码自动保存：齿轮>设置>搜索"Auto Save"，选择为"afterDelay"。
2.HTML常见标签
2.1 标题标签
标题标签一般用于在页面上定义一些标题性的内容，如新闻标题、文章标题等，有h1到h6六级标题：
html
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>2.2 段落标签
段落标签一般用于定义一些在页面上要显示的大段文字，多个段落标签之间实现自动分段的效果：
html
<body>
<p>记者从工信部了解到，近年来我国算力产业规模快速增长，年增长率近30%，算力规模排名全球第二。</p>
<p>工信部统计显示，截至去年底，我国算力总规模达到180百亿亿次浮点运算/秒，存力总规模超过1000EB(1万亿GB)。</p>
<p>近年来，我国算力基础设施发展成效显著，梯次优化的算力供给体系初步构建，算力基础设施的综合能力显著提升。</p>
</body>2.3 换行标签
单纯实现换行的标签是<br>，如果想添加分隔线，可以使用<hr>标签。
2.4 列表标签
• 有序列表：分条列项展示数据的标签，其每一项前面的符号带有顺序特征。
html
<ol>
<li>JAVA</li>
<li>前端</li>
<li>大数据</li>
</ol>• 无序列表：分条列项展示数据的标签，其每一项前面的符号不带有顺序特征。
html
<ul>
<li>JAVASE</li>
<li>JAVAEE</li>
<li>数据库</li>
</ul>• 嵌套列表：列表和列表之前可以嵌套，实现某一项内容详细展示。
html
<ol>
<li>
JAVA
<ul>
<li>JAVASE</li>
<li>JAVAEE</li>
<li>数据库</li>
</ul>
</li>
<li>前端</li>
<li>大数据</li>
</ol>2.5 超链接标签
点击后跳转链接标签，也叫作a标签：
html
<a href="http://www.atguigu.com" target="_blank">尚硅谷</a>• href属性用于定义链接地址。
• href中可以使用绝对路径，以/开头，始终以一个固定路径作为基准路径作为出发点。
• href中也可以使用相对路径，不以/开头，以当前文件所在路径为出发点，./开头表示当前路径，../表示上一层路径。
• href中也可以使用完整的URL。
• target用于定义链接打开的方式：
• _blank：在新窗口中打开目标资源。
• _self：在当前窗口中打开目标资源。
2.6 多媒体标签
• img(重点) ：图片标签，用于在页面上引入图片。
• src属性用于定义图片的连接。
• title属性用于定义鼠标悬停时显示的文字。
• alt属性用于定义图片加载失败时显示的提示文字。
html
<img src="img/logo.png" title="尚硅谷" alt="尚硅谷logo" />• audio ：用于在页面上引入一段声音。
• video ：用于在页面上引入一段视频。
• src属性用于定义目标声音资源。
• autoplay属性用于控制打开页面时是否自动播放。
• controls属性用于控制是否展示控制面板。
• loop属性用于控制是否进行循环播放。
html
<audio src="img/music.mp3" autoplay="autoplay" controls="controls" loop="loop" />
<video src="img/movie.mp4" autoplay="autoplay" controls="controls" loop="loop" width="400px" />2.7 表格标签(重点)
• 常规表格 ：
• table标签代表表格。
• thead标签代表表头，可以省略不写。
• tbody标签代表表体，可以省略不写，浏览器解析DOM时会自动添加。
• tfoot标签代表表尾，可以省略不写。
• tr标签代表一行。
• td标签代表行内的一格。
• th标签自带加粗和居中效果的td。
html
<h3 style="text-align: center;">员工技能竞赛评分表</h3>
<table border="1px" style="width: 400px; margin: 0px auto;">
<tr>
<th>排名</th>
<th>姓名</th>
<th>分数</th>
</tr>
<tr>
<td>1</td>
<td>张小明</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>李小东</td>
<td>99</td>
</tr>
<tr>
<td>3</td>
<td>王小虎</td>
<td>98</td>
</tr>
</table>• 单元格跨行 ：通过td的rowspan属性实现上下跨行。
html
<h3 style="text-align: center;">员工技能竞赛评分表</h3>
<table border="1px" style="width: 400px; margin: 0px auto;">
<tr>
<th>排名</th>
<th>姓名</th>
<th>分数</th>
<th>备注</th>
</tr>
<tr>
<td>1</td>
<td>张小明</td>
<td>100</td>
<td rowspan="3">前三名升职加薪</td>
</tr>
<tr>
<td>2</td>
<td>李小东</td>
<td>99</td>
</tr>
<tr>
<td>3</td>
<td>王小虎</td>
<td>98</td>
</tr>
</table>• 单元格跨列 ：通过td的colspan属性实现左右的跨列。
html
<h3 style="text-align: center;">员工技能竞赛评分表</h3>
<table border="1px" style="width: 400px; margin: 0px auto;">
<tr>
<th>排名</th>
<th>姓名</th>
<th>分数</th>
<th>备注</th>
</tr>
<tr>
<td>1</td>
<td>张小明</td>
<td>100</td>
<td rowspan="6">前三名升职加薪</td>
</tr>
<tr>
<td>2</td>
<td>李小东</td>
<td>99</td>
</tr>
<tr>
<td>3</td>
<td>王小虎</td>
<td>98</td>
</tr>
<tr>
<td>总人数</td>
<td colspan="2">2000</td>
</tr>
<tr>
<td>平均分</td>
<td colspan="2">90</td>
</tr>
<tr>
<td>及格率</td>
<td colspan="2">80%</td>
</tr>
</table>2.8 表单标签(重点)
表单标签可以实现让用户在界面上输入各种信息并提交的一种标签，是向服务端发送数据主要的方式之一。
• form标签 ：表单标签，其内部用于定义可以让用户输入信息的表单项标签。
• action属性：用于定义信息提交的服务器的地址。
• method属性：用于定义信息的提交方式。
◦ get值：get方式提交，数据会缀到url后，以?作为参数开始的标识，多个参数用&隔开。
◦ post值：post方式提交，数据会通过请求体发送，不会在缀到url后。
• input标签 ：主要的表单项标签，可以用于定义表单项。
• name属性：用于定义提交的参数名。
• type属性：用于定义表单项类型。
◦ text：文本框。
◦ password：密码框。
◦ submit：提交按钮。
◦ reset：重置按钮。
html
<form action="http://www.atguigu.com" method="get">
用户名 <input type="text" name="username" /> <br>
密码 <input type="password" name="password" /> <br>
<input type="submit" value="登录" />
<input type="reset" value="重置" />
</form>2.9 常见表单项标签(重点)
• 单行文本框：
html
个性签名：<input type="text" name="signal"/><br/>• 密码框：
html
密码：<input type="password" name="secret"/><br/>• 单选框 ：
• name属性相同的radio为一组，组内互斥。
• 当用户选择了一个radio并提交表单，这个radio的name属性和value属性组成一个键值对发送给服务器。
• 设置checked="checked"属性设置默认被选中的radio，如果属性名和属性值一样的话，可以省略属性值，只写checked即可。
html
你的性别是：
<input type="radio" name="sex" value="boy" />男
<input type="radio" name="sex" value="girl" checked="checked" />女• 复选框：
html
你喜欢的球队是：
<input type="checkbox" name="team" value="Brazil"/>巴西
<input type="checkbox" name="team" value="German" checked/>德国
<input type="checkbox" name="team" value="France"/>法国
<input type="checkbox" name="team" value="China" checked="checked"/>中国
<input type="checkbox" name="team" value="Italian"/>意大利• 下拉框 ：
• 下拉列表用到了两种标签，其中select标签用来定义下拉列表，而option标签设置列表项。
• name属性在select标签中设置，value属性在option标签中设置。
• option标签的标签体是显示出来给用户看的，提交到服务器的是value属性的值。
• 通过在option标签中设置selected="selected"属性实现默认选中的效果。
html
你喜欢的运动是：
<select name="sport">
<option value="swimming">游泳</option>
<option value="running">跑步</option>
<option value="shooting" selected="selected">射击</option>
<option value="skating">溜冰</option>
</select>• 按钮 ：
• 普通按钮：点击后无效果，需要通过JavaScript绑定单击响应函数。
• 重置按钮：点击后将表单内的所有表单项都恢复为默认值。
• 提交按钮：点击后提交表单。
html
<button type="button">普通按钮</button> 或 <input type="button" value="普通按钮"/>
<button type="reset">重置按钮</button> 或 <input type="reset" value="重置按钮"/>
<button type="submit">提交按钮</button> 或 <input type="submit" value="提交按钮"/>• 隐藏域 ：
通过表单隐藏域设置的表单项不会显示到页面上，用户看不到，但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，例如：用户id等等。
html
<input type="hidden" name="userId" value="2233"/>• 多行文本框 ：
textarea没有value属性，如果要设置默认值需要写在开始和结束标签之间。
html
自我介绍：<textarea name="desc"></textarea>• 文件标签：
html
头像:<input type="file" name="file"/>2.10 布局相关标签
• div标签 ：俗称"块"，主要用于划分页面结构，做页面布局。
• span标签：俗称"层"，可以用于划分元素范围，配合CSS做页面元素样式的修饰。
html
<div style="width: 500px; height: 400px;background-color: cadetblue;">
<div style="width: 400px; height: 100px;background-color: beige;margin: 10px auto;">
<span style="color: blueviolet;">页面开头部分</span>
</div>
<div style="width: 400px; height: 100px;background-color: blanchedalmond;margin: 10px auto;">
<span style="color: blueviolet;">页面中间部分</span>
</div>
<div style="width: 400px; height: 100px;background-color: burlywood;margin: 10px auto;">
<span style="color: blueviolet;">页面结尾部分</span>
</div>
</div>2.11 特殊字符
对于有特殊含义的字符，需要通过转义字符来表示。