HTML入门教程 – FGP

什么是HTML

HTML 是用来描述网页的一种语言。

长什么样子

HTML文件的后缀

.html
.htm

结构

HTML由标签组成，标签是由尖括号围起来的关键词，如<html>

HTML标签一般成对存在，如<b>和</b>，其中第一个为开始标签，第二个为结束标签

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset=”utf-8″> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

HTML基础

标题

<h1>这是一个标题</h1>
<h2>标题可以从h1--h2</h2>

段落

<p>这是一个段落</p>

链接

<a href="https://www.nilcloud.link">这是一个网页链接</a>

图像

<img decoding="async" arc"/images/logo.png" width="258" height="39" />

HTML元素

HTML元素由开始标签起始，结束标签终止，元素的内容是这两个标签之间的内容；

没有内容的HTML元素被称为空元素，空元素没有关闭标签；

关闭空元素的正确方法是在开始标签中添加斜杠，比如<br/>

HTMl不区分大小写，但万维联盟在HTML4中推荐使用小写

HTML属性

属性是HTML元素提供的附加信息，一般在开始标签中被描述，一般是键值对

使用与大多数HTML元素的属性：

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

HTML标题和段落

标题

<h1>这是一级标题</h2>
<h2>这是二级标题</h2>

水平线

<p>这是一个段落</p>
<hr>
<p>这是一个段落</p>

注释

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

段落

<p>这是一个段落</p>

折行

<p>这是第一行<br>这是第二行<br>这是第三行，但都属于一个段落</p>

HTML文本格式化

HTML 文本格式化标签

标签	描述
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

HTML “计算机输出” 标签

标签	描述
<code>	定义计算机代码
<kbd>	定义键盘码
<samp>	定义计算机代码样本
<var>	定义变量
<pre>	定义预格式文本

HTML 引文, 引用, 及标签定义

标签	描述
<abbr>	定义缩写
<address>	定义地址
<bdo>	定义文字方向
<blockquote>	定义长的引用
<q>	定义短的引用语
<cite>	定义引用、引证
<dfn>	定义一个定义项目。

HTML链接

HTML使用标签 <a> 来设置超文本链接

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

HTML链接的id属性

id属性可用于创建一个HTML文档书签，但书签不会显示在页面中

<!-- 在HTMl文档中插入ID： -->
<a id="tips">有用的提示部分</a>
<!-- 在HTML文档中船舰一个链接到“有用的提示部分（id="tips"）”： -->
<a href="#tips">访问有用的提示部分</a>
<!-- 或者从另一个页面创建一个链接到“有用的提示部分（id="tips"）”： -->
<a href="https://www.nilcloud.link/html/html-links.html#tips">
访问有用的提示部分</a>

HTML头部

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

使用 <title> 标签定义HTML文档的标题

使用 <base> 定义页面中所有链接默认的链接目标地址。

使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。

使用 <script> 标签加载脚本文件

使用 <link> 标签定义文档与外部资源之间的关系，通常用于连接到样式表

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

使用 <style> 元素定义HTML文档的样式文件引用地址，在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

<head>
<style type="text/css">
body {
    background-color:yellow;
}
p {
    color:blue
}
</style>
</head>

使用 <meta> 元素描述一些基本的元数据，元数据不会显示，但会被浏览器解析，通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据；还可以适用于浏览器（如何显示内容或加载页面），搜索引擎（关键词），或其他web服务。<meta>一般放置于<head>区域

<!-- 为搜索引擎定义关键词： -->
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<!-- 为网页定义描述内容： -->
<meta name="description" content="免费 Web & 编程 教程">
<!-- 定义网页作者： -->
<meta name="author" content="Goblog">
<!-- 每30秒钟刷新当前页面： -->
<meta http-equiv="refresh" content="30">

HTML样式-CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用”style” 属性

内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS

外部引用 – 使用外部 CSS 文件

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。在标签中使用样式属性定义内联样式

<!-- 改变段落的颜色和左外边距 -->
<p style="color:blue;margin-left:20px;">这是一个段落。</p>

<!-- 定义元素的背景色 -->
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

<!-- 我们可以使用font-family(字体)，color，和font-size属性来定义字体的样式 -->
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

<!-- 使用 text-align(文字对齐)属性指定文本的水平与垂直对齐方式 -->
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。在<head>内部使用<style>标签定义内部样式

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML图像

图像标签

图像由<img>标签定义，<img>标签是一个空标签，不需要闭合标签

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

图像标签属性

<!-- src源属性的值是图像的URL地址 -->
<!-- alt属性用来为图像定义遗传可替换的文本，当图像无法被加载时，由该文本替换 -->
<!-- width，height属性用于设置图像的高度与宽度，默认单位为像素 -->

<img> <!-- 定义图像 -->
<map> <!-- 定义图像地图 -->
<area> <!-- 定义图像地图中的可点击区域 -->

HTML表格

表格由 <table> 标签定义。表格的行由 <tr> (table raw)定义，每行中的单元格由 <td> (table data)定义。

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

HTML表格和边框属性

如果不定义边框属性，则表格将不会显示边框

<!-- 使用边框属性来显示一个带有边框的表格 -->
<table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

HTMl表格表头

表格的表头使用 <th> (table head)标签进行定以

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

HTML 表格标签

标签	描述
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

HTMl列表

HTML支持有序、无序和定义列表

无序列表

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

自定义列表

