HTML 头部元素

HTML <head> 元素与 <body> 元素不同，它的内容不会在浏览器中显示，它的作用是保存页面的一些元数据。

<title> 元素

1
<title>我的站点</title>

为文档添加标题。

<meta> 元素

字符编码

1
<meta charset="utf-8">

这个元素指定了文档的字符编码。utf-8 是一个通用的字符集，它包含了任何人类语言中的大部分的字符。 意味着该页面可以同时处理多种语言：

你好

Hello

Здравствуй

こんにちは

作者和描述

1
2
<meta name="author" content="Haitao">
<meta name="description" content="HTML 入门">
  • name 指定了meta 元素的类型； 说明该元素包含了什么类型的信息。
  • content 指定了实际的元数据内容。

这两个meta 元素分别定义页面的作者和提供页面的简要描述。

自定义图标

1
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

设置网页图标。

HTML 区块

大多数 HTML 元素被定义为块级元素（block level element）或内联元素（inline element）。

如 h1、p 是块级元素，而 a、img 是内联元素。

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

<div> 元素

<div> 元素是块级元素，它可作为组合其他 HTML 元素的容器。<div> 元素没有特定的含义。

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

<div> 元素的另一个常见的用途是文档布局。

<span> 元素

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

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

HTML 样式

CSS，即样式表，可用于对HTML 元素进行渲染。

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

内联样式

在 HTML 元素中使用 style 属性。

当特殊的样式需要应用到个别元素时，就可以使用内联样式。 

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

内部样式表

在 HTML 文档头部 <head> 区域使用 <style> 元素来包含 CSS。

当单个文件需要特别样式时，就可以使用内部样式表。

1
2
3
4
5
6
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部样式表

使用外部 CSS 文件。

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

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

HTML 脚本

<script> 标签用于定义客户端脚本（JavaScript）。

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

HTML 类

class 属性规定了元素的类名。一个 HTML 元素可被赋予多个 class。

HTML 类大多数时候用于 CSS 样式的设置。同时也可以利用它通过 JavaScript 来改变 HTML 元素。

实例（块级元素）：

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
31
32
33
34
35
<!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>
效果

London

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.

Paris

Paris is the capital and most populous city of France.

Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

实例（行内元素）：

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>

<p>一些<span class="red">重要的</span>内容</p>

</body>
</html>
效果

一些重要的内容

HTML Id

HTML id 属性用于为HTML 元素指定唯一的 id。一个 HTML文档中不能存在多个有相同 id 的元素。

CSS 和 JavaScript 可使用 id 属性来选取元素或设置特定元素的样式。

注意：id 属性大小写敏感。

实例（CSS）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: white;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">我的标题</h1>

</body>
</html>
效果

我的标题

实例（JavaScript）：

1
2
3
4
5
6
7
8
9
10
<script>
function myFunction()
{
  document.getElementById("demo").innerHTML=Date();
}
</script>

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

<p id="demo"></p>
效果