HTML学习总结

HTML

<!DOCTYPE>

标题通过<h1>-<h6>等标签来定义:<h1> </h1>
*<h1>-<h6>字体大小从大到小，可以出现多个<h1>。
段落通过<p>来定义:<p> </p>

链接通过<a>来定义:<a href=" "> </a>
链接可用图片，按键。

target属性：使用 Target 属性，你可以定义被链接的文档在何处显示。
打开一个新的页面： target="_blank"
<a href=" " target="_blank" ></a>

图像通过<img>来定义，<img>是一个空标签，只包含属性，并且没有闭合标签。要在页面上显示图像，必须使用原属性（src），src是指“source”。

*原属性的值是图像的URL地址。
URL是指储存图像的位置。

定义图像的语法是：
<img src="url"/>

当找不到图像时，替换文本alt：
<img src="url" alt="not found">

***
假如每个HTML文件包含10个图像，那么为了真确显示这个页面，需要加载11个文件。加载图片时需要时间的，建议：慎用图片。

背景图：
<body background="URL">
*如果页面大于图片，图像会进行重复。

图像对齐：
<p>图像 <img src="URL" align="bottom（下）或者middle（中）或者top（上）"> 在文本中</p>

图像浮动：
<p>图像 <img src="URL" align="left（左）或者right（右）"> 在文本中</p>

图像大小：
<img src="url" width=" " height="">

创建图像映射:

rect(矩形)的coords是左上角坐标，右上角坐标（4个值）

circle(园)的coords是圆心坐标，半径（3个值）

**************************************************************
查找图片，每个点的坐标：

**************************************************************

插入一个空行：<br/>

分界线：<hr/>

注释：

style 属性用于改变 HTML 元素的样式:
<body style="background-color:red">
<h2 style="background-:red"> @#$%^^&$</h2>
<p style="background-:red"> ^&*^&$%$^ </p>
<h1 style="font-family:verdana">A heading</h1>

style标签：
对于head：
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸:
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

text-align 属性规定了元素中文本的水平对齐方式：
<h1 style="text-align:center">This is a heading</h1>

定义缩写或首字母缩略语<abbr>：
<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>

文件的头部包含的<meta>标签，用来告诉浏览器关于文档的附加信息，在将来，创作者可能会利用预先定义好的标准文档的元数据配置文件，以便更好地描述它们的文档。

所有属性的放置在开始标志的尖括号内：
<标记名属性名=属性值属性名= 属性值> 文本</标记名>

<title>:为标签，在收藏网页时定义出现由<title>定义的标签名

定义背景图 *大小不超过10k *图片清晰：
<body background="210.gif">

样式：

外部样式表 = 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

内部样式表 = 当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

<head>

内联样式 = 当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

name属性：
name属性规定锚（anchor）的名称。可以用name属性来创建HTML页面中的书签。书签不会以任何特殊方式显示，它对读者是不可见的。当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法：
<a name="mjf"> 锚 (显示在页面上的文本)</a>
<a href=#mjf> $%^%$ </a>
点击——$%^%$，就从#mjf到mjf。

锚也可以跳转网页用。在<a href=#mjf> $%^%$ </a>的#号前面加锚所在连接的地址。

在新的窗口打开链接（原窗口还在）：
<a href="网址" target="_blank"> 请点击这里！</a>
跳出所在框架（原窗口不在）：
<a href="网址"target="_top">请点击这里！</a>

表格由<table>标签来定义：
<table border="1"> 
<tr>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>

</table>
表格的标题：

</table>

垂直表头：
<table border="2">
<tr>
<th>1</th>
<td>qwe</td>
</tr>
<tr>
<th>2</th>
<td>asd</td>
</tr>
<tr>
<th>3</th>
<td>zxc</td>
</tr>
</table>

跨多行的表格：
横
<table>
<tr>
<th>name</th>
<th colspan="列数">number</th>
</tr>
<tr>
<td>maliao</td>
<td>10086</td>
<td>18642307262</td>
***<td>个数等于列数***
</tr>
</table>

<table>
<tr>
<th>name</th>
<td>maliao</td>
</tr>
<tr>
<th rowspan="行数">number</th>
<td>10086</td>
</tr>
<tr> *
<td>186423726</td> *<tr>的个数等于行数
</tr> *
</table>

单元格边距（格与字）：

</table>

单元格间距（格与格）：

</table>

背景图：

