快捷键(vscode)
1、 ！加回车会出现html骨架
2、ctrl+/该行变为注释
3、alt+b浏览当前html文件
4、ctrl+s保存，且只有保存后显示才会变，或在已打开页面刷新
5、复制一行只需要把光标放到该行直接ctrl+c
6、ctrl+d选中与当前选中相同的下一项，多按一次加一项
7、不想拖横向滚动条alt+z自动换行或者在查看里找
8、tab向后缩进，shift+tab向前缩进
9、alt+shift+⬇，复制粘贴该行
一、标签
排版标签：
1、标题标签
<!-- 直接写h1按下回车或TAB就出来了，不用打括号，且自动识别单双标签 -->
<h1>这是1级标题</h1>
<h2>这是2级标题</h2>
<h3>这是3级标题</h3>
<h4>这是4级标题</h4>
<h5>这是5级标题</h5>
<h6>这是6级标题</h6>
1~6级，重要程度依次递减
特点：文字都加粗，文字都变大，且从h1->h6递减，独占一行。
2、段落标签
场景：在新闻和文章的页面中，用于分段显示。
<!-- alt+z自动换行防止产生横向滚动条 -->
<p>明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。</p>
<p>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</p>
特点：段落间存在间隙，独占一行。
3、换行标签
场景：让文字强行换行。
<br>想要用快捷需要让br两边有空格。
特点：单标签，让文字强行换行。
4、水平标签（水平分割线）
场景：分割不同主题内容的水平线。
<hr>特点：单标签，在页面中显示一条水平线。
文本格式化标签：
1、介绍：
场景：需要让文字 加粗、 下划线 、倾斜、删除线等效果。
代码（两组）：
b 加粗，u下划线，I 倾斜，s删除线
strong加粗，ins下划线，em倾斜，del删除线
两组区别：如果要作强调语义用英文单词那组。样子没区别，凭自己心里想法划分。
<b>加粗</b>
<strong>加粗</strong>
<u>下划线</u>
<ins>下划线</ins>
<i>倾斜</i>
<em>倾斜</em>
<s>删除线</s>
<del>删除线</del>
2、标签语义化
实际项目开发原则：标签语义化（该写啥时用好对应标签排版）
好处：对人易理解，对机器利于解析和SEO（搜索引擎）
媒体标签
1、图片标签
场景：显示图片
src和alt叫属性名，“”内叫属性值
src属性
属性名：src
属性值：目标图片的路径
注意点：图片与文件在同一文件夹，直接写目标名字（带后缀）
<img src="./meaqua.jpg" alt="">./代表当前文件夹
属性注意点：1、标签属性写在开始标签内部
2、标签可以同时存在多个属性
3、属性之间以空格隔开
4、标签名与·属性之间必须以空格隔开
5、属性没有顺序之分
alt属性
属性名：alt
属性值：替换文本
当图片加载失败时，才显示alt的文本。
当图片加载成功时，不会显示alt的文本。
<img src="./错的路径图片会加载失败" alt="我是替换文本">title属性
属性名：title
属性值：提示文本
当鼠标悬停时才显示的文本
注意：title标签不止可以用于图片标签，还可以用于其他标签。
特点：单标签，img标签要展示效果需借助标签属性进行设置（src和alt）
width height属性
属性名：width、height
属性值：高度和宽度（数字）
<img src="./meaqua.jpg" alt="" width="200">注意点：如果只设置了其中一个，照片会等比例缩放不会变形
如果两个都设置了则可能会变形
2、路径
场景：页面需要加载图片，需要先找到对应的图片
分为绝对路径和相对路径
绝对路径同easyx
相对路径：从当前文件夹出发找目标文件的过程
分类：同级目录/上级目录/下级目录
下级：文件夹/目标名.jpg
上级：../ 返回几级就是几个点加./
同级：./
3、音频标签
常见属性： src 音频路径
controls 显示播放的控件
autoplay 自动播放（部分浏览器不支持）
loop（循环播放）
<audio src="./xxx.mp3" controls autoplay loop></audio>音频目前只支持三种文件格式：MP3、wav、ogg
4、视频标签
常见属性同音频。
其中autoplay谷歌浏览器中需配合muted实现静音播放（也就是autoplaymuted）
链接标签：
1、介绍
场景：点击之后，切换页面
称呼：a标签、超链接、锚链接
href：跳转的地址
target：目标网页打开形式
_self 默认值，在当前窗口中跳转（覆盖原网页）
_blank 在新窗口中跳转（保留原网页）
<a href="目标网址">提示信息，显示的是这个</a>
<a href="目标文件">提示信息，显示的是这个</a>
<!-- 当开发网站初期，还不知道跳转地址的时候，href的值书写为#（空链接） -->
地址要完整地址从http到.com
找文件要用路径
特点：双标签，内部可以包裹内容
如果需要a标签点击之后去指定页面，需要设置a标签的href属性
二、列表标签
1、应用场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等。
2、特点：按照行的方式，整齐显示内容
3、种类：无序列表，有序列表，自定义列表
1、无序列表
场景：在网页中表示一组无顺序之分的列表，例：新闻列表
标签组成： ul 表示无序表的整体用于包裹li标签
li 表示无序表的每一项，用于包含每一行的内容
<ul>
<li>榴莲</li>
<li>苹果</li>
<li>香蕉</li>
</ul>
显示特点：列表的每一项默认显示圆点标识
注意点：ul标签中只允许包含li标签
li标签可以包含任意内容
2、有序列表(把ul变成ol的区别)
场景：在网页中表示一组有顺序之分的列表，如：排行榜
标签组成： ol：表示有序列表的整体，用于包裹li标签
li：表示有序列表的每一项，用于包含每一行的内容
<ol>
<li>张三：100</li>
<li>李四：80</li>
</ol>
显示特点：列表的每一项前默认显示序号标识
注意点：ol标签中只允许包含li标签
li标签内可包含任意内容
3、自定义列表
场景：在网页的底部导航中通常会使用自定义列表实现。
标签组成： dl 表示自定义列表的整体，用于包裹dt/dd
dt：表示自定义列表的主题标题
dd：表示自定义列表的针对主题的每一项内容
显示特点：dd前会默认显示缩进效果
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>用户指南</dd>
</dl>
注意点：dl中只允许包含dt/dd标签
dd/dt可包含任意内容
三、表格标签
1、场景
在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表
2、基本标签
table 表格整体，用于包裹多个tr
tr 表格每行，用于包裹td
td 表格单元格，用于包裹内容
嵌套关系：table>tr>td
<table>
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>张三</td>
<td>100分</td>
<td>无</td>
</tr>
<tr>
<td>李四</td>
<td>99分</td>
<td>无</td>
</tr>
</table>
3、表格的相关属性
场景：设置表格基本展示效果
常见相关属性（属性名 属性值 效果）：
border 数字 边框宽度
width 数字 表格宽度
height 数字 表格高度
注意：实际开发时针对样式效果推荐用CSS设置。
<table border="1" width="500" height="300">4、表格标题和表头单元格标签
场景：表格中表示整体大标题和一列小标题
其他标签（标签名 名称 说明）
caption 表格大标题 表示表格整体大标题，默认在表格整体顶部居中位置显示
th 表头单元格 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中
<body>
<table border="1">
<caption><strong>学生成绩单</strong></caption>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>张三</td>
<td>100</td>
<td>无</td>
</tr>
</table>
</body>
注意点：caption标签书写在table标签内部
th标签书写在tr标签内部（用于替换td标签）
（th和td对比有加粗效果）
5、表格的结构标签（了解）
场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰。
结构标签（标签名 名称）：
thead 表格头部
tbody 表格主体
tfoot 表格底部
注意点：表格结构标签内部用于包裹tr标签
表格的结构标签可以省略
6、合并单元格
场景：将水平或垂直的单元格合并成一个单元格
代码实现：
步骤： 1、明确合并哪几个单元格。
2、通过左上原则，确定保留谁删除谁。
上下合并保留最上，左右合并保留最左
3、给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
（属性名 属性值 说明）
rowspan 合并单元格的个数 跨行合并，将多行的单元格垂直合并
colspan 合并单元格的个数 跨列合并，将多列的单元格水平合并
<!-- 删掉多余的那个，在保留的里面加上属性 -->
<tbody>
<tr>
<td>张三</td>
<td rowspan="2">100分</td>
<td>无</td>
</tr>
<tr>
<td>李四</td>
<td>无</td>
</tr>
</tbody>
注意点：只有同一结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead tbody tfoot）
三、表单标签
场景：登陆注册搜索等功能
1、input系列标签
场景：显示收集用户信息的表单效果，如：登录页、注册页
标签名：input
input标签可以通过type属性值不同，展示不同的效果
①type属性值：
（标签名都是input 属性值 说明）
text 文本框，用于输入单行文本
password 密码框，用于输入密码
radio 单选框，用于多选一
checkbox 多选框，用于多选多
file 文件选择，用于之后上传文件
submit 提交按钮，用于提交
reset 重置按钮，用于重置
button 普通按钮，默认无功能，之后配合添加功能
<body>
<!-- 前面写什么就显示什么 -->
文本框：<input type="text">
<br>
<!-- 密码框输入都会变成点 -->
密码框<input type="password" name="" id="">
<br>
单选框：<input type="radio" name="" id="">
<br>
<!-- 选中后方块里面会打上对勾（各种同意协议那样） -->
多选框：<input type="checkbox" name="" id="">
<br>
上传：<input type="file" name="" id="">
<br>
</body>
②占位符：在网页中显示输入单行文本的表单控件
type属性值：text
常用属性： placeholder 占位符、提示用户输入内容
<input type="text" placeholder="请输入用户名">③单选功能和默认选中
场景：在网页中显示多选一的单选表单控件
type属性值：radio
常用属性：
name 分组，有相同name属性的单选框为一组，一组中同时只能有一个被选中
checked 默认选中（多选同理）
性别：<input type="radio" name="sex" checked>男<input type="radio" name="sex" >女
<br>
<input type="checkbox" name="" id="" checked>
注意点：
1、name属性对于单选框有分组功能
2、有相同name属性的单选框为一组，一组中同时只能有一个被选中
9355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
