前端基础101之HTML总结
文章及资源归档至公众号【AIShareLab】，回复 前端基础 可获取。
最近在用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
- 点赞
- 收藏
- 关注作者
评论（0）