HTML的基本结构及常用的标签及其属性

版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/gongxifacai_believe/article/details/90956980

1、HTML的基本结构

<html>
	<head>
		<title>...</title>
	</head>
	<body>
	</body> 
</html>

<head></head>中间可以添加的内容:

标签符号

说明

<title></title>

文件标题声明

<meta></meta>

控制标记的动态文件转换声明

<base></base>

超链接网址基准参考点

<script></script>

Javascript 和 VBScript 程序

<style></style>

stylesheet 用来设置排版的声明

<link></link>

可引用外部文件,如 CSS 排版样本

2、常用的控制标记

(1)跳行<br> 格式:<br>,无属性设置。 (2)段落<p> 格式:<p align=”排列方式”>......</p>

属性名称

属性值

说明

align

left

居左(默认)

align

center

居中

align

right

居右

(3)水平直线<hr> 格式:<hr>

属性名称

属性值

说明

size

像素

绝对设置,以数字表示,属性值越大,线越粗

size

百分比

相对设置,以%表示,属性值越大,线越粗

width

像素

绝对设置,长度不会因视窗的改变而改变

width

百分比

相对设置,长度会随着视窗宽度而改变

noshade

实体线

(4)居中对齐<center>(被废弃的标签) 格式:<center>......</center> (5)背景色与文字设置 格式:<body bgcolor=”背景色” text=”文字颜色”><body leftmargin=”像素” topmargin=”像素”> (6)标题文字设置 格式:<h1>…</h1> <h2>…</h2> <h3>…</h3> <h4>…</h4> <h5>…</h5> <h6>…</h6>

属性名称

属性值

说明

align

left

居左

align

center

居中

align

right

居右

(7)特殊字符设置 格式:

特殊字符

代替表示

<

lt;

>

gt;

&

amp;

"

quot;

(8)HTML的备注 格式:<!-- --> (9)实体字符控制标记

标签

说明

<b>…</b>

加粗

<i>…</i>

倾斜

<s>…</s>

删除

<u>…</u>

下划线

<tt>…</tt>

电报

<sup>…</sup>

上标

<sub>…</sub>

下标

(10)语意字符控制

标签

说明

<address>…</address>

地址

<big>…</big>

大字

<del>…</del>

删除

<ins>…</ins>

修改

<samll>…</small>

小字

<strong>…</strong>

加强语气(加粗)

<em>…</em>

加强语气(倾斜)

(11)字体控制<font>(被废弃的标签) 格式:<font>…</font>

属性名称

属性值

说明

size

0-7

字体大小

color

英文或十六进制表示

颜色

face

字体

字体

(12)格式化 格式:<pre>…</pre> 让书写的文字格式化。 (13)引用文本 格式:<blockquote>...</blockquote>

属性名称

属性值

说明

cite

url

被引用的地址

3、无序列表和有序列表

(1)无序列表<ul><li> 格式:

<ul>
	<li>......</li>
	<li>......</li>
	<li>......</li>
	<li>......</li>
</ul>

功能:<ul>:无序列表的开始,</ul>:无序列表的结束,<li>......</li>:表示一个无序列表项。 <li>的属性

属性名称

属性值

说明

type

dise

实心圆(默认值)

type

circle

空心圆

type

square

实心方块

(2)有序列表<ol><li> 格式:

<ol>
	<li>......</li>
	<li>......</li>
	<li>......</li>
	<li>......</li>
</ol>

功能:<ol>:有序列表的开始,</ol>:有序列表的结束,<li>......</li>:表示一个有序列表项。 <ol>的属性

属性名称

属性值

说明

type

1

以 1,2,3,4 来表示

type

a

以 a,b,c,d 来表示

type

A

以 A,B,C,D 来表示

type

i

以 i,ii,iii 来表示

type

I

以 I,II,III 来表示

(3)无序列表和有序列表的结合应用 格式:

<ul>
	<li>
		<ol>
			<li>......</li>
			<li>......</li>
			<li>......</li>
		</ol>
	</li>
	<li>
		<ol>
			<li>......</li>
			<li>......</li>
			<li>......</li>
		</ol>
	</li>
</ul>

(4)叙述式清单(定义列表) 格式:

<dl>
	<dt>...</dt>
		<dd>......</dd>
		<dd>......</dd>
		<dd>......</dd>
	<dt>...</dt>
		<dd>......</dd>
		<dd>......</dd>
		<dd>......</dd>
</dl>

功能:<dl>:叙述清单的开始,<dt>:表示一个叙述式列表项,<dd>:表示一个叙述式列表项下的更详细的内容。

4、表格

(1)<table>标签下的属性

属性名称

属性值

说明

border

像素

设置表格的边线

cellspacing

像素

绝对设置,格框线的宽度

cellspacing

百分比

相对设置,格框线的宽度

cellpadding

像素

绝对设置,数据与框线的距离

cellpadding

百分比

相对设置,数据与框线的距离

width

像素

绝对设置,像素表示表格宽度

width

百分比

相对设置,百分比表示表格宽度

height

像素

绝对设置,像素表示表格高度

height

百分比

绝对设置,百分比表示表格高度

align

left

表格居左(默认)

align

center

表格居中

align

right

表格居右

bgcolor

英文或十六进制表示

表格的背景颜色

background

URL

表格的背景图片

summary

字符串

用来对表格中的数据作说明

bordercolor

英文或十六进制表示

边框的颜色

bordercolorlight

英文或十六进制表示

边框的亮色

bordercolordark

英文或十六进制表示

边框的暗色

(2)<table>标签下的边框设置

属性名称

属性值

说明

frame

void

不要显现表格的边线

frame

above

只显现出表格的上边线

frame

below

只显现出表格的下边线

frame

hsides

只显示表格的上下边线

frame

vsides

只显现表格的左右边线

frame

lhs

只显现表格的左边线

frame

rhs

只显现表格的右边线

frame

border/box

会显现出表格的所有边线

rules

rows

只显示出横行的格框线

rules

cols

只显示出直行的格框线

rules

all

显示全部格框线

rules

groups

表示列组合水平部分

rules

none

不显示任何格框线

注意:frame属性必须在border属性值不为0的状态下设置才有效果。 (3)<tr><th><td>标签下的常用属性

属性名称

属性值

说明

width

像素

绝对设置,以像素值设置宽

width

百分比

相对设置,以百分比设置宽

height

像素

绝对设置,以像素值设置高

height

百分比

相对设置,以百分比设置高

bgcolor

英文或十六进制

数据栏的颜色设置

align(水平方向)

left

数据靠左

align(水平方向)

center

数据靠中

align(水平方向)

right

数据靠右

valign(垂直方向)

top

数据靠上

valign(垂直方向)

middle

数据靠中

valign(垂直方向)

bottom

数据靠下

nowrap

在单元格中不换行

(4)拆分与合并单元格

属性名称

属性值

说明

colspan

数字

向两边扩展栏位

rowspan

数字

向下扩展栏位

(5)表格的结构化 结构化格式:

<table>
	<thead>......</thead>
	<tbody>......</tbody>
	<tfoot>......</tfoot>
</table>

(6)表格的直列化 表格的直列化格式:<colgroup>......</colgroup>

属性名称

属性值

说明

align

left

居左

align

center

居中

align

right

居右

valign

top

居上

valign

middle

居中

valign

bottom

居下

span

数字

直列数目

width

像素/百分比

宽度

个别直列设置格式:<col>功能完全和<colgroup>一样。 (7)表格的标题

<table>
		<caption>......</caption>
</table>

<caption>下的属性值:

属性名称

属性值

说明

align

top

标题在表格上方

align

bottom

标题在表格下方

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券