前端入门学习--HTML

发表于 | 分类于 | | 阅读次数 |
字数统计 6,138 | 阅读时长 25

写在前面。
前端知识真的还是比较有用的。一直要把前端的学习提上日程，因为各种事情各种拖延，写爬虫的时候也是捎带学习前端的东西，还是需要系统的了解下。

All from W3school.

HTML简介

HTML是用来描述网页的一种语言。指的是超文本标记语言（Hyper Text Markup Language）,不是一种编程语言，而是一种标记语言。

标签

HTML标签是由尖括号包围的关键词比如html，便签通常是成对出现的，比如

1
<b>和</b>

第一个是开始，第二个标签是结束。

文档=网页

HTML文档描述网页，包含HTML标签和纯文本。Web浏览器的作用就是读取HTML文档，并以网页的形式显示他们。

1
2
3
4
5
6
<html>
<body>
<h1>hello world</h1>
<p>这是一个段落，嗯，我说他是他就是</p>
</body>
</html>

例子解释

1
2
3
4
<html>与</hrml>之间的文本描述网页  
<body>与</body>之间的文本是可见的页面内容  
<h1>与</h1>之间的文本被显示为标题  
<p>与</p>之间的文本被显示为段落

HTML 基础

HTML 标题

HTML标题是通过h1-h6等标签进行定义的。 

1
2
3
<h1>这是个标题</h1>
<h2>嗯，这还是个标题</h2>
<h3>没错，又是一个标题</h3>

HTML 段落

HTML段落通过p标签进行定义。

1
2
<p>段落一</p>
<p>段落二</p>

HTML 链接

HTML链接是通过a进行定义的。

1
<a href="https://x-nicolo.github.io/">这是肖洒的博客</a>

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

HTML 图像

HTML图像是通过img标签进行定义的。 

1
<img src="img.jpg" width="104" height="142" />

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

HTML 元素

HTML元素指的是从开始标签到结束标签的所有代码。

HTML 属性

HTML标签可以拥有属性。属性提供了有关HTML元素的更多信息。
属性总是以名称/值对的形式出现。比如：name=”value”.
属性总是在HTML元素的开始标签中规定。

属性例子

1
2
3
4
5
6
1.  
<h1 align="center">拥有关于对齐方式的附加信息。  
2.  
<body bgcolor="yellow">拥有关于背景颜色的附加信息。  
3.  
<table border="1">拥有关于表格边框的附加信息

HTML 标题

标题是通过h1-h6等标签进行定义的。
h1定义最大的标题，h6定义最小的标题。

HTML 水平线

1
<hr />

标签在HTML页面中创建水平线hr元素可用与分隔内容。
例子：

1
2
3
4
5
<p>这是第一段</p>  
<hr />
<p>这是第二段</p>  
<hr />
<p>这是第三段</p>

提示：使用水平线 (hr 标签)来分隔文章中的小节是一个办法（但并不是唯一的办法）。

HTML 注释

科技将注释插入HTML代码中。
例子： 

1
<!--这里是注释，不显示-->

HTML 段落

段落通过p标签定义。

HTML 折行

不产生一个新段落的情况下进行换行。 

1
<p>我就是<br />想试试<br />这个功能</p>

注：br / 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
注:浏览器忽略了源代码中的排版（省略了多余的空格和换行）

HTML 样式

style属性用于改变HTML元素的样式。

HTML的style属性

style属性的作用：提供了一种改变所有HTML元素的样式的通用方法。
样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用style属性直接将样式添加到HTML元素，或者间接地在独立的样式表中（CSS 文件）进行定义。

HTML 样式实例-背景颜色

background-color属性为元素定义 了背景颜色：

1
2
3
4
5
6
<html>
<body style="background-color:yellow">
<h2 style="background-color:red">这里是标题</h2>  
<p style="background-color:green">这里是一个段落</p>
</body>
</html>

注意：style属性淘汰了旧的bgcolor属性。

HTML 样式实例-字体、颜色和尺寸

front-family、color以及front-size属性分别定义元素中文字的字体系列、颜色和字体大小。

1
2
3
4
5
6
<html>
<body>
<h1 style="front-family:verdana">标题</h1>
<p style="front-family:arial;color:red;font-size:20px;"段落</p>
</body>
</html>

