一、HTML 标题标签
HTML 标题（Heading）是通过 <h1> - <h6>标签进行定义的，分别对应文档结构中的每一级标题。
下面的实例定义了所有标题。
注意：
- 用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
- 应该将
<h1>用作主标题（最重要的），其后是<h2>（次重要的），再其次是<h3>，以此类推。- 在vscode中生成h1~h6快捷键：h$*6回车
标题标签位置摆放
在标签中添加属性：align="left/center/right" 默认是居左
二、HTML 水平线
<hr /> 是一个空元素，这里的“hr”是水平线（horizontal rule）的意思。
<hr /> 标签在 HTML 页面的作用是创建水平线。
<hr /> 元素可用于分隔 HTML 页面中的内容。
属性：
- color：设置水平线的颜色
- width：设置水平线的宽度
- size：设置水平线的高度
- align：设置水平线的对齐方式（默认居中），可取值left/right
三、HTML 注释
我们可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。
添加或取消注释的快捷键：Ctrl+/
HTML 注释写法如下：
<!-- 这是一个注释 -->
在添加注释时，开始的尖括号之后（左边）需要紧跟一个感叹号，但结束的尖括号之前（右边）不需要。
注意：
- 浏览器会自动忽略注释，不会将其显示。
四、HTML 段落
创建段落，是通过 <p> 标签定义的。
实例：
注意：
- 浏览器会自动地在段落的前后添加空行。
五、HTML 换行
如果你希望在不产生一个新段落的情况下进行折行（换行），请使用 <br> 标签。
<br> 标签是一个空标签，意味着它没有结束标签。
实例：
注意：
- 请使用
<br>标签来输入空行，而不是分割段落。- 如果您想使用额外的空行或空格来改变页面的输出结果：
当显示页面时，浏览器会移除源代码中多余的空格和空行。
所有连续的空格或空行都将会被算作一个空格。
需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
- 在写地址信息或者写诗词时
<br>标签非常有用。
六、HTML 格式化标签
HTML 使用 <b> 标签与<i> 标签对输出的文本进行格式化，用来定义 粗体 和 斜体。
这些 HTML 标签被称为格式化标签。
下面是常用的 HTML 文本格式化标签。
| 标签 | 描述 |
|---|---|
<strong>与<b> | 文本加粗标签；推荐使用<strong>更具有语义化，对SEO友好。 |
<em>与<i> | 文本倾斜标签；推荐使用<em>更具有语义化，对SEO友好。 |
<del>与<s> | 删除线标签；推荐使用<del>更具有语义化，对SEO友好。 |
<ins>与<u> | 下划线标签；推荐使用<ins>更具有语义化，对SEO友好 |
<sub> | 定义下标字 |
<sup> | 定义上标字 |
<small> | 定义小号字 |
下面是一个 HTML 文本格式化的实例。
每个段落都运用了不同的格式化标签，来演示每个标签的作用。
例题：利用上标下标使log2 16=22成立
<p>log<sub>2</sub>16=2<sup>2</sup></p>
七、HTML链接
1、<a> 标签
HTML 使用 <a> 标签来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，你可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
在 <a> 标签中，使用 href 属性来描述链接的目标地址。
链接的 HTML 代码很简单。它类似这样：
<a href="url">链接文本</a>2、创建超链接
在下面的例子中，定义了 “woaixuexi”网站的超链接，点击这个超链接会把你带到 “woaixuexi” 的首页。
<a href="https://www.woaixuexi.cn">访问woaixuexi</a>默认情况下，链接将以以下形式出现在浏览器中：
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时，链接显示为红色并带有下划线。
注意：
- 如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。
3、HTML a 标签的target 属性
在 <a> 标签中使用 target 属性，你可以规定在何处打开链接文档。
target 属性值有：
_blank：在新窗口中打开被链接文档。
_self：默认。在相同的框架中打开被链接文档。_parent：在父框架集中打开被链接文档。_top：在整个窗口中打开被链接文档。framename：在指定的框架中打开被链接文档。
实例：下面的链接会在新窗口打开文档。
<a href="https://www.woaixuexi.cn" target="_blank">访问woaixuexi</a>4、HTML a 标签的 title 属性
title提示文本 鼠标放到链接上会显示“title”里的文字
<a href="https://www.woaixuexi.cn" target="_blank" title="woaixuexi">访问woaixuexi</a>八、HTML头部
1、HTML <head> 元素
<head> 元素包含了所有的头部标签元素。
在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为：<title>, <style>, <meta>, <link>, <script>, <noscript>,<base>。
下面是 <head> 元素包含的头部标签元素列表：
| 标签 | 描述 |
|---|---|
<head> | 定义了文档的信息 |
<title> | 定义了文档的标题 |
<base> | 定义了页面链接标签的默认链接地址 |
<link> | 定义了一个文档和外部资源之间的关系 |
<meta> | 定义了HTML文档中的元数据 |
<script> | 定义了客户端的脚本文件 |
<noscript> | 定义在脚本未被执行时的替代内容（文本） |
<style> | 定义了HTML文档的样式文件 |
2、<title> 元素
<title> 标签定义了 HTML 文档的标题，在所有 HTML 文档中是必需的。
<title> 元素：
- 定义浏览器工具栏中的标题
- 提供页面被添加到收藏夹时的标题
- 显示在搜索引擎结果中的页面标题
3、<style> 元素
<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:
4、<meta> 元素
meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
<meta>元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta> 一般放置于 <head> 区域
使用实例
为搜索引擎定义关键词：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">为网页定义描述内容：
<meta name="description" content="免费 Web & 编程 教程">定义网页作者：
<meta name="author" content="qianxiaoxinrou">每30秒钟刷新当前页面：
<meta http-equiv="refresh" content="30">5、<link> 元素
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到 CSS 样式表：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head><link>也可以设置网页的图标：
<link rel="shortcut icon" href="图片url">
扫一扫
3040
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
