HTML快速入门+常用标记


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>

效果:


 

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值