HTML

HTML

HTML语言基础

编写HTML文件的注意事项

1. 字符间只显示一个空格

   可以使用实体引用【 】输入多个空格

2. 注释

HEAD元素

title元素

【<title> 标题 </title> 】

meta元素

向客户的浏览器传递信息和命令

属性名	属性值	描述
name	keywords	页面关键字，用英文逗号隔开
	description	描述内容，过长省略
	robots	是否允许索引与查询，默认为all
	author	标注作者
http-equiv	content-type	设定页面使用的字符集
	refresh	自动刷新并跳转到新页面
	set-cookie	设置页面缓存过期时间
	expires	设置页面到期时间，到期后必须重新加载
content	text	内容文件。用于描述name或http-equiv属性的相关内容

文本元素

标题标签

6级标题

<h1> </h1>

……

<h6> </h6>

一般用到3，4级别

文本修饰标签

标签	描述
<font>…</font>	设置文本的字体样式
<b>…</b>	加粗
<i>…</i>	斜体
<s>…</s>	删除线
<u>…</u>	下划线
<sup>…</sup>	上标（右上角）
<sub>…</sub>	下标（右下角）
<strong>…</strong>	加粗，（用于重要内容）
<small>…</small>	小字印刷体，用来标注：注意事项，法律规定等声明性文字

<font>标签可以用来控制更多的文本字体外观，通过face，size，color属性来设定文本的字体，大小，颜色

特殊字符

字符实体：以 & 开头 ；结尾

特殊字符	实体引用
小于号（<）	&lt;
大于号（>）	&gt;
空格	&nbsp;

文档结构元素

段落标签

<p>…</p>表示不同的段落。

换行标签

<br />

br和/之间有空格

水平线标签

<hr />

可以通过 size，color，width，noshade，align 等属性

分别对横线的 高度，颜色，宽度，阴影，对齐方式 等进行设定

列表元素

三种列表类型：

• 有序列表：数字或字母作为编号
• 无序列表：项目符号作为编号
• 定义列表：列表中的每个项目与描述配对显示

1. 有序列表【order list】

   <ol type="A" start="3">
   	<li>列表项1</li>
   	<li>列表项2</li>
   	<li>列表项3</li>
   	...
   </ol>
   

   通过type属性指定有序列表编号的样式：

   type	效果
   1	（1，2，3，……）
   a	（a，b，c，……）
   A	（A，B，C，……）
   i	（I，II，III，……）

   通过start属性，指定开始的位置（默认1开始）

2. 无序列表【unordered list】

   <ul type="disc">
   	<li>列表项1</li>
   	<li>列表项2</li>
   	<li>列表项3</li>
   	...
   </ul>
   

   通过type属性设置列表图形前缀

   type	效果
   circle	圆
   disc	点
   square	方块
   none	无

3. 定义列表【definition list】

   标题和描述成对显示。

   <dl>
   	<dt>标题1</dt>
   	<dd>描述1</dd>
   	
   	<dt>标题2</dt>
   	<dd>描述2</dd>
   	...
   </dl>
   

div与span标签

<div>标签

用于表达一个逻辑区块，属于块级元素

<div style="块元素的样式" class="类选择器名称" align="对齐方式">
	内容部分
	...
</div>

属性	描述
style	设置行内样式
class	引用CSS的类选择权
align	设置对齐方式（left，right，center，justify）（使用较少，被css替代）

<span>标签

用于行内块的定义，选择特定文本，赋予特殊样式

<span style="块元素的样式" class="类选择器名称" align="对齐方式">内容部分</span>

图像标签

<img src="url" alt=" ".../>

属性名	描述
src	图像的地址
alt	图像的文本描述，无法显示图像时，显示文字
height	图像的高度。固定值或百分比
width	图像的宽度。固定值或百分比
align	图像的对齐方式。（top，bottom，middle，left，right）
border	图像边框的宽度

超链接标签

<a href="url" name=" " target=" ">链接内容</a>

属性名	描述
href	目标链接地址
name	锚点名称
target	指明以何种方式打开链接目标

类型：

• 文本链接
• 锚点链接
• 图像链接
• 图像热区链接
• Email链接
• JavaScript链接
• 空链接

