brucexu1978
brucexu1978

html/html5学习

1.

 img标签可使用usemap属性， 需要指定map的name或者id（有的浏览器用name， 有的用id）， usemap引用map的时候要在map name或者id前加#。

map标签可以指定area标签，

area标签可以使map的某个区域有特别的能力， 比如点击增加链接等。有shape， coords， href， target， alt等属性， alt属性使得·光标在该区域时， 显示一些东西

 

ie不支持object标签。

 

2.

锚标签a，其中charset， 几乎主流的浏览器几乎都不支持 charset 属性。 只有 Firefox 和 Opera 支持 coords 属性。

href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。如果用户选择了 标签中的内容，那么浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档，或者执行 JavaScript 表达式、方法和函数的列表。 href可使用相对路径， 绝对路径

 

复杂的锚可以包含图像：

 

img还可以指定border属性

属性值

值 描述
URL 超链接的 URL。可能的值：
  • 绝对 URL - 指向另一个站点（比如 href="http://www.example.com/index.htm"）
  • 相对 URL - 指向站点内的某个文件（href="index.htm"）
  • 锚 URL - 指向页面中的锚（href="#top"）

 

 

hreflang 属性用于指定被链接文档的语言。

仅在使用 href 属性时才可以指定 hreflang 属性。和 lang 属性类似，hreflang 属性的值也是 ISO 标准的双字符语言代码。和 lang 属性不同的是，hreflang 属性不会指定标签中的内容所使用的语言，而是指定被 href 属性调用的文档所使用的语言。主流的浏览器几乎都不支持 hreflang 属性

 

用于 标签的可选属性 rel 和 rev 分别表示源文档与目标文档之间正式的关系和方向。rel 属性指定从源文档到目标文档的关系，而 rev 属性则指定从目标文档到源文档的关系。这两种属性可以在 标签中同时使用。

几乎没有浏览器支持 rel 属性。

rel， rev的属性值

值 描述
alternate 文档的可选版本（例如打印页、翻译页或镜像）。
stylesheet 文档的外部样式表。
start 集合中的第一个文档。
next 集合中的下一个文档。
prev 集合中的前一个文档。
contents 文档目录。
index 文档索引。
glossary 文档中所用字词的术语表或解释。
copyright 包含版权信息的文档。
chapter 文档的章。
section 文档的节。
subsection 文档的子段。
appendix 文档附录。
help 帮助文档。
bookmark 相关文档。
   
nofollow Google 使用 "nofollow"，用于指定 Google 搜索引擎不要跟踪链接。
licence  
tag  
friend  

 

只有 Firefox 和 Opera 支持 shape 属性。

 

target： 指明用什么显示连接的内容， 可以是frameset， 或者新的窗口（框架或者窗口）， 如果那个框架不存在， 就新打开一个。

_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。


3.

 

标签在 HTML 页面中创建水平线。

html注释会被浏览器忽略掉，

注释是这样写的：

实例


4.

段落是通过

标题定义的, 浏览器会自动地在段落的前后添加空行


5. 文本格式化

sub, sup文本在右下角， 和右上角

This text contains
subscript




This text contains
superscript

效果：

This text containssubscript
This text containssuperscript


： 保留空格， 换行等，可用于显示源代码等
 
  
计算机标签输出：这些标签常用于显示计算机/编程代码
 
 
  
Computer code
 

 Keyboard input
 

 Teletype text
 

 Sample text
 

 Computer variable
 

 
 
  

 
 
  
 
   用户服务信箱

   上海赢科投资有限公司

   金桥开发区 789 号

 
 
  

 
 
  
title属性可使一些标签在鼠标指向的时候显示完整的标签值， 在ie5中仅acronym元素有效， 在Netscape 6.2中abbr 和 acronym 元素都有效
 
  
 
  
， ACRONYM： 缩写
 
  
 
  
 
   
HTML中表示缩写或,区别:表示简称，仅仅代表首字母缩写，所以的语义范围更大。
 
   
 
 
   
使用时，完整的词写在title属性中，例子：PR。
 
   
 
 
   
目前想到的ABBR及ACRONYM标签的两个好处：
 
   
 
 
   
1、增加可阅读性。我经常遇到样的情况，比如逛论坛时候会看到“NC”，假如这是我第一次看到，就会摸不着头脑，这是什么意思呢？南昌？尼采？最后不得不百度下，哦，原来是“脑残”啊，假如用了ABBR及ACRONYM标签，只需要把鼠标知道缩写词上就会显示完整的意思。
 
   
 
 
   
