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="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="URL">…</a>
href属性,用于指定链接的目标,目标地址由URL定位,在开始标签<a>和结束标签</a>之间输入的文本将作为浏览器中显示的链接文本
2.嵌入图像
在Web上使用最多的两种图像格式为GIF和JPEG。 GIF,用于不需要大量颜色的图片。JPEG,用于对图片品质要求较高的图像。在网页中嵌入一幅图像使用<img>元素,语法为:<imgsrc="URL" width=n height=n>
src属性指定图像资源的位置
width和height用于指定图片的尺寸
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。