HTML笔记

HTML	释义	备注
属性 align="center"	HTML标签的属性——对齐	<h1 align="center">This is heading 1</h1> 一般直接使用CSS样式 等价于<h1 style="text-align:center">This is heading 1</h1> 居于表格中间的CSS样式：style="vertical-align:middle;text-align:center;"
title	title="title" 当鼠标放在该元素上，就会显示title信息，规定该元素的额外信息
<hr />	创建水平线，用来分隔内容，如文章的一小节	在 HTML 中，<hr> 标签没有结束标签。 在 XHTML 中，<hr> 必须被正确地关闭，比如 <hr />。不支持为hr元素添加属性 在未来的 HTML 版本中，不允许省略结束标签。比如<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
<br>的clear属性	通常情况下，<br> 标签会告诉浏览器立即停止当前的文本流，并在下一行的左边，或者在左对齐的内联图形或表格的右边开始继续输出文本流。	神奇的<img>标签的align属性与<br>的clear属性 见表格下面
<a>超链接	属性 href：链接的目标，创建指向另一个文档的链接，或者文档的某个锚点 在所有的浏览器中，链接的默认外观是这样的：（当然可以利用CSS伪类添加其他的样式） 未被访问的链接带有下划线而且是蓝色的 已被访问的链接带有下划线而且是紫色的 活动链接带有下划线而且是红色的 name：创建文档内的书签，即规定锚点anchor的名称，可以用id来代替（HTML5中已经不支持name了）   target：定义被链接的文档在何处显示，默认在本窗口打开   rel：规定当前文档与被链接文档之间的关系，所有的浏览器都支持这个属性，主要为搜索引擎提供更多有关该链接的信息 rev：目标文档到源文档的关系，如右例   HTML5中新属性： type：被链接的文档的MIME类型,只能在 href 属性存在时使用。 download：规定被下载的超链接目标，必须设置 href 属性。 只有 Firefox 和 Chrome 支持 download 属性。 media：规定被链接文档是为何种媒介/设备优化的。	<a href="#tips">提示</a>  邮件：href="mailto:shiddong@foxmail.com?subject=Hello%20world" ———————————————————————————————————————————————————————— 4个保留的目标名称： target="_blank"　　未命名的新窗口打开文档 _self　　目标文档载入并显示在相同的框架或者窗口中，是默认的目标 _parent　　使得文档载入父窗口或者包含来超链接引用的框架的框架集 _top　　使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口 target="view_window"  target="view_frame" 　　其实这两个都一样，都是在命名的窗口中打开。 举个栗子： 当用户第一次选择内容列表中的某个链接时，浏览器将打开一个新的窗口，将它标记为 "view_window"，然后在其中显示希望显示的文档内容。如果用户从这个内容列表中选择另一个链接，且这个 "view_window" 仍处于打开状态，浏览器就会再次将选定的文档载入那个窗口，取代刚才的那些文档。 <ul> <li><a href="pref.html" target="view_window">Preface</a></li> <li><a href="chap1.html" target="view_window">Chapter 1</a></li> </ul> 在某个框架内打开 <frameset cols="100,*"> <frame src="toc.html">　　<!--toc.html就是指上面的ul--> <frame src="pref.html" name="view_frame"> </frameset> ———————————————————————————————————————————————————————— <a href="part.html" rel="next" rev="prev"> 一般用到比较多的如：next,friend，nofollow 具体的见：http://www.w3school.com.cn/tags/att_a_rel.asp ———————————————————————————————————————————————————————— type="text/html" <a href="/images/myimg.jpg" download="w3logo"><img ... 点击该图片之后，下载该图片，默认文件名就是w3logo，浏览器会自动检测正确的文件名并添加到文件 media属性的注解参考：http://www.w3school.com.cn/tags/att_a_media.asp
<frameset>框架 <frame>
<img> <map> <area>	源属性 src 替换文本 alt align属性  ———————— 所有主流浏览器都支持 <map> 标签。 area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。	<img src="boat.gif" alt="Big Boat"> 当浏览器无法载入图像时，替换文本属性会告诉读者失去的信息 align="top" 顶部对齐文本，"bottom"底部对齐文本,"middle"，默认是底部对齐， align="left" 浮动到左边，以及"right"浮动到文本的右侧。 ———————————————————————————————————————————————— <img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。 <img src="/i/eg_planets.jpg" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> 　　<area shape="circle" coords="180,139,14" href="/example/html/venus.html" target ="_blank" alt="Venus" /> 　　<area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" /> 　　<area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt="Sun" /> </map> ———————————————————————————— <area>定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。 target coords　　可点击区域的坐标值 href　　    此区域的目标URL　　nohref　　规定此区域内没有链接 shape　　定义区域的形状，与coords相配合，default：规定全部区域 圆形（circ 或 circle）　　        对应坐标：x,y,radius 多边形（poly 或 polygon）     对应坐标：x1,y1,x2,y2,...,xn,yn,定义多边形各边的坐标 矩形（rect 或 rectangle）      对应坐标：x1,y1,x2,y2，定义矩形的左上角和右上角的坐标
表格table	由table、tr、th、td元素组成 属性： cellpadding 表格单元边界与单元内容之间的间距(上下左右影响) cellspacing 规定单元格之间的空白（td与td之间的间距） frame 规定外侧边框的哪个部分是可见的。 rules 规定内侧边框的那个部分是可见的 summay 摘要 width 设置表格的宽度	<caption> 定义表格标题，用在<table>之下 <thead> <tbody> <tfoot>要结合起来使用，详见本表格之后 -------------------------------------------------------------- 从实用的角度，做好不要使用cellpadding，而使用CSS来添加内边距。 注释：除了 Internet Explorer，其他浏览器都支持 frame 属性。 frame="void" 不显示外边框 ，  box或者border 显示四边的外边框 ， above/below 显示上部/下部的外边框， hsides/vsides 显示上下/左右的外边框，lhs/rhs 显示左边/右边的外侧边框； 注释：rules 属性在 Firefox 和 Opera 中可以正确地显示。Internet Explorer、Chrome 以及 Safari 3 对该属性的显示并不正确。最好不要使用，可以用CSS添加边框样式。 IE: 除了内侧边框，还会添加 4 边的外侧边框。 Chrome 和 Safari：除了内侧边框，还会添加 affected 外侧边框。 rules = "none" 没有线条，all 位于行与列之间的所有线条都显示， rows 位于行之间的线条，cols 位于列之间的线条显示， groups 位于行组与列组之间的线条。 summay 不会对普通浏览器中产生任何视觉变化。
列表	<ul> 定义无序表 <ol> 定义有序表 <li> 列表项 <dl> 定义列表 <dt> 定义项目（即术语部分） <dd> 定义的描述（对术语的描述）	ul和ol的多个属性已被废弃，在ol中HTML5引入reversed ，目前只有 Chrome 和 Safari 6 支持 reversed 属性：<ol reversed> dl 即definition list <dl>   <dt>计算机</dt>     <dd>用来计算的仪器 ... ...</dd>   <dt>显示器</dt>     <dd>以视觉方式显示信息的装置 ... ...</dd> </dl>

 

 

