前端-html总结

一.HTML

1.html概述

1.HTML：超文本标记语言

2.HTML文件：以“.html”或“.htm”为后缀

3.HTML文档结构：由、和三大元素组成

4.HTML 5文档类型声明：<!DOCTYPE html \>

2.Head元素

1.标签包括以下：<meta>、<base>、<link>、<script>以及<style>

`<meta>`

meta元素用于向客户的浏览器传递信息和命令，而不是用来显示内容的。

一个标签中可以包含一个或多个标签。

对页面的设置，通过http-equiv属性进行指定
对搜索引擎的设置，通过name属性进行指定

属性	属性值	描述
name	Keywords	定义页面的关键词，关键词之间用英文逗号“，”隔开
	description	定义页面的描述内容，但不要过长，否则搜索引擎会以“…”省略
	robots	robots用来告诉搜索引擎页面是否允许索引与查询，content的参数有all、none、index、noindex、follow、nofollow；默认是all
	author	标注网页的作者
http-equiv	content-type	设定页面使用的字符集
	refresh	自动刷新并转到新页面
	set-cookie	设置页面缓存过期时间；如果网页过期，那么存盘的cookie将被删除
	expires	用于设定网页的到期时间。网页过期时，必须从服务器上重新加载页面内容
content	text	内容文本，用于描述name或http-equiv属性的相关内容

3.文本元素

HTML文档中的文本元素包括：内容标题、文本修饰以及特殊字符

内容标题h1~h6

文本修饰

标签	描述
	用于设置文本的字体样式
	元素中的内容以加粗的方式显示，效果与标签相同
	元素中的内容以斜体的方式显示
	元素中的内容将被添加一条删除线
	元素中的内容将被添加一条下划线
	元素中的内容以上标的形式显示
	元素中的内容以下标的形式显示
	元素中的内容以加粗的方式显示，与标签功能一致
	元素中的内容在显示时比周围的文本大一个字体尺寸
	元素中的内容在显示时比周围的文本小一个字体尺寸

HTML 5为<strong>标签增加了语义，使用<strong>标签包起来的文本表示重要的文本。

HTML 5中删除了原有的<big>标签，并对<small>标签进行重新定义，用于标识所谓的“小字印刷体”，通常用来标注诸如注意事项、法律规定、免责声明或版权相关的声明性文字。

特殊字符

