第三章、HTML的元素与属性（二）
本章将继续介绍HTML的元素，HTML的元素总体来说包括：HTML标题，HTML段落，HTML注释，HTML引用，HTML链接，HTML图像，HTML表格，HTML列表，HTML块，由于内容较多所以分为两个章节，同时在介绍HTML的元素的同时还会穿插的介绍相关元素的属性，具体包括：HTML样式，HTML颜色和颜色名，HTML CSS的相关知识。
第一节：HTML CSS
1、CSS的概念
- CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
- CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
- 浏览器如何使用样式表？当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：外部样式表、内部样式表、内联样式。请看本节的详细介绍。
- 关于CSS的具体内容请看后面的详细的教程
2、外部样式表
a) 使用外部样式表
- 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
- 通常来说 HTML 负责网站的文本，而 CSS 优化网页的布局。
<head>
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
</head>
rel="stylesheet"意思是样式表，链接的是一个样式表type="text/css"的意思是调用的文件是CSShref="css/mystyle.css"的意思表示CSS的路径
b) HTML <head> 标签
<html>
<head>
<title>文档的标题</title>
</head>
<body>
文档的内容... ...
</body>
</html>
-
<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
-
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
-
下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。<title> 定义文档的标题，它是 head 部分中唯一必需的元素。
-
**提示：**应该把 <head> 标签放在文档的开始处，紧跟在 <html> 后面，并处于 <body> 标签或 <frameset> 标签之前。
-
**提示：**请记住始终为文档规定标题！
3、内部样式表
- 当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
4、内联样式
-
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
-
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
第二节：HTML 链接
1、语法
- 使用超链接的语法如下，其中url表示链接的地址，例如
www.baidu.com。
<a href="url">Link text</a>
- 当然链接不一定要是文本，上面代码中的
Link tex可以换做图片或者其他的html元素。
2、HTML链接-target属性
使用 Target 属性，你可以定义被链接的文档在何处显示。下面的这行会在新窗口打开文档：
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
3、HTML链接-name属性
- 创建一个书签（或者叫HTML锚），用下面这种方法：
<a name="tips">基本的注意事项 - 有用的提示</a>
- 然后在同一个文档中创建指向该锚的链接：
<a href="#tips">有用的提示</a>
- 注意一：语法是
#+名字 - 在其他的网页也可以创建一个指向该锚的链接，当然要写清楚URL
第三节：HTML 图像
1、语法规范
-
在 HTML 中，图像由
<img>标签定义。<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。 -
定义图像的语法是：
<img src="url" />
- 当然，如果一个图片文件目录在
src/image/1.jpg，则相应的写法是：
<img src="/image/1.jpg" />
- 此外，假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
2、替换文本属性-Alt
-
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
-
<img src="boat.gif" alt="Big Boat">
3、网页背景图片
<body background="/i/eg_background.jpg">
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面，图像会进行重复。</p>
- 用上面的方法可以讲网页的背景格式化为某一个图片，浏览器会自动根据大小选择填充。
4、对齐方式
<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>
5、图片中的局部映射
- 注释： img 元素中的 “usemap” 属性引用 map 元素中的 “id” 或 “name” 属性（根据浏览器），所以我们同时向 map 元素添加了 “id” 和 “name” 属性。
<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap1" alt="Planets" />
<map name="planetmap1" id="planetmap1">
<area
shape="circle" <!-- 形状是圆 -->
coords="180,139,14" <!-- 三个参数依次是横坐标x，纵坐标y，半价 -->
href ="/example/html/venus.html" <!-- 三个参数依次是横坐标x，纵坐标y，半价 -->
target ="_blank"
alt="Venus" />
<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />
<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />
</map>
第四节：HTML 表格
1、定义方法
<tr></tr>表示行，<td></td>表示列。<th></th>表示表头，字体会加粗显示。border='0'表示边缘不存在，表格没有网格线。反之数字越大，边框越大。注意要有引号！
<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>
2、合并单元格
- 横跨多行：
rowspan = "跨越的行数"。 - 横跨多列：
rowspan = "跨越的行数"。
横跨两列的表格
| 姓名 | 电话 | |
|---|---|---|
| Bill Gates | 555 77 854 | 555 77 855 |
横跨两行的单元格：
| 姓名 | Bill Gates |
|---|---|
| 电话 | 555 77 854 |
| 555 77 855 |
3、表格 table的其他属性
-
用
<caption>我的标题</caption>来表示。这个标签写在<table>标签结束后，<tr>标签开始前：<table border="1"> <caption>我的标题</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> -
下面的属性通常写在
<table>标签的里面-
用
Cell padding来创建单元格内容与其边框之间的空白。 -
用
Cell spacing增加单元格之间的距离。
<table border="1" Cell padding="数字" Cell spacing="数字"> </table> -
-
下面的属性通常写在
<td>标签的里面- 用
bgcolor表示单元格的背景颜色。 - 用
align="left"表示表格的对齐方式。<th align="left">表格内的内容</th>。 - 用
background="/i/eg_bg_07.gif">表示单元格的背景图片。
- 用
第五节：HTML 列表
-
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
-
无序列表始于 <ul> 标签。每个列表项始于 <li>。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
-
同样，有序列表也是一列项目，列表项目使用数字进行标记。
-
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
第六节：HTML 块、类
大多数 HTML 元素被定义为块级元素或内联元素。
1、<div> 元素
-
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
-
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
-
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
-
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用
元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
2、HTML <span> 元素
- HTML <span> 元素是内联元素，可用作文本的容器。
- <span> 元素也没有特定的含义。
- 当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
3、分类块级元素
-
HTML <div> 元素是块级元素。它能够用作其他 HTML 元素的容器。
-
设置 <div> 元素的类，使我们能够为相同的
元素设置相同的类：
4、HTML id 属性
- HTML的
id属性用于为HTML元素指定唯一的 id。一个 HTML文档中不能存在多个有相同 id 的元素。 id属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。- id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。
- JavaScript 可以使用
getElementById()方法访问拥有特定 id 的元素
注意： id 名称对大小写敏感！
注意： id 必须包含至少一个字符，且不能包含空白字符（空格、制表符等）。
注意： Class 与 ID 的差异：同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用。
- 案例：用
id创建 HTML书签
<h2 id="C4">第四章</h2>
<a href="#C4">跳转到第四章</a>
属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。
- id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。
- JavaScript 可以使用
getElementById()方法访问拥有特定 id 的元素
**注意：**id 名称对大小写敏感！
**注意：**id 必须包含至少一个字符，且不能包含空白字符（空格、制表符等）。
**注意：**Class 与 ID 的差异：同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用。
- 案例：用
id创建 HTML书签
<h2 id="C4">第四章</h2>
<a href="#C4">跳转到第四章</a>
3078
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
