HTML

来源：互联网发布：java项目转成maven项目编辑：程序博客网时间：2024/05/16 18:32

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元素来定义的，如下：

<caption>元素用于定义表格的标题，如下所示

<tr>元素在表格中添加一个新行，如下所示：

其中属相align表示水平方向对齐方式；

Valign用于垂直方向的对齐方式，值可以取“top/middle/bottom”

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

<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>

<select>，创建列表框；

<option>,创建列表中的选项。

3）多行文本输入控件用到的元素：

语法规则：

<textareaname=”name” rows=”number of rows” cols=”number of columns”>…</textarea>

Rows:文字区块的列数，即高度。

Cols:文字区域的列数，即宽度。

4）超链接

HTML：超文本标记语言，因为它具有普通文本所不具有的超链接功能，跳转页面。

连接语法：

属性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>

在网页中嵌入一副图像，其基本语法：

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>

带有属性的空元素

带有内容的元素

<title>http://www.sunxin.org </title>

带有内容和属性的元素

<font color=”red”>http://www.sunxin.org </font>

0 0

HTML

HTML简介：

HTML文档最基本标签

与段落控制相关的标签

与文本显示先关的标签

列表标签

1）制定编号的列表

2）带有项目编号的列表

3）建立无符号的列表

4）建立术语列表

表格

表单

表单的基本用法：

表单域/按钮中最常用的元素：

1）<input>

2）下拉类表框用到的元素：<select>和<option>

3）多行文本输入控件用到的元素：

4）超链接

5)嵌入图像：<img>

6)实例展示

提示：

1） 在HTML文档中，标签的属性可有，可无。

2）给标签的属性赋值时：可以加上双引号，也可以不加。

3）标签和属性的名字不区分大小写。

4)如果存在连续多个空白字符

5）文本内的字符实体：

6）html中的注释问题：<!- -内容- ->

7）空元素与非空元素

1）在HTML文档中，标签的属性可有，可无。