<table background="url"> ***一般是gif，比较小***

</table>

背景色：

</table>

*** 单个添加可以直接加在<td>,<tr>中。 ***
*** 表格大小，居左居右，在<table>中直接添加。***

对于frame属性，在Internet Explorer中无法正确的显示。

属性的添加：

</table>
***在frame中有：box，above，below，hsides，vsides等属性。

HTML实体：
在HTML中，某些字符是预留的。
在HTML中不能使用小于号（<）和大于号(>)，这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，必须在HTML源代码中使用实体字符（character entities）。
*不是所有的浏览器都支持实体字符（对于实体数字都支持的很好）。

常用的实体字符：

显示结果描述实体名称实体编号
空格    
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' (IE不支持) '
￠分（cent） ¢ ¢
￡镑（pound） £ £
￥元（yen） ¥ ¥
€ 欧元（euro） € €
§ 小节 § §
? 版权（copyright） © ©
? 注册商标 ® ®
? 商标 ™ ™
× 乘号 × ×
÷ 除号 ÷ ÷

无序列表：
<ul>
<li>语文</li>
<li>数学</li>
<li>音乐</li>
<li>艺术</li>
<li>体育</li>
</ul>

有序列表：
<ol>
<li> $%</li>
<li> %^</li>
</ol>
***默认从1开始***
<ol start="数字">
<li> $%</li>
<li> %^</li>
</ol>
***从设置的数字开始***

设置列表格式：
<ul tybe=" ">
type="circle或square或disc"
<ol tybe=" ">
type="A或a或Ⅰ或1"

嵌套列表：
<ul>
<li>水果 </li>
<li>蔬菜
<ul>
<li>黄瓜</li>
<li>白菜</li>
</ul>
</li>
<li>肉</li>
</ul>

自定义列表：
优先级> <dl> <dt> <dd>

<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

大多数HTML元素被定义为块级元素或内联元素。

块级元素：“block level element”

内联元素：“inline element”

HTML块元素：
在浏览器显示时，通常以新行来开始和结束。
例：<h1>,<p>,<ul>,<table>

HTML内联元素：
在显示时，通常不会以新行结束和开始。
例：<b>,<td>,<a>,<img>

<span>和<div>：

属于空元素，空元素就是说单独在这个页面上插图这两个元素，不会对页面产生影响，但是这两个属性专门为样式表定义而产生的。
<span>5638075</span><span>2580349728</span>
<div>5638075</div><div>2580349728</div>

显示：
56380752580349728
5638075
2580349728
***************
<div>和<span>属于单独的容器，在页面中单独显示
***************

HTML类

duiHTML进行分类（设置类），是我们能够为元素的类定义CSS样式。

padding：内边距
margin：外边距

float：浮动
clear：不允许浮动（left，right，both）

HTML5的网站布局：
语义元素：
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义details元素的标题

对于格式的设定：
①（对于块）：
<head>
<style>
header {
}
nav {
}
</style>
<head>

②（表格）：
<head>
<style>
table.lamp {
}
table.name {
}
</style>
<head>

响应式Web设计：
RWD指的是响应式Web设计。（Responsive Web Design）
RWD能够以可变尺寸传递网页。
RWD对于平板和移动设备是必须的。

HTML框架：
①水平框架
实例：
<frameset cols="20%,40%,40%">
<frame src="1111.jpg">
<frame src="xskjs.jpg">
<frame src="210.gif">
</frameset>
②垂直框架
实例：（把cols改成rows）
<frameset rows="20%,40%,40%">
<frame src="1111.jpg">
<frame src="xskjs.jpg">
<frame src="210.gif">
</frameset>
**********************
使用框架可以在同一个浏览器中显示不止一个页面，每份HTML文档称为一个框架，每个框架都独立于其他的框架。
坏处：开发人员必须同时跟踪更多的HTML文档，
难打印整张页面。
**********************
混合框架：
<frameset rows="50%,50%">
<frame src=" " >
<frameset cols="60%,40%">
<frame src=" " >
<frame src=" " >
</frameset>

含有noresize="noresize"
<frameset rows="20%,40,*">
<frame src="1111.jpg">
<frame src="xskjs.jpg" noresize="noresize">
<frame src="210.gif">
</frameset>

<noresize>放中间时都不能改变各个框架在一个页面中的比例，放第一个时，可以改变除了第一个分界线的其他分界线。

内联框架：
实例
<iframe src=" "></iframe>

