HTML目录
前言：WEB部分是编程语言与浏览器交互的部分，通过编程语言的一行行命令，就能展现出我们日常浏览网页的界面。一直觉得编程就像是一款抽象的乐高，一步步搭建一个又一个的功能，最后它们能实现一个完整的程序。而WEB更像是平面化的乐高，一点点拼凑出想要的功能与画面。
简介
HTML(HyperText Markup Language )超文本标记语言,扩展名为 “.html”或“.htm”（微软的操作系统），由浏览器解释的文件。
html标记是与大小写无关的
标记可以拥有自己的属性。属性他能够为页面上的HTML元素提供附加信息。
特点
1、 简易性：超级文本标记语言版本升级采用超级方式，从而更加灵活方便。
2 、可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
3 、平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（www）盛行的另一个原因。
标签格式：两端由角括号<>包围，通常是成对标签，一个标记开始一个标记结束。
HTML结构
1.<html></html>：表示文件的开始与结束
2.<head>和</head>：描述文档相关信息，不会再网页内容中出现。
3.<body>和</body>：主体部分，网页内容在此定义。
标记
meta标记
作用：为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie;可以用于来鉴别作者，设置页面格式，标注内容提要和一些关键字，还可以设置页面的自动刷新以及等级等等。
位置：位于head和title标记之间
属性
1.Content-Type和Content-Language(设置文件字符集)
说明：定页面使用的字符集，用以说明主页制作所使用的文字以及语言，浏览器会根据此来调用相应的字符集显示page的内容。
用法：
<meta http-equiv=“Content-type” Content=“text/html,Charset=gb2312”>
<meta http-equiv=“Content-Language” Content=“zh-CN”>
注意： 该meta标记定义了html页面所使用的字符编码集是gb2312，就是国际汉字码。如果将其中“charset=“gb2312””替换成“BIG5”,则页面所使用的字符集就是繁体中文的编码（台湾）。
2、
<meta name=“Author” content=“作者">
<meta name=“Keywords” content=“关键字">
<meta name=“Description” content=“描述”>
title标记
作用：<head>中
**位置：**文字会出现在浏览器视窗最上面蓝色部分里，作为网页的主题。
文字上的分隔标记
**目的：**浏览器无法识别识Enter键或者空格键
常用的分隔标记：
强制断行标记“\<br>”
强制分段标记“\<p>”
空格“ ；”
分隔线标记<hr>
**使用:**上一部分<hr>下一部分
属性:
color 颜色
size 线的宽度
width 线的长度可以用像素 也可以用百分比
align=“left” 线条的对齐方式 left center rightno
shade=“noshade” 线条的阴影
border线条的复合属性设置
线条类型：solid实线、dashed虚线、dotted点线
排版的标记
目的： 给文字排版（）
置中标记
<center>内容任何可以显示在网页中的东西他都可以置中。
保持原始状态
<pre>内容<pre>据格式标记
属性：align属性值–left置左， center置中， right"置右。
字体标记
标题标记
<h1>内容</h1>
标题的大小一共有6中，也就是从<h1>到<h6>,<h1>最大，<h6>最小。使用该标记时字体会变成粗体，并自称一行。
字体属性
属性： font-size字体大小；color字体颜色；face字体
字体变化标记
<b></b> 加粗 <i></i> 斜体 <u></u> 底线
<sup></sup> 上标 <sub></sub> 下标 <em></em> 强调
<strong></strong> 加强 <blink><blink> 闪烁（ie没有效果）
<s></s>删除线 <strike>删除线</strike>
<kbd>用粗体等宽字体显示文字</kbd>
<var>用较小的固定宽度显示字体</var>
<code>以等宽字体显示计算机程序代码</code>
<dfn>用于名词解释，斜体显示</dfn>
<smap>用于字母序列等宽</smap>
<address>模拟信封上的字体</address>
<big>比默认字号大一号</big>
<small>比默认字号小一号</small>
背景属性
属性： background-color设置颜色、background设置背景图片
<IMG>标记
格式 <img src=”图片路径”/>向网页中插入图片
Tips： 网络地址的图片由于有的网站会有图片保护，即图片地址具有时效性，故，使用网络地址时应注意
属性align位置、border边框、eight/width长宽
序列标记
无序列表< ul>
每增加一列内容，就需要加一个<li>
属性：
type=“disk”(实心点)
type=“square”(小正方形)
type=“circle”(空心点)
有序列表 <ol>
每增加一列内容，就需要加一个<li>
属性：
type=“1”(数字)
type=“A”(大写字母)
type=“a”(小写字母)
type=“I”(大写罗马)
type=“i”(小写罗马)
start=””指定序列开始数目
自定义列表<dl>
<dt></dt>、<dd></dd>
特殊字符
转义字符
< < > > & & &qout; “ 空格 l>
超链接
作用：
连接到其他的文档
网页的内部链接
网页的外部链接
图片的锚点链接
格式： <a href=”” ></a>
连接到其他的文档
格式：<a href=”” ></a>
属性 :
href链接地址
target 在何处打开目标链接
target 属性值：
blank在一个新的未命名的窗口载入文档
_parent把文档载入父窗口或者包含了超链接引用的框架的框架集
_self在相同的框架或者窗口中载入目标文档
_top把文档载入包含该超链接的窗口，取代任何当前正在窗口中显示的框架
绝对路径：是指从根目录到文件的完整路径。
相对路径：是指相对于当前文件的文件位置。
网页的内部链接
属性：href=”#要连接的标签的name属性值”
网页的外部链接
属性：href=“要跳转的外链地址”
通过CSS去掉 超链接的下划线
属性： text-decoration:none;
图片的锚点链接
<map><area></area><map>地图作用区域标记：把图片划分成多个作用域，并连接到不同网页的标记
<map>设定图像地图的作用域，并为指定图像地图设定名称
属性： name=”图像地图名称”
<area>属性：
href=”链接地址”
shape coords设定形状和大小shape=”rect “coords=”x1,y1,x2,y2”形状为矩形，左上角右下角顶点坐标
Shape属性值rect矩形（左上角右下角顶点坐标）、circle圆形（圆心坐标、半径）、pologon多边形(各顶点坐标)、href=”链接地址”
表格
表格的结构
<table>…</table>创建表格。
<th>代表列名一般放在第一行
<tr>代表格的一行。
<td>用来定义表格的一列。
属性：
在默认情况下，表格是没有边框的，如果想要出现边框，就是用border属性。
表格的合并：colspan="合并列的个数"caption=“合并行的个数”
在被合并的对应位置删去该单元格
input标签
部分标签必须用Opera浏览器测试
格式：<input type = “” value=“”/>
属性：
Type—属性值：
text -文本框 、button -按钮 、submit-提交 、reset-重置 、
password -密码 、checkbox-多选 、radio-单选 、file -上传文件 、
date - 选取日、月、年、month - 选取月、年、
week - 选取周和年、time - 选取时间（小时和分钟）、
datetime - 选取时间、日、月、年（UTC 时间）、
datetime-local - 选取时间、日、月、年（本地时间）
注意：只有部分浏览器支持所有type类型
要想点击文字选中按钮要配合 label 标签（给文字加，同一组选项name相同）
邮箱输入框
<input type=“email” name=“user_email” />
数字输入框
<input type=“number” name=“points” min=“1” max=“10” />
数字范围输入框（进度条）
<input type=“range” name=“points” min=“1” max=“10” />
颜色选择框
<input type=“color” name=“colortext”/>
下拉列表标签
格式：下拉列表中的下拉表
select可选属性
disabled禁用（disabled）、
multiple同时选定多个项目、
name下拉列表的唯一标识符、
size下拉表的个数
option属性：
disabled首次加载时被禁用、
lable（text）定义当使用<optgroup> 时所使用的标记、
selected首次加载处于选中状态、
value送往服务器的选项值
文本域标签
属性： rows行数、cols列数
表单
表单的用途
表单在网页上用来给访问者填写信息的，从而获得用户信息，使用网页进行交互的功能。一般是将表单设计在一个html页面中，当用户填写信息后做提交操作，于是表单的内容就会从客户端的浏览器上发送给服务器，经过服务器上的jsp或者ASP或者Cgi等处理后，再将用户所需的信息传送给客户端的浏览器上，这样网页就具有交互性了。
表单构成
<form></form>创建表单
属性：
action属性是处理处理程序的程序名称。
method属性是用来定义处理程序的从表单中获取信息的方法，（get/post）
target属性用来制定目标窗口的。
表单的工作原理
1.访问者填写表单，并提交给web服务器处理；
2.在web服务器上的后台处理程序对提交后的数据进行处理；
3.后台处理程序处理完成后，会重新生成一个新的html页面发给客户端。
表单中的各种组件
1.文本框
<input name="username" type="text" size="20" maxlength="5" value="请输入"/>
属性：
name=“username” 文本框的名称
type=“text” 该属性是确定文本框的形态
size=“20” 文本框的宽度
maxlength=“5” 可输入的最大长度
value=“请输入” 预设值
密码框
<input name="username" type="password" size="20" maxlength="5" value="123"/>
属性：
name=“username” 密码框的名称
type=“text” 该属性是确定密码框的形态
size=“20” 密码框的宽度
maxlength=“5” 可输入的最大长度
value=“请输入” 预设值
3.单选按钮
男<input name="sex" type="radio" value="boy"/>
女<input name="sex" type="radio" value="girl" checked/>
属性
name=“sex” 单选按钮的名称
value=“boy” 单选按钮的值
type=“radio” 该属性是确定单选按钮的形态
checked 设置选中
4.复选框
<form>
爱好：
\<input name="storp" type="checkbox" value="movie" checked/>电影
\<input name="storp" type="checkbox" value="book" /> 看书
\</form>
属性：
name=“storp” 复选框的名称
type=“checkbox” 该属性是确定复选框的形态
value=“movie” 复选框的值
checked 设置选中
5.下拉列表
<form>
请选择你最喜欢的种族：
<select name="mx" multiple size="1">
<option value="qxz" selected/>请选择
<option value="sz"/>兽族
<option value="rz"/>人族
<option value="wlz"/>亡灵族
<option value="jlz"/>精灵族
</select>
</form>
属性：
name=“mx” 复选框的名称
multiple 设置多选
size=“1” 列显示几个选项
value=“qxz” 复选框的值
selected 设置选中
6.文本域
<form>
意见：
<TEXTAREA NAME="yijian" ROWS="3" COLS="20" wrap="off"></TEXTAREA>
</form>
属性：
NAME=“yijian” 名称
ROWS=“3” 行数
COLS=“20” 列数
wrap=“off” 该属性有三种取值off(输入文字不自动换行)
virtual(输入文字自动换行，在用户没有自动按下回车，向后台发送时，视为没有换行)
physical(输入文字自动换行，向后台发送时，视为有换行)
7.文件域
<form>
<input name="file" type="file">
</form>
8.图片域
<input name="pt" type="image" src="F:\图片\刀刀\刀刀狗1.jpg" width="300" height="400" border="1">
</form>
9.普通按钮
<input name="anniu" type="button" value="send">
</form>
10.提交按钮
<INPUT name="anniu" TYPE="submit" value="提交">
</form>
11.重置按钮
<INPUT name="anniu" TYPE="reset" value="重置" >
</form>
12.隐藏域
<INPUT TYPE="hidden" NAME="H1" value="love">
</form>
多媒体标记
多媒体标记音频
1、HTML4多媒体
<embed></embed>
属性：
src=”文件地址”
width=”宽度”
autostart=”true/false”自动播放
loop=”true/false”循环播放
2、HTML5多媒体
<audio></audio>
3、添加背景音乐
<bgsound></bgsound>
多媒体标记视频
<video></video>
属性：
control 属性供添加播放、暂停和音量控件。
Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。
—要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。
层（div）
<div></div>可以自行设置属性
embed 标签
基本语法
embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等，Netscape及新版的IE 都支持。url为音频或视频文件及其路径，可以是相对路径或绝对路径。
格式<embed src=“引用的文件”>
属性
自动播放
autostart规定音频或视频文件是否在下载完之后就自动播放。
**属性值：**true/false
循环播放
loop规定音频或视频文件是否循环及循环次数。
**属性值：**正整数（循环次数）、true、false
面板显示
hidden规定控制面板是否显示，默认值为no。
ture：隐藏面板；
no：显示面板。
示例：
代码如下:
开始时间
语法：starttime=mm:ss（分：秒）
说明：该属性规定音频或视频文件开始播放的时间。未定义则从文件开头播放。
示例：
代码如下:
5、音量大小：
语法：volume=0-100之间的整数
说明：该属性规定音频或视频文件的音量大小。未定义则使用系统本身的设定。
示例：
代码如下:
6、容器属性：
语法：height=# width=#
说明：取值为正整数或百分数，单位为像素。该属性规定控制面板的高度和宽度。
height：控制面板的高度；
width：控制面板的宽度。
示例：
代码如下:
7、容器单位：
语法：units=pixels、en
说明：该属性指定高和宽的单位为pixels或en。
示例：
代码如下:
8、外观设置：
语法：controls=console、smallconsole、playbutton、pausebutton、stopbutton、volumelever 说明：该属性规定控制面板的外观。默认值是console。
console：一般正常面板；
smallconsole：较小的面板；
playbutton：只显示播放按钮；
pausebutton：只显示暂停按钮；
stopbutton：只显示停止按钮；
volumelever：只显示音量调节按钮。
示例：
代码如下:
9、对象名称：
语法：name=#
说明：#为对象的名称。该属性给对象取名，以便其他对象利用。
示例：
代码如下:
10、说明文字：
语法：title=#
说明：#为说明的文字。该属性规定音频或视频文件的说明文字。
示例：
代码如下:
11、前景色和背景色：
语法：palette=color|color
说明：该属性表示嵌入的音频或视频文件的前景色和背景色，第一个值为前景色，第二个值为背景色，中间用 | 隔开。color可以是RGB色（RRGGBB）也可以是颜色名，还可以是transparent （透明）。
示例：
代码如下:
12、对齐方式：
语法：align=top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom
说明：该属性规定控制面板和当前行中的对象的对齐方式。
center：控制面板居中；
left：控制面板居左；
right：控制面板居右；
top：控制面板的顶部与当前行中的最高对象的顶部对齐；
bottom：控制面板的底部与当前行中的对象的基线对齐；
baseline：控制面板的底部与文本的基线对齐；
texttop：控制面板的顶部与当前行中的最高的文字顶部对齐；
middle：控制面板的中间与当前行的基线对齐；
absmiddle：控制面板的中间与当前文本或对象的中间对齐；
absbottom：控制面板的底部与文字的底部对齐。
示例：
代码如下:
## 框架（frame）<frameset><fram>框架集中的框架元素</fram></framest>框架集
属性： cols列、rows行
框架
一、frameset
注意 frameset 标签不能和body标签共存
- 属性
①border
设置框架的边框粗细。
②bordercolor
设置框架的边框颜色。
③frameborder
设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。
④cols
纵向分割页面。其数值表示方法有三种：“30%、30（或者30px）、”；数值的个数代表分成的视窗数目且数值之间用“,”隔开。“30%”表示该框架区域占全部浏览器页面区域的30%；“30”表示该区域横向宽度为30像素；“”表示该区域占用余下页面空间。例如：cols=“25%,200,*” 表示将页面分为三部分，左面部分占页面30%，中间横向宽度为200像素，页面余下的作为右面部分。
⑤rows
横向分割页面。数值表示方法与意义与cols相同。
⑥framespacing
设置框架与框架间的保留的空白距离。
- 用例
二、frame
- 属性
①name
设置框架名称。此为必须设置的属性。
②src
设置此框架要显示的网页名称或路径。此为必须设置的属性。
③scrolling
设置是否要显示滚动条。设定值为auto, yes, no。
④bordercolor
设置框架的边框颜色。
⑤frameborder
设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。
⑥noresize
设置框架大小是否能手动调节。
⑦marginwidth
设置框架边界和其中内容之间的宽度。
⑧marginhight
设置框架边界和其中内容之间的高度。
⑨width
设置框架宽度。
⑩height
设置框架高度。 - 用例
三、iframe
是浮动的框架（frame），其常用属性与frame类似，其他的主要有以下（相同的就不列举了）
- 属性
①align
设置垂直或水平对齐方式
②allowTransparency
设置或获取对象是否可为透明。 - 用例
垂直对齐属性
vertical-align:text-top/middle
可设置的值有以下
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
opacity:0.0; 透明度
display:block/none/inline //显示为块 隐藏 显示为行
visibility:visible//显示元素
visibility:hidden//隐藏元素 但会占位置
//轮廓
outline:#00ff00 dotted thick;
//轮廓外边距
outline: 2px solid red;
outline-offset: 10px;
//鼠标显示相关
cursor:auto/crosshair/default/pointer/move/e-resize/ne-resize/nw-resize/n-resize/wait/text/help
cursor:url(’’),default;//自定义一个鼠标图片
z-index:2;// 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。Z-index 仅能在定位元素上奏效（例如 position:absolute;）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
