HTML基础(第二部分)

目录

四、表格标签

[1. 语法](#1. 语法)

[2. 设置表格的标题](#2. 设置表格的标题)

[3. 表头](#3. 表头)

[4. 表格属性](#4. 表格属性)

[5. 行属性](#5. 行属性)

[6. 单元格属性](#6. 单元格属性)

[7. 表格的结构](#7. 表格的结构)

五、列表标签

[1. 有序列表](#1. 有序列表)

[2. 无序列表](#2. 无序列表)

[3. 目录列表标记](#3. 目录列表标记)

[4. 定义列表标记](#4. 定义列表标记)

[5. 菜单列表标记](#5. 菜单列表标记)

六、表单标签

[1. 表单标记 form](#1. 表单标记 form)

[2. 提交表单 action](#2. 提交表单 action)

[3. 表单名称 name](#3. 表单名称 name)

[4. 传送方法 method](#4. 传送方法 method)

[5. 编码方式 enctype](#5. 编码方式 enctype)

[6. 目标显示方式 target](#6. 目标显示方式 target)

[7. 插入表单对象](#7. 插入表单对象)

七、使用框架结构

[1. 框架的概念](#1. 框架的概念)

[2. 水平分割窗口 rows](#2. 水平分割窗口 rows)

[3. 垂直分割窗口 cols](#3. 垂直分割窗口 cols)

[4. 嵌套分割窗口](#4. 嵌套分割窗口)

[5. 框架的边框 frameborder](#5. 框架的边框 frameborder)

[6. 框架的边框宽度 framespacing](#6. 框架的边框宽度 framespacing)

[7. 框架的边框颜色 bordercolor](#7. 框架的边框颜色 bordercolor)

[8. 设置窗口属性 frame](#8. 设置窗口属性 frame)

[9. 浮动框架 iframe](#9. 浮动框架 iframe)

[10. 创建框架链接](#10. 创建框架链接)

[八、使用 XHTML](#八、使用 XHTML)

[1. XHTML 页面结构](#1. XHTML 页面结构)

[2. XHTML 语法规范](#2. XHTML 语法规范)


四、表格标签

表格标记 table、行标记 tr、单元格标记 td。

1. 语法

复制代码
<table>
	<caption>表格的标题</caption>
	<tr>
		<td>单元格内的文字</td>
		<td>单元格内的文字</td>
	</tr>
	<tr>
		<td>单元格内的文字</td>
		<td>单元格内的文字</td>
	</tr>
</table>

2. 设置表格的标题

可以使用<caption>来设置标题单元格,表格的标题一般位于整个表格的第1行。一个<table>表格只能含有一个表格标题。

语法:

复制代码
<caption>表格的标题</caption>

3. 表头

表格的表头<th>是<td>单元格的一种变体,实质上仍是一种单元格。它一般位于第1行和第1列,用来表明这一行或列的内容类别。在一般情况下,浏览器会以粗体和居中的样显示<th>元素中的内容。
语法:

复制代码
<table>
    <tr>
	    <th>80</th>
    </tr>
    <tr>
	    <td>单元格内的内容</td>
    	<td>单元格内的内容</td>
    </tr>
</table>

4. 表格属性

(1) 表格宽度
语法:

复制代码
<table width="表格宽度">
<!--
    说明:表格宽度的值可以是像素值,也可以为百分比。
-->

(2) 表格高度
语法:

复制代码
<table height="表格高度">
<!--
    说明:表格高度的值可以是像素值,也可以为百分比。
-->

(3) 表格对齐方式
语法:

复制代码
<table align="对齐方式">
<!--
对齐方式的属性值:
    left:整个表格在浏览器页面中左对齐
    center:整个表格在浏览器页面中居中对齐
    right:整个表格在浏览器页面中右对齐
-->

(4) 表格边框宽度

语法:

复制代码
<table border="边框宽度">
<!--
    说明:只有设置 border 值不为 0,在网页中才能显示出表格的边框。
-->

(5) 表格边框颜色
语法:

复制代码
<table border="边框宽度" bordercolor="边框颜色">

(6) 内框宽度
语法:

复制代码
<table cellspacing="内框宽度值(像素)">

(7) 表格内文字与边框间距
语法:

复制代码
<table cellpadding="文字与边框距离值(像素)">

(8) 表格背景颜色
语法:

复制代码
<table bgcolor="背景颜色">

(9) 表格背景图像
语法:

复制代码
<table background="背景图像地址">

5. 行属性

(1) 高度控制
语法:

复制代码
<tr height="行的高度">

(2) 边框颜色
语法:

复制代码
<tr bordercolor="边框的颜色">

(3) 行背景颜色
语法:

复制代码
<tr bgcolor="行的背景颜色">

(4) 行背景图片
语法:

复制代码
<tr background="背景图像地址">

(5) 行文字的水平对齐方式
语法:

复制代码
<tr align="水平对齐方式">
<!--
    对齐方式的属性值为:left/center/right
-->

(6) 行文字的垂直对齐方式
语法:

复制代码
<tr valign="垂直对齐方式">
<!--
    对齐方式的属性值为:top/middle/bottom
-->

6. 单元格属性

(1) 单元格宽度
语法:

复制代码
<td width="单元格宽度(像素)">

(2) 单元格高度
语法:

复制代码
<td height="单元格高度(像素)">

(3) 水平跨度
语法:

复制代码
<td colspan="跨度的列数">

(4) 垂直跨度
语法:

复制代码
<td rowspan="跨度的行数">

(5) 水平对齐方式
语法:

复制代码
<td align="水平对齐方式">
<!--
    对齐方式的属性值为:left/center/right
-->

(6) 垂直对齐方式
语法:

复制代码
<td valign="垂直对齐方式">
<!--
    对齐方式的属性值为:top/middle/bottom
-->

(7) 单元格的背景色
语法:

复制代码
<td bgcolor="背景颜色">

(8) 单元格的背景图像
语法:

复制代码
<td background="背景图像的地址">

(9) 单元格的边框颜色
语法:

复制代码
<td bordercolor="边框颜色">

(10) 单元格的亮边框
语法:

复制代码
<td bordercolorlight="亮边框的颜色">

(11) 单元格的暗边框
语法:

复制代码
<td bordercolordark ="暗边框的颜色">

7. 表格的结构

表首标记<thead>、表主体标记<tbody>以及表尾标记<tfoot>

(1) 表格的表首标记<thead>

用于定义表格最上端表首的样式,可以设置背景颜色、文字对齐方式、文字的垂

直对齐方式等。

语法:

复制代码
<thead bgcolor="背景颜色" align="对齐方式">
......
</thead>

(2) 表格的表主体标记<tbody>

用于统一设计表主体部分的样式。

语法:

复制代码
<tbody bgcolor="背景颠色" align="对齐方式">
......
</tbody>

(3) 表格的表尾标记<tfoot>

用于定义表尾样式。

语法:

复制代码
<tfoot bgcolor="背景颜色" align="对齐方式">
......
</tfoot>

五、列表标签

1. 有序列表

语法:

复制代码
<ol type="序号类型" start="起始数值">
    <li>有序列表项</1i>
    <11>有序列表项</1i>
    <l1>有序列表项</1i>
    <1i>有序列表项</1i>
    ......
</ol>
<!--
    默认情况下,有序列表的编号是从1开始的,通过start属性可以调整编号的起始值。
-->

序号类型(type)的属性值:

描述
1 数字
a 小写字母
A 大写字母
i 小写罗马数字
I 大写罗马数字

2. 无序列表

语法:

复制代码
<ul type="符号类型">
    <li>列表项</1i>
    <li>列表项</1i>
    <li>列表项</1i>
    <li>列表项</1i>
    <li>列表项</1i>
    ......
</ul>

符号类型的属性值:

描述
disc 默认值,黑色实心圆
circle 空心圆
square 正方形

3. 目录列表标记

目录列表一般用来创建多列的目录列表,它在浏览器中的显示效果与无序列表相同

语法:

复制代码
<dir>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    ......
</dir>

4. 定义列表标记

语法:

复制代码
<dl>
    <dt>定义条件1</dt>
    <dd>定义描述1</dd>
    <dt>定义条件2</dt>
    <dd>定义描述2</dd>
    ......
</dl>

5. 菜单列表标记

菜单列表主要用于设计单列的菜单列表。菜单列表在浏览器中的显示效果和无序列表是相同的。

语法:

复制代码
<menu>
	<li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
	......
</menu>

六、表单标签

1. 表单标记 form

在网页中<form></form>标记对用来创建一个表单,即定义表单的开始和结束位置,在标记对之间的一切都属于表单的内容。

2. 提交表单 action

action 用于指定表单数据提交到哪个地址进行处理。
语法:

复制代码
<form action="表单的处理程序">......</form>

3. 表单名称 name

语法:

复制代码
<form name="表单名称">......</form>

4. 传送方法 method

表单的 method 属性用于指定在数据提交到服务器的时候使用哪种HTTP提交方法,取值为 get 或 post。

get:表单数据被传送到 action属性指定的URL,然后这个新URL被送到处理程序上;

post:表单数据被包含在表单主体中,然后被送到处理程序上。

语法:

复制代码
<form method="传送方法">......</form>

5. 编码方式 enctype

语法:

复制代码
<form enctype="编码方式">......</form>

编码方式的属性值:

描述
application/x-www-form-urlencoded 默认的编码形式
multipart/form-data MIME编码,上传文件的表单必须选择该项

6. 目标显示方式 target

语法:

复制代码
<form target="目标窗口的打开方式">......</form>

目标窗口的打开方式的取值:

描述
_blank 为将能的文件载入一个未命名的新浏览器窗口中:
_parent 为将链接的文件载入含有该链接框梁框架集或父窗口中:
_self 为将链接的文件载入该链接所在的同一框架或窗口中;
_top 为在个浏览器窗口中载入所链接的文件,因而会删除所有框架;

7. 插入表单对象

(1) 文字字段 text
语法:

复制代码
<input name="控件名称" type="text" value="文字字段的默认取值" size="控件的长度" maxlength="最长字符数"/>

参数说明:

属性值 描述
name 文字字段的名称,用于和页面中其他控件加以区别。名称由英文或 数字以及下画线组成,但有大小写之分
type 用来指定插入哪种表单元素,如type="text",即为文字字段
value 用来定义文本框的默认值
size 确定文本框在页面中显示的长度,以字符为单位
maxlength 用来设置文本框中最多可以输入的字符数

(2) 密码域 password
语法:

复制代码
<input name="控件名称" type="password" value="文字字段的默认取值" size="控件的长度"  maxlength="最长字符数"/>

(3) 单选按钮 radio
语法:

复制代码
<input name="单选按钮名称" type="radio" value="单选按钮的取值" checked/>

**说明:**在单选按钮中必须设置 value 的值,对于一个选择列表中的所有单选按钮

来说,往往要设置为相同的名称,这样在传递时才能更好地对某一个选择内容进行判

断。在一个单选按钮组中只有一个单选按钮可以设置为 checked。

(4) 复选框 checkbox
语法:

复制代码
<input name="复选框名称" type="checkbox" value="复选框的取值" checked/>

**说明:**checked 参数表示该项在默认情况下已经被选中。

(5) 普通按钮 button
语法:

复制代码
<input type="submit" name="按钮名称" value="按钮的取值" onclick="处理程序"/>

(6) 提交按钮 submit
语法:

复制代码
<input type="submit" name="按钮名称" value="按钮的取值"/>

(7) 重置按钮 reset
语法:

复制代码
<input type="reset" name="按钮名称" value="按钮的取值"/>

(8) 图像域 image
语法:

复制代码
<input name="图像域名称" type="image" src="图像路径"/>

(9) 隐藏域 hidden
语法:

复制代码
<input name="隐藏域名称" type="hidden" value="隐藏域的取值"/>

(10) 文件域 file
语法:

复制代码
<input name="文件域名称" type="file" size="控件的长度" maxlength="最长字符数"/>

(11) 下拉菜单
语法:

复制代码
<select name="下拉菜单名称">
    <option value="选项值" selected>选项显示内容
    ......
</select>

(12) 列表项
语法:

复制代码
<select name="列表项名称" size="显示的列表项数" multiple>
    <option value="选项值" selected>选项显示内容
    ......
</select>

(13) 文本域标记 textarea
语法:

复制代码
<textarea name="文本域名称" cols="列数" rows="行数">......</textarea>

(14) id 标记

id标记是一个较为特殊的标记,它主要用于标示一个惟一的元素。

语法:

复制代码
<id=元素的标识名>

七、使用框架结构

1. 框架的概念

框架集是 HTML 文件,它定义一组框架的布局和属性,包括框架的数目、框架的大小和位置,以及在每个框架中初始显示的页面的URL。框架把一个网页分成几个单独的区域,每个区域为一个单独的 HTML 文件。

框架最常见的用途就是导航。一组框架通常包括一个含有导航条的框架和另一个显示主要内容的框架。

框架页面的结构是在框架集中设置的,可以根据框架的分割方式分为水平分割窗口、垂直分割窗口和嵌套分割窗口。

2. 水平分割窗口 rows

水平分割窗口是将页面沿水平方向切割,也就是将页面分成上下排列的多个窗口。

语法:

复制代码
<frameset rows="框架窗口的高度,枢架窗口的高度,......">
	<frame>
	<frame>
	......
</frameset>

3. 垂直分割窗口 cols

垂直分割将页面沿垂直方向分制成多个窗口,由一组用逗号分隔的像素值、百分比值或相对度量值组成列表。

语法:

复制代码
<frameset co1s="框架窗口的宽度,框架窗口的宽度,......">
	<frame>
	<frame>
	......
</frameset>

4. 嵌套分割窗口

嵌套分割窗口就是在一个页面中,既有水平分割的框架,又有垂直分割的框架。

语法:

复制代码
<frameset rows="框架窗口的高度,框架窗口的高度,......">
	<frame>
	<frameset cols="框架窗口的宽度,框架窗口的宽度,......">
	<frame>
	<frame>
	......
</frameset>

5. 框架的边框 frameborder

语法:

复制代码
<frameset frameborder="是否显示">

**说明:**frameborder的取值只能为0、1,或者是yes、no。如果取值为0或no,那么边框将会隐藏;如果取值为1或yes,边框将会显示。

6. 框架的边框宽度 framespacing

语法:

复制代码
<frameset framespacing="边框宽度(像素)">

7. 框架的边框颜色 bordercolor

语法:

复制代码
<frameset bordercolor="边框颜色">

8. 设置窗口属性 frame

(1) 页面源文件 src
语法:

复制代码
<frame src="页面源文件地址">

(2) 页面名称 name
语法:

复制代码
<frame src="页面源文件地址" name="页面名称">

(3) 禁止调整窗口的尺寸noresize
语法:

复制代码
<frame sre="页面源文件地址" noresize>
<!--
    说明:noresize 没有属性值,添加该属性后就不能拖动边框,反之无需指定此属性。
-->

(4) 边框与页面内容的水平边距 marginwidth
语法:

复制代码
<frame src="页面源文件地址" marginwidth="水平边距">

(5) 边框与页面内容的垂直边距 marginheight
语法:

复制代码
<frame src="页面源文件地址" marginheight="垂直边距">

(6) 控制框架滚动条显示 scrolling
语法:

复制代码
<frame src="页面源文件地址" scrol1ing="是否显示滚动条">
<!--
    说明:scrolling 取值包括 yes、no 或 auto(默认值)。
-->

(7) 不支持框架标记 noframes
语法:

复制代码
<noframes>替换显示内容</noframes>

9. 浮动框架 iframe

(1) 基本概念

浮动框架是一种较为特殊的框架,它是在浏览器窗口中嵌套的子窗口,整个页面并

不一定是框架页面,但要包含一个框架窗口。<iframe>框架可以完全由设计者定义宽度

和高度,并且可以放置在一个网页的任何位置,这极大地扩展了框架页面的应用范围。

(2) 页面源文件 src
语法:

复制代码
<iframe src="浮动框架的源文件"></iframe >

(3) 浮动框架的宽和高 width、height
语法:

复制代码
<iframe src="浮动框架的源文件" width="浮动框架的宽(像素)" height="浮动框架的高(像素)"></iframe>

(4) 浮动框架的对齐方式 align
语法:

复制代码
<iframe src="浮动框架的源文件" align="对齐方式"></iframe>
<!--
    说明:对齐方式的取值为:左对齐left、右对齐right、居中对齐middle 和底部对齐 bottom。
-->

(5) 浮动框架滚动条显示属性 scrolling

浮动框架的 scrolling 属性有3种情况,包括不显示、根据需要显示和总显示滚

动条。

语法:

复制代码
<iframe src="浮动框架的源文件" scrolling="是否显示滚动条"></iframe>

scrolling 的取值范围:

属性值 描述
auto 默认值,整个框架在浏览器页面中左对齐
yes 总是显示滚动条,即使页面内容不足以撑满框架范围,滚动条的位置也预留
no 在任何情况下都不显示滚动条

10. 创建框架链接

(1) 普通框架结构的链接

普通的框架结构之间通过 target 互相链接起来。一般情况下,一个页面中会有一

个框架窗口作为导航页面,其中添加了对另一个框架内容的链接设置,而这些链接则是

通过 target 来实现的。

复制代码
<a href="images/beijing.html" target="mainFrame">北京</a></td>
(点击"北京"后,beijing.html将在框架名name="mainFrame"的窗口显示。)

(2) 浮动框架的链接

在设置浮动框架链接时,为浮动框架设置一个名称,在设置链接时,将链接的目

标设置为浮心提示动框架的名称(与普通框架结构的链接相同)。

八、使用 XHTML

XHTML是一个过渡技术,结合了部分 XML 的强大功能及大多数 HTML 的简单特性。

1. XHTML 页面结构

(1) XHTML 的页面结构

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>标题</title>
	</head>
	<body>
		正文...
	</body>
</html>

(2) 文档类型声明

由<!DOCTYPE>元素定义

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(3) <html>元素和名字空间

名字空间是<html>元素的一个属性,写在<html>元素起始标签里。

复制代码
<html xmlns="http://www.w3.org/1999/xhtml">

(4) 网页头部元素

复制代码
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>标题</title>
</head>

(5) 页面标题元素

复制代码
<title>标题</title>

(6) 页面主体元素

复制代码
<body>
	正文...
</body>

2. XHTML 语法规范

(1) XHTML 元素必须是完全嵌套的

在HTML中一些元素可以不使用正确的相互嵌套:

如:<b><i> 这是粗体和斜体**</b></i>**

但是在XHTML中所有元素必须合理的相互嵌套:

如:<b><i> 这是粗体和斜体**</i></b>**

(2) XHTML 文档格式必须规范

所有的 XHTML 标记必须被嵌套使用在<html>根标签之中。所有其他的标签可以

有自己的子标签。位于父标签之内的子标签也必须成对且正确的嵌套使用。

复制代码
<html>
    <head>......</head>
    <body>......</body>
</html>

(3) 标签名必须是小写的

因为 XHTML 文档是 XML 应用程序,XML 是区分大小写的,所以像<b>和<B>会

被认为是两种不同的标签。

(4) 所有的 XHTML 元素都必须有始有终

非空元素必须有关闭标签。

如:<p> 这是第一段**</p>**

空的元素也必须有一个结束标签,或者开始标签用"/>"结束。

如: <img src="..."/>

(5) 用id 属性代替 name 属性

HTML4.01中为 a、applet、frame、iframe、img 和 map 定义了一个 name 属性,

在 XHTML里除了表单(form)外,name属性不能使用,需要用id来替换。

如: <img src="img/picl.jpg" id="people" />

为了使旧浏览器也能正常地执行该内容,也可以在标签中同时使用id和name属

性,如下所示。

如: <img src="img/picl.jpg" id="people" name="people"/>

(6) DOCTYPE 声明是不可缺少的

在 XHTML 中必须声明文档的类型,以便于浏览器知道当前浏览的文档是什么类

型。声明DOCTYPE必须放在文档的第一行。

(7) 属性必须加上英文双引号

XHTML 中所有的属性,包括数值都必须加上英文双引号("")。

如:<img name="" src="" width="32" height="32" alt="" />

(8) 明确所有属性的值

XHTML 中规定每一个属性都必须有一个值。没有值的属性也要用自己的名称作为

值。例如,在HTML中,checked属性是可以不取值的,但是在XHTML中必须用它自身

的名作为值。

如: <input type="checkbox" name="name" value="abc" checked="checked" />

相关推荐
玫城12 小时前
[ VUE ] 封装通用数组校验组件,el-input内使用
前端·javascript·vue.js
南半球与北海道#17 小时前
前端打印(三联纸票据打印)
前端·vue.js·打印
董世昌4117 小时前
深入浅出 JavaScript 常用事件:从原理到实战的全维度解析
前端
满栀58517 小时前
分页插件制作
开发语言·前端·javascript·jquery
qq_4061761417 小时前
深入剖析JavaScript原型与原型链:从底层机制到实战应用
开发语言·前端·javascript·原型模式
开开心心_Every18 小时前
免费窗口置顶小工具:支持多窗口置顶操作
服务器·前端·学习·macos·edge·powerpoint·phpstorm
闲蛋小超人笑嘻嘻19 小时前
Vue 插槽:从基础到进阶
前端·javascript·vue.js
梦65019 小时前
Vue2 与 Vue3 对比 + 核心差异
前端·vue.js
tiandyoin19 小时前
给 MHTML 添加滚动条.mhtml
前端·chrome·html·mhtml
遗憾随她而去.19 小时前
前端大文件上传(切片并发/断点续传/秒传/WebWorker 计算Hash) 含完整代码
前端