【视频+图文详解】HTML基础3-html常用标签

htmledit_views">

图文教程

html常用标签

常用标签

1. 文档结构

<!DOCTYPE html>：声明HTML文档类型。
<html>：定义HTML文档的根元素。
<head>：定义文档头部，包含元数据。
<title>：设置网页标题，浏览器标签页显示。
<body>：定义网页的主体内容。

2. 文本格式化

1.<h1> ~ <h6>：定义标题，<h1>是最高级，<h6>是最低级。

-注意：标题系列标签有助于浏览器搜索的优化，搜索引擎抓取标题的内容，h1标签的权重最大，但一个页面只能使用一个h1标签，如果使用多个h1标签那么搜索优先级会降低

2.<p>：定义段落。

3.<br>：换行。

4.<strong>：加粗文本，语义上表示强调。

5.<em>：斜体文本，语义上表示强调。

6.<b>：加粗文本（只是样式，语义不如<strong>）。

7.<i>：斜体文本（只是样式，语义不如<em>）。

8.<u>：下划线文本。

3. 链接与图片

<a>：定义超链接。
<img>：插入图片，需设置 src 属性指向图片地址。
格式： <img src="hello/ma.jpg" alt="">

-src属性：图片源；

-alt属性：图片替换文本（当图片不显示的时候会显示我们写上去的文本）

注意：hello文件和ma.jpg要放在此源代码文件夹下才会显示出来

其中title属性的作用是设置鼠标悬在图片上时看到的文本

<link>：连接外部资源，通常用于外部样式表。
<meta>：定义网页的元数据，如字符集、描述、关键字等。

4. 列表

<ul>：无序列表。
<ol>：有序列表。
<li>：列表项。
<dl>：定义定义列表。
<dt>：定义定义列表项的标题。
<dd>：定义定义列表项的描述。

5. 表格

<table>：定义表格。
<tr>：定义表格的行。
<td>：定义表格的单元格。
<th>：定义表格头部单元格，通常为加粗居中的文本。
<caption>：定义表格的标题。

相对路径和绝对路径

（还是以上边的图片嵌入为例）

--相对路径：从当前文件或目录的位置出发，指定目标文件或目录的路径。

--绝对路径：从文件系统的根目录开始，完整指定文件或目录的位置路径。

比如相对hello文件夹（文件路径为F:\hello），ma.jpg的相对路径为hello/ma.jpg，ma.jpg的绝对路径为F:\hello\ma.jpg

--html源代码文件：就是包括这行代码的源代码文件

锚点

锚点：HTML中的一种标记，用于在同一页面内或不同页面之间创建可跳转的链接位置。

<a></a>（在指定位置添加一个超级链接）；需要注意的是锚点中的锚和点的使用方法不同，后面会做出详细讲解。

--a标签的几个属性：

1.href：可以跳转链接；也可以跳转html文件

2.target属性（要搭配_blank关键词）：是否在新标签页打开链接（点击链接后会打开一个新标签页然后加载内容）

【页面内跳转锚点的设置有两种方法】

关于页面内锚点的概述：如下图所示，就是我们看一些网页上面的索引

【方法一】：通过设置标签a的name属性达到页面跳转锚点的方法

锚，href属性，后面一定要加#号

锚点的点，name属性设置成跳转的链接

【方法二】：设置锚点的点为标签的id属性

锚

锚点的点：由原来的a标签的name属性变为了其他标签id属性，使用方法跟href一致

这种方法是直接在我们的<h3>标签标题中直接引入id属性（id属性适配所有html标签）

视频教程

哔哩哔哩（B站）搜索框中输入“uid=3546393096489381”即可

用户：star010_