HTML
超文本标记语言(HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。
1 HTML基础
HTML 标题
HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的。
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
HTML 段落
HTML 段落是通过标签 <p> 来定义的。
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
HTML 链接
HTML 链接是通过标签 <a> 来定义的。
<a href="https://www.runoob.com">这是一个链接</a>
HTML 图像
HTML 图像是通过标签 <img> 来定义的.
<img src="/images/logo.png" width="258" height="39" />
2 HTML元素
大多数 HTML 元素可以嵌套(HTML 元素可以包含其他 HTML 元素)。
HTML 文档由相互嵌套的 HTML 元素构成。
<!DOCTYPE html>
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>
<p> 元素:定义了 HTML 文档中的一个段落。
<body> 元素:定义了 HTML 文档的主体。
<html> 元素:定义了整个 HTML 文档。
HTML空元素:没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。菜鸟教程使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。
3 HTML属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现,比如:name="value"。
属性实例
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:
<a href="http://www.runoob.com">这是一个链接</a>
HTML 属性参考手册
菜鸟教程完整的HTML属性列表HTML 标签参考手册
属性 | 描述 |
---|---|
class | 为html元素定义一个或多个类名(classname)(类名从样式文件引入) |
id | 定义元素的唯一id |
style | 规定元素的行内样式(inline style) |
title | 描述了元素的额外信息 (作为工具条使用) |
4 HTML标题
标题(Heading)是通过 <h1> - <h6> 标签(由大到小)进行定义的。
HTML水平线
<hr> 标签在 HTML 页面中创建水平线。可用于分割内容
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
HTML 注释
<!-- 这是一个注释 -->
5 HTML段落
段落是通过 <p> 标签定义的。
HTML 折行
如果希望在不产生一个新段落的情况下进行换行(新行),使用 <br> 标签:
<p>这个<br>段落<br>演示了分行的效果</p>
<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。
显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。
6 HTML格式化标签
HTML 文本格式化标签
标签 | 描述 |
---|---|
<b> | 定义粗体文本 |
<em> | 定义着重文字 |
<i> | 定义斜体字 |
<big> | 定义大号字 |
<small> | 定义小号字 |
<strong> | 定义加重语气 |
<sub> | 定义下标字 |
<sup> | 定义上标字 |
<ins> | 定义插入字 |
<del> | 定义删除字 |
HTML "计算机输出" 标签
标签 | 描述 |
---|---|
<code> | 定义计算机代码 |
<kbd> | 定义键盘码 |
<samp> | 定义计算机代码样本 |
<var> | 定义变量 |
<pre> | 定义预格式文本 |
HTML 引文, 引用, 及标签定义
标签 | 描述 |
---|---|
<abbr> | 定义缩写 |
<address> | 定义地址 |
<bdo> | 定义文字方向 |
<blockquote> | 定义长的引用 |
<q> | 定义短的引用语 |
<cite> | 定义引用、引证 |
<dfn> | 定义一个定义项目。 |
7 HTML链接
HTML使用标签 <a>来设置超文本链接。
<a href="url">链接文本</a>
HTML 链接 - target 属性
使用 target 属性,你可以定义被链接的文档在何处显示。
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>
8 HTML头部
HTML <head> 元素
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
HTML <title> 元素
<title> 标签定义了不同文档的标题。在 HTML/XHTML 文档中是必须的。
HTML <base> 元素
<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接。
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
HTML <link> 元素
<link> 标签定义了文档与外部资源之间的关系。通常用于链接到样式表。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML <style> 元素
<style> 标签定义了HTML文档的样式文件引用地址。也可以直接添加样式来渲染 HTML 文档。
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style type="text/css">
div{border: 1px solid yellow;
color: blue;
font-size: 30px; }
span{ border: 5px dashed blue;
color: yellow;
font-size: 20px; }
</style>
</head>
HTML <meta> 元素
meta标签描述了一些基本的元数据。元数据不显示在页面上,但会被浏览器解析。
META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">
定义网页作者:
<meta name="author" content="Runoob">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
HTML <script> 元素
<script>标签用于加载脚本文件,如: JavaScript。
9 HTML CSS
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。
CSS 可以通过以下方式添加到HTML中,最好的方式是通过外部引用CSS文件。
- 内联样式- 在HTML元素中使用"style" 属性
- 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
- 外部引用 - 使用外部 CSS 文件
HTML样式实例 - 背景颜色
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
HTML 样式实例 - 字体, 字体颜色 ,字体大小
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
HTML 样式实例 - 文本对齐方式
<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>
10 HTML图像
在 HTML 中,图像由<img> 标签定义。<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。
HTML 图像- Alt属性
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
HTML 图像- 设置图像的高度与宽度
height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。
11 HTML表格
表格由 <table> 标签来定义。
每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。 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 表格表头:使用 <th> 标签进行定义
<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 布局 - 使用表格
colspan 属性设置跨列; rowspan 属性设置跨行
<table width="500" height="500" cellspacing="0" border="1">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
</table>
12 HTML列表
HTML 支持有序、无序和定义列表。
HTML无序列表
无序列表使用 <ul> 标签。它是一个项目的列表,使用粗体圆点(典型的小黑圆圈)进行标记。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
HTML 有序列表
有序列表使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
HTML 自定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
13 HTML区块
HTML 可以通过 <div> 和 <span>将元素组合起来。
HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时,通常会以新行来开始(和结束)。实例: <h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。实例: <b>, <td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是块级元素,它可用于组合其他 HTML 元素的容器。
HTML <span> 元素
HTML <span> 元素是内联元素,可用作文本的容器。<span> 元素也没有特定的含义。
14 HTML表单
表单是一个包含表单元素的区域,使用表单标签 <form> 来设置。表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
文本域(Text Fields)
文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
注意:表单本身并不可见。同时,在大多数浏览器中,文本域的默认宽度是 20 个字符。
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
密码字段
密码字段通过标签<input type="password"> 来定义:
<form>
Password: <input type="password" name="pwd">
</form>
单选按钮(Radio Buttons)
表单单选框选项使用<input type="radio"> 标签定义:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
复选框(Checkboxes)
<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<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>
提交按钮(Submit Button)
<input type="submit"> 定义了提交按钮.
在上面的文本框内键入几个字母,然后点击确认按钮,那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。
15 HTML框架
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。
iframe - 设置高度与宽度
height 和 width 属性用来定义iframe标签的高度与宽度。属性默认以像素为单位, 但是可以指定其按比例显示 (如:"80%")。
<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>
iframe - 移除边框
frameborder 属性用于定义iframe表示是否显示边框。设置属性值为 "0" 移除iframe的边框:
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
使用 iframe 来显示目标链接页面
iframe 可以显示一个目标链接的页面,目标链接的属性必须使用 iframe 的属性,如下实例:
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>
16 HTML颜色
17 HTML字符实体
在 HTML 中,某些字符是预留的。例如不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。
结合音标符
音标符 | 字符 | Construct | 输出结果 |
---|---|---|---|
̀ | a | à | à |
́ | a | á | á |
̂ | a | â | â |
̃ | a | ã | ã |
̀ | O | Ò | Ò |
́ | O | Ó | Ó |
̂ | O | Ô | Ô |
̃ | O | Õ | Õ |
HTML字符实体
显示结果 | 描述 | 实体名称 | 实体编号 |
---|---|---|---|
空格 | |   | |
< | 小于号 | < | < |
> | 大于号 | > | > |
& | 和号 | & | & |
" | 引号 | " | " |
' | 撇号 | ' (IE不支持) | ' |
¢ | 分 | ¢ | ¢ |
£ | 镑 | £ | £ |
¥ | 人民币/日元 | ¥ | ¥ |
€ | 欧元 | € | € |
§ | 小节 | § | § |
© | 版权 | © | © |
® | 注册商标 | ® | ® |
™ | 商标 | ™ | ™ |
× | 乘号 | × | × |
÷ | 除号 | ÷ | ÷ |
虽然 html 不区分大小写,但实体字符对大小写敏感。查看完整的HTML实体:请点击HTML 实体参考手册。
18 HTML速查列表
HTML 基本文档
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>
基本标签(Basic Tags)
<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
<p>这是一个段落。</p>
<br> (换行)
<hr> (水平线)
<!-- 这是注释 -->
文本格式化(Formatting)
<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> (上标文本)
链接(Links)
普通的链接:<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>
图片(Images)
<img loading="lazy" src="URL" alt="替换文本" height="42" width="42">
样式/区块(Styles/Sections)
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>
无序列表
<ul>
<li>项目</li>
<li>项目</li>
</ul>
有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
定义列表
<dl>
<dt>项目 1</dt>
<dd>描述项目 1</dd>
<dt>项目 2</dt>
<dd>描述项目 2</dd>
</dl>
表格(Tables)
<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>
框架(Iframe)
<iframe src="demo_iframe.htm"></iframe>
表单(Forms)
<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>
实体(Entities)
< 等同于 <
> 等同于 >
© 等同于 ©
19 HTML 标签简写及全称
标签 | 英文全称 | 中文说明 |
---|---|---|
a | Anchor | 锚 |
abbr | Abbreviation | 缩写词 |
acronym | Acronym | 取首字母的缩写词 |
address | Address | 地址 |
alt | alter | 替用(一般是图片显示不出的提示) |
b | Bold | 粗体(文本) |
bdo | Direction of Text Display | 文本显示方向 |
big | Big | 变大(文本) |
blockquote | Block Quotation | 区块引用语 |
br | Break | 换行 |
cell | cell | 巢 |
cellpadding | cellpadding | 巢补白 |
cellspacing | cellspacing | 巢空间 |
center | Centered | 居中(文本) |
cite | Citation | 引用 |
code | Code | 源代码(文本) |
dd | Definition Description | 定义描述 |
del | Deleted | 删除(的文本) |
dfn | Defines a Definition Term | 定义定义条目 |
div | Division | 分隔 |
dl | Definition List | 定义列表 |
dt | Definition Term | 定义术语 |
em | Emphasized | 加重(文本) |
font | Font | 字体 |
h1~h6 | Header 1 to Header 6 | 标题1到标题6 |
hr | Horizontal Rule | 水平尺 |
href | hypertext reference | 超文本引用 |
i | Italic | 斜体(文本) |
iframe | Inline frame | 定义内联框架 |
ins | Inserted | 插入(的文本) |
kbd | Keyboard | 键盘(文本) |
li | List Item | 列表项目 |
nl | navigation lists | 导航列表 |
ol | Ordered List | 排序列表 |
optgroup | Option group | 定义选项组 |
p | Paragraph | 段落 |
pre | Preformatted | 预定义格式(文本 ) |
q | Quotation | 引用语 |
rel | Reload | 加载 |
s/ strike | Strikethrough | 删除线 |
samp | Sample | 示例(文本 |
small | Small | 变小(文本) |
span | Span | 范围 |
src | Source | 源文件链接 |
strong | Strong | 加重(文本) |
sub | Subscripted | 下标(文本) |
sup | Superscripted | 上标(文本) |
td | table data cell | 表格中的一个单元格 |
th | table header cell | 表格中的表头 |
tr | table row | 表格中的一行 |
tt | Teletype | 打印机(文本) |
u | Underlined | 下划线(文本) |
ul | Unordered List | 不排序列表 |
var | Variable | 变量(文本) |
CSS
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:
CSS声明总是以分号(;)结束,声明总以大括号({})括起来。
CSS注释以 /* 开始, 以 */ 结束, /*这是个注释*/
1 CSS创建
插入样式表的方法有三种:外部样式表(External style sheet);内部样式表(Internal style sheet);内联样式(Inline style)
外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择,可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在(文档的)头部:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
内部样式表
当单个文档需要特殊的样式时,就应该使用内部样式表。使用 <style> 标签在文档头部定义。
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
内联样式
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
多重样式
如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。
例如,外部样式表拥有针对 h3 选择器的三个属性:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
而内部样式表拥有针对 h3 选择器的两个属性:
h3
{
text-align:right;
font-size:20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接,那么 h3 得到的样式是:
color:red;
text-align:right;
font-size:20pt;
即颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代。
2 Id和Class选择器
如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。以下的样式规则应用于元素属性 id="para1":
#para1
{
text-align:center;
color:red;
}
class 选择器
class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:
在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。
.center {text-align:center;}
也可以指定特定的HTML元素使用class。在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:
p.center {text-align:center;}
3 CSS链接
链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。特别的链接,可以有不同的样式,这取决于他们是什么状态:
- a:link - 正常,未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
当设置为若干链路状态的样式,也有一些顺序规则:
- a:hover 必须跟在 a:link 和 a:visited后面
- a:active 必须跟在 a:hover后面