HTML笔记（一）
- HTML 简介
- HTML 基础
- HTML 元素
- HTML 属性
- HTML 标题
- HTML 段落
- 文本格式化
- HTML 超链接
- HTML 头部
HTML 简介
1. 什么是 HTML?
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
2. HTML 标签
- HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如
- HTML 标签通常是成对出现。
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
形式为：<标签>内容</标签>
3. HTML 元素
“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思。
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下是一个HTML 元素:
<p>这是一个段落。</p>
4. Web 浏览器
Web浏览器是用于读取HTML文件，并将其作为网页显示。浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户。
5. 声明与编码
HTML5
<!DOCTYPE html>
中文编码
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。
<meta charset=”UTF-8”>
6. HTML 编辑器
推荐 VS Code：https://code.visualstudio.com/
HTML基础
1. HTML 标题
HTML 标题通过<h1>到<h6>标签来定义。
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
2. HTML 段落
HTML 段落是通过标签 <p> 来定义的。
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
3. HTML 链接
HTML 链接是通过标签 <a> 来定义的。
<a href=”https://www.runoob.com" >这是一个链接</a>
4. HTML 图像
HTML 图像是通过标签 <img> 来定义的。
<img loading=”lazy” src=”/images/logo.png” width=”224” height=”224” />
HTML 元素
HTML 文档由 HTML 元素定义。
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（<br>）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
HTML 属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，如：name=”value”。
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
HTML 标题
标题（Heading）是通过 <h1> - <h6> 标签进行定义的。
<h1> 定义最大的标题。 <h6> 定义最小的标题。
浏览器会自动地在标题的前后添加空行。
1. 标题重要性
确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
2. HTML 水平线
<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
3. HTML 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。注释写法如下:
<!– 这是一个注释 –>
4. 如何查看源代码?
单击右键，然后选择”查看源文件”（IE）或”查看页面源代码”（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。
HTML 段落
段落是通过 <p> 标签定义的。
1. 不要忘记结束标签
省略/<p>都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。
2. HTML 折行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签：
<p>这个<br>段落<br>演示了分行的效果</p>
3. 空行问题
无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行或换行也被显示为一个空格。
文本格式化
对文本进行加粗、斜体、下沉和上浮等效果。
1. HTML 文本格式化标签
- 定义粗体文本：<b>
- 定义着重文字：<em>
- 定义斜体字：<i>
- 定义小号字：<small>
- 定义加重语气：<strong>
- 定义下标字：<sub>
- 定义上标字：<sup>
- 定义插入字：<ins>
- 定义删除字：<del>
2. HTML “计算机输出” 标签
- 定义计算机代码：<code>
- 定义键盘码：<kbd>
- 定义计算机代码样本：<samp>
- 定义变量：<var>
- 定义预格式文本：<pre>
3. HTML 引文, 引用, 及标签定义
- 定义缩写：<abbr>
- 定义地址：<address>
- 定义文字方向：<bdo>
- 定义长的引用：<blockquote>
- 定义短的引用语：<q>
- 定义引用、引证：<cite>
- 定义一个定义项目：<dfn>
HTML 超链接
HTML使用标签 <a>来设置超文本链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图。您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签<a> 中使用了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中，写下形式均可以设置CSS语句来改变。
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时，链接显示为红色并带有下划线。
1. HTML 链接语法
<a href=”url”>链接文本</a>
点击这个超链接会把用户带到菜鸟教程的首页。
2. HTML 链接- target 属性
使用 target 属性，你可以定义被链接的文档在何处显示。
- _blank: 在新窗口中打开被链接文档。
- _self: 默认。在相同的框架中打开被链接文档。
- _parent: 在父框架集中打开被链接文档。
- _top: 在整个窗口中打开被链接文档。
- framename: 在指定的框架中打开被链接文档。
3. HTML 链接- id 属性
id 属性可用于创建一个 HTML 文档书签。
注意：书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。
<a id=”tips”>有用的提示部分</a>
<a href=”#tips”>访问有用的提示部分</a>
4. 各类型链接
图片链接
<p>无边框的图片链接:
<a href=”//www.runoob.com/html/html-tutorial.html" >
<img src=”smiley.gif” alt=”HTML 教程” width=”32” height=”32”></a></p>
书签连接
<p><a href=”#C3”>查看章节3</a></p>
<h2>章节1</h2>
<p>这边显示该章节的内容……</p>
<h2>章节2</h2>
<p>这边显示该章节的内容……</p>
<h2><a id=”C3”>章节3</a></h2>
<p>这边显示该章节的内容……</p>
跳出框架
<p>跳出框架?</p>
<a href=”//www.runoob.com/" target=”_top” >点击这里!</a>
邮件链接
<p>这是一个电子邮件链接：
<a href=”mailto:someone@example.com?Subject=Hello%20again” target=”_top” >发送邮件</a>
</p>
HTML 头部
- <title> - 定义了HTML文档的标题，使用 <title> 标签定义HTML文档的标题
- <base> - 定义了所有链接的URL，使用 <base> 定义页面中所有链接默认的链接目标地址。
- <meta> - 提供了HTML文档的meta标记，使用 <meta> 元素来描述HTML文档的描述、关键词、作者、字符集等。
1. HTML <head> 元素
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
2. HTML <title> 元素
<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。
<title> 元素:
- 定义了浏览器工具栏的标题
- 当网页添加到收藏夹时，显示在收藏夹中的标题
- 显示在搜索引擎结果页面的标题
<!DOCTYPE html>
<html/>
<head/>
<meta charset=”utf-8”>
<title>文档标题/</title>
</head>
<body>
文档内容……
</body>
</html>
3. HTML <base> 元素
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
<head>
<base href=”http://www.runoob.com/images/" target=”_blank” >
</head>
4. HTML <link> 元素
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” >
</head>
5. HTML <style> 元素
<style> 标签定义了HTML文档的样式文件引用地址。
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:
<head>
<style type=”text/css” >
body {background-color:yellow}
p {color:blue}
</style>
</head>
6. HTML <meta> 元素
meta标签描述了一些基本的元数据。
标签提供了元数据。元数据也不显示在页面上，但会被浏览器解析。 META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。 元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。 \7. 使用情景
为搜索引擎定义关键词:
<meta name=”keywords” content=”HTML, CSS, XML, XHTML, JavaScript” >
为网页定义描述内容:
<meta name=”description” content=”免费 Web & 编程 教程” >
定义网页作者:
<meta name=”author” content=”Lamber” >
每30秒钟刷新当前页面:
<meta http-equiv=”refresh” content=”30” >
8. HTML <script> 元素
<script>标签用于加载脚本文件，如：JavaScript。
<script> 元素在以后的章节中会详细描述。
9. 总结
- <head>: 定义了文档的信息
- <title>: 定义了文档的标题
- <base>: 定义了页面链接标签的默认链接地址
- <link>: 定义了一个文档和外部资源之间的关系
- <meta>: 定义了HTML文档中的元数据
- <script>: 定义了客户端的脚本文件
- <style>: 定义了HTML文档的样式文件