<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>
原文:http://blog.csdn.net/leochang130731/article/details/41351623