HTML （HyperText Markup Language）超文本标记语言

一、简介

主要用于创建网页的标准标记语言

文件后缀， .html 或者.htm

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FyilKSIF-1645495883733)(/home/wei/.config/Typora/typora-user-images/image-20220222090717662.png)]

声明为 HTML5 文档
元素是 HTML 页面的根元素
元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8。
元素描述了文档的标题
元素包含了可见的页面内容
元素定义一个大标题
元素定义一个段落

<!DOCTYPE> 声明

声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VTRTe2lG-1645495883734)(/home/wei/.config/Typora/typora-user-images/image-20220222091018972.png)]

二、编辑

常见的编辑器有：

VS Code：https://code.visualstudio.com/
Sublime Text：http://www.sublimetext.com/

三、基本元素

3.1 标题

HTML 标题（Heading）是通过

-

标签来定义的。

<h1>这是一个标题</h1>
<h2>这是一个标题</h2> 
<h3>这是一个标题</h3>

3.2 段落

HTML 段落是通过标签

来定义的。

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

3.3 链接

HTML 链接是通过标签来定义的。

<a href="https://www.runoob.com">这是一个链接</a>

在 href 属性中指定链接的地址。

HTML使用标签来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

语法：

<a href="url">链接文本</a>

使用 target 属性，你可以定义被链接的文档在何处显示

下面的这行会在新窗口打开文档：

<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>

id 属性可用于创建一个 HTML 文档书签。

提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id=“tips”）"：

<a href="#tips">访问有用的提示部分</a>

从另一个页面创建一个链接到"有用的提示部分(id=“tips”）

<a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>

3.4 图像

HTML 图像是通过标签来定义的.

<img src="/images/logo.png" width="258" height="39" />

图像的名称和尺寸是以属性的形式提供的。

3.6 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用<br>标签：

<br>元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

<p>这个<br>段落<br>演示了分行的效果</p>

3.7 HTML 文档定义

元素定义了整个 HTML 文档。

<html>
<body>
<p>这是第一个段落。</p>
</body>

</html>

3.8 HTML 主体定义

元素定义了 HTML 文档的主体。

<body>
<p>这是第一个段落。</p>
</body>

3.9 注释

<!-- 这是一个注释 -->

开始括号之后（左边的括号）需要紧跟一个叹号 ! (英文标点符号)，结束括号之前（右边的括号）不需要，合理地使用注释可以对未来的代码编辑工作产生帮助。

3.10 文本格式化

（1）格式化标签：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vuqv9miK-1645495883740)(/home/wei/.config/Typora/typora-user-images/image-20220222100051649.png)]

（2）计算机输出标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pyrcuwXJ-1645495883741)(/home/wei/.config/Typora/typora-user-images/image-20220222100128657.png)]

（3）引文、引用标签定义

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z4KD1fuD-1645495883741)(/home/wei/.config/Typora/typora-user-images/image-20220222100159542.png)]

四、属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”。

注意：

属性和属性值对大小写不敏感。

不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。

New : HTML5 新属性。

属性	描述
accesskey	设置访问元素的键盘快捷键。
class	规定元素的类名（classname）
contenteditable New	规定是否可编辑元素的内容。
contextmenu New	指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单
data- New	用于存储页面的自定义数据
dir	设置元素中内容的文本方向。
draggable New	指定某个元素是否可以拖动
dropzone New	指定是否将数据复制，移动，或链接，或删除
hidden New	hidden 属性规定对元素进行隐藏。
id	规定元素的唯一 id
lang	设置元素中内容的语言代码。
spellcheck New	检测元素是否拼写错误
style	规定元素的行内样式（inline style）
tabindex	设置元素的 Tab 键控制次序。
title	规定元素的额外信息（可在工具提示中显示）
translate New	指定是否一个元素的值在页面载入时是否需要翻译