1、<br>的clear属性,<img>的align属性

（1）.不带有 align 属性的 <img> 标签与带有 clear 属性的 <br> 标签

<body>
    <img src="/i/eg_greanfoliage.jpg" />
    This text should wrap around the image, flowing between the image and the right margin of the document.
    <br />
    This text will flow as well, but will be below the image, extending across the full width of the page. there will be whitespace above this text and to the right of the image.
</body>

 

（2）.带有 align 属性的 <img> 标签与不带有 clear 属性的 <br> 标签 

<body>
    <img src="/i/eg_greanfoliage.jpg" align="left" />
    This text should wrap around the image, flowing between the image and the right margin.
    <br />
    This text will flow as well, but will be below the image, extending across the full width of the page. there will be whitespace above this text and to the right of the image.
</body>

 

 

 （3）.带有 align 属性的 <img> 标签与带有 clear 属性的 <br> 标签

<body>
    <img src="/i/eg_greanfoliage.jpg" align="left" />
    This text should wrap around the image, flowing between the image and the right margin.
    <br clear="left" />
    This text will flow as well, but will be below the image, extending across the full width of the page. there will be whitespace above this text and to the right of the image.
</body>

（4）.align 属性为 absmiddle 的 <img> 标签与clear 属性为 left 的 <br> 标签

<body>
    <img src="/i/eg_greanfoliage.jpg" align="absmiddle" />
    This text should wrap around the image, flowing between the image and the right margin of the document.
    <br clear="left" />
    This text will flow as well, but will be below the image, extending across the full width of the page. there will be whitespace above this text and to the right of the image.
</body>

 

2、 <thead><tbody><tfoot>

 <thead> 标签定义表格的表头，<tbody> 标签定义表格主体（正文)，<tfoot> 标签定义表格的页脚（脚注或表注）。

tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。使用了一个，就必须三个都用上，出现次序是：thead、tfoot、tbody

注：<thead> 内部必须拥有 <tr> 标签！

 

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>