1. 文本链接

   链接内容为文本内容

   链接目标可以是站内链接，也可以是站外链接。

2. 锚点链接

   分为：

   • 同一页面的锚点链接

   • 跨页面的锚点链接

   同一页面实现：

   ​ 必须附带 id 属性

   ​ 目标锚点

   <a id = "myAnchor">这里是我创建的锚点位置</a>
   

   ​ 链接到锚点

   <a href="#myAnchor">链接到锚点位置</a>
   

   跨页面的实现：

   <a href="/a/b.html#myAnchor">链接到目标页面的锚点位置</a>
   

3. 图片链接

   只需将<img />标签放在<a>和</a>之间

   <a href="http://www.itshixun.com">
   	<img src="images/logo.jpg"
   </a>
   

4. 图片热区链接

   同一图片中不同部分链接到不同的目标位置

   步骤：

   （1）通过<map>标签定义一个客户端图像映射，包含多个图像映射区（<area>）,每个<area>包含一个链接

   （2）将<img />标签usemap属性与<map>标签的name属性相关联

   <map name="myMap">
   	<area shape="circle" coords="32,35,31" href="http://www.itshixun.com" />
   	<area shape="rect" coords="62,8,103,66" href="http://www.itoffer.cn" />
   	<area shape="poly" coords="114,73,133,11,107,11" href="#" />
   </map>
   <img src="images/logo.jpg" usemap="#myMap" border="0"/>
   

   形状	shape属性	coords参数	描述
   圆形	circle	x,y,r	点（x，y）为圆心，r为半径
   矩形	rect	x1,y1,x2,y2	点（x1，y1）为左上角坐标，点（x2，y2）为右下角坐标
   多边形	poly	x1,y1,x2,y2…	点（x1，y1），（x2，y2）为多边形的各个点坐标

   原点为屏幕左上角，向右为x轴正方向，向下为y轴正方向

5. 空链接

   <a href="#">空链接</a>
   

6. Email链接

   自动打开邮件程序

   <a href="mailto:guoqy@itshixun.com">联系我们</a>
   

7. JavaScript链接

   <a href="JavaScript:alert('你好');">
   	JavaScript链接，弹出消息
   </a>
   <a href="JavaScript:void(0);" onClick="alert('你好');">
   	JavaScript链接，弹出消息
   </a>
   

   等效写法

超链接的target属性

​ 改变文档的显示窗口

值	描述
_blank	新窗口打开
_self	默认值。相同的框架中打开
_parent	父框架中打开
_top	整个窗口打开
frameName	指定的框架打开

<a href="http://www.itshixun.com" target="_blank">新窗口打开</a>

表格与框架

表格的组成

<table>
	<tr>
		<td>单元格内容</td>
		<td>单元格内容</td>
        <!-- 更多单元格 【data cell】-->
	</tr>
	<!-- 更多行 【row】 -->
</table>

表格的基本属性

通常用于布局，不会显示出来

属性	取值	描述
align	left，center，right	相对周围元素的对齐方式
bgcolor	rgb（x,x,x），#xxxxxx，colorName	背景颜色
border	像素	边框的宽度
cellpadding	像素或百分比	单元格与其内容之间的距离 （单元格内部 填充 ）
cellspacing	像素或百分比	单元格之间的距离
height	像素或百分比	高度
width	像素或百分比	宽度
rules	none，groups，rows，cols，all	表格线的显示方式，默认为all
frame	void，above，below，hsides，vsides， lhs，rhs，box，border	表格外部边框的显示方式

frame属性可以对表格边框更加灵活地进行设置

frame属性	描述
void	不显示边框
above	只显示顶部
below	只显示底部
hsides	显示顶部和底部
vsides	只显示左右两侧边框
lhs	只显示左侧边框
rhs	只显示右侧边框
box或者border	显示所有边框（默认）

单元格标签

<th>包含表格的标题部分【table head】

<td>包含表格的数据部分【table data cell】

属性	描述
align	水平对齐方式：left，center，right，justify
valign	垂直对齐方式：top，middle，bottom，baseline
rowspan	跨越的行数（竖直方向占 n 个）
colspan	跨越的列数（水平方向占 n 个）
scope	定义将表头数据与单元数据相关联的方法
width	宽度
height	高度
bgcolor	背景颜色