可以定义在<body>中。

重要提示！！！！！！！！！！！
不能将<body></body>标签与<frameset></frameset>标签同时使用！不过，假如你添加包含一段给文本<noframes>标签，就必须将这段文字嵌套于<body></body>标签内。
******************************************
实例：
<!DOCTYPE html>
<html>
<frameset rows="*,*,*">
<frame src=" ">
<frame src=" ">
<frame src=" ">
<noframes>
<body>示例在标签内</body>
</noframes>
</frameset>
</html>

添加 iframe 的语法

URL 指向隔离页面的位置。

iframe设置高度和宽度：
height和width。
属性值的默认单位是像素，但也可以用百分比来设定。

iframe中frameborder属性来规定是否显示iframe周围的边框。
设置frameborder=“0”来移处边框

iframe 可用作链接的目标（target）。

链接的 target 属性必须引用 iframe 的 name 属性：实例：
<!DOCTYPE html>
<html>
<body>
<iframe src="" name="mjf" width="500"height="500"></iframe>
<p><a href="http://www.w3school.com.cn/tiy/t.asp?f=html_iframe_target" target="mjf">maliao</a></p>
</body>
</html>

HTML背景

背景颜色：bgcolor
<body>有两个配置背景的标签，背景可以是图片或者图像。
bgcolor属性值可以是十六进制数，RGB或颜色名

背景：background
背景属性将背景设置为图像，属性值为图像的URL。如果尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。
*****************************************
URL可以是相对地址，也可以是绝对地址。
相对地址：210.gif
绝对地址：http://www.w3school.com.cn/clouds.gif

提示：
背景图像是否增加了页面的加载时间。
图像文件不应超过10k。
背景图像是否与页面中的其他图象搭配良好。
背景图像是否与页面中的文字颜色搭配良好。
图像在页面中平铺后，看上去还可以吗？
对文字的注意力被背景图像喧宾夺主了吗？
*******************************************

HTML脚本

还没看JavaScript！！！

*******************************************

HTML头部元素

使用base标签是页面中所有标签在新窗口打开。

使用meta来描述文档，定义文档的关键词。

对于meta标签：

meta元素可提供有关页面信息，（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

**在HTML中，没有结束标签。
**在XHTML中，必须被正确的关闭。
**标签永远位于head元素内部。
**元数据总是以名称/值的形式被成对传递。

content
expires 把content属性关联到HTTP头部
http-equiva refresh
set-cookie

author
description
name keywords 把content属性关联到一个名称
generator
revised
others

scheme some_text 定义用于翻译content属性值的格式

name属性：

name属性提供了名称/值对中的名称。HTML和XHTML标签都没有指定任何预先定义的<meta>名称。所以通常情况下，可以自由使用对自己和原文档的读者来说富有意义的名称。

“keywords”是一个经常被用到的名称。它为文档定义了一组关键字。在某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。

类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：

如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。

http-equiv 属性

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：

这样发送到浏览器的头部就应该包含：

content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008

当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。
content 属性

content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。

content 属性始终要和 name 属性或 http-equiv 属性一起使用。
scheme 属性

scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义。

关于meta标签中的http-equiv属性使用介绍

meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标签，会给你带来意想不到的效果，meta标签的作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等！

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

1、name属性

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

meta标签的name属性语法格式是：

<metaname="参数"content="具体的参数值">。

其中name属性主要有以下几种参数：　

A、Keywords(关键字)　

说明：keywords用来告诉搜索引擎你网页的关键字是什么。

举例：<metaname="keywords"content="science,education,culture,politics,ecnomics，relationships,entertaiment,human">

B、description(网站内容描述)

说明：description用来告诉搜索引擎你的网站主要内容。

举例：<metaname="description"content="这里是网站的主要内容">

C、robots(机器人向导)

说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

content的参数有all,none,index,noindex,follow,nofollow。默认是all。
all：表示能搜索当前网页以及其链接
nofollow：搜索引擎不继续通过此网页的链接搜索其他的网页。
index：能搜索当前网页
noindex：不能搜索当前网页
follow：搜索引擎继续通过此网页的链接搜索其他的网页
none：搜索引擎将忽略此网页

举例：<metaname="robots"content="none">

D、author(作者)

说明：标注网页的作者

举例：<metaname="author"content="root,root@xxxx.com">

2、http-equiv属性

http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

meta标签的http-equiv属性语法格式是：

