标题一、HTML教程
1.什么是html
超文本标记语言（Hype Text Makeup Language) 是一种用于创建网站的标准标记语言。
可以使用HTML来创建自己的web站点，通过浏览器去展现，让浏览器去解析。
（1）HTML不是一种编程语言，是一种标记语言。标记语言是一套标记标签（makeup tag)
（2）HTML使用标记标签来描述网页
（3）HTML文档包含了HTML标签以及文本内容
（4）HTML文档也叫做web页面
2.HTML标签
（1）HTML标记标签通常被称为HTML标签（HTML tag)
（2）HTML标签通常是成对出现的，eg: and
（3）标签对中的第一个标签为开始标签（也称为开放标签），第二个为结束标签（也称闭合标签）。
3.HTML元素
开始标签和结束标签统称为HTML元素
4.Web浏览器
Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。
浏览器并不是直接显示HTML标签的，但是我们可以使用HTML标签来决定如何讲HTML页面展现给用户
5.注意事项
用中文网页时需要使用去声明编码，或者会出现乱码。
有些浏览器（比如360浏览器）还会设置GBK为默认编码，这时候就需要设置为
6.后缀名
html 和 htm 无区别。
标题二、HTML简介
1.HTML实例
**声明为HTML5文档** **此元素为HTML页面的根元素** **此元素里包含了元（meta)数据** **定义网页编码格式为utf-8**第一个标题
**此元素定义了一个大标题**第一个段落
**此元素定义了一个段落**注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。
2.<!DOCTYPE>声明
声明有助于浏览器去正确显示网页，因为浏览器上有很多的网页，如果能够正确声明HTML版本，浏览器就能够正确显示网页内容。另：doctype html是不分大小写的。3.实例
我的第一个标题
我的第一个段落。
标题三、HTML基础
ps:以下内容在和之间
1.HTML 链接： 这是一个链接
2.HTML图像： 
标题四、HTML元素
1.HTML文档由HTML元素定义。
2.HTML元素
开始标签* (起始标签） 元素内容 结束标签*（闭合标签）
这是一个段落
这是一个链接换行
3.HTML元素语法
（1）HTML元素以开始标签起始，以结束标签终止。
（2）元素的内容是在开始标签与结束标签之间的内容。
（3）某些HTML元素具有空内容（empty content)，而空内容在开始的标签中关闭（以开始标签的结束而结束）。
（4）大多数HTML元素可拥有属性。
（5）大多数的HTML元素可以嵌套（即HTML元素中可以包含其他HTML元素）。
（6）HTML文档由相互嵌套的HTML元素构成。
4.注意：不要忘记结束标签
5.HTML空元素
（1）没有内容的HTML元素被称为空元素，空元素是在开始标签中关闭的。
eg.
就是没有关闭标签的空元素（
标签定义换行）。
（2）在开始的标签中添加斜杠，eg.
，是关闭空元素的正确方法。
6.HTML提示：使用小写标签
eg:
标题五、HTML属性
1.属性是HTML元素提供的附加信息。
2.HTML元素可以设置属性。[^1](个人见解：属性相当于给元素归类，但是类型是已经设定好的）
属性可以在元素中添加附加信息。
属性一般描述于开始标签。
属性总是以名称/值对的形式出现，eg:name=“value”
eg
:HTML 链接由 标签定义。链接的地址在 href 属性中指定：
这是一个链接
3.HTML属性常用引用属性值
属性值应该始终被包含在引号内（单，双都可以，但是普遍用双），在属性值本身就有双引号的情况下，要使用单引号。eg:name=‘John “ShotGun” Nelson’
4.属性和属性值皆用小写
5.下面列出了适用于大多数 HTML 元素的属性：
属性 描述
class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id 定义元素的唯一id
style 规定元素的行内样式（inline style）
title 描述了元素的额外信息 (作为工具条使用)
class 属性可以多用 class=" " （引号里面可以填入多个class属性）
id 属性只能单独设置 id=" "（只能填写一个，多个无效）
可在菜鸟网站的这个部分中看到详细的属性参考手册。
属性实例：
这是一个链接
标题六、标题
1.标题（Heading)是通过
-
标签来进行定义的，
是最大的标题，
是最小的标题。浏览器会自动的在标题的前后添加空行。
（1）不要为了生成粗体或者大号的文本而使用标题，要确保这个标题是真的标题，而非其他内容。
（2）搜索引擎用标题来为网页的结构和内容进行编制索引。用户也是可以通过标题来快速浏览我们的网页，所以用标题来呈现文档结构是很重要的，不要忽视！
（3）应该将
用作于主标题（最重要的），
（次重要的），再其次是
，以此类推。
3.实例
这是一个无情的标题
这是一个无情的标题
这是一个无情的标题
这是一个无情的标题
这是一个无情的标题
这是一个无情的标题
这是一个无情的标题3.HTML水平线：
标签在HTML页面中创建水平线，可用于分割内容。
eg:
这是一个段落。
这是一个段落。
这是一个段落。
4.注释可以使代码更容易被人们所理解，浏览器会忽略注释，同时也不会显示它们。
注释写法如下:
ps:开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。
5.HTML 提示 - 如何查看源代码
操作： 只需要单击右键，然后选择"查看源文件"（IE）或"查看页面源代码"（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。
6.HTML 标签参考手册
标签 描述
-
定义 HTML 标题
定义水平线
定义注释
标题七、段落
1.HTML 可以将文档分割为若干段落。
2.段落是通过
标签定义的。
eg:
这是一个段落
这是另一个段落
3.浏览器会自动地在段落的前后添加空行。（
是块级元素）4.不要忘记结束标签
5.如果在不产生一个新段落的情况下进行换行（新行），使用
标签。
元素是一个空的HTML元素。由于关闭标签没有任何意义，因此它没有结束标签。
6.HTML输出-使用提醒
（1）我们无法确定HTML被显示的确切的效果，屏幕的大小以及对窗口的调整都可能会导致不同的结果。
（2）对于HTML，我们无法通过在HTML代码中添加额外的空格或者换行来改变输出的效果，有专门的HTML语言进行。（换行为：
)
（3)当显示页面时，浏览器会移除源代码中多余的空格和空行。
且所有连续的空格或者空行都会被算作一个空格。
（4）需要注意的是，HTML代码中的所有连续的空行（换行）也被显示为一个空格。
7.例子：
春晓
春眠不觉晓， 处处闻啼鸟。 夜来风雨声， 花落知多少。 是可以在
后面放分段内容的，结果显示也为分段效果。
8.HTML 标签参考手册
标签 描述
定义一个段落
插入单个折行（换行）
9.
,
以及
（带有空格）区别：是在不同版本的情况下换行的不同写法，所以，三种写法都可以使用。
标题八、文本格式化
1.例子：
输入内容：
加粗文本
斜体文本
电脑自动输出
这是 下标 和 上标
输出内容：（这里无法显示）
加粗文本
斜体文本
电脑自动输出
这是 下标 和 上标
（1）HTML使用标签(“bold”)（粗体）与i(“italic”)（斜体）对输出的文本进行格式，这些HTML标签被称为格式化标签
（2）
通常，如果是要呈现的文本是重要的，需要突出显示的，就用下方的标签进行替换。
加粗标签替换
替换
3.文本格式化
这个文本是加粗的这个文本是加粗的
这个文本字体放大
这个文本是斜体的
这个文本是斜体的
这个文本是缩小的
这个文本包含 下标
这个文本包含 上标
总结：
––加粗
––斜体
–放大
–缩小
–下标
–上标
4.预格式文本：使用pre标签对空行和空格进行控制
例子：
此例演示如何使用 pre 标签 对空行和 空格 进行控制
输出结果：
此例演示如何使用 pre 标签
对空行和 空格
进行控制
5.“计算机输出”标签：
例子：
计算机输出 结果：计算机输出（字体正常）
键盘输入 结果：键盘输出（字体正常）
打字机文本 结果：打字机文本（字体正常）
计算机代码样本 结果：计算机代码样本（字体比较粗）
计算机变量 结果：计算机变量（字体比较粗加斜体）
6.在HTML文件中写地址
例子：
和
之间用.来链接 Visit us at:
Example.com
Box 564, Disneyland
USA
输出结果：
Written by Jon Doe. 名字是可点击的
Visit us at:
Example.com
Box 564, Disneyland
USA
7.实现缩写或者首字母缩写：
例子：
etc. 为首字母缩写
WWW 为缩写：即对单词或短语的简写形式的统称
输出结果：（在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本）
（仅对于 IE 5 中的 acronym 元素有效。对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。）
etc.
WWW
8.改变文字的方向：
例子：
该段落文字从左到右显示。
该段落文字从右到左显示。
运行结果：
该段落文字从左到右显示。
该段落文字从右到左显示。
9.块引用（实现长短不一的引用语）：
例子：
WWF's goal is to: Build a future where people live in harmony with nature.
We hope they succeed.
输出结果：
WWF’s goal is to:“ Build a future where people live in harmony with nature”. We hope they succeed.
（双引号系统会自己带上）
10.标记删除文本和插入文本（删除字效果和插入字效果）：
例子：
My favorite color is blue red!
输出结果：
My favorite color is blue red!(blue有删除线，red有下划线）
标题九、HTML链接
1.内涵：HTML使用超级链接与网络上的另一个文件相连。几乎可以在所有的网页中找到链接，点击链接后即可从一个页面跳转到另一个页面。
2.实例：
本文本 是一个指向本网站中的一个页面的链接。
本文本 是一个指向万维网上的页面的链接。
3.HTML超链接
（1）HTML使用标签来设置超文本链接。
（2）超链接可以是一个字，一个词或者一组词，也可以是一幅图像，我们可以点击这些内容跳转到新的文档或者当前文档中的某个部分。
（3）当我们的鼠标指针移动到网页中的某个链接上时，箭头会变成一只小手。
（4）标签中使用了href的属性来描述链接的地址。
（5）默认情况下，链接将以一下形式出现在浏览器中：
<1>一个未访问过的链接显示为蓝色字体并带有下划线。
<2>访问过的链接显示为紫色并带有下划线。
<3>点击链接时，链接显示为红色并带有下划线。
<4>注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。
4.链接的代码为：
链接文本 （ href属性描述了链接的目标。）
5.实例：
访问菜鸟教程
上面这段代码显示为：访问菜鸟教程。点击这个超链接就会把访客带到菜鸟教程的首页。
需要注意的是：“”链接文本“不一定是文本。图片或者其他HTML元素也都是可以成为链接的。
6.HTML链接–target属性
（1）使用target属性，就可以定义被链接的文档在何处显示。
（2）如果你将 target 属性设置为 “_blank”, 链接将在新窗口打开。
例子：
<a href = “https://www.runoob.com/“target=”_blank”>访问菜鸟教程!
7.HTML链接----id属性
（1）id属性可用于创建一个HTML文件书签。
提示：书签不会以任何特殊方式显示出来，即在HTML页面中是不显示的，所以对于读者而言是隐藏的。
（2）实例：
<1>在HTML文档中插入ID:
有用的提示部分
即是在HTML文档中创建一个链接到"有用的提示部分(id=tips)";
<a href ="#tips>访问有用的提示部分
输出结果为：有用的提示部分 访问有用的提示部分 （后半句话可访问）
<2>或者，从另一个页面创建一个链接到"有用的提示部分"(id="tips")":
<a href - "https://www.runoob.com/html/html-links.html#tips">
访问到有用的提示部分</a>
（3）基本的注意事项—有用的提示：
注释： 请始终将正斜杠添加到子文件夹。假如这样书写链接：href=“https://www.runoob.com/html”，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=“https://www.runoob.com/html/”。
8.使用图片链接：
创建图片链接: 
无边框的图片链接:
输出结果：
创建图片链接: 图片
无边框的图片链接: 图片
9.使用书签：在当前的页面链接跳转到指定位置
章节 1
这边显示该章节的内容……
章节 2
这边显示该章节的内容……
章节 3
这边显示该章节的内容……
章节 4
这边显示该章节的内容……
章节 5
这边显示该章节的内容……
输出结果：
查看章节 4（这个可以点击，有下划线）
章节 1
这边显示该章节的内容……
章节 2
这边显示该章节的内容……
章节 3
这边显示该章节的内容……
章节 4
这边显示该章节的内容……
章节 5
这边显示该章节的内容……
10.如何跳出框架，假如你的页面被固定在框架之内。
跳出框架?
点击这里!输出结果：
跳出框架?
点击这里!（这个可以点击，有下划线）
11.创建电子邮件链接：如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）
这是一个电子邮件链接： 发送邮件
注意：单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。
输出结果：
这是一个电子邮件链接： 发送邮件（这个可以点击，有下划线）
12.创建电子邮件链接2 更加复杂的邮件链接。
这是另一个电子邮件链接： 发送邮件!
输出结果：
这是另一个电子邮件链接： 发送邮件!（这个可以点击，有下划线）
标签 描述
定义一个超级链接
标题十、HTML头部
1.使用
2.定义了所有链接的URL
使用定义页面中所有链接默认的链接目标地址。
例子：
菜鸟教程 - 。
注意： （图片）这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 “http://www.runoob.com/images/logo.png”
菜鸟教程（链接，可点击） - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 “_blank”。
3.target="_blank" 属性为打开新窗口
4.提供了HTML文档的meta标记
使用元素来描述HTML文档的描述，关键词，作者，字符集等。
例子：
所有 meta 标签显示在 head 部分
5.HTML元素
（1）元素包含了所有的头部标签元素。在元素中我们可以插入脚本(scripts),样式文件（CSS），及各种meta信息（meta:说明html中的一些关键内容）
（2）可以添加在头部区域的元素标签为：
6.HTML
例子：一个简单的HTML文档应是这样的：
<body>
文档内容...
</body>
7.HTML元素
标签描述了基本的链接地址、链接目标，该标签作为HTML文档中所有的链接标签的默认链接。 例子：8.HTML元素
标签定义了文档与外部资源之间的关系，通常用于连接到样式表。 例子：9.HTML
10.HTML元素
（1）meta标签描述了一些基本的元数据。
（2）标签提供了元数据，元数据会被浏览器所解析，但是元数据并不会显示在页面上。
（3）元数据可以使用于浏览器（如何显示内容或者重新加载页面），搜索引擎（关键词），或者其他Web服务。
（4）META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
（5）一般放置在区域
为网页定义描述内容：
定义网页作者：
每30秒钟刷新当前页面：
11.HTML
3.做一个没有下划线的链接：使用style属性
例子：
4.标签链接到一个外部样式表：
里有多一个我使用了外部样式文件来格式化文本
我也是!
5.使用CSS的方法：
（1）CSS是在HRML 4开始使用的，引入是为了更好的渲染HTML（即装饰）
（2）CSS添加到HTML中的方法：
<1>内联样式：在HTML元素中使用"style"属性
<2>内部样式表：在HTML文档头部区域使用
6.CSS内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法就是在相关的标签中使用样式属性。样式属性可以包含任何CSS属性。
下例可显示如何改变段落的颜色和左外边框
7.HTML样式实例—背景颜色
背景色属性(backgroung-color)定义一个元素的背景颜色：
例子：
这是一个标题
这是一个段落
输出结果为：
大背景为黄色，”这是一个标题“字体为黑色，背景为红色。”这是一个段落“字体为黑色，背景为绿色。
ps:早期背景色属性(background-color)是使用bfcolor属性定义。
8.HTML样式实例–字体，字体颜色，字体大小
（1）我们可以使用font-family(宋体),color(颜色),和font-size(字体大小)属性来定义字体的样式。
例子：
一个标题
一个段落
输出结果：
”一个标题“定义了字体（字体是什么没翻译过） ”一个段落。“字体较小，颜色为红色。
（2）现在通常使用font-family(字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用标签。
9.HTML样式实例—文本对齐方式
（1）使用text-align(文字对齐）属性指定文本的水平与垂直对齐方式：
（2）例子：
居中对齐的标题
这是一个笨蛋!
（3）文本对齐属性text-align取代了旧标签这是一个使用旧标签的居中标题。
10.内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。可以在部分通过
11.外部样式表：
当样式需要被应用到很多页面时，外部样式表会是理想选择。使用外部样式表，我们就可以通过更改一个文件来该改变整个站点的外观。
12.HTML 样式标签
标签 描述
1097
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