注意：显示空白单元格需要加入&nbsp; 才能正常显示

行标签

<tr> 行标签

属性	描述
align	水平对齐方式：left，center，right，justify
valign	垂直对齐方式：top，middle，bottom，baseline
bgcolor	背景颜色
bordercolor	边框颜色
bordercolordark	左上边框颜色
bordercolorlight	右下边框颜色

表格的行分组

除了表格主体（行与列）外，表格还提供标题，表头和表尾部分

• <thead> 表头：用于创建表格的头部
• <tfoot> 表尾：用于创建表格的脚注
• <tbody> 主体：主体部分
• <caption>标题：显示在表格的上方

表格的列分组

<colgroup /> 列标签（没有内容标签）

属性	描述
align	水平对齐方式：left，center，right，justify
valign	垂直对齐方式：top，middle，bottom，baseline
span	规定该列组应该横跨的列数，默认为1
width	宽度

框架集的基本结构

<frameset> 负责划分整个页面的布局

rows 属性 说明行数以及窗口的比例

cols 属性 说明列数以及窗口的比例

<frameset rows="60,*,100">
	<frame src="引入页面的URL" />
	<frame src="引入页面的URL" />
	<noframes>
		<body>
			该浏览器不支持框架集！
		</body>
	</noframes>
</frameset>

<frameset> 替代了 <body>

框架集的属性

<frameset>属性	描述
rows	行数，对应的高度
cols	列数，对应的宽度
frameborder	边框是否显示，取值为1，0或yes，no。不能调整宽度
bordercolor	边框颜色
framespacing	框架间的空白距离

rows和cols属性的取值形式：

形式	例子
像素	rows=“120,580,*”，第一行高度为120像素，第二行高度为580像素，第三行剩余空间 rows=“100,300,200”，按照比例1：3：2进行分配
百分比	rows=“30%,70%”，第一行占30%，第二行占70%。总和大于或小于100时，比例分配
相对宽度	rows=“1*,3*,1*”，表示1：3：1
混合度量尺寸	rows=“100,70%,*”，表示第一行100像素，第二行70%，第三行剩余空间

框架的属性

<frame> 用于指示框架集中每一个框架的内容

<frame src="url" name=" "...></frame>
<frame src="url" name=" ".../>

属性	描述
name	名称，设置超链接是作为框架的标记
src	显示页面的URL
frameborder	边框是否显示，取值为0，1
marginheight	定义内容与框架的上下边缘高度，默认为1
marginwidth	定义内容与框架的左右边缘宽度，默认为1
scrolling	是否显示滚动条，取值为yes，no，auto
noresize	设置不能调整大小，值只有noresize

内联框架

<iframe src="url" name=" " width=" " height=" "...></iframe>

属性	描述
align	设置与周围文本的对齐方式，取值为left，right，top，middle，bottom
frameborder	边框是否显示，取值为0，1
marginheight	顶部和底部的边距
marginwidth	左侧和右侧的边距
height	高度
width	宽度
scrolling	是否显示滚动条，取值为yes，no，auto
src	显示页面的URL
name	名称

表单

表单标签

<form action="处理数据程序的URL" method="get|post" name="表单名称"...>
</form>

属性	描述
action	说明向何处发送表单数据
accept-charset	服务器可处理的表单数据字符集
enctype	表单数据内容类型，说明在发送表单数据之前如何对其进行编码，取值为 application/x-www-form-urlencoded，multipart/form-data，text/plain
id	唯一标识符
name	名称
method	发送数据的方式，取值为get，post
onsubmit	向服务器提交数据之前，执行其指定的JavaScript脚本程序
onreset	重置表单数据之前，执行其指定的JavaScript脚本程序
formtarget	指明被连接的内容将在哪个框架中加载

表单域

用于收集信息，位于<form> ，</form>之间。

包括：

• 文本框
• 密码框
• 隐藏域
• 多行文本框
• 单选按钮
• 复选框
• 列表选择框
• 文件选择框

除了多行文本框（<textarea>）和列表选择框（<select>），大部分表单域使用<input>标签创建

