首页 > 代码库 > HTML小结
HTML小结
HTML(Hypertext Markup Language)超文本标记语言，是一种用于编写Web网页的标记语言。Web文档的结构和格式定义由HTML元素来完成，HTML元素是由单个或一对标签定义的包含范围。
一.HTML元素的四种形式与框架格式
1.四种形式
（1）空元素：<br>
（2）带有属性的空元素：<hr color="blue">
（3）带有内容的元素：<title>http://www.sunxin.org</title>
（4）带有内容和属性的元素：<fontcolor="red">http://www.sunxin.org</font>
2.HTML框架格式：
<html>
<head>
<title></title>
</head>
<body></body>
</html>
（1）给标签中的属性赋值时，双引号可加可不加。如：<hr color="blue">等价于<hr color=blue>
（2）标签和属性的名字大小写无关
（3）如果存在连续多个空白字符（空格、制表符、回车、换行等），浏览器显示时只解析为一个空格字符。
二.几种常用标签
1.与段落相关的标签
（1）<p align="#">:表示paragraph，用于创建一个段落。
属性align表示段落的对齐方式，#可为left、center、right、justify
（2）<br>：表示line break，用于换行
（3）<hr color="clr">:表示horizontalrule，用于插入一条水平线。
属性color用于指定线的颜色，clr可以是预定义的颜色名字（如：red、blue、green等，或者以16进制数表示的颜色值，一种颜色用6位十六进制数来表示，clr=#rrggbb，如：#000000表示黑色、ffffff表示白色、#ff0000表示红色、#00ff00表示绿色、#0000ff表示蓝色）
2.与文本显示相关的标签
（1）<center>…</center>:使文本居中显示
（2）<hn align="#">…</hn>:用于指出文档的标题，n是从1到6的整数，1表示最大标题，6表示最小标题。
属性align用于设置标题对齐的方式，#可以是left、center、right（用<hn>设置标题时，浏览器会将其单独放在一行上，所以不需要用<br>换行）
（3）<font size=n color="clr">…</font>:用于设置字体
属性size表示字体的大小，n可以是从1到7的整数，数字越大，字体越大。
color表示字体的颜色，clr可以是预定义的颜色名字，或者以16进制数表示的颜色值。
（4）<b>…</b>:使文本成为粗体
（5）<i>…</i>:使文本成为斜体
3.引用：像不间断空格、回车等符号，HTML保留字符，一些在键盘中不存在的特殊字符（如版权号等），需要通过引用的方式才能输入。引用有两种：
字符引用：以一个"&#"开始、之后是所需字符的是十进制代码或十六进制代码、一个";"结尾。
实体引用：以一个"&"开始、之后是字符的助记符、一个";"结尾。（区分大小写）
常用的字符实体
4.注释：<!--内容-->
三.列表、表格与表单
1.列表
（1）建立数字编号的列表：使用<ol>和<li>创建带数字编号的列表
在<ol>中使用start属性，设置起始的序号
在<li>中使用value属性，改变列表内的编号顺序
（2）指定编号的格式和顺序
在<ol>和<li>中，使用type属性指定编号系统的类型。type属性的取值如下表
（3）建立带有项目符号的列表：使用<ul>和<li>创建带有项目符号的列表，<ul>和<li>的type属性指定符号的样式，取值如下：
disc——显示为实心的圆圈
square——显示为实心的方块
circle——显示为空心的圆圈
（4）建立无符号的列表
使用<dl>与<dt>创建无符号的列表，使用<dd>替换<dt>创建缩进的列表
（5）建立术语列表
在<dl>元素中同时使用<dt>和<dd>标签，建立属于列表。属于列表中的列表项由两部分组成：术语和它的说明。术语由<dt>标签指定，说明由<dd>指定
2.表格
（1）定义表格，用<table>元素：
<table border=nalign="alignment" bgcolor="clr">…</table>
border属性：设置表格边框的宽度，n是从0开始的整数，border=0表示表格边框没有宽度，默认为0
align属性，设置表格的对齐方式，alignment可以使left、center、right
bgcolor属性，用于指定表格的背景色，它的取值和color属性的取值一样
（2）<caption>元素：用于定义表格的标题
<caption>…</caption>
（3）<tr>元素在表格中添加一个新行：
<tralign="alignment" valign="alignment">…</tr>
align属性用于指定这一行在水平方向撒谎那个的对齐方式，可以是left、center、right
valign属性用于指定这一行在垂直方向上的对齐方式，可以使top、middle、bottom
（4）<th>元素用于定义表头
<th>…</th>
（5）<td>元素用于定义单元格
<td>…</td>
3.HTML交互式表单
（1）表单的创建：使用<form>元素，以及在其间嵌入的相关元素（称为控件），就可以创建作为HTML文档一部分的表单
语法：
<formmethod="get or post" action="URL">
……
</form>
method属性用于指定向服务器发送表单数据时所使用的HTTP方法，可以使get、post中的一种。无论采用哪一种方法，数据的编码都是相同的，格式为：name 1= value 1 & name 2 =value2
get是缺省方法，使用get方法提交表单时，提交的数据被附加到url（在属性action中指定）的末端，作为url的一部分发送到服务器端
post方法，是将表单中的信息作为一个数据块发送到服务器。
action属性，指定对表单进行处理的脚本的地址，即表单提交到服务器后，交由谁来处理，在action属性中指定处理者的URL。
（2）<input>元素，用于接受用户输入的信息，<input>元素是一个带有属性的空元素，用来创建表单中的控件
语法：
<inputtype="type" name="name" size="size"value=http://www.mamicode.com/"value">
type属性用于指定要创建的控件的类型，
name属性用来指定控件的名称，处理表单的服务器端脚本可以获得以名称-值对所表示的表单数据，利用名称，可以取出对应的值。name属性在表单中不显示。
size属性，用来指定表单中控件的初始宽度
value属性，指定控件的初始值
（3）列表框，由<select>元素创建，列表框中的各个选项用<option>元素提供
（4）多行文本输入控件
语法：
<textareaname="name" rows="number of rows" cols="number ofcolumns">…</textarea>
rows属性用于指定文本输入控件可视区域显示的文本行数
cols属性用于指定文本输入控件可视区域显示的宽度
在开始标签和结束标签之间出现的文本，将作为文本输入控件中的初始文本而显示
四.其它应用
1超链接
建立超链接的语法：
<a href=http://www.mamicode.com/"URL">…
href属性，用于指定链接的目标，目标地址由URL定位，在开始标签<a>和结束标签</a>之间输入的文本将作为浏览器中显示的链接文本
2.嵌入图像
在Web上使用最多的两种图像格式为GIF和JPEG。 GIF，用于不需要大量颜色的图片。JPEG，用于对图片品质要求较高的图像。在网页中嵌入一幅图像使用<img>元素，语法为：<imgsrc=http://www.mamicode.com/"URL">
src属性指定图像资源的位置
width和height用于指定图片的尺寸
HTML小结