HTML5学习之必记
浏览数：23 /
时间：2015年06月09日
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>HTML学习之必记</title>
<link rel="parent" href="index.html" target="_blank">
</head>
<body>
<h1>HTML学习之必记</h1>
<hr align="left" noshade="noshade" size="1px" width="80%"/>
<p>上面是分割线</p>
<pre > pre 标签测试 （保留空格，换行等格式）</pre>
<p> <a href="/index.html" target="_top">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
<p> <a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>
<hr align="left" noshade="noshade" size="1px" width="80%"/>
<form action="demo_form.asp" id="carform">
<!--规定 <select> 元素所属的 form 元素。该属性的值必须是同一文档中的某个 <form> 元素的 id 属性。-->
Firstname:<input type="text" name="fname">
<input type="submit">
<!-- 表单之外的一个下拉列表（但仍然属于该表单的一部分） -->
</form>
<select name="carlist" form="carform">
<!---select 属性->
<!--multiple="multiple" 可以同时选择多个-->
<!--name 属性规定 select 元素的名称。
name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。-->
<!--size 属性规定下拉列表中可见选项的数目。如果 size 属性的值大于 1，但是小于列表中选项的总数目，浏览
器会显示出滚动条(Chrome貌似不是这样的，size设为2，都显示了)，表示可以查看更多选项。-->
<option value="Jarry">Jarry</option>
<option value="Jimmy">Jimmy</option>
<option value="Tom">Tom</option>
<option value="Scott">Scott</option>
</select>
<hr align="left" noshade="noshade" size="1px" width="80%"/>
<h4>一个无序列表：</h4>
<ul style="line-height:120%" type="circle">
<!--compact="compact"-->
<!-- compact 属性规定列表呈现的效果比正常情况更小巧，这是通过减少行间距以及对列表进行缩进来实现的。
compact属性通常不用，而是使用css的style="line-height:120%"设置效果 -->
<!--type="square" disc --默认值，实心圆。 circle --空心圆。 square --实心方块。-->
<!--尽管不赞成使用 type 属性，不过所有浏览器都支持 type 属性。
最好的方法使用 CSS语法：<ul style="list-style-type:square">-->
<li>阳光</li>
<li>温度</li>
<li>水</li>
<li>啊！多么值得感恩！</li>
</ul>
<h4>一个有序列表：</h4>
<ol>
<!--compact属性 HTML5 中不支持。HTML 4.01 中不赞成使用。规定列表呈现的效果比正常情况更小巧。
reversed 规定列表顺序为降序。(9,8,7...)
start number 规定有序列表的起始值。
type 规定在列表中使用的标记类型。尽管不赞成使用 type 属性，不过所有浏览器都支持 type 属性。
type可选：
1 默认值。数字有序列表。（1、2、3、4）
a 按字母顺序排列的有序列表，小写。（a、b、c、d）
A 按字母顺序排列的有序列表，大写。（A、B、C、D）
i 罗马字母，小写。（i, ii, iii, iv）
I 罗马字母，大写。（I, II, III, IV）
等效CSS 语法：<ol style="list-style-type:upper-roman">
-->
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<hr align="left" noshade="noshade" size="1px" width="80%"/>
<img src="tulip.jpg" alt="上海鲜花港 - 郁金香" />
<!--alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。
假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：
网速太慢 src 属性中的错误 浏览器禁用图像 用户使用的是屏幕阅读器
<img> 标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。
我们强烈推荐您在文档的每个图像中都使用这个属性。这样即使图像无法显示，用户还是可以看到关于丢失了什么东西的一些信
息。而且对于残疾人来说，alt 属性通常是他们了解图像内容的唯一方式。-->
<!--usemap:
usemap 属性将图像定义为客户端图像映射。
图像映射指的是带有可点击区域的图像。
usemap 属性与 <map> 元素的 name 或 id 属性相关联，以建立 <img> 与 <map> 之间的关系。
例：<img src="planets.gif" alt="Planets" usemap="#planetmap" />
<map name="planetmap"> <area href="sun.htm" shape="rect" coords="0,0,110,260">Sun</a>
<area href="mercur.htm" shape="circle" coords="129,161,10">Mercury</a>
<area href="venus.htm" shape="circle" coords="180,139,14">Venus</a> </map> -->
<!--ismap
属性将图像定义为服务器端图像映射。图像映射指的是带有可点击区域的图像。
当点击一个服务器端图像映射时，点击坐标会以 URL 查询字符串的形式发送到服务器。
注释：只有当 <img> 元素属于带有有效 href 属性的 <a> 元素的后代时，才允许 ismap 属性。
例：<a href="demo_form.asp"> <img src="tulip.gif" ismap /> </a> -->
<hr align="left" noshade="noshade" size="1px" width="80%"/>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<hr align="left" noshade="noshade" size="1px" width="80%"/>
<div class="news">
<h2>div 新闻标题1</h2>
<p>div标签 第一部分，隶属于类 news</p>
</div>
<div class="news">
<h2>div 新闻标题2</h2>
<p>div标签 第二部分，隶属于类 news</p>
</div>
<!--正如您看到的，上面这段 HTML 模拟了新闻网站的结构。其中的每个 div 把每条新闻的标题和摘要组合在一起，也就是说，
div 为文档添加了额外的结构。同时，由于这些 div 属于同一类元素，所以可以使用 class="news" 对这些 div 进行标
识，这么做不仅为 div 添加了合适的语义，而且便于进一步使用样式对 div 进行格式化，可谓一举两得。-->
<hr align="left" noshade="noshade" size="1px" width="80%"/>
<p><span>some text.</span>some other text.</p>
<!--如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span 元素仍然
为 p 元素增加了额外的结构。可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样
式。可以对同一个 <span> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class
用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
使用 span 元素，然后对这个 span 元素的父元素，即 p 元素应用 class，这样就可以对这个类的子元素 span 应用相应的
样式了。-->
</body>
</html>
<!-- HTML学习必记标签(元素)：—>
<!-- <!doctype>
定义和用法：
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确
地呈现内容。HTML5 不基于 SGML，所以不需要引用 DTD。
—>
<!-- <html>
定义和用法：
此元素可告知浏览器其自身是一个 HTML 文档。
<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。正如您所了解的那样，文档的头部由
<head> 标签定义，而主体由 <body> 标签定义。
提示和注释：
注释：即使 html 元素是文档的根元素，它也不包含 doctype 元素。doctype 元素必须位于 html 元素之前。
-->
<!-- <body>
定义和用法：
body 元素定义文档的主体。
body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
-->
<!-- <hr>
定义和用法：
<hr> 标签在 HTML 页面中创建一条水平线。
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。
HTML 与 XHTML 之间的差异
在 HTML 中，<hr> 标签没有结束标签。
在 XHTML 中，<hr> 必须被正确地关闭，比如 <hr />。
在 HTML 4.01 中，hr 元素的所有呈现属性均不被赞成使用。
在 XHTML 1.0 Strict DTD 中，hr 元素的所有呈现属性均不被支持。
可选的属性：
align : center left right 规定 hr 元素的对齐方式。不赞成使用。请使用样式取代它
noshade : 规定 hr 元素的颜色呈现为纯色。不赞成使用。请使用样式取代它
size : pixels 规定 hr 元素的高度（厚度）。不赞成使用。请使用样式取代它
width : pixels % 规定 hr 元素的宽度。不赞成使用。请使用样式取代它。
-->
<!-- <pre>
定义和用法：
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签的一个常见应用就是用来表示计算机的源代码。
可以导致段落断开的标签（例如标题、<p> 和 <address> 标签）绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段
落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。
-->
<!-- <a>
定义和用法：
<a> 标签定义超链接，用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性，它指示链接的目标。
在所有浏览器中，链接的默认外观是：
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
-->
<!-- <link>
定义和用法：
<link> 标签定义文档与外部资源的关系。
<link> 标签最常见的用途是链接样式表。
提示和注释：
注释：link 元素是空元素，它仅包含属性。
注释：此元素只能存在于 head 部分，不过它可出现任何次数。
-->
<!-- <frame>
定义和用法：
<frame> 标签定义 frameset 中的一个特定的窗口（框架）。
frameset 中的每个框架都可以设置不同的属性，比如 border、scrolling、noresize 等等。
-->
<!-- <frameset>
定义和用法：
frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset
元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。
重要事项：
您不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。不过，如果您需要为不支持框架的浏览器添
加一个 <noframes> 标签，请务必将此标签放置在 <body></body> 标签中！
-->
<!-- <noframes>
定义和用法
noframes 元素可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。
注释：如果浏览器有能力处理框架，就不会显示出 frameset 元素中的文本。
重要事项：如果您希望 frameset 添加 <noframes> 标签，就必须把其中的文本包装在 <body></body> 标签中！
注释：如果您希望验证包含框架的页面，请确保 DTD 被设置为 "Frameset DTD"。
-->
<!-- <form>
定义和用法
<form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。
-->
<!-- <input>
定义和用法
<input> 标签用于搜集用户信息。
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按
钮、按钮等等。
-->
<!-- <textarea>
定义和用法
<textarea> 标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
-->
<!-- <button>
定义和用法
<button> 标签定义一个按钮。
在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
<button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与
</button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们
可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。
唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。
-->
<!-- <select>
定义和用法
select 元素可创建单选或多选菜单。
<select&> 元素中的 <option> 标签用于定义列表中的可用选项。
-->
<!-- <option>
定义和用法
option 元素定义下拉列表中的一个选项（一个条目）。
浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。
option 元素位于 select 元素内部。
-->
<!-- <ul>
定义和用法：
<ul> 标签定义无序列表。
-->
<!-- <ol>
定义和用法
<ol> 标签定义有序列表。
-->
<!-- <li>
定义和用法
<li> 标签定义列表项目。
<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。
-->
<!-- <img>
定义和用法
img 元素向网页中嵌入一幅图像。
请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
<img> 标签有两个必需的属性：src 属性 和 alt 属性。
-->
<!-- <table>
定义和用法
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
属性 值 描述
align left、center、right 不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。
bgcolor rgb(x,x,x) #xxxxxx colorname 不赞成使用。请使用样式代替。规定表格的背景颜色。
border pixels 规定表格边框的宽度。
cellpadding pixels、% 规定单元边沿与其内容之间的空白。
cellspacing pixels、% 规定单元格之间的空白。
frame 规定外侧边框的哪个部分是可见的。
rules 规定内侧边框的哪个部分是可见的。
summary text 规定表格的摘要
width %、pixels 规定表格的宽带
-->
<!-- <tr>
定义和用法
char 属性规定将表格行中的内容相对某个字符的对齐方式。
仅当 align 属性设置为 "char" 时，才能使用 char 属性。
char 属性的默认值是页面语言的小数点字符。
几乎没有浏览器支持 char 属性。
-->
<!-- <td> -->
<!-- <style>
定义和用法
<style> 标签用于为 HTML 文档定义样式信息。
在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。
type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。
style 元素位于 head 部分中。
-->
<!-- <div>
定义和用法
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
用法
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div>
的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素
组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
-->
<!-- <span>
定义和用法
<span> 标签被用来组合文档中的行内元素。
提示：请使用 <span> 来组合行内元素，以便通过样式来格式化它们。
注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
-->
<!-- <head>
定义和用法
<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供
元信息等等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档
头部包含的数据都不会真正作为内容显示给读者。下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>,
<style>, 以及 <title>。<title> 定义文档的标题，它是 head 部分中唯一必需的元素。
-->
<!-- <title>
标题里是什么？
一定要选择一个正确的标题，这对于定义文档并确保它能够在 Web 上有效利用来说是十分重要的。
请记住，用户可以用任何顺序、独立地访问文档集中的每一个文档。所以，文档的标题不仅应当根据其他文档的上下文定义，而且还要
显示其自身的特点。
含有文档引用排序的标题通常不是什么好标题。举个例子，像“第十六章”或“第五部分”这样的标题，对读者理解其内容方面毫无用
处。描述性更强的标题，像“第十六章：HTML 标题”，或者“第五部分：如何使用标题”，这样的标题不仅表达了它在一个大型文档集
中的位置，还说明了文档的具体内容，吸引读者更有兴趣读下去。
自我引用的标题也没有什么用处。像“主页”这样的标题和内容毫无关系，类似的还有“反馈页”或“常用链接”等。你应该设计一个能够
传达一定内容和目的的标题，令读者凭这个标题就可以判断是否由必要访问这个页面。“HTML <title> 标签的详细信息”，这就是一
个描述性的标题，类似的还有“HTML <title> 标签的反馈页”等等。
人们常常会花费大量时间去创建 Web 文档，但却经常只是因为一个不吸引人或无意义的标题，而把这些努力全都浪费掉了。当自动为
用户搜集链接的特殊软件在 Web 上越来越流行时，只有网页的标题才会作为与页面相关的描述性词语，被插入到庞大的链接数据库
中。因此，我们怎么强调这一点都不过分：请为自己的每个文档都认真地选择一个描述性的、实用的并与上下文独立的标题。
-->
<!-- <script>
<script> 标签用于定义客户端脚本，比如 JavaScript。
script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。
script属性：
1)、async 属性规定一旦脚本可用，则会异步执行。
注释：async 属性仅适用于外部脚本（只有在使用 src 属性时）。
注释：有多种执行外部脚本的方法：
如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本
2)、charset 属性规定在外部脚本文件中使用的字符编码。
如果外部文件中的字符编码与主文件中的编码方式不同，就要用到 charset 属性。
默认的字符编码是 ISO-8859-1。
charset 属性与 src 属性一起使用，告诉浏览器用来编码这个 javascript 程序的字符集。它的值是任何一个 ISO 标准字符集编码
的名称。
3)、defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。
有的 javascript 脚本 document.write 方法来创建当前的文档内容，其他脚本就不一定是了。
如果您的脚本不会改变文档的内容，可将 defer 属性加入到 <script> 标签中，以便加快处理文档的速度。因为浏览器知道它将能够
安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。
--></span><span style="font-size: 21px !important;">
</span>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
