HTML注释
<!-- 这个是HTML的注释 -->
HTML标签学习
一、排版标签
1.标题标签
HTML一共有6个标题标签
特点：
- 文字都有加粗
- 文字都有变大，并且从h1->h6文字逐渐减小
- 独占一行
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
效果图
2.段落标签
格式：
<!-- 格式：<p>段落内容</p> -->
段落标签的特点
- 段落之间存在间隙
- 独占一行
<body>
<p>
Java 是由 Sun Microsystems 公司于 1995 年 5 月推出的高级程序设计语言。
</p>
<p>
以上我们使用了两个命令 javac 和 java。
</p>
</body>
3.换行标签
格式：
<!-- 格式： 换行前内容<br>换行后内容 -->
4.水平线标签
格式：
<!-- 格式： <hr> -->
效果图
二、文本格式化标签
文本格式化标签
- 加粗 b 或者 strong（重要的用）
<b>加粗</b>
<strong>加粗</strong>
效果图
- 下划线 u 或者 ins（重要的用）
<u>下划线</u>
<ins>下划线</ins>
效果图
- 倾斜 i 或者 em (重要的用)
<i>倾斜</i>
<em>倾斜</em>
效果图
- 删除线 s 或者 del (重要的用)
<s>删除线</s>
<del>删除线</del>
效果图
媒体标签
1.图片标签
图片标签： img
特点： 单标签
属性：
- src：当图片与当前HTML文件在同一文件夹内显示图片在引号内添加 图片的名字.格式。
- alt： 替换文本，当图片不显示的时候显示的文字。
- title： 可以用于图片的标签，还可以用于其他的标签。
- width和height： 规定图片的尺寸 注意点：只需要给出一个值，另一个就会等比例缩放，如果没有按照比例进行设置，则图片会变形。
注意： 一个属性可以有多个属性，每个属性之间用空格隔开。
范例：
<body>
<img src="jiangpai.jpg" alt="这个是奖牌" title="这个是title文字" width="200">
</body>
2.路径
绝对路径：
指目录下的绝对位置，通常从盘符开始的路径（不常用）。
相对路径：
从当前文件开始出发找目标文件的过程 （常用）。
相对路径分类：
- 同级目录：当前文件和目标文件在同一目录 书写方法一：目标文件.格式 方法二：./目标文件.格式。
<img src="jiangpai.jpg" alt="" width="200">
<img src="./jiangpai.jpg" alt="" width="200">
2.下级目录：目标文件在下级目录中 书写方法：同一文件夹名字/目标文件名.格式。
<img src="图片/jiangpai.jpg" alt="" width="200">```
3.上级目录：目标文件在上级目录中 书写方法：…/文件夹名/文件名 上一级就是一个点 上两级就是三个点。
<img src="../jiangpai.jpg" alt="" width="200">
3.音频标签
音频标签：audio
特点：双标签
属性：
- src： 音频的路径。
- controls： 显示播放的控件。
- autoplay： 自动播放(部分浏览器不支持)
- loop： 循环播放。
注意：音频目前支持三种格式 MP3 Wav Ogg
范例：
<audio src="./张颖轩、范茹 - 迷人的危险 (男女对唱版).mp3" controls autoplay loop></audio>
效果图：
4.视频标签
视频标签：video
特点：双标签
属性：
- src： 音频的路径。
- controls： 显示播放的控件。
- autoplay： 自动播放（谷歌浏览器中徐配合muted实现静音播放）
- loop： 循环播放。
注意点：视频目前支持三种格式：MP4 Web
<video src=""></video>
5.超链接
超链接：a
特点：
1.双标签。
2.如果需要a标签点击后去指定页面，需要设置a标签的href属性。
注意：当开发网站初期，我们还不知道陶砖地址的时候，href的值书写#（空链接）
属性：
target：
取值_self：默认值，在当前窗口中跳转
取值 _blank：在新窗口中跳转
href：
在herf中添加需要跳转的链接或者路径。
<a href="https://www.baidu.com" target="_blank">跳转到百度</a>
列表
1.无序列表
标签组成：
ul：
表示无需列表的整体，用于包裹标签
li：
表示无序列表的每一项，用于包含每一行内容
注意：
ul标签只允许包含li标签
li标签可以包含任意内容
范例：
水果列表
<ul>
<li>香蕉</li>
<li>榴莲</li>
<li>苹果</li>
<li>哈密瓜</li>
</ul>
效果图：
2.有序列表
标签组成：
ol：
表示有序列表的整体
li：
表示有序列表的每一项，用于包含每一行内容
注意点：
ol：标签中只允许包含li标签
li：标签中可以包含任意内容
范例：
<ol>
<li>小姐姐:100分</li>
<li>小帅哥：80分</li>
</ol>
效果图：
3.自定义列表：
标签组成：
dl：
表示自定义列表的整体，用于包裹dt/dd标签
dt：
表示自定义的主题
dd：
表示自定义列表针对主题的每一项内容
注意点：
dl：标签中只允许包含dt/dd标签
dt/dd：标签可以包含任意内容
dd前会默认显示缩进效果
范例：
<dl>
<dt> 帮助中心
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dt>
</dl>
效果图：
表格标签：
基本标签：
table：
表格整体，可用于包裹多个tr
tr：
表格每行，可用于包裹td
td：
表格单元格，可用于包裹内容
属性：
border：
用于添加边框 属性值：数字，用于更改边框高度
width：
用于定义表格宽度 属性值：数字
height：
用于定义表格高度 属性值：数字
注意点：
实际开发时针对样式效果推荐用css设置
范例：
<table border="2.4">
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>小姐姐真漂亮</td>
</tr>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>郎才女貌</td>
</tr>
</table>
效果图：
表格标题和表头单元格标签
其他标签：
caption：
表格大标题 表示表格整体大标题，默认在表格整体顶部居中位置显示
th：
表头单元格 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示
注意点：
caption：
标签书写在table标签内部
th：
标签书写在tr标签内部（用于替换td标签）
范例：
<table border="2.4">
<caption>学生成绩单</caption>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>小哥哥真聪明</td>
</tr>
</table>
效果图：
表格结构标签（了解）
标签名：
thead：
表示头部
tbody：
表示主体
tfoot：
表示底部
合并单元格标签
合并单元格步骤：
1.明确合并哪几个单元格
2.通过左上角原则，确定保留谁删除谁
上下合并：只保留最上的，删除其他的
左右合并：只保留最左的，删除其他的
3.给保留的单元格设置：跨行合并rowspan或者跨列合并colspan
属性名：
rowspan：
跨行合并，将多行的单元格垂直合并 属性值：合并单元格的个数
colspan：
跨列合并，将多列的单元格水平合并 属性值：合并单元格的个数
注意点：
只有同一个结构标签中的单元格才能合并，不能跨结构合并（不能跨：thead tbody tfoot）
范例：
<table border="2.4">
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>小哥哥</td>
<td rowspan="2">100分</td>
<td>小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<td>小姐姐真漂亮</td>
</tr>
<tr>
<td>总结</td>
<td colspan="2">郎才女貌</td>
</tr>
</table>
效果图
表单标签
1.input系列标签
标签名：
input 可以通过type属性值不同，展示不同效果
type属性值：
text:
文本框，用于输入单行文本
placeholder属性：
占位符，提示用户输入内容
范例：
文本框：<input type="text" placeholder="用户名/电话/邮箱">
效果图：
password：
密码框，用于输入密码
范例：
密码框：<input type="password" placeholder="请输入密码">
效果图：
注意：
密码框内书写的内容都会变成点点显示
radio：
单选框，用于多选一
name属性：
分组 有相同属性值的单选框为一组，一组中同时只能有一个被选中
checked属性：
默认选中
范例：
单选框：男<input type="radio" name="gander"> 女<input type="radio" name="gander" checked>
效果图：
checkbox：
多选框，用于多选多
范例：
多选框：<input type="checkbox">
效果图：
在这里插入图片描述
file：
文件选择，用于之后上传文件
常用属性：
multiple：
多文件选择
上传文件：<input type="file" multiple>
效果图：
02.button按钮标签
标签名：button
type属性值：
submit：
提交按钮，点击之后提交数据交给后端服务器
reset：
重置按钮，点击之后回复表单默认值
button：
普通按钮，默认无功能，之后配合js添加功能
注意：
button是双标签，更便于包裹其他内容：文字 图片等
常用属性：
value：
用于更改按钮内的提示文字
范例：
按钮： <input type="button" value="登录">
<input type="reset">
效果图：
03.select下拉标签：
标签组成：
select标签：
下拉菜单的整体
option标签：
下拉菜单的每一项
常见属性：
selscted：
下拉菜单的默认选中
范例：
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
效果图：
04.textarea文本域标签
标签名：textarea
常见属性：
cols：
规定了文本域内可见宽度
rows：
规定了文本域内可见行数
注意点：
1.右下角可以拖拽改变大小
2.实际开发时针对于样式效果，推荐使用css设置
范例：
<textarea cols="30" rows="10"></textarea>
效果图：
05.label标签：
标签名：label
使用方法1：
1.使用label标签把内容（如文本）包裹起来
2.在表单标签上添加id属性
3.在label标签的for属性中设置对应的id属性值
使用方法2：
1.直接使用label标签把内容（如文本）和表单标签一起包裹起来
2.需要把label标签的for属性删除即可
范例：
性别：
方法一：<input type="radio" name="gander" id="nan"> <label for="nan">男</label>
方法二：<label ><input type="radio" name="gander">女</label>
效果图：
语义化标签
没有语义的布局标签
div标签：
一行只显示一个（独占一行）
spar标签：
一行可以显示多个
范例：
<div>这个是div标签</div>
<div>这个是标签</div>
<span>这个是span标签</span>
<span>这个是标签</span>
效果图：
02.有语义的布局标签（了解）
标签名：
header：网页头部
nav：网页导航
footer：网页底部
aside：网页侧边栏
section：网页区块
article：网页文章
注意点：
以上标签显示特点和div一致，但是比div多了不同的语义
03.字符实体标签
网页不认识多个空格，只认识一个
空格字符实体： 
694
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
