前端基础101之HTML总结

timerring

发布于 2025-05-24 16:16:53

2780

文章被收录于专栏：TechBlogTechBlog

最近在用vue做个人主页，由于前端已经快三年没写过了，因此借着这个机会顺便复习一下前端知识。

网页的结构

一个网页有三个部分组成：

结构：HTML 就是超文本标记语言，负责页面中的结构，定义出页面中的各个组成部分。
表现：CSS 来设置页面中元素的样式
行为：使用 JavaScript 来设置页面的行为

属性

通过属性可以设置标签的效果。属性需要定义在开始标签中或这自结束标签中，属性实际上是一组一组名值对结构。

<标签名属性名="属性值" 属性名="属性值"></标签名>
<标签名属性名="属性值" 属性名="属性值" />

HTML 页面的基本结构

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!-- 网页的主体内容 -->
	</body>
</html>

文档声明

<!doctype html> 用来标识当前页面的 html 的版本，该声明用来告诉浏览器，当前的页面是使用 HTML 5 的标准编写的。

常用标签

`<html>`

网页的根标签，一个页面中有且只有一个根标签，网页中的所有内容都需要写在 html 标签的内部。

`<head>`

网页的头部，该标签中的内容不会在网页中直接显示，该标签用于帮助浏览器解析页面。

它的子标签有 <title> 和 <meta>：

`<title>`

用来设置网页的标题，默认会在浏览器的标题栏中显示 ，搜索引擎检索网页时，会主要检索 title 中的内容，它会影响到页面在搜索引擎中的排名。

`<meta>`

用来设置网页的元数据，比如网页使用的字符集。 <meta charset="utf-8" />
设置网页的关键字。 <meta name="keywords" content="关键字,关键字,关键字,关键字"/>
设置网页的描述。 <meta name="description" content="网页的描述"/>
请求的重定向。 <meta http-equiv="refresh" content="秒数;url=地址" />

`<body>`

网页的主体，网页中所有的可见部分都需要在 body 中编写。

<h1> ~ <h6>：标题标签，在 html 中一共有六级标题，一般页面中只会使用 h1~h3，h1 的重要性仅次于 title，浏览器也会主要检索 h1 中的内容，以判断页面的主要内容。一般一个页面中只能写一个 h1 。

<p>：段落标签

<br />：换行标签

<hr />：水平线标签

内联框架

<iframe></iframe> 可以向一个页面中引入其他的外部页面，内联框架中的内容不会被搜索引擎所检索，所以开发中尽量不要使用内联框架。它的属性如下：

src：外部页面的地址，可以使用相对路径
width 和 height：可以设置框架的宽度和高度
name：可以为内联框架指定一个名字。可以将该属性值设置为超链接的 target 属性的值，这样当点击超链接时，页面将会在相应的内联框架中打开。

超链接

<a>链接的文字</a> 可以使当前页面跳转到其他的页面。属性如下：

href 指向链接跳转的目标地址，可以是一个相对路径。还可以是 #id属性值 ，这样当点击超链接以后，将会跳转到当前页面的指定位置可以使用 mailto: 来创建一个发送电子邮件的超链接
target 指定在哪个窗口中打开链接，可选值： _self：默认值，默认在当前窗口打开链接 _blank：在新窗口中打开链接内联框架的 name 属性值：在指定的内联框架中打开链接

注释

注释中的内容不会在页面中显示，但是会在源码中显示，我们可以通过注释来说明网页的代码。也可以通过注释隐藏一些页面中不想显示的内容。

实体

在 HTML 页面中一些特殊符号是不能直接使用，需要使用实体来代替这些特殊符号。实体也可以称为转义字符。

实体的语法：&实体名;

空格： 
<：<
>：>
版权符号：©

图片标签

<img /> 使用图片标签可以向页面中引入一个外部图片

属性：

src：指向一个外部图片的路径，可以使用相对路径
alt：指定一个在图片无法加载时对图片的描述，搜索引擎主要通过该属性来识别图片的内容，如果不写该属性则搜索引擎会对图片进行收录。
width：设置图片的宽度
height：设置图片的高度

图片的格式：

JPEG：颜色丰富的图片，如，照片
GIF：颜色单一，简单透明的图片，动态图
PNG：颜色丰富，复杂透明的图片
图片选择的原则：效果一致，用小的。效果不一致，用效果好的。

相对路径

相对于当前资源所在的目录的路径，可以使用 ../ 返回一级目录，返回几级使用几个 ../。

`xHtml` 语法规范

HTML 中不区分大小写，但是尽量使用小写
HTML 的注释不能嵌套
标签必须结构完整：要么成对出现，要么自结束标签。
标签可以嵌套但是不能交叉嵌套
属性必须有值，且值必须加引号，单引号双引号都可以

文本标签

<em>这是一段强调文本。</em>
<strong>这是非常重要的文本。</strong>
<i>这是斜体文本。</i>
<b>这是粗体文本。</b>
<small>这是小字号文本。</small>
<cite>《1984》是乔治·奥威尔的作品。</cite>
<p>他说过：<q>这是一个很好的例子。</q></p>
<blockquote>这是一段引用的文本，可以是一段话或一段落。</blockquote>
<p>这是上标文本的示例：x<sup>2</sup>。</p>
<p>这是下标文本的示例：H<sub>2</sub>O。</p>
<p>这段文本<del>已被删除</del>。</p>
<p>这段文本<ins>已被插入，通常显示为带有下划线的文本。</ins>。</p>
<pre>这是预格式化的文本
可以包含多行
并且保留空格和换行。</pre>
<p>这是代码示例：<code>print("Hello, World!")</code></p>

列表

无序列表

ul来创建一个无序列表，在列表中使用li来表示一个列表项

有序列表

ol来创建一个无序列表，在列表中使用li来表示一个列表项

列表相关的元素都是块元素，他们之间可以互相嵌套去除项目符号list-style:none

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-08-09，如有侵权请联系 cloudcommunity@tencent.com 删除

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度