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

HTML5学习之必记

时间:2014-11-21 18:49:46      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:style   http   io   ar   color   os   使用   sp   java   

<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>

HTML5学习之必记

标签:style   http   io   ar   color   os   使用   sp   java   

原文地址:http://blog.csdn.net/leochang130731/article/details/41351623

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