HTML基础复习（中）
九、HTML 计算机代码元素
HTML 计算机代码格式
通常，HTML 使用可变的字母尺寸，以及可变的字母间距。
在显示计算机代码示例时，并不需要如此。
, , 以及 元素全都支持固定的字母尺寸和间距。
1.HTML 键盘格式
HTML 元素定义键盘输入。
2.HTML 样本格式
HTML 元素定义计算机输出示例。
3.HTML 代码格式
HTML 元素定义编程代码示例。
元素不保留多余的空格和折行。
如需解决该问题，在
元素中包围代码。用嵌套代码
4.HTML 变量格式化
HTML 元素定义数学变量
爱因斯坦的公式：
E = m c2
十、HTML注释
注释标签 用于在 HTML 插入注释。
条件注释
您也许会在 HTML 中偶尔发现条件注释：
条件注释定义只有 Internet Explorer 执行的 HTML 标签。
十一、HTML CSS
1.外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
2.内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过
3.内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
This is a paragraph
十二、HTML 链接
HTML 使用超级链接与网络上的另一个文档相连。
几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
1.HTML 超链接（链接）
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
（1）通过使用 href 属性 - 创建指向另一个文档的链接
（2）通过使用 name 属性 - 创建文档内的书签
2.HTML 链接语法
链接的 HTML 代码很简单。它类似这样：
Link text
href 属性规定链接的目标。
开始标签和结束标签之间的文字被作为超级链接来显示。
3.HTML 链接 - target 属性
使用 Target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
Visit W3School!
语法
属性值
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打开被链接文档。 |
| _self | 默认。在相同的框架中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
| framename | 在指定的框架中打开被链接文档。 |
4.HTML 链接 - name 属性
name 属性规定锚（anchor）的名称。
可以使用 name 属性创建 HTML 页面中的书签。
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
命名锚的语法：
锚（显示在页面上的文本）
提示：锚的名称可以是任何你喜欢的名字。
提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。
实例
首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：
基本的注意事项 - 有用的提示
然后，我们在同一个文档中创建指向该锚的链接：
有用的提示
也可以在其他页面中创建指向该锚的链接：
有用的提示
在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。
使用id
如果使用 id 属性，上面的实例可改写为：
基本的注意事项 - 有用的提示
或者直接在标题中设置 id 属性：
基本的注意事项 - 有用的提示
电子邮件链接：
这是邮件链接：
发送邮件
注意：应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
url的特殊编码里%20代表的是空格符
十三、HTML 图像
通过使用 HTML，可以在文档中显示图像。
1.图像标签（
在 HTML 中，图像由
要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
定义图像的语法是：
URL 指存储图像的位置。
2.替换文本属性（Alt）
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
在浏览器无法载入图像时，浏览器将显示这个替代性的文本而不是图像。
3.可选的属性
| 属性 | 值 | 描述 |
|---|---|---|
| align | top/bottom/middle/left/right | 不推荐使用。规定如何根据周围的文本来排列图像。 |
| border | pixels | 不推荐使用。定义图像周围的边框。 |
| height | pixels/% | 定义图像的高度。 |
| hspace | pixels | 不推荐使用。定义图像左侧和右侧的空白。 |
| ismap | URL | 将图像定义为服务器端图像映射。 |
| longdesc | URL | 指向包含长的图像描述文档的 URL。 |
| usemap | URL | 将图像定义为客户器端图像映射。 |
| vspace | pixels | 不推荐使用。定义图像顶部和底部的空白。 |
| width | pixels/% | 设置图像的宽度。 |
4.ismap属性
ismap 属性将图像定义为服务器端图像映射。
图像映射指的是带有可点击区域的图像。
当点击一个服务器端图像映射时，点击坐标会以 URL 查询字符串的形式发送到服务器。
就是：
当用户在 ismap 图像上单击了某处时，浏览器会自动把鼠标的 x、y 位置（相对于图像的左上角）发送到服务器端。特殊的服务器端软件（在本例中是 demo_form.asp 程序）可以根据这些坐标来做出响应。
点击此处，查看例子
5.usemap 属性
将图像定义为客户端图像映射。
图像映射指的是带有可点击区域的图像。
usemap 属性的值是一个 URL，它指向特殊的 区域。
usemap 属性与 元素的 name 或 id 属性相关联，以建立 之间的关系
语法：
![]()
属性值：#mapname
# + 要使用的 元素的 name 或 id 属性
（1）ismap 属性和 usemap 属性的应用差异
地图就是很好地应用 ismap 和 usemap 属性的一个示例，例如，在浏览一家全国范围的大公司网页时，用户可能会在地图上单击他们所居住的城市，以获得附近地区零售店的地址和电话号码等。
usemap 客户端处理图像映射的好处是，它不要求有服务器或特殊的服务器软件，与 ismap 机制不同，它可以用在非 web （无网络）环境中，例如在本地的文件或者 CD-ROM 中使用。
点击此处，查看例子
（2）标签
定义一个客户端图像映射。
必需的属性
id ： unique_name ~为 map 标签定义唯一的名称。
可选的属性
name ： mapname ~为 image-map 规定的名称。
中的 usemap 属性可引用中的 id 或 name 属性（由浏览器决定），所以我们需要同时向添加id 和 name 两个属性。
（3）标签
标签定义图像映射中的区域。
area 元素总是嵌套在 标签中。
必需的属性
alt：text 定义此区域的替换文本。
可选的属性
| 属性 | 值 | 描述 |
|---|---|---|
| coords | 坐标值 | 定义可点击区域（对鼠标敏感的区域）的坐标。 |
| href | URL | 定义此区域的目标 URL。 |
| nohref | nohref | 从图像映射排除某个区域。 |
| shape | default/rect/circ/poly | 定义区域的形状。 |
| target | _blank/_parent/_self/_top | 规定在何处打开 href 属性指定的目标 URL。 |
其中，
shape 属性与 coords 属性配合，可以规定区域的尺寸、形状和位置。
1° coords 属性规定区域的 x 和 y 坐标。
2° shape 属性规定形状。
圆形 circle：shape=“circ”，coords=“x,y,r”
这里的 x 和 y 定义了圆心的位置（“0,0” 是图像左上角的坐标），r 是以像素为单位的圆形半径。
多边形polygon：shape=“poly”，coords=“x1,y1,x2,y2,x3,y3,…”
每一对 “x,y” 坐标都定义了多边形的一个顶点（“0,0” 是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。
多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
矩形 rectangle：shape=“rect”，coords=“x1,y1,x2,y2”
第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，“0,0” 是图像左上角的坐标。请注意，定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。
如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。
如果未使用 shape 属性，那么会假设使用值 default。依照标准，default 意味着该区域覆盖整个图像。default规定全部区域。
十四、HTML 表格
1.表格由 HTML 表格有两类单元格： 2.表格的表头 （2）align 属性 （3）bgcolor属性 不推荐使用 （4）char属性 （5）axis 属性 （6）charoff 属性 （7）colspan属性 注释：colspan=“0” 指示浏览器横跨到列组的最后一列。 （8）rowspan属性 注释：rowspan=“0” 指示浏览器横跨到表格部分的最后一行（thead、tbody 或者 tfoot）。 （9）height高、width宽 不推荐使用 （10）headers属性 （11）scope 属性 （12）valign 属性 3.表格中的空单元格 为了避免空的单元格的边框没有被显示出来，在空单元格中添加一个空格占位符 4.表格 如果 border 属性的值发生改变，那么只有表格周围边框的尺寸会发生变化。表格内部的边框则是 1 像素宽。 （2）align属性 （3）bgcolor属性 （4）cellpadding属性 （5）cellspacing属性 （6）frame 属性 属性值： （7）rules 属性 （8）summary 属性 （9）width 属性 5.表格的标题 align属性 6.表格的行 7.表格的列 8.thead、tbody、tfoot标签 9. 10. HTML 支持有序、无序和定义列表。 1.无序列表 ul标签的属性： （2）type 属性 2.有序列表 ol标签属性： （2）reversed属性 （3）start属性 （4）type属性 3.定义列表 4.li标签 可以通过 1.HTML 块元素 编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。 块级元素在浏览器显示时，通常会以新行来开始（和结束）。 例子： , 标签来定义
每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
●表头单元 - 包含头部信息（由 th 元素创建）
●标准单元 - 包含数据（由 td 元素创建）
td 元素中的文本一般显示为正常字体且左对齐。
表格的表头使用 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本
属性：
（1）abbr 属性
规定表头单元格中内容的缩写版本。
abbr 属性不会在普通的 web 浏览器中造成任何视觉效果方面的变化。
屏幕阅读器可以利用该属性。
表头单元格的短描述。
规定表格的表头单元格中内容的水平对齐方式。
left、right 、center justify 俩端对齐。
char 将内容对准指定字符，但几乎不能支持。
background:url 添加背景图片
规定根据哪个字符来进行内容的对齐。 几乎不能支持。
用于对表头单元格进行分类。
axis 属性可用于对相关的信息列进行组合。 几乎不能支持。
设置内容相对于由 char 属性规定的字符的对齐偏移量。
仅当 align 属性设置为 “char” 且已设置 char 属性时，才能使用 charoff 属性。
几乎不支持。
设置单元格可横跨的列数。
设置表头单元格可横跨的行数。
由空格分隔的表头单元格 ID 列表，为数据单元格提供表头信息。
定义将表头单元与数据单元相关联的方法。
scope 属性标识某个单元是否是列、行、列组或行组的表头。
col列的表头、row行的头、colgroup列组表头、rowgroup行组表头。
规定单元格中内容的垂直排列方式。
值
描述
top
对内容进行上对齐。
middle
对内容进行居中对齐（默认值）。
bottom
对内容进行下对齐。
baseline
与基线对齐。
在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器**!!可能!!无法显示出这个单元格的边框**。 ，就可以将边框显示出来。的一些属性
（1）border属性
border默认是0，规定围绕表格的边框的宽度。单位：像素。
使用边框属性来显示一个带有边框的表格：
Row 1, cell 1
Row 1, cell 2
left/center/right
不赞成使用。请使用样式style代替。规定表格相对周围元素的对齐方式。
背景颜色：
rgb(x,x,x)
#xxxxxx
colorname
不赞成使用。请使用样式代替。规定表格的背景颜色。
设置表格单元边界与单元内容之间的间距
单位：像素 或 百分比。
规定单元格之间的空白。
单位：像素 或 百分比。
规定外侧边框的哪个部分是可见的。
语法：
值
描述
void
不显示外侧边框。
above
显示上部的外侧边框。
below
显示下部的外侧边框。
hsides
显示上部和下部的外侧边框。
vsides
显示左边和右边的外侧边框。
lhs
显示左边的外侧边框。
rhs
显示右边的外侧边框。
box
在所有四个边上显示外侧边框。
border
在所有四个边上显示外侧边框。
规定内侧边框的哪个部分是可见的。
值
描述
none
没有线条。
groups
位于行组和列组之间的线条。
rows
位于行之间的线条。
cols
位于列之间的线条。
all
位于行和列之间的线条。
规定表格内容的摘要。
summary 属性不会对普通浏览器中产生任何视觉变化。
屏幕阅读器可以利用该属性。
规定表格的宽度。
如果没有设置 width 属性，表格会占用需要的空间来显示表格数据。
单位：像素 或 百分比。
caption 元素定义表格标题。
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
left、right、top、bottom
不赞成使用。请使用样式style取而代之。align规定标题的对齐方式。
tr 元素包含一个或多个 th 或 td 元素。
属性：align、bgcolor、char、charoff、valign
具体同属性详细。
td 元素中的文本一般显示为正常字体且左对齐。
其属性和表头都一样。
标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。
标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。
次序是：thead、tfoot、tbody
详细描述：
thead、tfoot 以及 tbody 元素对表格中的行进行分组。创建某个表格时，可拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
都拥有属性：align/char/charoff/valign 同上。
为表格中一个或多个列定义属性值。
如需对全部列应用样式，
只能在 table 或 colgroup 元素中使用
属性：align、char、charoff、valign、width、span
其中span属性:规定 col 元素应该横跨的列数。
用于对表格中的列进行组合，以便对其进行格式化。
如需对全部列应用样式，
属性：align、char、charoff、valign、width、span十五、HTML 列表
列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
无序列表始于 。
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
（1）compact
compact 属性规定列表呈现的效果比正常情况更小巧，这是通过减少行间距以及对列表进行缩进来实现的。
主流浏览器不支持。使用 CSS 代替：
规定列表的项目符号的类型。
可使用 CSS 代替：
disc：默认值。实心圆●
circle：空心圆○
square：实心方块□
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 标签。
（1）conpact 属性 同上
规定列表顺序为降序。(9,8,7…)
规定有序列表的起始值。
规定有序列表的项目符号的类型。
1： 默认值。数字有序列表。（1、2、3、4）
a： 按字母顺序排列的有序列表，小写。（a、b、c、d）
A ：按字母顺序排列的有序列表，大写。（A、B、C、D）
i ：罗马字母，小写。（i, ii, iii, iv）
I： 罗马字母，大写。（I, II, III, IV）
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 开始。每个自定义列表项的定义以 开始。例如：
浏览器显示如下：
Coffee
Black hot drink
Milk
White cold drink
标签定义列表项目。
标签可用在有序列表 (
有type和value属性，但是不赞成被使用。十六、HTML块
将 HTML 元素组合起来。
大多数 HTML 元素被定义为块级元素或内联元素。,
,
,