HTML简介:
www,是World Wide Web (万维网) 的缩写。万维网通常也成为为Web,它是由无数的的商业、教育,娱乐等资料组成的庞大的信息信息空间。我们在这个信息空间中遨游,浏览,搜索资料,最终呈现在浏览器中古的信息,就是Web页面。
HTML(Hypertext MarkupLanguage) 超文本标记语言,目前的版本是4.01 。
Web页面(网页)也是一种文档,HTML就是用于编写这种文档的一种标记语言;网页文档的结构和格式的定义是由HTML元素来完成的。
HTML元素,是由单个或一对标签定义的包含范围。一个标签就是<>字符串,
HTML文档最基本标签
<html></html> HTML文档开始标签
<head></head> 文档的头部
<body></body> 文档的主题部分
<title></title> 文档的标题
简单应用:
与段落控制相关的标签
<palign=”#”>
表示paragraph,用于创建一个段;align=”left/center/right/justfy”。也会在段与段之间出现一个空行,
<br>
表示Line break,作用:换行。
<hrcolor=”clr”>
表示horizontal rule,用于插入一条水平线。属性 color用来指定线的颜色,
clr 1)预定义的颜色名字,如:red/blue/green/black/white/yellow/olive/qua等
2)16进制数表示颜色值,如:color=”#rrggbb”,#ff0000表示红色,#00ff00表示绿色,#0000ff表示蓝色等。(在IE浏览器中,可以不加”#”)
实例效果如图:
与文本显示先关的标签
<center>…</center> 使文本居中显示
<hn align=”#”>…</hn> 用于指出文档的标题,n从1-6,1表示一级标题,6表示最小标题。
<font size=n color=”clr”>…</font>其中属性有字体大小,和颜色(预定义颜色/16进制数表示颜色值)
<b>…</b> 使文本成为粗体。
<i>…</i> 使文本成为斜体。
列表标签
1)制定编号的列表
<ol>表示列表,该标签中使用start属性,设置起始序号。
<li>表示列表项,该标签中使用Value属性,改变类表内的编号顺序。
实例:
2)带有项目编号的列表
实例:
3)建立无符号的列表
实例:
4)建立术语列表
表格
表格是用table元素来定义的,如下:
<table border=n align=”alignment” bgcolor=”clr”>…</table>
<caption>元素用于定义表格的标题,如下所示
<caption>…</caption>
<tr>元素在表格中添加一个新行,如下所示:
<tr align=”alignment”valign=”alignment”>…</tr>
其中属相align表示水平方向对齐方式;
Valign用于垂直方向的对齐方式,值可以取“top/middle/bottom”
<th>元素用于定义表头,
<th>…</th>
<td>元素用于定义单元格,如下所示:
<td>…</td>
实例:
表单
表单在网页中主要负责数据的采集功能。一个表单有三个基本组成部分:表单标签,表单域,表单按钮。
表单标签:包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
表单域:包含文本框,密码框,隐藏域,多行文本框,复选框,单选框,下拉选择框和文件上传框等控件。
表单按钮:包括提交按钮,复位按钮和一般按钮。(主要用于将数据传送到服务器上。)
表单的基本用法:
<formmethod=”get or post” action=”URL”> … </form>
属性method用于指定向服务器发送表单数据所使用的Http方法,可以是get或post两种方法,其中get是缺省的。
两种方法的使用情况:
当数据量较大,有安全性考虑时,可考虑用post方法;
当数据量较小,不涉及用户密码时,可考虑get的方法(如果密码存在,会携带密码)。
表单域/按钮中最常用的元素:
1)<input>
<input>元素用户接受用户输入信息。
<input>元素是一个带有属性的空元素,用来创建表单中的控件,其语法:
<input type=”type” name=”name” size=”size” value=”value”>
Type:用来指定创建控件的类型。
Name:用来指定创建空间的名称
Size:指定控件的初始宽度。
Value:指定控件的初始值。
这里涉及到几种控件类型,如下图:
2)下拉类表框用到的元素:<select>和<option>
语法规则:
<select name=”selectDropDown”>
<option></option>
<option></option>
</select>
<select>,创建列表框;
<option>,创建列表中的选项。
3)多行文本输入控件用到的元素:
语法规则:
<textareaname=”name” rows=”number of rows” cols=”number of columns”>…</textarea>
Rows:文字区块的列数,即高度。
Cols:文字区域的列数,即宽度。
4)超链接
HTML:超文本标记语言,因为它具有普通文本所不具有的超链接功能,跳转页面。
连接语法:
<a href =”URL”>…</a>
属性href用于指定链接的目标;
其中URL:全称是Uniform Resource Locator ,统一资源定位符。RUL由三部分组成:协议,主机名称,文件目录和文件名
<a>文本</a>开始标签和结束标签,中间的文本,是超链接显示的文本。
例子:
<a href=”from.html”>表单的例子</a>
<a href=”../from.html”>表单的例子</a> (上一级目录中的表弟)
<a href=”E:/HXJ/from.html”>表单的例子</a> (绝对路径)
<a hret =”http://www.sunxin.org”>孙鑫的个人网站</a>
5)嵌入图像:<img>
在网页中嵌入一副图像,其基本语法:
<img src=”url” width=n height=n>
6)实例展示
表单的控件按钮:
源码:
<html>
<head><title>表单的例子</title></head>
<body>
<form method="get"action="reg.jsp">
<table>
<tr>
<td>用户名:</td>
<td><inputtype="text" name="user" value="游客" size="30"></td>
</tr>
<tr>
<td>密码:</td>
<td><inputtype="password" name="pwd"></td>
</tr>
<tr>
<td>性别:</td>
<td><inputtype="radio" name="sex" value="1" checked>男
<inputtype="radio" name="sex" value="0">女
</td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td><inputtype="checkbox" name="interest"value="football">足球
<inputtype="checkbox" name="interest"value="basketball">篮球
<inputtype="checkbox" name="interest"value="volleyball">排球
<inputtype="checkbox" name="interest" value="swim">游泳
</td>
</tr>
<tr>
<td>最高学历:</td>
<td><selectsize="1" name="education">
<optionvalue="" selected>...</option>
<optionvalue="高中">高中</option>
<optionvalue="大学">大学</option>
<optionvalue="硕士">硕士</option>
<optionvalue="博士">博士</option>
</select>
</td>
</tr>
<tr>
<td>个人简介:</td>
<td><textareaname="person" rows="5" cols="30">个人简历</textarea></td>
</tr>
<tr>
<td><inputtype="reset" value="重写"></td>
<td><inputtype="submit" value="注册"></td>
</tr>
</table>
</form>
</body>
</html>
效果图:
超链接和嵌入图像显示:
提示:
1) 在HTML文档中,标签的属性可有,可无。
如:<p> 和<p align=”center”>
2)给标签的属性赋值时:可以加上双引号,也可以不加。
如:<hr color=”blue”>和<hr color=blue>都是合法的。
3)标签和属性的名字不区分大小写。
4)如果存在连续多个空白字符
如(空格、制表符、回车、换行等),浏览器显示时将只解析为一个空格字符。如下图:
5)文本内的字符实体:
常用的字符实体:如下图
不间断空格为例:
需要注意:
实体需要注意大小写。
不间断显示空格效果:10个不间断空格,增加了60个字节是实现,实现作者靠右的功能
全角显示效果:5个全角空格。(一个全角空格占两个字节)
全角字符在不支持中文浏览器中显示为乱码。
6)html中的注释问题:<!- -内容- ->
7)空元素与非空元素
空元素
<br>
带有属性的空元素
<hr color=”blue”>
带有内容的元素
<title>http://www.sunxin.org </title>
带有内容和属性的元素
<font color=”red”>http://www.sunxin.org </font>