<!-- 自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始 -->
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

HTML区块

HTML可以通过<div>和<span>将元素组合起来

HTML区块元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table>

HTML内联元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

HTML<div>元素

<div>元素是块级元素，它可用于组合其他HTML元素的容器，没有特殊的含义

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

HTML<span>元素

<span>元素是内联元素，可用作文本的容器，也没有特殊的含义

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

HTML表单和输入

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

HTML表单

表单是一个包含表单元素的区域

表单元素是允许用户在表单中输入内容的区域，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。

我们可以使用<form>标签来创建表单

<form>
.
input 元素
.
</form>

输入元素

多数情况下用到的表单标签是输入标签<input>

输入类型是由type属性定义的

下面由集中常用的输入类型

文本域

文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时就会用到文本域

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

注意：表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度时20个字符

密码字段

密码字段通过标签 <input type="password"> 来定义

<form>
Password: <input type="password" name="pwd">
</form>

注意：密码字段字符不会明文显示，而是以星号 * 或圆点 . 替代

单选按钮

<input type="radio">标签定义了表单的单选框选项

<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>

复选框

<input type="checkbox">定义了复选框，复选框可以选取一个或多个选项

<form>
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>

提交按钮

<input type="submit">定义了提交按钮

当用户单击确认按钮时，表单内容就会被发送到服务器。表单的动作属性action定义了服务端的文件名（就是说表单会被发送到action指定的文件，并由该文件去解析表单）

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

以上示例中有一个method属性，它用于定义表单数据的提交方式，可以是以下两个值：

post：HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。

get：默认值，HTTP GET方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.nilcloud.link/?page=1，这里的 page=1 就是 get 方法提交的数据。

HTML表单标签

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>New	指定一个预先定义的输入控件选项列表
<keygen>New	定义了表单的密钥对生成器字段
<output>New	定义一个计算结果

注：New事HTML5中定义的新标签

HTML框架

通过使用框架，可以在用一个浏览器窗口中显示不止一个页面

iframe标签

<!-- 语法，这里的URL指向不同的网页 -->
<iframe src="URL"></iframe>
<!-- 通过height和width属性定义iframe标签的高度和宽度（默认单位为像素，也可以按器比例显示(如："80%")）
<!-- 使用frameborder属性移除边框 -->
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
<!-- 使用iframe来显示目标链接页面 -->
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.nilcloud.link" target="iframe_a" rel="noopener">GoBlog</a></p>

HTML颜色

HTML颜色由红、绿、蓝混合而成

颜色值

颜色值由十六进制来表示红、绿、蓝（RGB）。

每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。

十六进制值的写法为 # 号后跟三个或六个十六进制字符。

三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。

列如：rgb(0,216,255)

颜色名

HTML颜色名参考 RUNOOB.COM

HTML脚本

JavaScript 使 HTML 页面具有更强的动态和交互性

<script>标签

<script> 标签用于定义客户端脚本，比如 JavaScript

<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件

<script>
document.write("Hello World!");
</script>

<noscript>标签

<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

HTML字符实体

HTML 中的预留字符必须被替换为字符实体。

一些在键盘上找不到的字符也可以使用字符实体来替换。

HTML实体

在HTML中有些字符是预留的，比如 < 和 > 符号，我们不能使用这个符号，否则会被浏览器误认为是标签。

如果我们想使用这些预留字符，就需要使用字符实体，例如（< == < == $#060;）这些都是小于号 < 的实体

字符实体一般类似这样 &entity_name;或&#entity_number;

提示：有些浏览器可能对实体名<不支持，就需要使用都实体数字&#60

不间断空格（Non-breaking Space）

HTMl中常用字符实体是不间断空格 

浏览器会截短页面中的空格（就是说浏览器会把多个连续的空格变成一个空格），如果需要在页面中使用多个连续的空格，就需要使用 字符实体

结合音标符

发音符号是加到字母上的一个”glyph(字形)”。

音标符	字符	Construct	输出结果
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

HTML字符实体

注：字体名称对大小写敏感

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
“	引号	"	"
‘	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	人民币/日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

HTML URL

HTML统一资源定位器(Uniform Resource Locators)即URL

URL是一个网页地址

URL – 统一资源定位器

Web浏览器通过URL从Web服务器请求页面

语法规则

scheme://host.domain:port/path/filename

说明:

scheme – 定义因特网服务的类型。最常见的类型是 http
host – 定义域主机（http 的默认主机是 www）
domain – 定义因特网域名，比如 runoob.com
:port – 定义主机上的端口号（http 的默认端口号是 80）
path – 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename – 定义文档/资源的名称

常见的 URL Scheme

Scheme	访问	用于…
http	超文本传输协议	以 http:// 开头的普通网页。不加密。
https	安全超文本传输协议	安全网页，加密所有信息交换。
ftp	文件传输协议	用于将文件下载或上传至网站。
file		您计算机上的文件。

URL 字符编码

URL只能使用ASCII字符集

URL编码使用 % 其后跟随两位的十六进制数来替换非ASCII字符

URL不能包含空格，URL编码通常使用 + 来替换空格

结语

至此，您已经完成了HTML基础的学习，接下来您可以继续学习HTML5的知识，也可以去学习CSS，JavaScript来美化您的网页

下面是HTML的速查列表和标签简写及全程对照表，方便您记忆和使用

HTML速查列表 – GoBlog

HTML 标签简写及全称 – GoBlog