<metahttp-equiv="参数"content="参数变量值">；

其中http-equiv属性主要有以下几种参数：

A、Expires(期限)

说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。

用法：<metahttp-equiv="expires"content="Fri,12Jan200118:18:18GMT">

注意：必须使用GMT的时间格式。

B、Pragma(cache模式)

说明：禁止浏览器从本地计算机的缓存中访问页面内容。

用法：<metahttp-equiv="Pragma"content="no-cache">

注意：这样设定，访问者将无法脱机浏览。

C、Refresh(刷新)

说明：自动刷新并指向新页面。

用法：<metahttp-equiv="Refresh"content="2;URL=http://www.jb51.net">(注意后面的引号，分别在秒数的前面和网址的后面)

注意：其中的2是指停留2秒钟后自动刷新到URL网址。

D、Set-Cookie(cookie设定)

说明：如果网页过期，那么存盘的cookie将被删除。

用法：<metahttp-equiv="Set-Cookie"content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">

注意：必须使用GMT的时间格式。

E、Window-target(显示窗口的设定)

说明：强制页面在当前窗口以独立页面显示。

用法：<metahttp-equiv="Window-target"content="_top">

注意：用来防止别人在框架里调用自己的页面。

F、content-Type(显示字符集的设定)

说明：设定页面使用的字符集。

用法：<metahttp-equiv="content-Type"content="text/html;charset=gb2312">

G、content-Language（显示语言的设定）

用法：<metahttp-equiv="Content-Language"content="zh-cn"/>

H、Cache-Control指定请求和响应遵循的缓存机制。
Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、on

ly-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下
Public指示响应可被任何缓存区缓存
Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效
no-cache指示请求或响应消息不能缓存
no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应
min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应
max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

Meta标签使用技巧：

Meta标签是用来描述网页属性的一种语言，标准的Meta标签可以便于搜索引擎排序，提高搜索引擎网站权重排名。要想网站做的更符合搜索引擎标准就必须了解meta标签，下面由Seoer惜缘于大家讲讲meta标签含义与使用方法：

1、META标签的keywords

写法为：<metaname="Keywords"content="信息参数"/>

meat标签的Keywords的的信息参数，代表说明网站的关键词是什么。

2、META标签的Description

<metaname="Description"content="信息参数"/>

meta标签的Description的信息参数，代表说明网站的主要内容，概况是什么。

3、META标签的http-equiv=Content-Typecontent="text/html

http-equiv=Content-Type代表的是HTTP的头部协议，提示浏览器网页的信息，

<metahttp-equiv="Content-Type"content="text/html;charset=信息参数"/>

meta标签的charset的信息参数如GB2312时，代表说明网站是采用的编码是简体中文；

meta标签的charset的信息参数如BIG5时，代表说明网站是采用的编码是繁体中文；

meta标签的charset的信息参数如iso-2022-jp时，代表说明网站是采用的编码是日文；

meta标签的charset的信息参数如ks_c_5601时，代表说明网站是采用的编码是韩文；

meta标签的charset的信息参数如ISO-8859-1时，代表说明网站是采用的编码是英文；

meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码；

4、META标签的generator

<metaname="generator"content="信息参数"/>

meta标签的generator的信息参数，代表说明网站的采用的什么软件制作。

5、META标签的author

<metaname="author"content="信息参数">

meta标签的author的信息参数，代表说明网页版权作者信息。

6、META标签的http-equiv="Refresh"

<Metahttp-equiv="Refresh"Content="时间;Url=网址参数">

meta标签的Refresh代表多少时间网页自动刷新，加上Url中的网址参数就代表，多长时间自动链接其他网址。

7、META标签的HTTP-EQUIV="Pragma"CONTENT="no-cache"

<METAHTTP-EQUIV="Pragma"CONTENT="no-cache">代表禁止浏览器从本地计算机的缓存中访问页面内容,这样设定，访问者将无法脱机浏览。

8、META标签的COPYRIGHT

<METANAME="COPYRIGHT"CONTENT="信息参数">

meta标签的COPYRIGHT的信息参数，代表说明网站版权信息。

9、META标签的http-equiv="imagetoolbar"

<metahttp-equiv="imagetoolbar"content="false"/>

指定是否显示图片工具栏，当为false代表不显示，当为true代表显示。

10、META标签的Content-Script-Type

<Metahttp-equiv="Content-Script-Type"Content="text/javascript">