2、对搜索引擎友好。ABBR及ACRONYM标签的运用似乎还是SEO的重要一课。搜索引起会自动将“PR”和“PageRank”对应起来，搜索“PR”和“PageRank”，这个页面都会被检索到。
 
  
 
  
 
  
改变文字输出方向：
 
 
  

 Here is some Hebrew text
 
 
 
  

 
 
  
bdo：
 
 
  
允许作者为选定文本片断禁用双向法则， 覆盖双向算法， 比如邮件本身已经有处理， 在一些混合语言中会显示出错， 需要用bdo覆盖， 再用dir指明方向： dir = “ltr”或者“rtl”。
 
  
http://www.admin5.com/html/html_tag_ref/bdo.html
 
  

 
 
  

 这是长的引用：
 

 这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
 

 
 这是短的引用：
 
 这是短的引用。
 
 
 

 使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
 
 
  

 
 
  
del/ins：删除线， 下划线
 
 
  
一打有 二十 十二 件。

 
 
  

 
 
  
style：
 
  
设置文本样式
 
  
 
  
style="background-color:red"： 定义背景色
 font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸 
  
 
  
 
  
 
  
style="font-family:arial;color:red;font-size:20px;"
 
  
 
  
text-align 属性规定了元素中文本的水平对齐方式：
 
  
 
  
style="text-align:center"
 
  
 
  

 
 
  
 
  
有两种使用  标签的方式：
 
  
     
   
  1. 通过使用 href 属性 - 创建指向另一个文档的链接
    2.  
   
  2. 通过使用 name 属性 - 创建文档内的书签
    3.  
  
 
  
使用 Target 属性，你可以定义被链接的文档在何处显示。
 
  
下面的这行会在新窗口打开文档：
 
  
target="_blank">Visit W3School!
 
  

 
 
  
 
  
实例
 
  
 
  
HTML 文档内部的已命名的锚：
 
  
name="tips">Useful Tips Section
 
  
然后，我们创建指向相同文档中“有用的提示”部分的链接：
 
  
href="#tips">Visit the Useful Tips Section
 
  
或者，创建从另一个页面指向该文档中“有用的提示”部分的链接：
 
  
#tips">
Visit the Useful Tips Section

 
  
在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。
 链接电子邮件： 
  
 
  
发送邮件
 
 
  
发送邮件！
 
  

 
 
  
每个表格由 table 标签开始。

 
每个表格行由 tr 标签开始。

 
每个表格数据由 td 标签开始。
 
  
表格的表头使用  标签进行定义。
 
  
 
  
 
： 显示空单元格

 
 
  
 
  
我的标题
 
  

 
 
  
  电话： 跨两列
 
  
电话： 跨两行
 
  

 
 
  
表格可以嵌套。
 
 
  

 
 
  
列表：
 
 
  
   
     
         
  • 苹果

    •      
  • 香蕉

    •      
  • 菠萝

    •     

 
 
  
可用属性type定义标签的样式， 如

     
     
  

     
     
  
       
         
    1. 咖啡

      2.    
    2. 茶

      3.    
    3. 牛奶

      4.  

     
     
  
    可用属性type定义标签的样式， 如

       
       
  

       
       
  
       
  
      

      Coffee
      

      Black hot drink
      

      Milk
      

      White cold drink
      

       
  
       
  

       
       
  
      列表也可嵌套
       
       
  

       
       
  
       cellpadding="10">： table的内容到边框的距离

       
       
   
  
       cellspacing="10">： table的内容之间的距离

       
       
   
  
       bgcolor="red">： 表格背景颜色

       
       
   
  
       background="/i/eg_bg_07.gif">： 表格背景图片

       
      ： 单元格的背景颜色

       
      ： 单元格的背景图片

       
      frame属性：设置表格边框的样式， 上边狂， 下边框， 上下边框， 左右边框
       
       
   
  
      First 
   
     background="/i/eg_bg_07.gif">
         Second      		 
   
   
  

         
           
           
         
         
           
           
         
      MonthSavings
      January$100
       

       
       
  

       
       
  

       
       
  
      表单
       
       
  
       
  

       
       
  

       
       
       
  

       
       
  

       
       

       
       
  

       
       
  
       
  
      action="html_form_action.asp" method="get">
Username: 



       
  
       
  

       
       
  
      
First name: 


      
Last name: