HTML基础学习HTML 样式 HTML 样式实例 - 背景颜色 HTML 样式实例 - 字体、颜色和尺寸 HTML 样

HTML 样式

HTML 样式实例 - 背景颜色

<body style="background-color:yellow">

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

<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

HTML 样式实例 - 文本对齐

<h1 style="text-align:center">This is a heading</h1>

HTML 文本格式化

预格式文本 `pre`

<pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>

缩写和首字母缩写

<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>

效果：

文字方向

<p>
如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
</p>


<bdo dir="rtl">
Here is some Hebrew text
</bdo>

效果：

块引用

<body>

这是长的引用：
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>

这是短的引用：
<q>
这是短的引用。
</q>

<p>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
</p>

</body>

效果：

删除字效果和插入字效果

<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

效果

文本格式化标签

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

HTML 引用

HTML <q> 用于短的引用

<p>WWF 的目标是：<q>构建人与自然和谐共存的世界。</q></p>

用于长引用的 HTML <blockquote>

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

浏览器通常会对 <blockquote> 元素进行缩进处理。

<p>以下内容引用自 WWF 的网站：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来，WWF 一直致力于保护自然界的未来。
世界领先的环保组织，WWF 工作于 100 个国家，
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>

效果：

用于缩略词的 HTML <abbr>

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

效果

用于定义的 HTML <dfn>

HTML <dfn> 元素定义项目或缩写的定义。

<dfn> 的用法，按照 HTML5 标准中的描述，有点复杂：

如果设置了 <dfn> 元素的 title 属性，则定义项目：

<p>The <dfn title="World Health Organization">WHO</dfn> was founded in 1948.</p>

效果：

2.如果 <dfn> 元素包含具有标题的 <abbr> 元素

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

效果：

用于联系信息的 HTML <address>

HTML <address> 元素定义文档或文章的联系信息（作者/拥有者）。

此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。

<address>
Written by Donald Duck.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

效果：

用于著作标题的 HTML <cite>

HTML <cite> 元素定义著作的标题。

浏览器通常会以斜体显示 <cite> 元素。

<img src="123.png" width="220" height="220" alt="The Scream">
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

效果：

用于双向重写的 HTML <bdo>

HTML <bdo> 元素定义双流向覆盖（bi-directional override）。

<bdo> 元素用于覆盖当前文本方向：(文字呈现阅读方向)

<p>
如果您的浏览器支持 bdo，则文本将从右向左进行书写 (rtl)：
</p>

<bdo dir="rtl">
This line will be written from right to left
</bdo>

效果：

条件注释

<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->

条件注释定义只有 Internet Explorer 执行的 HTML 标签。

HTML 链接

HTML 超链接（链接）

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

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

我们通过使用 <a> 标签在 HTML 中创建链接。

有两种使用 <a> 标签的方式：

通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签

HTML 链接语法

链接的 HTML 代码很简单。它类似这样：

<a href="https://www.baidu.com">百度</a>

上面这行代码显示为百度

href 属性规定链接的目标。

开始标签和结束标签之间的文字被作为超级链接来显示。

HTML 链接 - target 属性

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

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

<a href="https://www.baidu.com" target="_blank">百度</a>

HTML 链接 - name 属性

name 属性规定锚（anchor）的名称。

您可以使用 name 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示，它对读者是不可见的。

当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法：

<a name="label">锚-这是一段文字</a>

提示：锚的名称可以是任何你喜欢的名字。

提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。

效果：锚-这是一段文字

您也可以在其他页面中创建指向该锚的链接：

<a href="https://www.baidu.com#tips">有用的提示</a>

效果有用的提示

HTML 图像

图像标签（<img>）和源属性（Src）

<img src="url" />

替换文本属性（Alt）

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

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

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

背景图片

<body  background="/Web/234.png">
</body>

图片对齐方式

<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>
<img src ="/i/eg_cute.gif" align ="left"> 
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>

<p>
<img src ="/i/eg_cute.gif" align ="right"> 
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>

效果

修改图像尺寸

<img src="/i/eg_mouse.jpg" width="50" height="50">

给图片添加链接

点击图片会跳转到百度

<p>
您也可以把图像作为链接来使用：
<a href="https://www.baidu.com/">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>

把图像转换为图像映射

<a href="/example-2019/html/html_ismap.html">
<img src="/i/eg_planets.jpg" ismap />
</a>

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>

效果如下

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

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

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

表格的表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<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>

效果如下

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

表格中的空单元格

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

<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>

浏览器可能会这样显示：

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

<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>

带有标题的表格

<table border="6">
<caption>我的标题</caption>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

效果

我的标题
100	200	300
400	500	600

跨行或跨列的表格单元格

<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>

效果：

姓名	电话
Bill Gates	555 77 854	555 77 855

姓名	Bill Gates
电话	555 77 854
电话	555 77 855

单元格边距(Cell padding)


<h4>没有 cellpadding：</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有 cellpadding：</h4>
<table border="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

效果

单元格间距(Cell spacing)

<h4>没有 cellspacing：</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有 cellspacing：</h4>
<table border="1" 
cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

效果

HTML 列表

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

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

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

效果：

Coffee
Milk

有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

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

效果

Coffee
Milk

定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

效果如下

Coffee: Black hot drink
Milk: White cold drink

HTML <div> 和 <span>

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

HTML 块元素

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

编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。

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

例子：<h1>, <p>, <ul>, <table>

HTML 内联元素

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

例子：<b>, <td>, <a>, <img>

HTML 类

对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。

为相同的类设置相同的样式，或者为不同的类设置不同的样式。

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>
<p>
London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.
</p>
</div> 

</body>
</html>

分类块级元素

HTML <div> 元素是块级元素。它能够用作其他 HTML 元素的容器。

设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类：

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>
<p>London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</body>
</html>

分类行内元素

HTML <span> 元素是行内元素，能够用作文本的容器。

设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式。

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>

<h1>My <span class="red">Important</span> Heading</h1>

</body>
</html>

效果：

HTML id 属性

HTML id 属性用于为HTML 元素指定唯一的 id。

一个 HTML文档中不能存在多个有相同 id 的元素。

使用 id 属性

id 属性指定 HTML 元素的唯一 ID。 id 属性的值在 HTML 文档中必须是唯一的。

id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。

id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。

下面的例子中我们有一个 <h1> 元素，它指向 id 名称 "myHeader"。这个 <h1> 元素将根据 head 部分中的 #myHeader 样式定义进行样式设置：

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

效果

注释：id 名称对大小写敏感！

注释：id 必须包含至少一个字符，且不能包含空白字符（空格、制表符等）。

Class 与 ID 的差异

同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用：

<style>
/* 设置 id 为 "myHeader" 的元素的样式 */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* 设置类名为 "city" 的所有元素的样式 */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- 拥有唯一 id 的元素 -->
<h1 id="myHeader">My Cities</h1>

<!-- 拥有相同类名的多个元素 -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

通过 ID 和链接实现 HTML 书签

HTML 书签用于让读者跳转至网页的特定部分。

如果页面很长，那么书签可能很有用。

要使用书签，您必须首先创建它，然后为它添加链接。

然后，当单击链接时，页面将滚动到带有书签的位置。

首先，用 id 属性创建书签：

<h2 id="C4">第四章</h2>

然后，在同一张页面中，向这个书签添加一个链接（“跳转到第四章”）：

<a href="#C4">跳转到第四章</a>

完整例子：

<html>
<body>

<p><a href="#C4">跳转到 Chapter 4</a></p>
<p><a href="#C10">跳转到 Chapter 10</a></p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

HTML Iframe

