HTML 基础
文章目录
- 01-标签语法
- 标签结构
- 03-HTML骨架
- 04-标签的关系
- 05-注释
- 06-标题标签
- 07-段落标签
- 08-换行和水平线
- 09-文本格式化标签
- 10-图像标签
- 图像属性
- 11-路径
- 相对路径
- 绝对路径
- 12-超链接标签
- 13-音频
- 14-视频
01-标签语法
HTML 超文本标记语言——HyperText Markup Language。
- 超文本：链接
- 标记：标签，带尖括号的文本
标签结构
- 标签要成对出现，中间包裹内容
- <>里面放英文字母（标签名）
- 结束标签比开始标签多 /
- 标签分类：双标签和单标签
<strong>需要加粗的文字<strong>
<br>
<hr>
03-HTML骨架
- html：整个网页
- head：网页头部，用来存放给浏览器看的信息，例如 CSS
- title：网页标题
- body：网页主体，用来存放给用户看的信息，例如图片、文字
<html><head><title>网页标题</title></head><body>网页主体</body>
</html>
提示
VS Code 可以快速生成骨架：在 HTML 文件（.html）中，!（英文）配合 Enter / Tab 键
04-标签的关系
作用：明确标签的书写位置，让代码格式更整齐
-
父子关系（嵌套关系）：子级标签换行且缩进（Tab键）
-
兄弟关系（并列关系）：兄弟标签换行要对齐
05-注释
概念：注释是对代码的解释和说明，能够提高程序的可读性，方便理解、查找代码。
注释不会再浏览器中显示。
在 VS Code 中，添加 / 删除注释的快捷键：Ctrl + /
<!-- 我是 HTML 注释 -->
06-标题标签
一般用在新闻标题、文章标题、网页区域名称、产品名称等等。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
显示特点：
- 文字加粗
- 字号逐渐减小
- 独占一行（换行）
经验
- h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo
- h2 ~ h6 没有使用次数的限制
07-段落标签
一般用在新闻段落、文章段落、产品描述信息等等。
<p>段落</p>
显示特点：
- 独占一行
- 段落之间存在间隙
08-换行和水平线
- 换行：br
- 水平线：hr
<br>
<hr>
09-文本格式化标签
作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。
<strong>加粗</strong><em>倾斜</em><ins>下划线</ins><del>删除线</del>
效果：
提示：strong、em、ins、del 标签自带强调含义（语义）。
10-图像标签
作用：在网页中插入图片
<img src="图片的 URL">
src用于指定图像的位置和名称，是 的必须属性。
图像属性
| 属性 | 作用 | 说明 |
|---|---|---|
| alt | 替换文本 | 图片无法显示的时候显示的文字 |
| title | 提示文本 | 鼠标悬停在图片上面的时候显示的文字 |
| width | 图片的宽度 | 值为数字，没有单位 |
| height | 图片的高度 | 值为数字，没有单位 |
11-路径
概念：路径指的是查找文件时，从起点到终点经历的路线。
路径分类：
- 相对路径：从当前文件位置出发查找目标文件
- 绝对路径：从盘符出发查找目标文件
- Windows 电脑从盘符出发
- Mac 电脑从根目录出发
相对路径
查找方式：从当前文件位置出发查找目标文件
特殊符号：
- / 表示进入某个文件夹里面 → 文件夹名/
- **. ** 表示当前文件所在文件夹 → ./
- … 表示当前文件的上一级文件夹 → …/
绝对路径
查找方式：Windows 电脑从盘符出发；Mac 电脑从根目录（/）出发
<img src="C:\images\mao.jpg">
提示
- Windows 默认是 \ ，其他系统是 /，建议统一写为 /
- 特殊的绝对路径 → 文件的在线网址：https://www.itheima.com/images/logo.png "，应用场景：网页底部友情链接
12-超链接标签
作用：点击跳转到其他页面。
<a href="https://www.baidu.com">跳转到百度</a>
href 属性值是跳转地址，是超链接的必须属性。
超链接默认是在当前窗口跳转页面，添加 target=“_blank” 实现新窗口打开页面。
拓展：开发初期，不确定跳转地址，则 href 属性值写为 #，表示空链接，页面不会跳转，在当前页面刷新一次。
<a href="https://www.baidu.com/">跳转到百度</a> <!-- 注意加上http或者https --><!-- 跳转到本地文件：相对路径查找 -->
<!-- target="_blank" 新窗口跳转页面 -->
<a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a><!-- 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转 -->
<a href="#">空链接</a>
13-音频
<audio src="音频的 URL"></audio>
常用属性
| 属性 | 作用 | 特殊说明 |
|---|---|---|
| src（必须属性） | 音频URL | 支持格式：MP3、Ogg、Wav |
| controls | 显示音频控制面板 | |
| loog | 循环播放 | |
| autoplay | 自动播放 |
拓展：书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词
<!-- 在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词 -->
<audio src="./media/music.mp3" controls loop autoplay></audio>
14-视频
<video src="视频的 URL"></video>
常用属性
<!-- 在浏览器中，想要自动播放，必须有 muted（静音播放） 属性-->
<video src="./media/vue.mp4" controls loop muted autoplay></video>