Web前端开发——HTML标签
文章目录
1 HTML标签简介
HTML超文本标记语言——HyperText Markup Language
- 超文本：链接
- 标记：标签，带尖括号的文本
1.1 标签结构
- 标签分类：双标签和单标签。双标签成对出现，中间包裹内容。
<>里为标签名- 结束标签比开始标签多
/
<strong>需要加粗的文字</strong>
<br>
<hr>
1.2 HTML骨架
<html>：整个网页<head>：网页头部，用于存放给浏览器看的信息，如CSS<title>：网页标题
<body>：网页主体，用于存放给用户看的信息，如图片、文字
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页主体
</body>
</html>
1.3 标签的关系
作用：明确标签的书写位置，让代码格式更整齐
- 父子关系（嵌套关系）：子级标签换行且缩进（Tab）
- 兄弟关系（并列关系）：兄弟标签换行且对齐
2 注释
注释是对代码的解释和说明，能够提高程序的可读性，方便理解、查找代码。注释不会再浏览器中显示。
<!-- HTML注释 -->
3 标题
一般用在新闻标题、文章标题、网页区域名称、产品名称等。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
显示特点：
- 文字加粗
- 字号逐渐减小
- 独占一行（换行）
<h1>标签在一个网页中只能用一次，用来放新闻标题或网页的 logo<h2>~<h6>没有使用次数的限制
4 段落
一般用在新闻段落、文章段落、产品描述信息等。
<p>段落</p>
显示特点：
- 独占一行
- 段落之间存在间隙
5 换行和水平线
- 换行：
<br> - 水平线：
<hr>
<br>
<hr>
6 文本格式化
为文本添加特殊格式，以突出重点。常见的文本格式有加粗、倾斜、下划线、删除线等。
- 加粗：
<strong>、<b> - 倾斜：
<em>、<i> - 下划线：
<ins>、<u> 删除线：<del>、<s>
<strong>、<em>、<ins>、<del>标签自带强调含义（语义）
7 图像
在网页中插入图片，src用于指定图像的位置和名称，是<img>的必须属性。
<img src="图片的URL" alt="替换文本" title="提示文本">
属性语法：属性名="属性值"，写在标签名后面，标签名和各属性之间用空格隔开，不区分先后顺序 。
常用属性
| 图像属性 | 作用 | 说明 |
|---|---|---|
| src | 图像路径 | 必须设置 |
| alt | 替换文本 | 图片无法显示的时候显示的文字 |
| title | 提示文本 | 鼠标悬停在图片上时显示的文字 |
| width | 图片的宽度 | 值为数字，无单位 |
| height | 图片的高度 | 值为数字，无单位 |
- 绝对路径：从盘符（Win）/根目录（Mac）出发查找目标文件
- 相对路径：从当前文件位置出发查找目标文件
/表示进入某个文件夹。【例】dirname/.表示当前文件所在文件夹。【例】./..表示当前文件的上一级文件夹。【例】../../
8 超链接
点击跳转到其他页面。href属性值是跳转地址，是超链接的必须属性。
超链接默认为在当前窗口跳转页面，添加target="_blank"实现在新窗口打开页面。
<a href="https://akira.blog.csdn.net/">跳转到网站</a>
<!-- 跳转到本地文件：相对路径查找 -->
<!-- target="_blank" 新窗口跳转页面 -->
<a href="./another.html" target="_blank">在新窗口跳转页面</a>
<!-- 开发初期不确定超链接的跳转地址，将href属性值暂时置“#”表示空链接，不会跳转 -->
<a href="#">空链接</a>
9 音频
<audio src="音频URL"></audio>
常用属性
| 音频属性 | 作用 | 说明 |
|---|---|---|
| src | 音频URL | 必须设置。支持格式：mp3、ogg、wav… |
| controls | 显示音频控制面板 | |
| loop | 循环播放 | |
| autoplay | 自动播放 | 为了提升用户体验，浏览器一般会禁用自动播放功能 |
如果属性名和属性值相同，可以简写为一个单词，如下所示
<audio src="./media/music.mp3" controls loop autoplay></audio>
10 视频
<video src="视频URL"></video>
常用属性
| 视频属性 | 作用 | 说明 |
|---|---|---|
| src | 视频URL | 必须设置。支持格式：mp4、ogg、WebM… |
| controls | 显示视频控制面板 | |
| loop | 循环播放 | |
| muted | 静音播放 | |
| autoplay | 自动播放 | 为了提升用户体验，浏览器支持在静音状态自动播放 |
在浏览器中，想要自动播放，必须要有muted属性
<video src="./media/smrando.mp4" controls loop muted autoplay></video>
网页制作思路：从上到下，先整体再局部，逐步分析制作
分析内容 → 写代码 → 保存 → 刷新浏览器，看效果
11 列表
作用：布局内容排列整齐的区域。
11.1 无序列表
作用：布局排列整齐的不需要规定顺序的区域。
标签：<ul>嵌套<li>
<ul>：无序列表<li>：列表条目
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
……
</ul>
<ul>标签里只能包裹<li>标签<li>标签里可包裹任何内容
11.2 有序列表
作用：布局排列整齐的需要规定顺序的区域。
标签：<ol>嵌套<li>
<ol>：有序列表<li>：列表条目
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
……
</ol>
<ol>标签里只能包裹<li>标签<li>标签里可包裹任何内容
11.3 定义列表
标签：<dl>嵌套<dt>和<dd>
<dl>：定义列表<dt>：定义列表的标题<dd>：定义列表的描述/详情
<dl>
<dt>列表标题</dt>
<dd>列表描述 / 详情</dd>
……
</dl>
<dl>标签里只能包裹<dt>和<dd>标签<dt>和<dd>标签里可包裹任何内容
12 表格
网页中的表格与 Excel 表格类似，用来展示数据。
12.1 基本使用
标签：<table>嵌套<tr>，<tr>嵌套<td>、<th>
<table>：表格<tr>：行<th>：表头单元格（table head）<td>：内容单元格
在网页中，表格默认无边框线，使用border属性可以为表格添加边框线。
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td>100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>100</td>
<td>198</td>
</tr>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</table>
12.2 表格结构标签
作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。
| 标签名 | 含义 | 特殊说明 |
|---|---|---|
<thead> | 表格头部 | 表格头部内容 |
<tbody> | 表格主体 | 主要内容区域 |
<tfoot> | 表格底部 | 汇总信息区域 |
可以省略
12.3 合并单元格
作用：将多个单元格合并成一个单元格，以合并同类信息。
- 跨行合并：保留最上单元格，添加属性rowspan
- 跨列合并：保留最左单元格，添加属性colspan
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<!-- <td>100</td> -->
<td>198</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="3">全市第一</td>
<!-- <td>全市第一</td>
<td>全市第一</td> -->
</tr>
</tfoot>
</table>
注：不能跨表格结构标签合并单元格（thead、tbody、tfoot）
13 表单
作用：收集用户信息。
使用场景：
- 登录页面
- 注册页面
- 搜索区域
13.1 input标签
input标签type属性值不同，则功能不同。
| type属性值 | 说明 |
|---|---|
| text | 文本框，用于输入单行文本 |
| password | 密码框 |
| radio | 单选框 |
| checkbox | 多选框，添加checked属性设置默认选中。 |
| file | 上传文件，默认只能上传一个文件，添加multiple属性可以实现文件多选功能。 |
占位文本placeholder：提示信息，文本框和密码框都可以使用。
<input type="file" multiple>
<input type="checkbox" checked> akira37
<input type="password" placeholder="提示信息">
13.2 下拉菜单
标签：<select>嵌套<option>
<select>：下拉菜单整体<option>：下拉菜单的每一项
默认显示第一项，selected属性实现默认选中功能。
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>武汉</option>
</select>
13.3 文本域
作用：多行输入文本的表单控件。
<textarea>默认提示文字</textarea>
注：
- 实际开发中，使用CSS设置文本域的尺寸
- 实际开发中，一般禁用右下角的拖拽功能
13.4 label标签
作用：网页中某个标签的说明文本。 常用于绑定文字和表单控件的关系，增大表单控件的点击范围。
- 写法1：label标签只包裹内容，不包裹表单控件；设置label标签的for属性值和表单控件的id属性值相同
<input type="radio" id="man">
<label for="man">男</label>
- 写法2：使用label标签包裹文字和表单控件，不需要属性
<label><input type="radio">女</label>
支持label标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域……
13.5 按钮
按钮需配合<form>标签（表单区域）才能实现对应的功能。
<button type="">按钮</button>
| type属性值 | 说明 |
|---|---|
| submit | 提交按钮，点击后可以提交数据到后台（默认功能） |
| reset | 重置按钮，点击后将表单控件恢复默认值 |
| button | 普通按钮，默认没有功能，一般配合JavaScript使用 |
<!-- form 表单区域 -->
<!-- action="" 发送数据的地址 -->
<form action="">
用户名：<input type="text">
<br><br>
密码：<input type="password">
<br><br>
<button type="submit">提交</button> <!-- 省略type属性时功能默认为提交 -->
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>
14 语义化
14.1 无语义的布局标签
作用：布局网页（划分网页区域，摆放内容）
<div>：独占一行<span>：不换行
<div>div标签，独占一行</div>
<span>span标签，不换行</span>
14.2 有语义的布局标签
<header>：网页头部<nav>：网页导航<footer>：网页底部<aside>：网页侧边栏<section>：网页区块<article>：网页文章
15 字符实体
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 | | |
| < | 小于号 | < |
| > | 大于号 | > |
综合案例1
<ul>
<li>
<img src="./images/1.jpg" alt="">
<h3>主帅安东尼奥回西班牙休假 国青抵达海口进行隔离</h3>
</li>
<li>
<img src="./images/2.jpg" alt="">
<h3>梅州主帅：申花有强有力的教练组 球员体能水平高</h3>
</li>
<li>
<img src="./images/3.jpg" alt="">
<h3>马德兴:00后球员将首登亚洲舞台 调整心态才务实</h3>
</li>
</ul>
综合案例2
<h1>注册信息</h1>
<form action="">
<!-- 表单控件 -->
<!-- 个人信息 -->
<h2>个人信息</h2>
<label>姓名：</label><input type="text" placeholder="请输入真实姓名">
<br><br>
<label>密码：</label><input type="password" placeholder="请输入密码">
<br><br>
<label>确认密码：</label><input type="password" placeholder="请输入确认密码">
<br><br>
<label>性别：</label>
<label><input type="radio" name="gender"> 男</label>
<label><input type="radio" name="gender" checked> 女</label>
<br><br>
<label>居住城市：</label>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>武汉</option>
</select>
<!-- 教育经历 -->
<h2>教育经历</h2>
<label>最高学历：</label>
<select>
<option>博士</option>
<option>硕士</option>
<option>本科</option>
<option>大专</option>
</select>
<br><br>
<label>学校名称：</label><input type="text">
<br><br>
<label>所学专业：</label><input type="text">
<br><br>
<label>在校时间：</label>
<select>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
</select>
--
<select>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
</select>
<!-- 工作经历 -->
<h2>工作经历</h2>
<label>公司名称：</label><input type="text">
<br><br>
<label>工作描述：</label>
<br>
<textarea></textarea>
<br><br>
<!-- 协议 和 按钮 -->
<input type="checkbox"><label>已阅读并同意以下协议：</label>
<ul>
<li><a href="#">《用户服务协议》</a></li>
<li><a href="#">《隐私政策》</a></li>
</ul>
<br><br>
<button>免费注册</button>
<button type="reset">重新填写</button>
</form>
10万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
