标签:sig sem 获得 sid 属性 禁用 反馈 执行 eal
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="">
创建图像映射:
<img src="url" alt=" "usemap="#%$#%">
<map name="#%$#%" id="#%$#%">
<area shape="rect或circle" coords=" , , , " href=" " target="_blank" alt="$^%&$"/>
</map>
rect(矩形)的coords是 左上角坐标,右上角坐标(4个值)
circle(园)的coords是 圆心坐标,半径(3个值)
<!--单位是像素,坐标可以是负值-->
**************************************************************
查找图片,每个点的坐标:
<a href=" ">
<img src="url" alt=" " ismap/>
</a>
**************************************************************
插入一个空行:<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>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表 = 当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</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"> <!--“1”是表格样式-->
<tr>
<td></td>
<td></td>
</tr>
<!--代表了一行两列-->
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<!--两行两列-->
</table>
表格的标题:
<table>
<caption>标题<caption>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</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 cellpadding="数字">
</table>
单元格间距(格与格):
<table cellspacing="数字">
</table>
背景图:
<table background="url"> ***一般是gif,比较小***
</table>
背景色:
<table bgcolor="">
</table>
*** 单个添加可以直接加在<td>,<tr>中。 ***
*** 表格大小,居左居右,在<table>中直接添加。***
对于frame属性,在Internet Explorer中无法正确的显示。
属性的添加:
<table frame=" ">
</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>
<header>
<p></p>
</header>
<nav>
<p></p>
</nav>
②(表格):
<head>
<style>
table.lamp {
}
table.name {
}
</style>
<head>
<table class="lamp">
<tr>
<th>
</th>
</tr>
</table>
<table class="name">
<tr>
<th>
</th>
</tr>
</table>
响应式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 的语法
<iframe src="URL"></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),比如针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部,不包含任何内容。它的属性定义了于文档相关联的名称。
**在HTML中,没有结束标签。
**在XHTML中,必须被正确的关闭。
**标签永远位于head元素内部。
**元数据总是以名称/值的形式被成对传递。
<meta>标签必须的属性:
content some_text 定义与http-equiv或name属性相关的信息
可选的属性:
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 标签可能对于进入搜索引擎的索引有帮助:
<meta name="keywords" content="HTML,ASP,PHP,SQL">
如果没有提供 name 属性,那么名称/值对中的名称会采用 http-equiv 属性的值。
http-equiv 属性
http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
当服务器向浏览器发送文档时,会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对,但是所有服务器都至少要发送一个:content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
使用带有 http-equiv 属性的 <meta> 标签时,服务器将把名称/值对添加到发送给浏览器的内容头部。例如,添加:
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">
这样发送到浏览器的头部就应该包含:
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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="author"
content="w3school.com.cn">
<meta name="revised"
content="David Yang,8/1/07">
<meta name="generator"
content="Dreamweaver 8.0en">
</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>
<link>标签:用于定义文档与外部资源之间的关系
实例:
<head><link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
HTML <script> 元素
<script> 标签用于定义客户端脚本,比如 JavaScript。
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内部完成:
<canvas id="mjf" width="" ;height=""></canvas>
<script type="text/javascript">
<!--JavaScript使用id来寻找canvas-->
var c=document.getElementById("mjf")
<!--创建context对象-->
var cxt=c.getContext("2d");
<!--getContext("2d")对象是内建的HTML5对象,拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法
下面两行代码绘制了一个红色的矩形-->
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):
<form action="action_page.php" method="GET">
或:
<form action="action_page.php" method="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>
定义多行输入:
<textarea name="message" rows="10" cols="30">
@!#¥%¥#¥%……&%¥#……¥%&%……¥
</textarea>
定义按钮<button>:
<button type="button" onclick="alert(‘啥都没有‘)">**</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"> 用于应该包含一定范围内的值的输入字段。
根据浏览器支持,输入字段能够显示为滑块控件。
<form>
<input type="range" name="points" min="0" max="10">
</form>
您能够使用如下属性来规定限制: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" 以匹配电子邮件输入。
实例
<form>
E-mail:
<input type="email" name="email">
</form>
输入类型: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 规定在提交表单时不对表单数据进行验证。
<form action="action_page.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
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 个字符。
*********************************
标签:sig sem 获得 sid 属性 禁用 反馈 执行 eal
原文地址:https://www.cnblogs.com/husai/p/12502801.html