W3C网页规范，指明页面中脚本的类型。

11、META标签的revisit-after

<METAname="revisit-after"CONTENT="7days">

revisit-after代表网站重访,7days代表7天，依此类推。

12、META标签的Robots<metaname="Robots"contect="信息参数">

Robots代表告诉搜索引擎机器人抓取哪些页面

其中的属性说明如下：

信息参数为all：文件将被检索，且页面上的链接可以被查询；

信息参数为none：文件将不被检索，且页面上的链接不可以被查询；

信息参数为index：文件将被检索；

信息参数为follow：页面上的链接可以被查询；

信息参数为noindex：文件将不被检索，但页面上的链接可以被查询；

信息参数为nofollow：文件将被检索，但页面上的链接不可以被查询；

*************************************************************
实例：
<html>

</head>

<body>
<p>本文档的 meta 属性标识了创作者和编辑软件。</p>
</body>

</html>

**************************************************************

重定向用户：
实例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="maliao">
<meta http-equiv="Refresh" content="5;url="*********" />
</head>
<body>
<p>页面将在5秒后自动转到：*************，
如果没有跳转，请点击<br/><a href="*******">①</a></p>
</body>
</html>

HTML <script> 元素

HTML统一资源定位器：

URL也被称为网址，应遵从语法：

scheme://host.domain:port/path/filename

解析：
scheme：定义因特网服务类型。最常见的是http
host：定义域主机（http的默认主机是www）
domain：定义因特网域名，比如baidu.com.cn
:port 定义主机上的端口号（http的默认端口号是80）
path：定义服务器上的路劲（如果省略，则文档必须位于网站的根目录中）
filename定义文档/资源的名称
******************
http 超文本传输协议以 http:// 开头的普通网页。不加密。
https 安全超文本传输协议安全网页。加密所有信息交换。
ftp 文件传输协议用于将文件下载或上传至网站。
file 您计算机上的文件。

canvas元素用于在网页上绘制图形

*canvas本身没有绘图能力，需要在JavaScript内部完成：

var c=document.getElementById("mjf")

var cxt=c.getContext("2d");

cxt.fillStyle="#ff0000"
cxt.fillRect="0,0,150,75"

fillStyle将其染成红色。
fillRect形状，位置和尺寸。

HTML对象(object元素):
作用是支持HTML助手（插件）
HTML 助手（插件）：
辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件。

辅助程序可用于播放音频和视频（以及其他）。辅助程序是使用 <object> 标签来加载的。

使用辅助程序播放视频和音频的一个优势是，您能够允许用户来控制部分或全部播放设置。

大多数辅助应用程序允许对音量设置和播放功能（比如后退、暂停、停止和播放）的手工（或程序的）控制。

使用<embed>元素：
mp3文件:
<embed height=" " width=" " src="123.mp3" />

使用<object>元素:
<object height=" " width=" " src="123.mp3"></object>

使用 HTML5 <audio> 元素:

<audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效
<audio controls="controls">
<source src="123.mp3" type="audio/mp3" />
<source src="123.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>
使用了一个mp3 文件，这样它在 Internet Explorer、Chrome 以及 Safari 中是有效的。
为了使这段音频在 Firefox 和 Opera 中同样有效，添加了一个 ogg 类型的文件。如果失败，会显示错误消息。

问题：
<audio> 标签在 HTML 4 中是无效的。您的页面无法通过 HTML 4 验证。
您必须把音频文件转换为不同的格式。
<audio> 元素在老式浏览器中不起作用。

注释：使用 <!DOCTYPE html> (HTML5) 解决验证问题。

添加音频最简单的方法：

<a href="123.c=mp3">Play sound</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"
></script>

添加雅虎媒体播放器的插件，JavaScript会自动的为每首歌创建播放按钮。
（雅虎媒体播放器是免费的）
：
<a href="song1.mp3">Play Song 1</a>
<a href="song2.mp3">Play Song 2</a>
...
...
...

或者直接运用链接指向MP3文件，浏览器会自动添加插件，播放。

视频的播放和音频很像：

显示嵌入网页的Flash视频：
<embed src="123.swf" height="" width=""/>

在HTML中嵌入多媒体元素：
<object data="movie.swf" height="200" width="200"/>

<video> 是 HTML 5 中的新标签。

<video> 标签的作用是在 HTML 页面中嵌入视频元素。

以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频：
实例

<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