特殊字符	实体引用	特殊字符	实体引用
双引号（"）	`"`	左箭头（←）	`←`
&号	`&`	上箭头（↑）	`↑`
空格	`\ `	右箭头（→）	`→`
小于号（<）	`\<`	下箭头（↓）	`↓`
大于号（>）	`\>`	左右箭头（↔）	`↔`
小于等于（≤）	`\≤`	左下箭头（↵）	`&crarr;`
大于等于（≥）	`\≥`	左双箭头（⇐）	`⇐`
版权号（©）	`\©`	上双箭头（⇑）	`&uArr;`
商标符号（™）	`\™`	右双箭头（⇒）	`⇒`
注册商标（®）	`®`	下双箭头（⇓）	`&dArr;`
分数（¼）	`¼`	交集（∩）	`∩`
分数（½）	`½`	并集（∪）	`∪`

4.文档结构元素

段落标签：<p>

换行标签：<br />

水平线标签<hr />

5.列表标签

有序列表：<ul><li>
无序列表：<ol><li>
定义列表：<dl>、<dt>、<dd>

有序列表

内容包含在<li></li>

通过type属性可以指定有序列表编号的样式，取值方式有如下几种：

“1”代表阿拉伯数字（1、2、3…）；
“a”代表小写字母（a、b、c…）；
“A”代表大写字母(A、B、C…）；
“i”代表小写罗马数字（i、ii、iii…）；
“I”代表大写罗马数字（I、II、III…）;

通过start属性指定列表序号的开始位置，例如start="3"表示从3开始编号。

无序列表

内容包含在<li></li>
取值可以是circle（圆）、disc（点）、square（方块）、none等类型；当缺省type属性时大部分浏览器默认是disc类型。

自定义列表dl

每一子项都由两部分构成：标题dt和描述dd

6.链接

图像链接

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

常用属性：src、alt、height、width、align、border

超链接

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

文本链接

文本链接是指链接内容是文本内容。链接目标可以是站内链接，也可以是站外链接；

<a href="../index.html" title="网站首页">首页</a><br />
<a href="list.html" title="本教程提供的列表示例页面">列表示例</a><br />
<a href="http://www.baidu.com">百度</a> <br />

瞄点链接

标签的href属性是由“#”+“目标锚点名称”两部分构成

<a id="myAnchor">这里是我创建的锚点位置</a>	    <!--推荐使用-->
<a name="otherAnchor">这里是我创建的锚点位置</a>   
<a href="#myAnchor">链接到锚点位置</a>

图片热区域链接

图片热区链接是指在同一个图片中不同的部分链接到不同的目标位置，比一般的图片链接更加灵活。

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

形状	Shape属性	Coords参数	描述
圆形	circle	x,y,r	点(x,y)是圆心坐标，r是圆的半径
矩形	rect	x1,y1,x2,y2	点(x1,y1)矩形左上角坐标，点(x2,y2)矩形的右下角坐标
多边形	poly	x1,y1,x2,y2,x3,y3…	点(x1,y1)、(x2,y2)、(x3,y3) …是多边形的各个点的坐标

空连接

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

href属性由“mailto：”+“邮箱地址”两部分构成

7.表格

常用标签

table、tr、th、（列分组）colgroup、(行分组)thead，tbody，tfoot，caption(表格标题)
常用属性

cellspadding,cellspacing,align,colspan,rowspan,rulse

<table border="1px" width="800px" align="left"> <!-- 表格 -->
    <colgroup span="2" align="left" valign="bottom"/>  <!-- 列分组 -->
    <colgroup span="1" style="background-color:#CCC" />
    <caption>标题---xx表</caption>
    <thead>	<!-- 表头 -->
        <tr>				  <!-- 行标签 -->		
            <td>第一列</td>	<!-- 单元格 -->
            <td>第二列</td>
            <td>第二列</td>
        </tr>
    </thead>
    <tbody>	<!-- 主体 -->
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </tbody>
    <tfoot> <!-- 表尾 -->
        <tr>
            <td>表尾</td>	
            <td>表尾</td>
            <td>表尾</td> 
        </tr>
    </tfoot>
</table>

显示结果

标题---xx表
第一列	第二列	第二列
单元格	单元格	单元格
表尾	表尾	表尾

元素

1.表格元素

属性	取值	描述
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	设置表格的外部边框的显示方式

2.单元格元素

属性	描述
align	设置单元格内容的水平对齐方式：left、center、right、justify
valign	设置单元格内容的垂直对齐方式：top、middle、bottom、baseline
rowspan	设置单元格跨越的行数
colspan	设置单元格跨越的列数
scope	定义将表头数据与单元数据相关联的方法
width	设置单元格的宽度
height	设置单元格的高度
bgcolor	设置单元格的背景颜色

3.分组<clogroup元素

align	设置单元格内容水平对齐方式：left、center、right、justify
valign	设置单元格内容垂直对齐方式：top、middle、bottom、baseline
span	规定该列组应该横跨的列数，默认值是1
width	设定列组合的宽度

8.表单

表单主要分为表单标签及表单控件，表单控件又可细分为表单域和按钮两部分，常见的表单域包括文本框、密码框、文件选择框、多行文本框、单选按钮、复选框、下拉选择框等，按钮分为提交按钮、重置按钮、图片按钮和普通按钮。

form标签常用属性：action,method,enctype
input标签常用属性：name，type，value，disabled，readonly，size，maxlength
其他标签：optgroup（选项分组），fieldset（表单分组），legend(边框添加相关的标题)
textarea标签常用属性:cols,rows

例子

<form>
    用户名：<input type="text" name="userName" id="userName" value="请输入用户名" /> <br /><br /> <!-- 文本框 -->
    密　码：<input type="password" name="userPwd" id="userPwd" /><br /><br /><!-- 密码框 -->
    性别：<input type="radio" name="sex" value="man" checked="checked" />男	<!-- 单选按钮 -->
    <input type="radio" name="sex" value="woman" />女 <br /><br />	
    <fieldset><!-- 表单分组 -->
        <legend>请选择个人爱好</legend>
        <!-- 复选按钮 -->
        <input type="checkbox" name="hobby" value="music"/>音乐<br />
        <input type="checkbox" name="hobby" value="swimming" />游泳<br />
        <input type="checkbox" name="hobby" value="football" checked />足球 <br />
        <!-- 文本选择框 accept图片的格式包括image/gif、image/jpeg、image/*等格式 -->
    </fieldset><br />
    请选择上传的头像：<input type="file" accept="image/*" name="headImage" /><br /><br /> <!-- 文件选择框 -->
    <!-- 隐藏框,css display(不占文档流)和visibility(占文档流)也可以实现 -->
    <input type="hidden" name="hiddenData" value="不显示的数据" />
    <!--   <textarea name="…" rows="…" cols="…" wrap="…" > 文本内容 </textarea> 多行文本框 -->
    <textarea name="个人介绍" rows="5" cols="30" wrap="…"> 我来自青岛，我是一名信息工程大学软件工程专业的应届本科即将毕业的学员。
        我的性格偏于内向，为人坦率、热情、讲求原则；处事乐观、专心、细致、头脑清醒；富有责任心、乐于助人。  </textarea><br /><br />
    请选择日期：
    <select name="day">		 <!-- 下拉选择框 -->
        <optgroup label="--工作日--">	 <!-- 对列表项进行分组 -->
            <option value="monday">星期一</option>
            <option value="tuesday">星期二</option>
            <option value="wednesday">星期三</option>
            <option value="thursday">星期四</option>
            <option value="friday">星期五</option>
        </optgroup>
        <optgroup label="--休息日--">
            <option value="saturday">星期六</option>
            <option value="sunday">星期天</option>
        </optgroup>
        <optgroup label="--节假日--" disabled="disabled">
            <option value="NewYear">春节</option>
            <option value="MayDay" selected="selected">五一</option>
            <option value="OctoberDay">十一</option>
        </optgroup>
    </select>
    <!-- 按钮
        name,src图片按钮URL地址，value
        type="submit|reset|button|image"
    -->
    <button type="submit" value="提交内容">提交内容 </button> <!-- 提交按钮 -->
</form>

表单属性

属性	描述
action	当提交表单时，向何处发送表单中的数据
accept-charset	服务器可处理的表单数据字符集
enctype	表单数据内容类型，可以为application/x-www-form-urlencoded、text/plain、 multipart/form-data
id	表单对象的唯一标识符
name	表单对象的名称
target	打开处理URL的目标位置（不建议使用），在HTML 5中推荐使用formtarget属性来代替。
method	规定向服务器端发送数据所采用的方式，取值可以为get、post
onsubmit	向服务器提交数据之前，执行其指定的JavaScript脚本程序
onreset	重置表单数据之前，执行其指定的JavaScript脚本程序

enctype:

application/x-www-form-urlencoded是默认编码方式，大多数表单数据会采用此种编码方式。在发送数据到服务器之前，所有字符都会进行Unicode编码，并对某些字符进行特殊处理，例如：遇到空格时将被转换成加号（+），其他特殊字符将转换为对应的ASCII格式（即“%XX”格式，由一个百分号和两位代表ASCII码的十六进制数字构成）
multipart/form-data编码方式常用于表单包含文件上传控件的情况，该方式不对字符进行编码
text/plain编码方式遇到空格时，会将其转换为加号（+），但不对其他特殊字符进行编码

textarea的wrap属性

属性	描述
off	默认值，文本域中内容足够多时，会在文本域中添加滚动条
virtual	实现文本区内的自动换行，以改善对用户的显示；但在传输给服务器时，文本只在用户按下Enter键的地方进行换行，其他地方没有换行的效果
physical	实现文本区内的自动换行，并以这种形式传送给服务器

总结

HTML是一种描述性标记语言,通常以后缀.html或.htm结尾
HTML内容主要由网页头部和网页主体两大部分构成
<head>元素中包含<title>、<meta>、<base>、<link>、<script>以及<style>等标签
<meta>标签主要包含两类：对页面的设置，对搜索引擎的设置
HTML中提供了6级标题，通过标题让文件结构更加清晰
<font>标签可以用来控制更多的文本外观，可以通过设置属性face、size、color来设定文本的字体、大小、颜色
<p>标签是HTML特定的段落标签，可以为网页内容提供块格式
<hr />标签可以在页面中产生一条水平线，将文本区域内容分开
HTML中列表分为有序列表、无序列表、定义列表
<div>用来表达一个逻辑区块，属于块级元素
<span>标签属于行内元素，用来选择特定文本
URL（Uniform Resource Locator，统一资源定位符），用于指定Web上资源所在的位置，分为绝对路径和相对路径
<img />标签向HTML文档中添加图像
常见的超链接有以下几种类型：文本链接、锚点链接、图像链接、图像热区链接、Email链接、JavaScript链接、空链接
表格元素主要由行、列、单元格、标题、表头行、正文行、表尾行等构成
表格的基本元素是单元格，使用标签<td>表示
行是表格的水平元素，使用标签<tr>表示
表格通过<thead>、<tfoot>、<tbody>、<caption>标签对表格进行横向分组
在HTML中提供了<colgroup>标签，该标签可以对表格按列分组
整个浏览器窗口对应的框架集合称为框架集（frameset）
<frame>标签用于指示框架集中每个框架的内容
内联框架是嵌入到页面中的一个区域，通过<iframe>标签引入另外一个页面资源
在创建超链接时，通过target属性，指明新的页面应该在哪个框架中进行加载
表单（form）是HTML的一个重要部分，负责采集和提交用户输入的信息
一个页面中可以包含多个表单，但用户一次只能向服务器发送一个表单中的数据
属性enctype取值可以是application/x-www-form-urlencoded、multipart/form-data或text/plain
method属性设置的方法将表单中的数据传送给服务器进行处理，分为get方式和post方式
常见的表单域有文本框、密码框、多行文本框、单选按钮、复选框、下拉选择框等
按钮主要分为提交按钮、重置按钮、图片按钮、普通按钮，具体可以通过<input>或<button>标签来实现
通过表单分组的方式，可以将表单上的控件在形式上进行组合，使其一目了然