首页 > 代码库 > 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表示段落的对齐方式,#可为leftcenterrightjustify

2<br>:表示line break,用于换行

3<hr color="clr">:表示horizontalrule,用于插入一条水平线。

    属性color用于指定线的颜色,clr可以是预定义的颜色名字(如:redbluegreen等,或者以16进制数表示的颜色值,一种颜色用6位十六进制数来表示,clr=#rrggbb,如:#000000表示黑色、ffffff表示白色、#ff0000表示红色、#00ff00表示绿色、#0000ff表示蓝色)

2.与文本显示相关的标签

1<center>…</center>:使文本居中显示

2<hn align="#">…</hn>:用于指出文档的标题,n是从16的整数,1表示最大标题,6表示最小标题。

    属性align用于设置标题对齐的方式,#可以是leftcenterright(用<hn>设置标题时,浏览器会将其单独放在一行上,所以不需要用<br>换行)

3<font size=n color="clr">…</font>:用于设置字体

    属性size表示字体的大小,n可以是从17的整数,数字越大,字体越大。

    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可以使leftcenterright

    bgcolor属性,用于指定表格的背景色,它的取值和color属性的取值一样

2<caption>元素:用于定义表格的标题

<caption>…</caption>

3<tr>元素在表格中添加一个新行:

    <tralign="alignment" valign="alignment">…</tr>

    align属性用于指定这一行在水平方向撒谎那个的对齐方式,可以是leftcenterright

    valign属性用于指定这一行在垂直方向上的对齐方式,可以使topmiddlebottom

4<th>元素用于定义表头

<th>…</th>

5<td>元素用于定义单元格

<td>…</td>

3.HTML交互式表单

1)表单的创建:使用<form>元素,以及在其间嵌入的相关元素(称为控件),就可以创建作为HTML文档一部分的表单

语法:

<formmethod="get or post" action="URL">

……

</form>

    method属性用于指定向服务器发送表单数据时所使用的HTTP方法,可以使getpost中的一种。无论采用哪一种方法,数据的编码都是相同的,格式为: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上使用最多的两种图像格式为GIFJPEG GIF,用于不需要大量颜色的图片。JPEG,用于对图片品质要求较高的图像。在网页中嵌入一幅图像使用<img>元素,语法为:<imgsrc=http://www.mamicode.com/"URL">

    src属性指定图像资源的位置

    widthheight用于指定图片的尺寸

HTML小结