HTML 样式实例-文本对齐

1
2
3
4
5
6
<html>
<body>
<h1 style="text-align:center">又是标题啊</h1>  
<p>听说上面的标题会居中</p>
</body>
</html>

HTML 引用

HTML短的引用

1
<p>下面是引用：<br /><q>上面说的对，我是引用</q></p>

HTML 长应用

HTML blockquote 元素定义被引用的节。

1
2
3
4
<p>下面的这个引用听说很长</p><br />  
<blockquote>  
我就是那个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的引用。  
</blockquote>

HTML 缩略词abbr

HTML abbr 元素定义缩写或首字母缩略语。
例子：

1
<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>

HTML 计算机代码元素

HTML 键盘格式

kbd 元素定义键盘输入

1
2
<p>打开一个文件，选择</p>
<p><kbd>File|Open...</kbd></p>

HTML 样本格式

HTML code 元素定义编程代码示例。
注意：code 元素不保留多余的空格和折行。

例子：

1
2
3
4
5
6
7
8
9
<p>Coding Example:</p>
<code>
var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"bule"
}
</code>

如果需要保留多余的空格和折行，必须在pre元素中包围代码。

1
2
3
4
5
6
7
8
9
10
11
<p>Coding Example</p>
<code>
<pre>
var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"bule"
}
</pre>
</code>

HTML 变量格式化

var 元素定义数学变量

1
2
3
<p>Einstein wrote:</p>
<p><var>E = m c<sup>2</sup></var></p>

HTML 注释

注释标签<！–与–>用于在HTML插入注释

1
<!--这里是注释，什么意思呢，就是写在这里的东西都不会显示，所以你懂了吧，注释注释////-->

HTML CSS

如何使用样式

当浏览器读到一个样式表，它就会按照这个样式来度文档进行格式化。有以下三种方式：

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

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

内部样式表

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

1
2
3
4
5
6
7
<head>
<style type= "text/css">
body{background-color:red}
p{margin-left:20px}
</style>
</head>

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性，样式属性可以包含任何CSS属性，下面的例子显示如何改变段落的颜色和左外边距。

1
2
3
<P style = "color:red;margin-left:20px">
这是一个段落。  
</p>

HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。
几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

HTML 链接语法

1
<a href="url">link text</a>

href属性规定链接的目标。开始标签和结束标签之间的文字被作为超链接来显示。

1
<a href="https://x-nicolo.github.io/">肖洒的博客</a>

HTML 链接-target属性

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

1
<a href = "http://x-nicolo.github.io" target="_blank">访问肖洒的博客！</a>

HTML 链接-name属性

name 属性规定锚（anchor）的名称。
您可以使用name属性创建HTML页面中的书签.书签不会以任何特殊方式显示，它对读者是不可见的。当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法：
1
<a name = "label">锚</a>

例子：
首先，在HTML文档中对锚进行命名(创建一个书签)：

1
<a name="tips">基本的注意事项-有用的提示</a>

然后，在同一个文档中创建指向该锚的链接：

1
<a href="#tips">有用的提示</a>

HTML 图像

图像标签img 和源属性src
在HTML中，图像由img标签定义，img是空标签，只包含属性，并且没有闭合标签。
要在页面上显示图像，需要使用源属性src，源属性的值是图像的URL地址。
定义图像的语法是：

1
<img src = "url" />

URL指存储图像的位置。如果名为 “boat.gif” 的图像位于www.w3school.com.cn的images 目录中，那么其URL为./images/boat.gif

替换文本属性

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

1
<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

HTML背景图片

本例演示如何向HTML页面添加背景图片。

1
2
3
4
5
6
7
<html>
<body background="/i/eg_background.jpg">
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面，图像会进行重复。</p>
</body>
</html>

HTML 排列图片

1
2
3
4
5
6
7
8
9
10
11
<html>
<body>
<h2>未设置对齐方式的图像：</h2>
<p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>
<h2>已设置对齐方式的图像：</h2>
<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>
<p>请注意，bottom 对齐方式是默认的对齐方式。</p>
</body>
</html>

HTML 浮动图像

如何使图片浮动至段落的左边或右边。

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<body>
<p>
<img src ="/i/eg_cute.gif" align ="left"> 
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>
<p>
<img src ="/i/eg_cute.gif" align ="right"> 
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>
</body>
</html>