//设置iframe
<body><iframe src="HTMLClass.html" name="firstIframe" width="200" height="200"></iframe>
<!--理解为在iframe中打开一个新的链接-->
<p><a href="https://news.163.com/" target="firstIframe">更换 iframe的内容</a></p>

效果

HTML 头部元素

<head>	定义关于文档的信息。
<title>	定义文档标题。
<base>	定义页面上所有链接的默认地址或默认目标。
<link>	定义文档与外部资源之间的关系。
<meta>	定义关于 HTML 文档的元数据。
<script>	定义客户端脚本。
<style>	定义文档的样式信息。

HTML 计算机代码元素

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

HTML5 语义元素

语义学（源自古希腊）可定义为对语言意义的研究。

语义元素是拥有语义的元素。

HTML5 中新的语义元素

许多网站包含了指示导航、页眉以及页脚的 HTML 代码，例如这些：<div id="nav"> <div class="header"> <div id="footer">。

HTML5 提供了定义页面不同部分的新语义元素：

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

HTML5 语义元素

HTML5 <section> 元素

<section> 元素定义文档中的节。

根据 W3C 的 HTML 文献：“节（section）是有主题的内容组，通常具有标题”。

可以将网站首页划分为简介、内容、联系信息等节。

<section>
   <h1>WWF</h1>
   <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

HTML5 <article> 元素

<article> 元素规定独立的自包含内容。

文档有其自身的意义，并且可以独立于网站其他内容进行阅读。

<article>
   <h1>What Does WWF Do?</h1>
   <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

效果

HTML5 <nav> 元素

<nav> 元素定义导航链接集合。

<nav> 元素旨在定义大型的导航链接块。不过，并非文档中所有链接都应该位于 <nav> 元素中！

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

效果

HTML5 <aside> 元素

<aside> 元素页面主内容之外的某些内容（比如侧栏）。

aside 内容应该与周围内容相关

<p>My family and I visited The Epcot center this summer.</p>

<aside>
   <h4>Epcot Center</h4>
   <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

效果

HTML5 <figure> 和 <figcaption> 元素

在书籍和报纸中，与图片搭配的标题很常见。

标题（caption）的作用是为图片添加可见的解释。

通过 HTML5，图片和标题能够被组合在 <figure> 元素中：

<figure>
  <img src="123.png" alt="A picture" width="304" height="228">
  <figcaption>感觉最近头好痒哦,糟糕,不是要长脑子了吧</figcaption>
</figure>

效果

标签	描述
<article>	定义文章。
<aside>	定义页面内容以外的内容。
<details>	定义用户能够查看或隐藏的额外细节。
<figcaption>	定义 <figure> 元素的标题。
<figure>	规定自包含内容，比如图示、图表、照片、代码清单等。
<footer>	定义文档或节的页脚。
<header>	规定文档或节的页眉。
<main>	规定文档的主内容。
<mark>	定义重要的或强调的文本。
<nav>	定义导航链接。
<section>	定义文档中的节。
<summary>	定义 <details> 元素的可见标题。
<time>	定义日期/时间。

代码格式约定

开括号与选择器位于同一行
在开括号之前用一个空格
使用两个字符的缩进
在每个属性与其值之间使用冒号加一个空格
在每个逗号或分号之后使用空格
在每个属性值对（包括最后一个）之后使用分号
只在值包含空格时使用引号来包围值
把闭括号放在新的一行，之前不用空格
避免每行超过 80 个字符

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}

HTML 字符实体

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

HTML 实体

在 HTML 中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

HTML 中有用的字符实体

注释：实体名称对大小写敏感！

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分（cent）	¢	¢
£	镑（pound）	£	£
¥	元（yen）	¥	¥
€	欧元（euro）	€	€
§	小节	§	§
©	版权（copyright）	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

完整的实体符号 HTML 实体符号参考手册。

在 HTML 中使用表情符号

