抽空复习整理 2、HTML基本标签

抽空复习整理 2、HTML基本标签

1、b标签：粗体，双标签，例如< b>html< /b>
2、i标签：斜体，双标签，例如< i>html< /i>
3、del标签：删除线，双标签，例如< del>html< /del>。注意：s和strike标签也能实现，但是已经过时了。
4、p标签：段落标签，双标签，p标签只有一个align属性，其属性有如下四个：

值 描述

left 左对齐内容
right 右对齐内容
center 居中对齐内容
justify 对行进行伸展，每行都可以有相等的长度

注意：不建议使用align属性，推荐使用text-align样式代替，CSS 语法：< p style=”text-align:right”>内容< /p>，其值有如下五个：

值 描述

left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承text-align属性的值。

注释：任何的版本的Internet Explorer（包括 IE8）都不支持属性值 “inherit”属性值。

5、hr标签：水平线标签，单标签，其属性有color（水平线颜色）、noshade（设定水平线的颜色为纯色，而不是有阴影的颜色）、size（水平线高度，单位：像素）、width（水平线宽度，单位：像素或%）以及align，其中align属性的属性值由如下三个：

值 描述

left 左对齐水平线
right 右对齐水平线
center 居中对齐水平线

6、hn标签：标题标签，双标签，n的值为1~6，其中< h1>< /h1> 定义最大的标题；< h6>< /h6> 定义最小的标题;只有一个align属性其值和p标签align属性一样，但不建议使用该align属性，推荐使用text-align样式代替，其使用方法和值参见p标签。

7、img标签：图像标签，单标签，该标签有src属性（图片URL）和alt属性（图片不存在时的替代文本）两个必需的属性，还有一些其它属性，常用的有如下几个：
i、height和width：设置图片的高度和宽度，单位为像素或%
ii、title：设定鼠标移到元素上时显示的信息，注意：任何标签都有title属性，它不是img标签特有的

8、a标签：超链接标签，双标签，它有如下作用：
i、用户点击该超链接打开邮件客户端程序，语法结构：< a href=”mailto:e_mail地址?subject=主题”>发送测试邮件< /a>
注意：
a、如果href有空格，则需要使用%20来替换
b、该功能有浏览器兼容性缺陷，在Google浏览器中无法达到预想的效果，需要设置浏览器
示例1、示例2
ii、创建锚点，回到指定锚点，语法结构：创建锚点——；回到指定锚点——回到顶部
注意：
i、如果使用这种方式实现效果，则HTML文档头部必须声明当前文档不是HTML5，例如声明为HTML4.01：
ii、如果将文档声明为HTML5（即），则不能通过a标签创建锚点的方式实现，因为在HTML5中不支持name属性，这时可以通过JavaScript脚本实现，如下代码：

< a href=”” οnclick=”window.scroll(0,0);this.blur();return false;”>回到顶部< /a>

iii、打开href指定的页面，target用于指定在哪个窗口中打开页面

9、ol标签：有序列表标签，即ordered list，双标签，有type和start两个属性：type用于指定ol子标签li的编号类型，默认为数字，可以是字母、阿拉伯数字或罗马数字；start用于指定ol子标签li序号起始点，默认为1，必须为整形数字。
注意：type和start属性在HTML4.01有兼容性问题。
10、ul标签：无序列表标签，即unordered list，双标签，有type属性，该属性用于指定ul子标签li的编号类型，默认为实心圆，其值可以为disc（实心圆● ）、circle（空心圆○ ）、square（实心方块■ ）。

例如实现如下分类：

图书分类
A.小说
B.文艺
.文学
.传记
.艺术
.摄影
C.励志/成功
.职场
.成功
.人际
.心灵修养
D.图书
0-2
数字
图形
图画
3-6
7-10
11-14
E.生活
F.人文社科
G.经管
H.科技
I.教育
J.其他

< html>
< head>
< title>作业< /title>
< /head>
< body>
< h3>图书分类< /h3>
< ol type=”A”>
< li>小说< /li>
< li>
文艺
< ul type=”disc”>
< li>文学< /li>
< li>传记< /li>
< li>艺术< /li>
< li>摄影< /li>
< /ul>
< /li>
< li>
励志/成功
< ul type=”disc”>
< li>职场< /li>
< li>成功< /li>
< li>人际< /li>
< li>心灵修养< /li>
< /ul>
< /li>
< li>
图书
< ul type=”disc”>
< li>
0-2
< ul type=”square”>
< li>数字< /li>
< li>图形< /li>
< li>图画< /li>
< /ul>
< /li>
< li>3-6< /li>
< li>7-10< /li>
< li>11-14< /li>
< /ul>
< /li>
< li>生活< /li>
< li>人文社科< /li>
< li>经管< /li>
< li>科技< /li>
< li>教育< /li>
< li>其他< /li>
< /ol>
< /body>
< /html>

在有序列表中，可以控制列表顺序的类型及从哪开始
例：
< ol>
< li>Apples< /li>
< li>Bananas< /li>
< li>Lemons< /li>
< li>Oranges< /li>
< /ol>
即默认的编号列表

< h4>大写字母列表：< /h4>
< ol type=”A”>
< li>Apples< /li>
< li>Bananas< /li>
< li>Lemons< /li>
< li>Oranges< /li>
< /ol>

< h4>小写字母列表：< /h4>
< ol type=”a”>
< /ol>

< h4>罗马数字列表：< /h4>
< ol type=”I”>
< /ol>

< h4>小写罗马数字列表：< /h4>
< ol type=”i”>
< /ol>

< ol start=”50”>
< /ol>

< h4>圆点列表：< /h4>
< ul style=”list-style-type:disc”>
< li>Apples< /li>
< li>Bananas< /li>
< li>Lemons< /li>
< li>Oranges< /li>
< /ul>

< h4>圆圈列表：< /h4>
< ul style=”list-style-type:circle”>
< li>Apples< /li>
< li>Bananas< /li>
< li>Lemons< /li>
< li>Oranges< /li>
< /ul>

< h4>正方形列表：< /h4>
< ul style=”list-style-type:square”>
< li>Apples
< li>Bananas< /li>
< li>Lemons< /li>
< li>Oranges< /li>
< /ul>

HTML基本标签大致就这些，还需要再抽空加强记忆。