现在的位置: 首页 > 综合 > 正文

HTML快速入门+常用标记

2013年03月23日 ⁄ 综合 ⁄ 共 1674字 ⁄ 字号 评论关闭
文章目录

HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言。一个网页对应一个HTML文件。网页文档的结构和格式的定义由HTML元素完成。

1. 先用下图表示一下B/S开发的网站的内容组成结构

 

2. HTML元素四种形式

由于HTML标签的两个组成部分属性和内容都可有可无,所以HTML元素(标签)就有四种形式:

不带有属性和内容的(空)元素(指不带内容的元素):<br>

只带有属性的(空)元素:<hr color=”blue”>

只带有内容的元素:<title> http://www.baidu.com/</title>

带有内容和属性的元素:<font color=”red”>http://www.baidu.com/</font>

 

3. 标准的HTML的框架结构

举例:

 

注:

u  即使不按HTML框架的标准格式,目前的浏览器也能很好解析文档。例:可以直接写正文部分,省略所有标签。

u  标签的属性和内容都是可选的,可写可不写。

u  给属性赋值时,值可以加双引号也可不加。例:<font color=”red”>等价于<font color=red>。

u  HTML中,标签和属性名是大小写无关的。

u  在HTML文档中,如果存在连续多个空白字符(空格、制表符、回车、换行等),浏览器显示时将只解析为一个空格字符(全角空格符除外)。

 

4. 常用特殊字符实体的字符引用和实体引用:

5. HTML注释

格式:<!--注释内容-->

 

6. 与段落控制相关的常用标签:

实例:

源码:

 

效果:

 

7. 与文本显示相关的常用标签:

 

 

实例:

源码:

效果:

 

8. 列表标签:

8.1 有符号列表:

8.1.1 有序列表(ol:ordered list),使用<ol>和<li>标签创建

u  其中<ol>标签的start属性设置起始序号,<li>标签的value属性改变列表内编号顺序。

例:

 

u  使用type属性指定编号系统的类型。Type属性取值如下:

例:

 

8.1.2 无序列表(ul:unorderedlist),使用<ul>和<li>标签创建

u  其中type属性指定符号样式,取值(默认为disc)如下:

 

 

例:

8.2无符号列表:

8.2.1无缩进列表

u  使用<dl>和<dt>标签创建

例:

8.2.2有缩进的列表

u  使用<dl>和<dd>标签创建

例:

8.2.3术语列表

u  同时使用<dt>和<dd>标签配合<dl>标签创建

 

例:

9. 表格标签:

9.1 表格结构

 

9.2 表格定义

 

注:表格定义中,<tr>标记必须放在<table>标记之间;而<th>和<td>标记必须放在<tr>标记之间。

 

例1(规则表格):

 

<html>
	<head>
		<title>规则表格测试</title>
	</head>
	<body>
		<table width=300 height=100 border=2 bgcolor=#eaeaea>
			<tr bgcolor=#b1a9ae>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
			</tr>
			<tr>
				<th>kobe</th>
				<th>36</th>
				<th>man</th>
			</tr>
			<tr>
				<th>lbj</th>
				<th>28</th>
				<th>man</th>
			</tr>		
		</table>		
	</body>
</html>

效果:

 

例2 (不规则表格):

<html>
	<head>
		<title>不规则表格测试</title>
	</head>
	<body>
		<table width=400 height=100 border=2 bgcolor=#eaeaea>
			<tr>
				<td colspan=4 align=center>学生信息</td>
			</tr>
			<tr bgcolor=#b1a9ae>
				<th>姓名</th>
				<th>年龄</th>
				<th colspan=2>电话</th>
			</tr>
			<tr>
				<td>kobe</td>
				<td>36</td>
				<td>0731-88756773</td>
				<td>18730659872</td>
			</tr>
		</table>		
	</body>
</html>

效果:

 

抱歉!评论已关闭.