********************
最好的方式是；
HTML5+<object>+<embed>
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240" />
</object>
</video>

使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。

使用其他应用解决方案：
把视频上传到视频网站，然后插入HTML代码即可播放视频。
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"
width="480" height="400"
type="application/x-shockwave-flash">
</embed>

同理：也可以直接链接到视频然后启动浏览器的插件播放视频。

<a href="movie.swf">Play a video file</a>

<video> 标签定义声音，比如音乐或其他音频流。
<embed> 标签定义嵌入的内容，比如插件。

HTML表单：

表单用于搜索不同类型的用户输入。
<input>是最重要的表单元素，它有很多形态，根据不同的type属性。

text：常规文本的输入。
radio：定义单选按钮输入
***************
checked是多选一，checkbox是选全部到零。
***************
submit：定义提交按钮（提交表单）

***表单的默认宽度是20个字符。
单选按钮输入：
<input type="radio">定义单选按钮

提交按钮：
<input type="submit">定义用于表单处理程序提交表单的按钮

Action 属性
action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到 web 服务器上的网页。

实例：
<form action="url">
账号:<br/>
<input type="text" name="name">
<br/>
密码：<br/>
<input type="text" name="password">
<br/>
<input type="radio" name="area" value="辽一" checked>辽一
<br/>
<input type="radio" name="area" value="辽二" checked>辽二
<br/>
<input type="submit" value="*提交*">
</form>
****************
valu可以直接赋值到可以定义文本的地方
****************

Method 属性

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

或：

何时使用 GET？

您能够使用 GET（默认方法）：

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

当您使用 GET 时，表单数据在页面地址栏中是可见的：

action_page.php?firstname=Mickey&lastname=Mouse

注释：GET 最适合少量数据的提交。浏览器会设定容量限制。
何时使用 POST？

您应该使用 POST：

如果表单正在更新数据，或者包含敏感信息（例如密码）。

POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。
******************
Name 属性
如果要正确地被提交，每个输入字段必须设置一个 name 属性
******************

用 <fieldset> 组合表单数据

<fieldset> 元素组合表单中的相关数据

<legend> 元素为 <fieldset> 元素定义标题。
实例

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

下面是 <form> 属性的列表：
属性描述
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。

下拉列表<select>元素：
<select name="character">
<option value="术士">术士</option>
<option value="战士">战士</option>
<option value="圣骑士">圣骑士</option>
<option value="盗贼">盗贼</option>
<option value="德鲁伊">德鲁伊</option>
<option value="萨满">萨满</option>
<option value="牧师">牧师</option>
<option value="猎人">猎人</option>
<option value="法师">法师</option>
</select>

定义多行输入：

定义按钮<button>:

HTML5 <datalist> 元素

<datalist> 元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。
<input list="character">
<datalist id="character">
<option value="术士">
<option value="战士">
<option value="圣骑士">
<option value="盗贼">
<option value="德鲁伊">
<option value="萨满">
<option value="牧师">
<option value="猎人">
<option value="法师">
</datalist>

输入类型：
密码：
<input type="password" name="psd">
注释：password 字段中的字符会被做掩码处理（显示为星号或实心圆）。

HTML5 增加了多个新的输入类型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

注释：老式 web 浏览器不支持的输入类型，会被视为输入类型 text

输入类型：number
<input type="number"> 用于应该包含数字值的输入字段
<form>
输入数在1-5:
<input type="number" name="quantity" min="1" max="5">
</form>

属性描述
disabled 规定输入字段应该被禁用。
max 规定输入字段的最大值。
maxlength 规定输入字段的最大字符数。
min 规定输入字段的最小值。
pattern 规定通过其检查输入值的正则表达式。
readonly 规定输入字段为只读（无法修改）。
required 规定输入字段是必需的（必需填写）。
size 规定输入字段的宽度（以字符计）。
step 规定输入字段的合法数字间隔。
value 规定输入字段的默认值。

<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

输入类型：date
<input type="date"> 用于应该包含日期的输入字段。
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>

输入类型：color

<input type="color"> 用于应该包含颜色的输入字段。

根据浏览器支持，颜色选择器会出现输入字段中。
实例

<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>

输入类型：range

<input type="range"> 用于应该包含一定范围内的值的输入字段。

根据浏览器支持，输入字段能够显示为滑块控件。

您能够使用如下属性来规定限制：min、max、step、value。
输入类型：month

