本节笔记结合黑马程序员视频学习，总结了常见标签(排版、文本格式化、媒体、链接、列表、表格、表单标签)及其使用方法。
视频链接：前端开发入门教程，web前端零基础html5 +css3+前端项目视频教程
HTML标签的结构
-
标签结构图如下：
-
双标签和单标签的区别
有开始和结束的标签称为双标签
只有开始标签的称为单标签，自成一体，无法包裹内容(如在某个地方换行，则只需要单标签即可) -
标签之间的关系
-
父子关系(嵌套关系)
<head> <title></title> </head> -
兄弟关系(并列关系)
<head></head> <body></body>
-
-
目录
排版标签
标题标签
-
h系列标签代码表示如下
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> -
特点：文字都有加粗，且独占一行
段落标签
代码表示：<p>一段文字</p>
换行标签
代码表示：<br>
特点：单标签，强制让文字换行。
水平线标签
代码表示：<hr>
特点：单标签，在页面中显示一条水平线
文本格式化标签
- 使用场景：需要让文字加粗、下划线、倾斜、删除线等效果
- 标签及说明如下(其中：需要突出语境中文字的重要性就用后面的单词标签)：
| 标签 | 说明 |
|---|---|
| b/strong | 加粗 |
| u/ins | 下划线 |
| i/em | 倾斜 |
| s/del | 删除线 |
<!-- 加粗的文本标签 -->
<b>加粗</b>
<strong>加粗</strong>
<!-- 下划线的文本标签 -->
<u>下划线</u>
<ins>下划线</ins>
<!-- 倾斜的文本标签 -->
<i>倾斜</i>
<em>倾斜</em>
<!-- 删除线的文本标签 -->
<s>删除线</s>
<del>删除线</del>
媒体标签
图片标签：单标签
代码表示：<img src="" alt="">
其中：src:存放图片的路径+名称+后缀，alt：替换文本（如：当图片加载不出来的时候，显示该文本，加载成功时，该文本不会显示）
-
需要注意的点：
- 标签的属性写在开始标签的内部
- 标签上可以同时存在多个属性，且属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
-
图片标签常用属性如下：
属性名 属性值 说明 title 提示文本：当鼠标悬停时(把鼠标放在图片上)，才显示的文本 图片标题 width 数字+px 图片宽度 height 数字+px 图片高度 -
注意：对于图片尺寸的设置，如果只设置其中一个，另一个没设置的会自动等比缩放(图片没有变形)。但设置两个，有可能会变形。所以最好只给一个值
<img src="./图片1.png" alt="这是一个微信公众号截图" title="这是title文字" width="300">
音频标签：双标签
代码表示：<audio src="" controls></audio>
- 常见属性
| 属性名 | 功能 |
|---|---|
| src | 音频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放(部分浏览器不支持) |
| loop | 循环播放 |
<audio src="" controls loop</audio>：属性之间用空格隔开
视频标签
<video src="" controls></video>
- 常见属性
| 属性名 | 功能 |
|---|---|
| src | 音频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放(谷歌浏览器需要配合muted实现静音播放) |
| loop | 循环播放 |
<video src="" controls autoppplay muted></video>
链接标签(a标签)
-
解释：单机按钮，将跳转到其他界面
-
特点：双标签(只能在某个范围内点击链接)，如果需要a标签点击之后去指定页面，需要设置a标签的href属性
-
<a href="./目标网页.html">超链接</a> -
href：为跳转地址
-
跳转网页示例：
<a href="https://www.youku.com/channel/webtv">跳转到优酷</a> -
跳转自己写的页面示例：即在href中添加自己写的路径+后缀名即可
<a href="./01_标签.html">跳转到01标签</a> -
当开发网站初期，不知道跳转地址的时候，href的值书写#（空链接）
<a href="#">空链接</a>
-
target属性：目标页面的打开形式
-
取值 效果 _self 默认值，在当前窗口中跳转(覆盖原网页) _blank 在新窗口中跳转(保留原网页) <a href="https://www.youku.com/channel/webtv" target="_blank">优酷</a>：表示打开一个新网页的时候保留原有页面，在新的页面打开。
-
列表标签
无序列表
如图：
-
标签组成
标签名 说明 ul 表示无序列表的整体，用于包裹li标签 li 表示无序列表的每一项，用于包含每一行的内容 -
显示特点：列表的每一项前默认显示圆点标识
-
注意点：
- ul标签中只允许包含li标签
- li标签可以包含任意内容
-
代码表示：
<ul>
<li>榴莲</li>
<li>香蕉</li>
<li>苹果</li>
<li>哈密瓜</li>
</ul>
有序列表
如图：
-
标签组成
标签名 说明 ol 表示有序列表的整体，用于包裹li标签 li 表示有序列表的每一项，用于包含每一行内容 -
显示特点：列表的每一项默认显示序号标识
-
代码表示：
<ol> <li>100昏</li> <li>80昏</li> <li>70昏</li> </ol> -
注意点：同无序列表
自定义列表
如图：
-
标签组成：
标签名 说明 dl 表示自定义列表的整体，用于包裹dt/dd标签 dt 表示自定义列表的主题 dd 表示自定义列表的针对主题的每一项内容 -
显示特点：dd前会默认显示缩进效果
-
注意点：dl标签中只允许包含dt/dd标签，dt/dd标签可以包含任意内容
-
代码表示：
<dl> <dt>帮助中心</dt> <dd>账户管理</dd> <dd>购物指南</dd> <dd>订单操作</dd> </dl>
表格标签
表格的基本标签
-
标签名 说明 table 表格整体，可用于包裹多个tr tr 表格每行，可用于包裹td td 表格单元格，可用于包裹内容 -
注意点：标签的嵌套关系：table>tr>td
表格相关属性
| 属性名 | 属性值 | 效果 |
|---|---|---|
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
- 注意点：实际开发针对于样式效果推荐使用CSS设置
表格标题和表头单元格标签
-
如下：
标签名 名称 说明 caption 表格大标题 表示表格整体大标题，默认在表格整体顶部居中位置显示 th 表头单元格 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示 -
注意点：caption标签书写在table标签内部；th标签书写在tr标签内部（用于替换td标签）
-
代码表示：
-
<table border="2" width="200" height="300"> <!-- 表格标题 --> <caption><b>学生成绩单</b></caption> <tr> <!-- 表头标题 --> <th>姓名</th> <th>性别</th> <th>成绩</th> </tr> <tr> <td>张三</td> <td>男</td> <td>90</td> </tr> <tr> <td>李四</td> <td>女</td> <td>95</td> </tr> <tr> <td>王五</td> <td>男</td> <td>80</td> </tr> </table>效果如下：
表格的结构标签（了解）
为了让代码结构化，浏览器执行效率更高
| 标签名 | 名称 |
|---|---|
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
- 注意点：表格结构标签内部用于包裹tr标签；表格的结构标签可以省略
合并单元格
垂直合并(跨行合并)、水平合并(跨列合并)
-
步骤
-
明确合并那几个单元格
-
通过左上原则，确定保留和删除的元素
- 上下合并—>只保留最上的，删除其他
- 左右合并—>只保留最左的，删除其他
-
给保留的单元格设置：跨行合并(rowspan)或者跨列合并(colspan)
属性名 属性值 说明 rowspan 合并单元格的个数 跨行合并，将多行单元格垂直合并 colspan 合并单元格的个数 跨列合并，将多列单元格水平合并
-
-
注意点：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并(不能跨thead、tbody、tfoot)
-
代码表示：
<table border="1"> <caption>匹配情况</caption> <thead> <th>姓名</th> <th>性别</th> <th>得分</th> </thead> <tbody> <tr> <td>张三</td> <td>男</td> <td rowspan="2">90</td> </tr> <tr> <td>李四</td> <td>女</td> </tr> </tbody> <tfoot> <tr> <td>总结</td> <td colspan="2">匹配成功</td> </tr> </tfoot> </table>
表单标签(登录、注册、搜索)
input系列标签的基本介绍
-
标签名：input
- 可以通过type属性值的不同，展示不同效果
-
type属性：
type属性值 说明 text 文本框，用于输入单行文本 password 密码框，用于输入密码，用原点显示 radio 单选框，用于多选一 checkbox 多选框，用于多选多 file 文件选择，用于之后上传文件 submit 提交按钮，用于提交数据给后端服务器 reset 重置按钮，点击后恢复表单默认设置 button 普通按钮，默认无功能，之后配合js添加功能 -
input的常用在一起的属性：
-
属性值(type的) 属性2(input的) 说明 text placeholder 占位符，提示用户输入内容的文本。 radio name 分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中 radio checked 默认选中 file multiple 多文件选择
-
-
代码表示
<!-- <form action="">：作用是将内容整合在一起；这样表单域中重置按钮才会生效 --> <form action=""> 文本框：<input type="text" placeholder="输入账号"> <br> <br> 密码框：<input type="password" placeholder="输入密码"> <br> <br> <!-- 单选框 --> <!-- 有name才能实现单选功能，不然默认是不同组的 --> 性别：<input type="radio" name="sex">男 <input type="radio" name="sex" checked>女 <br> <br> 多选框：<input type="checkbox" checked> <br> <br> <!-- 上传文件 --> <input type="file" multiple> <!-- 按钮 --> <hr> <input type="submit" value="免费提交"> <br> <br> <input type="reset"> <!-- value值表示给按钮名称赋值 --> <input type="button" value="普通按钮"> </form>
button按钮标签
-
标签名：button
-
type属性的属性值值(同Input系列)
type属性值 说明 submit 同上 reset 同上 button 同上 -
代码表示
<button>按钮</button> <button type="submit">提交按钮</button> <button type="reset">重置按钮</button> <button type="button">普通按钮</button>
select下拉菜单标签
-
标签组成
- select标签：下拉菜单的整体
- option标签：下拉菜单的每一项
- 常见属性：selected：下拉菜单的默认选中
-
代码表示
<select> <option>北京</option> <option selected>南京</option> <option>上海</option> <option>深圳</option> </select>
textarea文本域标签
-
常见属性
- cols：规定了文本域内可见宽度
- rows：规定了文本域内可见行数
-
注意点
- 右下角可以拖拽改变大小
- 实际开发时针对于样式效果推荐用CSS设置
-
代码表示
<textarea cols="60" rows="20"></textarea>
label标签
常用于绑定内容与表单标签的关系——>加强用户体验感(点击文字或者选择框都可以实现选择)
-
使用方法1
- 使用label标签把内容(如：文本)包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值
-
代码表示
<input type="radio" name="sex" id="nan"><label for="nan">男</label> <input type="radio" name="sex" id="nv"><label for="nv">女</label> -
使用方法2(更推荐！因为简单)
- 直接使用label标签把内容(如：文本)和表单标签一起包裹起来
- 需要把label标签的for属性删除即可
-
代码表示
<label><input type="radio" name="sex">男</label> <label><input type="radio" name="sex">女</label>
语义化标签
没有语义的布局标签(很常用)
- div标签：一行只显示一个(独占一行)
- span标签：一行可以显示多个
有语义的布局标签(了解)：做手机端用
| 标签名 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
字符实体
如果想在字符与字符之间多打几个空格，但是网页只会将这些空格变为一个空格。如果想实现该效果，需要添加字符实体标签。
- 空格：
学 字符实体ing
综合案例
学生信息表
<table border="1">
<caption><b>优秀学生信息表格</b></caption>
<thead>
<th>年级</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</thead>
<tbody>
<tr>
<td rowspan="2">高三</td>
<td>张三</td>
<td>110</td>
<td>三年二班</td>
</tr>
<tr>
<td>赵四</td>
<td>120</td>
<td>三年三班</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>评语</td>
<td colspan="3">你们都很优秀</td>
</tr>
</tfoot>
</table>
效果如下：
表单案例
<h1>青春不常在，抓紧谈恋爱</h1>
<hr>
<form action="">
昵称：<input type="text" placeholder="请输入昵称">
<br>
<br>
性别：<label><input type="radio" name="sex">男</label>
<label><input type="radio" name="sex">女</label>
<br>
<br>
所在城市：<select name="" id="">
<option>北京</option>
<option selected>上海</option>
<option>南京</option>
</select>
<br>
<br>
婚姻状况：<label><input type="radio" name="1">未婚</label>
<label><input type="radio" name="1">已婚</label>
<label><input type="radio" name="1">保密</label>
<br>
<br>
喜欢的类型：<label><input type="checkbox">可爱</label>
<label><input type="checkbox">性感</label>
<label><input type="checkbox">御姐</label>
<label><input type="checkbox">萝莉</label>
<label><input type="checkbox">小鲜肉</label>
<label><input type="checkbox">大叔</label>
<br>
<br>
个人介绍：
<textarea name="" id="" cols="30" rows="10"></textarea>
<h3>我承诺</h3>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚的寻找另一半</li>
</ul>
<label><input type="checkbox">我同意所有条款</label>
<input type="submit" value="免费注册">
<button type="reset">重置按钮</button>
</form>
需要注意的地方
- label标签和内容关联，要一个一个的写，不能所有的内容一起label
- 重置按钮要和内容一起放在form里面，不能单独放在外面
- radio中的name要一致，才能说明是一组的，一组的只能选一个
- input按钮和button按钮名称的区别：button是双标签，所以文本名称写在中间；input是单标签，写在value属性值中
相关补充
快捷键
- ctrl+d+鼠标左键：需求：选中不同位置的相同内容，方便统一修改。
- alt+z：让代码自动换行。或者点查看菜单里面的自动换行。
- alt+shift+键盘的下箭头：可以向下复制当前内容
相对路径和绝对路径的介绍
-
绝对路径如：E:\前端代码\day1\图片1.png
-
(重要)相对路径：
- 相对路径分类：
- 同级目录：当前代码和目标文件(图片或视频等)在同一个文件夹下
- 法一：直接写文件名+后缀
- 法二：./文件名+后缀(./表示当前)
- 下级目录：将img放入images文件夹，且html文件和images是同级目录。则img为html的下级(html和images是同级，但img是images的下级，所以img是html文件的下级)
- images/图片1.png
- 上级目录：将html放入page文件夹中，page和图片1是同级，则img是html的上级(page和img同级，但page是html上级，所以img是html上级)
- 先跳出当前文件夹，返回上一级目录，然后就可以和img同级了。如：…(两个点)/图片1.png
- 补充：如果是返回两级…/…/(两个点)图片1.png
- 同级目录：当前代码和目标文件(图片或视频等)在同一个文件夹下
- 相对路径分类：
扫一扫
1232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