<input>属性	描述
id	唯一id，在css，JavaScript中可以引用
name	名称。在向服务器发送数据时，服务器根据name属性获取对应表单域的值
value	初始值
type	必需项，说明控件的类型。取值为text，password，radio，checkbox，file，hidden，button，submit，reset，image
maxlength	最大字符数
size	控件的宽度，单位为字符

1. 单行文本框

   输入一些简单的内容

   <input type="text" name="..." size="..." maxlength="..." value="..." 					disabled="disabled" readonly="readonly" />
   

   属性	描述
   type=“text”	类型为单行文本框
   name	名称
   size	文本框的宽度，单位为字符
   maxlength	最多输入字符的个数
   value	初始值
   disabled=“disabled”	禁用状态，呈现灰色
   readonly=“readonly”	只读状态

2. 密码框

   <input type="password" name="..." size="..." maxlength="..." value="..." />
   

   属性	描述
   type=“password”	类型为密码框
   name	名称
   size	宽度，单位为字符
   maxlength	最多输入字符的个数
   value	初始值，以掩码的方式显示

3. 单选按钮

   <input type="radio" name="..." value="..." checked="checked" />
   

   属性	描述
   type=“radio”	类型为单选按钮
   name	名称（名称相同为一组，一组只能选择一项）
   value	值（每组的值不相同）（不会在浏览器中显示）
   checked=“checked”	默认选中（多个选中，默认最后一个）

4. 复选框

   一项或多选

   <input type="checkbox" name="..." value="..." checked="checked" />
   

   属性	描述
   type=“checkbox”	类型为复选框
   name	名称（名称相同为一组，组内允许多选）
   value	值
   checked=“checked”（简写checked）	默认选中

5. 文件选择框

   上传文件

   <input type="file" name="..." accept="..." />
   

   属性	描述
   type=“file”	类型为文件选择框
   name	名称
   accept	指定文件类型（图片：image/gif，image/jpeg，image/*）

   使用文件选择框时，form表单的enctype属性应为multipart/form-data类型，method属性应为post类型。

6. 隐藏域

   网页之间传递数据时，有些数据不希望用户在页面中看到

   <input type="hidden" name="..." value="..." />
   

   属性	描述
   type=“hidden”	类型为隐藏域，该控件不在页面中显示
   name	名称
   value	值

7. 多行文本框

   输入较长内容

   <textarea name="..." rows="..." cols="..." wrap="...">文本内容</textarea>
   

   属性	描述
   name	名称
   rows	行数
   cols	宽度，单位为字符
   wrap	指定文本内容大于文本宽度时的显示方式

   wrap值	描述
   off	默认值，内容足够多时，添加滚动条
   virtual	自动换行，传输的时候，只在用户按下Enter的地方换行
   physical	自动换行，以这种形式传送给服务器

8. 列表选择框

   列表中选择一项或者多项

   <select name="..." size="..." multiple="multiple">
   	<option value="..." selected="selected">选项描述内容</option>
   	...
   </select>
   

   <select>属性	描述
   name	名称
   size	可见选项的数量
   multiple（可简写）	是否可以选择多个选项
   disabled（可简写）	是否被禁用

   <option>属性	描述
   value	值，如果选中该项，该项的值就发送给服务器
   selected（可简写）	默认选中
   disabled（可简写）	是否被禁用

   提供<optgroup>进行分组

   <optgroup label="..." disabled>
   	<option value="..." selected="selected">选项描述内容</option>
   	...
   </optgroup>
   

按钮控件

分为：

• 提交按钮
• 重置按钮
• 图片按钮
• 普通按钮

通过<input>和<button>创建按钮

<input type="submit|reset|button|image" name="..." src="..." value="..." />

属性	描述
type	submit提交表单按钮 reset将表单重置为初始化的按钮 button普通按钮，点击时，可触发JavaScript脚本 image创建一个图片按钮，点击可以提交表单
name	名称
src	可选，type为image时，指定图片的URL
value	显示的文字

<button type="submit|reset|button" value="..." name="...">正文内容</button>

button按钮提供了更强大的功能和更丰富的内容

表单分组

常见的分组标签有<fieldset>和<legend>

• <fieldset>一边框环绕方式显示
• <legend>为<fieldset>添加标题