前言
本文是黑马程序员HTML部分的学习笔记，截图也来自黑马程序员PPT
去年有看部分pink老师的课，感觉21版这位女神老师的课要简洁很多，但也够用，更适合快速上手。
一.基础认知
1.1网页组成和本质（略）
1.2浏览器
1.2.1五大浏览器
IE、火狐、谷歌、Safari、Opera
1.2.2渲染引擎/浏览器内核
-
是浏览器中专门对代码进行解析渲染的部分
-
浏览器出品的公司不同，内在的渲染引擎也不同
-
渲染引擎不同，解析相同代码的速度、性能、效果也不同
1.3web标准
1.3.1为什么需要web标准
不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异
1.3.2web标准的构成
| 构成 | 语言 | 说明 |
|---|---|---|
| 结构 | HTML | 页面元素和内容 |
| 表现 | CSS | 网页元素的外观和位置等页面样式 |
| 行为 | JavaScript | 网页模型的定义和页面交互 |
2.1HTML
2.1.1感知
概念：超文本标记语言
格式：<x>内容</x>
eg: <strong>你好</strong>
2.2HTML骨架
2.2.1HTML页面固定结构
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主体内容
</body>
</html>
2.3vscode使用
- 将文件及直接拖入vscode
- 保证当前文件后缀名是.html，
- ！ 再回车 生成HTML骨架
- ctrl+s 随时保存
- Alt+b 用默认浏览器打开
3.1注释
写法：ctrl+/
再按一次取消注释
3.2标签
3.2.1结构
-
双标签
<x>内容</x> -
单标签
<br> 换行 <hr> 水平分割线
3.2.2关系
- 父子关系（嵌套关系）
- 兄弟关系（并列关系）
二.HTML标签学习
1.排版标签
1.1标题标签
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
1.2段落标签
<p>我是一段文字</p>
场景：用于分段显示
特点：
- 段落之间默认存在间隙（可以通过CSS改变间隙大小）
- 独占一行
1.3换行标签
<br>
1.4水平线标签
<hr>
2.文本格式化标签
| 标签 | 说明 |
|---|---|
| b | 加粗 |
| u | 下划线 |
| i | 倾斜 |
| s | 删除线 |
语义：突出重要性的强调语境(效果和上面一样)
| 标签 | 说明 |
|---|---|
| strong | 加粗 |
| ins | 下划线 |
| em | 倾斜 |
| del | 删除线 |
3.媒体标签
3.1图片标签
<!-- alt : 替换文本, 当图片不显示的时候显示的文字 -->
<!-- width和height属性只需要给出一个值, 另一个等比例缩放 -- 好处就是图片不变形 -->
<!-- 位于同一个文件夹，直接要图片名 -->
<img src="cat.gif" alt="这是一只猫" title="这是title文字, 鼠标悬停的时候显示" width="200" height="800">
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fxfexs4Z-1663945278914)(img/1663851991129.png)]](https://img-blog.csdnimg.cn/2c8e330e5e644ad5b88551fbca0c757e.png)
3.2路径
绝对路径（基本不用）：从盘符开始的路径
相对路径：
- 同级目录：目标文件名
- 下级目录：文件夹名/目标文件名
- 上级目录：…/目标文件名
VSCode快捷操作
- 同级或下级：./
- 上级目录：…/
3.3音频标签
<audio src="./music.mp3" controls autoplay loop></audio>
| 属性名 | 功能 |
|---|---|
| scr | 音频路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
音频标签目前支持三种格式：MP3、Wav、Ogg
3.4视频标签
<!-- 谷歌浏览器可以让视频自动播放, 但是必须是静音状态muted -->
<video src="./video.mp4" controls autoplay muted loop></video>
| 属性名 | 功能 |
|---|---|
| scr | 音频路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（谷歌浏览器中配合muted实现静音播放） |
| loop | 循环播放 |
音频标签目前支持三种格式：MP3、Wav、Ogg
4.链接标签
<!-- href : 跳转地址 -->
<a href="https://www.baidu.com/" target="_blank">跳转到百度</a>
<br>
<a href="./01-标题标签.html">点我呀, 点了就去01-标题标签</a>
<!-- 当开发网站初期, 我们还不知道跳转地址的时候, href的值书写#(空链接) -->
<br>
<a href="#">空链接, 不知道跳到哪里去</a>
4.1显示特点
- a标签默认文字有下划线
- a标签从未点击过，默认文字显示蓝色
- a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）
4.2target属性
| 取值 | 效果 |
|---|---|
| _self | 默认值，覆盖原网页 |
| _blank | 在新窗口跳转 |
5.列表标签
5.1无序列表
<ul>
<li>榴莲</li>
<li>香蕉</li>
<li>苹果</li>
</ul>
- 默认圆点标识
- ul标签中只允许有li 标签
- li标签可以包含任何内容
5.2有序列表
<ol>
<li></li>
</ol>
- 默认s数字序号标识
- ol标签中只允许有li 标签
- li标签可以包含任何内容
5.3自定义列表
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
</dl>
| 标签名 | 说明 |
|---|---|
| dl | 表示自定义列表的整体 |
| dt | 表示自定义列表的主题 |
| dd | 表示自定义列表的针对主题的每一项内容 |
- dd前会默认默认显示缩进效果
- dl标签中只允许包含dt/dd标签
- dt/dd标签可以包含任何内容
6.表格标签
6.1通用
<table border="1">
<caption><strong>学生成绩单</strong></caption>
<thead>
<tr>
<!-- <td></td> -->
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>100分</td>
<td>真棒, 第一名</td>
</tr>
<tr>
<td>李四</td>
<td>99分</td>
<td>真棒, 第二名</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>真棒, 相亲成功</td>
</tr>
</tfoot>
</table>
| 标签名 | 说明 |
|---|---|
| tabale | 表格整体 |
| tr | 表格每行 |
| td | 表格单元格 |
| caption | 表格标题，默认在表格顶部居中显示 |
| th | 表头单元格，默认加粗并居中 |
标签嵌套关系：table> caption=tr>th=td
6.2结构标签（提高浏览器效率）
6.3合并单元格
<tbody>
<tr>
<td>张三</td>
<td rowspan="2">100分</td>
<td>真棒, 第一名</td>
</tr>
<tr>
<td>李四</td>
<td>真棒, 第二名</td>
</tr>
</tbody>
1.确定保留谁删除谁
2.给保留的单元格设置属性：
| 属性名 | 属性值 | 说明 |
|---|---|---|
| rowspan | 合并单元格个数 | 跨行合并 |
| colspan | 合并单元格个数 | 跨列合并 |
ps:只有同一结构标签中的单元格才能合并（不能跨：thead、tbpdy、tfoot）
7.表单标签
应用：登录、注册、搜索
7.1 input系列标签
7.1.1基本介绍
<input type="text" placeholder="请输入用户名">
<input type="password" placeholder="请输入密码">
7.1.2 input系列标签-文本框、密码框
7.1.3 input系列标签-单选框
性别: <input type="radio" name="sex">男
<input type="radio" name="sex" checked>女
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-27b1ztGL-1663945278917)(img/1663941403738.png)]](https://img-blog.csdnimg.cn/2f7c77819a8e4921895419bb5c7e74e4.png)
7.1.4 input系列标签-复选框
<input type="checkbox" checked>
7.1.5 input系列标签-文件选择
<input type="file" multiple>
7.1.6 input系列标签-按钮
<form action="">
用户名: <input type="text">
<br>
<br>
密码: <input type="password">
<br>
<br>
<!-- 按钮 -->
<input type="submit" value="免费注册">
<input type="reset">
<input type="button" value="普通按钮">
<!-- 属性 xx="xxx" -->
</form>
7.2 buttom按钮标签
<button>我是按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮, 没有任何功能</button>
7.3 select下拉菜单标签
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option selected>深圳</option>
</select>
7.4 textarea文本域标签
<textarea cols="60" rows="30"></textarea>
7.5 label标签
性别:
<input type="radio" name="sex" id="nan"> <label for="nan">男</label>
<label><input type="radio" name="sex"> 女</label>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tDJzROSz-1663945278925)(img/1663943881764.png)]
8.语义标签
8.1没有语义的布局标签-div和span
普通文字
<div>这是div标签</div>
<div>这是div标签</div>
<span>这是span标签</span>
<span>这是span标签</span>
8.2有语义的布局标签（了解 用于手机端）
<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>侧边栏</aside>
<section>网页区块</section>
<article>文章</article>
9.字符实体
<!-- 网页不认识多个空格, 只认识一个 -->
这是HTML文档, 现在要学 习字符实体.
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
