码迷,mamicode.com
首页 > Web开发 > 详细

HTML学习总结

时间:2020-03-16 12:29:28      阅读:78      评论:0      收藏:0      [点我收藏+]

标签: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)。
*不是所有的浏览器都支持实体字符(对于实体数字都支持的很好)。

常用的实体字符:


显示结果 描述 实体名称 实体编号
空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
‘ 撇号 &apos; (IE不支持) &#39;
¢ 分(cent) &cent; &#162;
£ 镑(pound) &pound; &#163;
¥ 元(yen) &yen; &#165;
€ 欧元(euro) &euro; &#8364;
§ 小节 &sect; &#167;
? 版权(copyright) &copy; &#169;
? 注册商标 &reg; &#174;
? 商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

 


无序列表:
<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 个字符。
*********************************

 

HTML学习总结

标签:sig   sem   获得   sid   属性   禁用   反馈   执行   eal   

原文地址:https://www.cnblogs.com/husai/p/12502801.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!