表情符号（Emoji）是来自 UTF-8 字符集的字符：😄 😍 💗

什么是 Emoji？

表情符号（Emoji）类似图像或图标，但它们并不是。

它们是来自 UTF-8 (Unicode) 字符集的字母（字符）。

提示：UTF-8 几乎涵盖世界上所有字符和符号。

HTML charset 属性

为了正确显示 HTML 页面，Web 浏览器必须知道页面中使用的字符集。

这是在 <meta> 标签中规定的：

<meta charset="UTF-8">

提示：如果未规定，UTF-8 则是 HTML 中的默认字符集。

UTF-8 字符

很多 UTF-8 字符无法在键盘上键入，但始终可以使用数字（被称为实体编号）来显示它们：

A 是 65
B 是 66
C 是 67

<p>我将显示 A B C</p>
<p>我将显示 &#65; &#66; &#67;</p>

字符 A、B、C 由数字 65、66 以及 67 来显示。为了让浏览器了解您正在显示字符，您必须以 &# 开头并以 ;（分号）结束实体编号。

Emoji 字符

表情符号也是来自 UTF-8 字母的字符：

😄 是 128516
😍 是 128525
💗 是 128151

<p>&#128512;</p>

效果：

😀

由于表情符号是字符，因此可以像 HTML 中的其他任何字符一样复制、显示和调整它们的大小。

<p style="font-size:48px">
&#128512; &#128516; &#128525; &#128151;
</p>

HTML 背景

背景颜色（Bgcolor）

背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

背景（Background）

背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">

URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。

提示：如果你打算使用背景图片，你需要紧记一下几点：

背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。
背景图像是否与页面中的其他图象搭配良好。
背景图像是否与页面中的文字颜色搭配良好。
图像在页面中平铺后，看上去还可以吗？
对文字的注意力被背景图像喧宾夺主了吗？

HTML基础学习

HTML 样式

HTML 样式实例 - 背景颜色

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

HTML 样式实例 - 文本对齐

HTML 文本格式化

预格式文本 pre

缩写和首字母缩写

文字方向

块引用

删除字效果和插入字效果

文本格式化标签

HTML 引用

HTML <q> 用于短的引用

用于长引用的 HTML <blockquote>

用于缩略词的 HTML <abbr>

用于定义的 HTML <dfn>

用于联系信息的 HTML <address>

用于著作标题的 HTML <cite>

用于双向重写的 HTML <bdo>

条件注释

HTML 链接

HTML 超链接（链接）

HTML 链接语法

HTML 链接 - target 属性

HTML 链接 - name 属性

命名锚的语法：

HTML 图像

图像标签（<img>）和源属性（Src）

替换文本属性（Alt）

背景图片

图片对齐方式

浮动图像

修改图像尺寸

给图片添加链接

把图像转换为图像映射

HTML 表格

表格

表格和边框属性

表格的表头

表格中的空单元格

带有标题的表格

跨行或跨列的表格单元格

单元格边距(Cell padding)

单元格间距(Cell spacing)

HTML 列表

无序列表

有序列表

定义列表

HTML <div> 和 <span>

HTML 块元素

HTML 内联元素

HTML 类

分类块级元素

分类行内元素

HTML id 属性

使用 id 属性

Class 与 ID 的差异

通过 ID 和链接实现 HTML 书签

HTML Iframe

HTML 头部元素

HTML 计算机代码元素

HTML5 语义元素

HTML5 中新的语义元素

HTML5 语义元素

HTML5 <section> 元素

HTML5 <article> 元素

HTML5 <nav> 元素

HTML5 <aside> 元素

HTML5 <figure> 和 <figcaption> 元素

代码格式约定

HTML 字符实体

HTML 实体

HTML 中有用的字符实体

在 HTML 中使用表情符号

什么是 Emoji？

HTML charset 属性

UTF-8 字符

Emoji 字符

HTML 背景

预格式文本 `pre`