🏗️ HTML
一、概述
HTML是
Hyper Text Markup Language的缩写。意思是 超文本标记语言 。它的作用是搭建网页结构，在网页上展示内容
- 超文本
HTML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——本身是文本，但是呈现出来的最终效果超越了文本。
- 标记语言
说HTML是一种『标记语言』是因为它不是像Java这样的『编程语言』，因为它是由一系列『标签』组成的，没有常量、变量、流程控制、异常处理、IO等等这些功能。HTML很简单，每个标签都有它固定的含义和确定的页面显示效果。
开发IDE选择 ：
visual studio code安装
- 过程：一路next,注意安装路径不要有中文,空格和特殊符号即可
- 安装插件：
- Chinese (Simplified) Language Pack 中文（简体）语言包
- HTML CSS Support HTML CSS 支持
- JavaScript (ES6) code snippets 支持ES6语法提示
- Mithril Emmet 用于补全代码
- Path Intellisense 路径提示插件
- Vue 3 Snippets 在 Vue 2 或者 Vue 3 提供 语法高亮和格式化
- Auto Close Tag 自动闭合 HTML/XML 标签
- Auto Rename Tag 自动完成另一侧标签的同步修改
- open in browser 通过浏览器打开当前文件的插件
- Live Server 实时加载功能的小型服务器 实时查看开发的网页或项目效果
- Vue - Official 一个专门为 Vue 3 构建的语言支持插件
- File Utils 可以方便快捷的来创建、复制、移动、重命名文件和目录
- Intellij IDEA Keybindings IDEA快捷键支持
- MarsCode AI 字节跳动豆包旗下的智能编程助手，提供以智能代码补全为代表的核心能力
- TONGYI Lingma 阿里的通义灵码
- Prettier-Code formatter 代码美化格式化插件
- Vetur VScode中的Vue工具插件
- vscode-icons 文件显示图标插件
- 安装插件：
- 准备工作空间
- 单独创建一个文件夹作为 vscode 的工作空间
- （需要划分出 web开发的话，可以在上面那个文件夹再划分一个web工作空间）
- 然后直接用 vscode 打开这个空文件夹作为项目根目录
- 准备工作空间
- 上面安装的插件中 的
Live Server可以开一个小型服务器
为我们实时加载本地的 html 文件，可以右键打开，可以 vscode右下角打开
Live Server使用完毕后,要记得关闭- 上面安装的插件中 的
- 其他常见设置
- 设置字体: 齿轮>search>搜索 "字体大小"
- 设置字体大小可以用滚轮控制: 齿轮>设置>搜索 "Mouse Wheel Zoom"
- 设置左侧树缩进: 齿轮>设置>搜索 "树缩进"
- 设置编码自动保存: 齿轮> 设置> 搜索 "Auto Save" ,选择为"afterDelay"
- 其他常见设置
- 在线帮助文档
w3school：http://www.w3school.com.cn
MDN：https://developer.mozilla.org/zh-CN/
二、常见标签
2.1 标题标签
标题标签一般用于在页面上定义一些标题性的内容,
如新闻标题,文章标题等,有 h1 到 h6 六级标题
- 代码：
html
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>- 效果：
2.2 文本样式标签
<strong>和<b>标签用于定义粗体文本
<em>和<i>标签用于定义斜体文本。
<u>标签用于定义带有下划线的文本。
<s>和<strike>标签用于定义带有删除线的文本。
<sup>标签用于定义上标文本，<sub>标签用于定义下标文本。
<pre>标签用于定义预格式化的文本，它保留了文本中的空格和换行符。
html
<pre>
这是预格式化 文本。
它保留了空格和换行符。
</pre>2.3 段落标签
段落标签一般用于定义一些在页面上要显示的大段文字,
使用格式为
<p>...段落内容...</p>多个段落标签之间 实现自动分段 的效果
- 代码：
html
<body>
<p>
记者从工信部了解到，近年来我国算力产业规模快速增长，年增长率近30%，算力规模排名全球第二。
</p>
<p>
工信部统计显示，截至去年底，我国算力总规模达到180百亿亿次浮点运算/秒，存力总规模超过1000EB（1万亿GB）。
国家枢纽节点间的网络单向时延降低到20毫秒以内，算力核心产业规模达到1.8万亿元。中国信息通信研究院测算，
算力每投入1元，将带动3至4元的GDP经济增长。
</p>
<p>
近年来，我国算力基础设施发展成效显著，梯次优化的算力供给体系初步构建，算力基础设施的综合能力显著提升。
当前，算力正朝智能敏捷、绿色低碳、安全可靠方向发展。
</p>
</body>- 效果：
2.4 换行标签
单纯实现换行的标签是
<br/>,如果想添加分隔线,可以使用
<hr/>标签
- 代码：
html
<body>
工信部统计显示，截至去年底，我国算力总规模达到180百亿亿次浮点运算/秒，存力总规模超过1000EB（1万亿GB）。
<br>
国家枢纽节点间的网络单向时延降低到20毫秒以内，算力核心产业规模达到1.8万亿元。
<hr>
中国信息通信研究院测算，算力每投入1元，将带动3至4元的GDP经济增长。
</body>- 效果：
2.5 列表标签
有序列表 分条列项展示数据的标签, 其每一项前面的符号带有顺序特征
- 有序列表标签
<ol></ol>- 列表项标签
<li></li>
- 代码：
html
<ol>
<li>JAVA</li>
<li>前端</li>
<li>大数据</li>
</ol>- 效果：
无序列表 分条列项展示数据的标签, 其每一项前面的符号不带有顺序特征
- 无序列表标签
<ul></ul>- 列表项标签
<li></li>
- 代码：
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.6 超链接标签
点击后带有链接跳转的标签 ,也叫作 a 标签
- a 标签 ：
<a href="" target=""></a>
href 属性用于定义连接
- href 中可以使用绝对路径,以/开头,始终以一个固定路径作为基准路径作为出发点
- href 中也可以使用相对路径,不以/开头, 以当前文件 (
./) 所在路径为出发点 - href 中也可以定义完整的URL
target 用于定义打开的方式
- _blank 在新窗口中打开目标资源
- _self 在当前窗口中打开目标资源
- 代码：
html
<body>
<!--
href属性用于定义连接
href中可以使用绝对路径,以/开头,始终以一个路径作为基准路径作为出发点
href中也可以使用相对路径,不以/开头,以当前文件所在路径为出发点
href中也可以定义完整的URL
target用于定义打开的方式
_blank 在新窗口中打开目标资源
_self 在当前窗口中打开目标资源
-->
<a href="01html的基本结构.html" target="_blank">相对路径本地资源连接</a> <br>
<a href="/day01-html/01html的基本结构.html" target="_self">绝对路径本地资源连接</a> <br>
<a href="http://www.atguigu.com" target="_blank">外部资源链接</a> <br>
</body>- 效果：
2.7 多媒体标签
img 图片标签,用于在页面上引入图片
- img 标签 ：
<img src="" title="" alt="" />
- src : 用于定义图片的连接
- title : 用于定义鼠标悬停时显示的文字
- alt : 用于定义图片加载失败时显示的提示文字
- 代码：
html
<body>
<!--
src
用于定义图片的连接
title
用于定义鼠标悬停时显示的文字
alt
用于定义图片加载失败时显示的提示文字
-->
<img src="img/logo.png" title="尚硅谷" alt="尚硅谷logo" />
</body>- 效果：
audio 用于在页面上引入一段声音
- audio 标签 ：
<audio src="" autoplay="" controls="" loop="" />
- src : 用于定义目标声音资源
- autoplay : 用于控制打开页面时是否自动播放
- controls : 用于控制是否展示控制面板
- loop : 用于控制是否进行循环播放
- 代码：
html
<body>
<!--
src
用于定义目标声音资源
autoplay
用于控制打开页面时是否自动播放
controls
用于控制是否展示控制面板
loop
用于控制是否进行循环播放
-->
<audio src="img/music.mp3" autoplay="autoplay" controls="controls" loop="loop" />
</body>- 效果
video 用于在页面上引入一段视频
- video 标签 ：
<video src="" autoplay="" controls="" loop=""/>
- src : 用于定义目标视频资源
- autoplay : 用于控制打开页面时是否自动播放
- controls : 用于控制是否展示控制面板
- loop : 用于控制是否进行循环播放
- 代码：
html
<body>
<!--
src
用于定义目标视频资源
autoplay
用于控制打开页面时是否自动播放
controls
用于控制是否展示控制面板
loop
用于控制是否进行循环播放
-->
<video src="img/movie.mp4" autoplay="autoplay" controls="controls" loop="loop" width="400px" />
</body>- 效果：
2.8 表格标签
常规表格
- table标签 : 代表表格
- thead标签 : 代表表头 可以省略不写
- tbody标签 : 代表表体 可以省略不写
- tfoot标签 : 代表表尾 可以省略不写
- tr标签 : 代表一行
- td标签 ： 代表行内的一格
- th标签 ：自带加粗和居中效果的 td
- table元素⾥常⽤的属性
- border (边框)
- cellspacing (规定单元格之间的空白)
- cellpadding (规定单元边沿与其内容之间的空白)
- colspan (⽤于合并列)
- rowspan (⽤于合并⾏)
- 代码：
html
<body>
<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>
<td>99</td>
</tr>
<tr>
<td>3</td>
<td>王小虎</td>
<td>98</td>
</tr>
</table>
</body>- 效果：
单元格跨行
- 通过
td的rowspan属性实现上下的跨行<td rowspan="跨行行数">
- 代码：
html
<body>
<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>
<td>99</td>
</tr>
<tr>
<td>3</td>
<td>王小虎</td>
<td>98</td>
</tr>
</table>
</body>- 效果：
单元格跨列
- 通过
td的colspan属性实现左右的跨列<td colspan="跨列列数">
- 代码：
html
<body>
<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>
<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>
</body>- 效果：
2.9 表单标签
表单标签,可以实现让用户在界面上输入各种信息并提交的一种标签. 是向服务端发送数据主要的方式之一
form标签,表单标签,其内部用于定义可以让用户输入信息的表单项标签action：form 标签的属性之一,用于定义信息提交的服务器的地址- url
- 相对路径
- 绝对路径
method： form 标签的属性之一,用于定义信息的提交方式get：- 参数会以键值对的形式放在url后提交
url?key=value&key=value&key=value - 数据直接暴露在地址栏上，相对不安全
- 地址栏的长度是有限制的，所以提交的数据量不大
- 地址栏上只能是字符，不能提交文件
- 相比于post效率高一些
- 参数会以键值对的形式放在url后提交
post：- 参数默认不放到url后.
- 数据不会直接暴露在地址栏,相对安全
- 数据是单独打包通过请求体发送，提交的数据量比较大
- 请求体中，可以是字符，也可以是字节数据，可以提交文件
- 相比于get效率略低
input标签,主要的表单项标签,可以用于定义表单项name： input 标签的属性之一,用于定义提交的参数名type：input 标签的属性之一,用于定义表单项类型- text ：单行普通文本框
- password ： 密码框
- submit ：提交按钮
- reset ： 重置按钮
- 代码：
html
<body>
<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>
</body>- 效果：
2.10 常见表单项标签
单行文本框
- 代码：
html
个性签名：<input type="text" name="signal"/><br/>- 效果：
密码框
- 代码：
html
密码：<input type="password" name="secret"/><br/>- 效果：
单选框
- 代码：
html
你的性别是：
<input type="radio" name="gender" value= 1 />男
<input type="radio" name="gender" value= 0 checked="checked" />女- 效果：
说明：
name 属性相同的 radio 为一组，组内互斥
当用户选择了一个 radio 并提交表单，
这个 radio 的 name 属性和 value 属性组成一个键值对发送给服务器
设置 checked="checked" 属性设置默认被选中的 radio
如果属性名和属性值一样的话，可以省略属性值，只写 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"/>意大利- 效果：
- 说明：
- 设置 checked 属性设置默认被选中的 checkbox
- name 属性相同的 checkbox 为一组 ，组内可多选
下拉框
- 代码：
html
你喜欢的运动是：
<select name="interesting">
<option value="swimming">游泳</option>
<option value="running">跑步</option>
<option value="shooting" selected="selected">射击</option>
<option value="skating">溜冰</option>
</select>- 说明：
- 说明：
- 下拉列表用到了两种标签，其中 select 标签用来定义下拉列表，而 option 标签设置列表项。
- name 属性在 select 标签中设置, value 属性在 option 标签中设置。
- option 标签的标签体是显示出来给用户看的，提交到服务器的是 value 属性的值。
- 通过在 option 标签中设置 selected="selected" （select）属性实现默认选中的效果。
按钮
- 代码：
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="提交按钮"/>- 效果：
- 说明：
- 普通按钮: 点击后无效果，需要通过 JavaScript 绑定单击响应函数
- 重置按钮: 点击后将表单内的所有表单项都恢复为默认值
- 提交按钮: 点击后提交表单
隐藏域
- 代码：
html
<input type="hidden" name="userId" value="2233"/>- 说明：
- 通过表单隐藏域设置的表单项不会显示到页面上，用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，例如：用户 id 等等。
多行文本框
- 代码：
html
自我介绍：<textarea name="desc"></textarea>- 效果：
- 说明：
- textarea 没有 value 属性，如果要设置默认值需要写在开始和结束标签之间。
文件标签
- 代码：
html
头像:<input type="file" name="file"/>- 效果：
- 说明 ：
- 不同浏览器显示的样式有微小差异
2.11 布局相关标签
div标签 标准块元素布局标签 ,主要用于划分页面结构,做页面布局
span标签 标准行内元素布局标签 ,主要用于划分元素范围,配合CSS做页面元素样式的修饰
- 代码：
html
<body>
<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>
</body>- 效果：
2.12 特殊字符
对于有特殊含义的字符,需要通过转移字符来表示
- 代码：
html
<span> <br>
<a href="http://www.atguigu.com">尚 硅 谷</a> <br>
&amp;- 效果：