HTML 调整图像大小

如何将图片调整到不同的尺寸. 

1
2
3
4
5
6
7
8
9
10
<html>
<body>
<img src="/i/eg_mouse.jpg" width="50" height="50">
<br />
<img src="/i/eg_mouse.jpg" width="100" height="100">
<br />
<img src="/i/eg_mouse.jpg" width="200" height="200">
<p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p>
</body>
</html>

HTML 制作图像链接

如何将图像作为一个链接使用。

1
2
3
4
5
6
7
8
9
10
<html>
<body>
<p>
可以把图像作为链接来使用：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>
</body>
</html>

HTML 表格

表格由table标签来定义。每个表格均有若干行（由tr标签定义），每行被分割为若干单元格（由td标签定义）。字母td指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 

1
2
3
4
5
6
7
8
9
10
<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 表格和边框属性

使用边框属性来显示一个带有边框的表格：

1
2
3
4
5
6
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

HTML 表格的表头

表格的表头使用th标签进行定义。大多数浏览器会把表头显示为粗体居中的文本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</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 表格中的空单元格

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。比如： 

1
2
3
4
5
6
7
8
9
10
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>

注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个 空格占位符，就可以将边框显示出来。

1
2
3
4
5
6
7
8
9
10
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>row 2, cell 2</td>
</tr>
</table>

跨行或跨列的表格单元格

如何定义跨行或跨列的表格单元格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
<body>
<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>
<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>
</body>
</html>

HTML 列表

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

HTML 无序列表

无序列表是一个项目的列表，此列项目使用粗体原点进行标记。
无序列表使用 ul 标签。

1
2
3
4
<ul>
<li>牛奶<li>
<li>咖啡<li>
</ul>

HTML 有序列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 dl 标签开始，每个自定义列表项以 dt开始，每个自定义列表项的定义以 dd 开始。

1
2
3
4
5
<dl>
<dt>Coffee</dt>  
<dd>-black hot drink</dd>
<dt>-white cold drink</dd>
</dl>

HTML 区块

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

HTML 区块元素

块级元素在浏览器显示时，通常会以新行来开始。
例如 h1 p ul table

HTML 内联元素

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

HTML div 元素

div 是块级元素，可用于组合其他HTML元素的容器。

HTML span 元素

HTML span 元素是内联元素，可用作文本容器。

HTML 布局

大多数网站可以使用

或者 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观

HTML 布局-使用 div元素

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nicolo</title>
</head>
<body>
<div id="container" style="width:500px">
 
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
 
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
 
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
 
</div>
 
</body>
</html>

HTML 表单

HTML表单用于收集不同类型的用户输入。
表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签

来设置:

HTML 表单-输入元素

多数情况下被用到的表单标签是输入标签。input.
输入类型是由类型属性定义的，大多数经常被用到的输入类型如下。

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

密码字段

密码字段通过标签 input type=”password”来定义。

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

单选按钮

input type=”radio” 标签定义了表单单选边框选项。

1
2
3
4
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

复选框

input type=”checkbox” 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

1
2
3
4
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

提交按钮

input type=”submit”定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

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

HTML 框架

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

1
2
3
iframe语法:
<iframe src="URL"></iframe>
该URL指向不同的网页。

Iframe-设置高度与宽度

height和width属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位，但是可以指定其按比例显示。

1
<iframe src="demo_iframe.html" frameborder="0"></iframe>

Iframe -移除边框

frameborder属性用于定义iframe表示是否显示边框。
设置属性值为”0”移除边框。

1
<iframe src="demo_iframe.html" frameborder="0"></iframe>

使用iframe来显示目标链接页面

iframe可以显示一个目标链接的页面
目标链接的属性必须使用iframe的属性，如下实例:

1
2
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://x-nicolo.github.io" target="iframe_a">Nicolo</a></p>

HTML颜色

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

颜色值

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。

例子：
相对于使用rgb(255,255,0)使用rgba(255,255,0,0.25)可以实现设置颜色透明度的功能，这里的0.5表示透明度，范围0~1。

1
2
3
4
5
6
7
8
9
10
11
12
<p style="background-color:rgb(255,255,0)">
通过 rbg 值设置背景颜色
</p>
<p style="background-color:rgba(255,255,0,0.25)">
通过 rbg 值设置背景颜色
</p>
<p style="background-color:rgba(255,255,0,0.5)">
通过 rbg 值设置背景颜色
</p>
<p style="background-color:rgba(255,255,0,0.75)">
通过 rbg 值设置背景颜色
</p>

HTML 颜色名

目前所有浏览器都支持以下颜色名。
141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）。下表列出了所有颜色的值，包括十六进制值。
Remark 提示: 17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。点击其中一个颜色名称（或一个十六进制值）就可以查看与不同文字颜色搭配的背景颜色。

HTML 颜色值

颜色由红(R)、绿(G)、蓝(B)组成。

颜色值

颜色值由十六进制来表示红、绿、蓝（RGB）。
每个颜色的最低值为0(十六进制为00)，最高值为255(十六进制为FF)
十六进制值的写法为#号后跟三个或六个十六进制字符。
三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。

HTML 脚本

JavaScript 使 HTML 页面具有更强的动态和交互性。
插入一个脚本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nicolo</title>
</head>
<body>
<script>
document.write("Hello World")
</script>
</body>
</html>

HTML script 标签

script标签用于定义客户端脚本，比如JavaScript。
script元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出”Hello World!”：

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

HTML noscript 标签

noscript 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
noscript元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript>元素中的内容：

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

JavaScript体验

JavaScript可以直接在HTML输出:

1
document.write("<p>这是一个段落。</p>");

JavaScript事件响应:

1
<button type="button" onclick="myFunction()">点我！</button>

JavaScript处理 HTML 样式:

1
document.getElementById("demo").style.color="#ff0000";

HTML 字符实体

HTML中的预留字符必须被替换为字符实体。
一些在键盘上找不到的字符也可以使用字符实体来替换。

HTML 实体

在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 字符实体类似这样：

1
2
3
&entity_name;
或
&#entity_number;

如需显示小于号，我们必须这样写：< 或 < 或 <

不间断空格(Non-breaking Space)

HTML 中的常用字符实体是不间断空格( )。浏览器总是会截短 HTML 页面中的空格。如果您在文本中写10个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体。

HTML URL

URL是一个网页地址。URL可以由字母组成，或互联网协议（IP）地址： 192.68.20.50。大多数人进入网站使用网站域名来访问，因为名字比数字更容易记住。

URL- 统一资源定位器

Web浏览器通过URL从Web服务器请求页面。当您点击 HTML 页面中的某个链接时，对应的a标签指向万维网上的一个地址。一个统一资源定位器(URL) 用于定位万维网上的文档。

URL 字符编码

URL只能使用ASCII字符集.来通过因特网进行发送。由于URL常常会包含ASCII合之外的字符，URL 必须转换为有效的 ASCII 格式。URL编码使用 “%”其后跟随两位的十六进制数来替换非 ASCII 字符。
URL不能包含空格。URL编码通常使用 + 来替换空格。

HTML 速查列表

备日常使用。

HTML 基本文档

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>

HTML 基本标签

1
2
3
4
5
6
7
8
9
10
11
<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
 
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->

HTML 文本格式化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
 
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）

HTML 链接

1
2
3
4
5
6
普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

图片

1
<img src="URL" alt="替换文本" height="42" width="42">

样式/区块

1
2
3
4
5
6
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

无序列表

1
2
3
4
<ul>
    <li>项目</li>
    <li>项目</li>
</ul>

有序列表

1
2
3
4
<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

定义列表

1
2
3
4
5
6
<dl>
  <dt>项目 1</dt>
    <dd>描述项目 1</dd>
  <dt>项目 2</dt>
    <dd>描述项目 2</dd>
</dl>

表格

1
2
3
4
5
6
7
8
9
10
<table border="1">
  <tr>
    <th>表格标题</th>
    <th>表格标题</th>
  </tr>
  <tr>
    <td>表格数据</td>
    <td>表格数据</td>
  </tr>
</table>

框架

1
<iframe src="demo_iframe.htm"></iframe>

表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
 
</form>

实体

1
2
3
&lt; 等同于 <
&gt; 等同于 >
&#169; 等同于 ©
谢谢你请我吃糖果！