<input type="month"> 允许用户选择月份和年份。

根据浏览器支持，日期选择器会出现输入字段中。
实例

<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>

输入类型：week

<input type="week"> 允许用户选择周和年。

根据浏览器支持，日期选择器会出现输入字段中。
实例

<form>
Select a week:
<input type="week" name="week_year">
</form>

输入类型：time

<input type="time"> 允许用户选择时间（无时区）。

根据浏览器支持，时间选择器会出现输入字段中。
实例

<form>
Select a time:
<input type="time" name="usr_time">
</form>

输入类型：datetime

<input type="datetime"> 允许用户选择日期和时间（有时区）。

根据浏览器支持，日期选择器会出现输入字段中。
实例

<form>
Birthday (date and time):
<input type="datetime" name="bdaytime">
</form>

输入类型：datetime-local

<input type="datetime-local"> 允许用户选择日期和时间（无时区）。

根据浏览器支持，日期选择器会出现输入字段中。
实例

<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>

输入类型：email

<input type="email"> 用于应该包含电子邮件地址的输入字段。

根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。

某些智能手机会识别 email 类型，并在键盘增加 ".com" 以匹配电子邮件输入。
实例

输入类型：search

<input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段）。
实例

<form>
Search Google:
<input type="search" name="googlesearch">
</form>

输入类型：tel

<input type="tel"> 用于应该包含电话号码的输入字段。

目前只有 Safari 8 支持 tel 类型。
实例

<form>
Telephone:
<input type="tel" name="usrtel">
</form>

输入类型：url

<input type="url"> 用于应该包含 URL 地址的输入字段。

根据浏览器支持，在提交时能够自动验证 url 字段。

某些智能手机识别 url 类型，并向键盘添加 ".com" 以匹配 url 输入。
实例

<form>
Add your homepage:
<input type="url" name="homepage">
</form>

HTML input属性：

value 属性规定输入字段的初始值：
<input type="text" name="firstname" value="John">

readonly 属性规定输入字段为只读（不能修改）：
<input type="text" name="firstname" value="John" readonly>

disabled 属性规定输入字段是禁用的。
被禁用的元素是不可用和不可点击的。
被禁用的元素不会被提交。
<input type="text" name="firstname" value="John" disabled>

size 属性规定输入字段的尺寸（以字符计）：
<input type="text" name="firstname" value="John" size="40">

maxlength 属性规定输入字段允许的最大长度：
<input type="text" name="firstname" maxlength="10">
********************************
如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。
该属性不会提供任何反馈。如果需要提醒用户，则必须编写 JavaScript 代码。
********************************

autocomplete 属性规定表单或输入字段是否应该自动完成。

当自动完成开启，浏览器会基于用户之前的输入值自动填写值。

提示：您可以把表单的 autocomplete 设置为 on，同时把特定的输入字段设置为 off，反之亦然。

autocomplete 属性适用于 <form> 以及如下 <input> 类型：text、search、url、tel、email、password、datepickers、range 以及 color。

<form action="action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>

novalidate 属性属于 <form> 属性。
如果设置，则 novalidate 规定在提交表单时不对表单数据进行验证。

autofocus 属性是布尔属性。
如果设置，则规定当页面加载时 <input> 元素应该自动获得焦点。（就是光标到输入位置）

使 "First name" 输入字段在页面加载时自动获得焦点：

First name:<input type="text" name="fname" autofocus>

form 属性

form 属性规定 <input> 元素所属的一个或多个表单。

提示：如需引用一个以上的表单，请使用空格分隔的表单 id 列表。
实例

输入字段位于 HTML 表单之外（但仍属表单）：

<form action="action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">

formaction 属性
formaction 属性规定当提交表单时处理该输入控件的文件的 URL。
formaction 属性覆盖 <form> 元素的 action 属性。
formaction 属性适用于 type="submit" 以及 type="image"。
实例
拥有两个两个提交按钮并对于不同动作的 HTML 表单：

<form action="action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="demo_admin.asp"
value="Submit as admin">
</form>
*******************************
有关<input>标签的type属性

button 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox 定义复选框。
file 定义输入字段和 "浏览"按钮，供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 定义密码字段。该字段中的字符被掩码。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
*********************************

posted @ 2020-03-16 11:45 菠菜面筋阅读(262) 评论(0) 编辑收藏举报

刷新页面返回顶部

菠菜面筋

HTML学习总结

公告