HTML5+CSS3+移动web——HTML 基础

一、标签语法

HTML的基本框架

[1. 标题标签](#1. 标题标签)

[2. 段落标签](#2. 段落标签)

[3. 换行和水平线](#3. 换行和水平线)

[4. 文本格式化标签](#4. 文本格式化标签)

[5. 图像标签](#5. 图像标签)

[6. 路径](#6. 路径)

相对路径

绝对路径

[7. 超链接标签](#7. 超链接标签)

[8. 音频](#8. 音频)

[9. 视频](#9. 视频)

[10. 注释](#10. 注释)

二、标签结构

一、标签语法

HTML 超文本标记语言------HyperText Markup Language。

HTML的基本框架

html：整个网页
head：网页头部，用来存放给浏览器看的信息，例如 CSS
- title：网页标题
body：网页主体，用来存放给用户看的信息，例如图片、文字

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标签</title></title>
</head>
<body>
    <strong>需要加粗的文字<strong>

    <a href="./html基础.html" target="_blank">跳转打开新的页签</a>
    <!-- href属性值写#，表示空链接，不会跳转 -->
    <a href="#">空链接</a>
    <br>
    <hr>
    <!--  -->
    <p>你好呀！</p>
    <p>受低温冻雨影响，多地电力人员通过无人机等科技手段除冰保供电。在部分山区，他们只能爬上电线杆，彻夜人工除冰。为了除冰抢修他们用了千方百计。转发致敬低温雨雪冰冻天气的守护者↓↓你们辛苦了，也注意安全</p>
</body>
</html>

VS Code 可以快速生成框架：在 HTML 文件（.html）中，!（英文）配合 Enter / Tab 键

1. 标题标签

html 复制代码

<!-- h1 标签在一个网页中只能用一次 , h2 ~ h6 没有使用次数的限制 -->
<h1>一级标题</h1> 
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

显示特点：

文字加粗
字号逐渐减小
独占一行（换行）

2. 段落标签

html 复制代码

<p>段落</p>

一般用在新闻段落、文章段落信息等等。

显示特点：

独占一行
段落之间存在间隙

3. 换行和水平线

html 复制代码

<br> <!-- 换行 -->
<hr> <!-- 水平线 -->

4. 文本格式化标签

为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等

5. 图像标签

html 复制代码

<img  src="图片的 URL">

用于在网页中插入图片， src用于指定图像的位置和名称，是 <img> 的必须属性。

属性语法：属性名="属性值"，属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

图片属性：

6. 路径

路径指的是查找文件时的地址

相对路径

查找方式：从当前文件位置出发查找目标文件

特殊符号：

/ 表示进入某个文件夹里面 → 文件夹名/
. 表示当前文件所在文件夹 → ./
.. 表示当前文件的上一级文件夹 → ../

绝对路径

查找方式：Windows 电脑从盘符出发；Mac 电脑从根目录（/）出发

html 复制代码

<img  src="D:\images\dog.jpg">

Windows 默认是 \ ，其他系统是 /，建议统一写为 /
特殊的绝对路径应用场景：在线网页地址，友情链接

7. 超链接标签

超链接标签用于点击跳转到其他页面。

html 复制代码

<a href="https://www.baidu.com">跳转到百度</a>

href 属性值是跳转地址，是超链接的必须属性。

超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现新窗口打开页面。

href 属性值写为 # ，表示空链接，页面不会跳转，在当前页面刷新一次。

8. 音频

html 复制代码

<audio src="音频的 URL"></audio>

书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词。

9. 视频

html 复制代码

<video src="视频的 URL"></video>

<video src="./media/vue.mp4" controls loop muted autoplay></video>

10. 注释

概念：注释是对代码的解释和说明，能够提高程序的可读性，方便理解、查找代码。

注释不会再浏览器中显示。

在 VS Code 中，添加 / 删除 注释的快捷键：Ctrl + /

二、标签结构

标签要成对出现，中间包裹内容
<>里面放英文字母（标签名）
结束标签比开始标签多 /
标签分类：双标签和单标签

html 复制代码

<strong>需要加粗的文字<strong>
<br>
<hr>
<p>你好呀！</p>