HTML标签要点
1.HTML<!DOCTYPE>标签
常用的文档声明:
HTML5:<!DOCTYPE html>
HTML 4.01 Strict:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
2.a标签
常见属性:href,target,rel
rel:指定当前文档与被连接文档的关系
target:规定在何处打开链接文档
如果在一个 <a> 标签内包含一个 target 属性,浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在,浏览器将打开一个新的窗口,给这个窗口一个指定的标记,然后将新的文档载入那个窗口。从此以后,超链接文档就可以指向这个新的窗口。
<h3>Table of Contents</h3> <ul> <li><a href="pref.html" target="view_window">Preface</a></li> <li><a href="chap1.html" target="view_window">Chapter 1</a></li> <li><a href="chap2.html" target="view_window">Chapter 2</a></li> <li><a href="chap3.html" target="view_window">Chapter 3</a></li> </ul>
特殊的目标
有 4 个保留的目标名称用作特殊的文档重定向操作:
_blank:浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self:这个目标的值对所有没有指定目标的 <a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的,除非和文档标题 <base> 标签中的 target 属性一起使用。
_parent:这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。
_top:这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
提示:这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略,因此,不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。
3.area标签
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" /> </map>
4.用于强调的标签
根据 HTML5 规范,在没有其他合适标签更合适时,才应该把 <b> 标签作为最后的选项。HTML5 规范声明:应该使用 <h1> - <h6> 来表示标题,使用 <em> 标签来表示强调的文本,应该使用 <strong> 标签来表示重要文本,应该使用 <mark> 标签来表示标注的/突出显示的文本。
5.aside标签:制作侧边栏
6.base标签
<base> 标签为页面上的所有链接规定默认地址或默认目标。
通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。
<img src="eg_smile.gif" /><br /> <p>请注意,我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL,浏览器将在如下地址寻找图片:</p> <p>"http://www.w3school.com.cn/i/eg_smile.gif"</p> <br /><br /> <p><a href="http://www.w3school.com.cn">W3School</a></p> <p>请注意,链接会在新窗口中打开,即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p>
7.bdi隔离用户名
属性:dir,参数值:ltr,rtl,auto
<bdi> 标签允许您设置一段文本,使其脱离其父元素的文本方向设置。
在发布用户评论或其他您无法完全控制的内容时,该标签很有用。
目前只有火狐和谷歌支持该标签
8.bdo覆盖 默认的文本方向,参数与bdi相同
<bdo dir="rtl">Here is some text</bdo>
9.big标签用于放大字体
其字体比周围的文字要大一号。但是,如果文字已经是最大号字体,这个 <big> 标签将不起任何作用
10.blockquote:块引用
<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。
属性:cite:URL(标明引用的来源)
11.br换行标签
<br> 可插入一个简单的换行符。
<br> 标签是空标签(意味着它没有结束标签,因此这是错误的:<br></br>)。在 XHTML 中,把结束标签放在开始标签中,也就是 <br />。
请注意,<br> 标签只是简单地开始新的一行,而当浏览器遇到 <p> 标签时,通常会在相邻的段落之间插入一些垂直的间距。
12.button和input标签关于按钮表现上的差异
<button> 标签定义一个按钮。
在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
<button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。
唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。
请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。
如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本,而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。
13.caption标签:表格中的标题
14.cite标签
<cite> 标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。
按照惯例,引用的文本将以斜体显示。
用 <cite> 标签把指向其他文档的引用分离出来,尤其是分离那些传统媒体中的文档,如书籍、杂志、期刊,等等。如果引用的这些文档有联机版本,还应该把引用包括在一个 <a> 标签中,从而把一个超链接指向该联机版本。
<cite> 标签还有一个隐藏的功能:它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器,它能够自动整理引用表格,并把它们作为脚注或者独立的文档来显示。<cite> 标签的语义已经远远超过了改变它所包含的文本外观的作用;它使浏览器能够以各种实用的方式来向用户表达文档的内容。
15.短语元素
16.col标签用于定义表格中列的对齐方式
17.dataList标签与option标签使用,设置input可能有的值
<input id="myCar" list="cars" /> <datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist>
18.details标签规定文档的细节,summary是细节的标题
与 <summary> 标签 配合使用可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。目前只有 Chrome 和 Safari 6 支持 <details> 标签。
19.dialog打开的对话窗口,老实说,这标签感觉没啥卵子用
20.embed定义嵌入的内容,比如插件
<embed src="helloworld.swf" />
21.给表单元素进行分组,legend
22.pre标签与code标签的用法详解:http://www.cnblogs.com/lizonghui/archive/2012/09/18/2692355.html
23.meter与progress用于表示数值占比以及任务进度,progress常与js结合显示任务进度
24.ruby,rp,rt:显示中文字符的注音
<!DOCTYPE HTML> <html> <body> <ruby> 漢 <rt> ㄏㄢˋ </rt><rp>你的浏览器不支持ruby</rp> </ruby> </body> </html>
支持ruby标签的浏览器里,rt中的内容会显示在漢字的上方,如果浏览器不支持,就会显示rp中的内容
25.wbr标签
<wbr>是html5中的新元素。
有人翻译成:软换行。
html4中<br/>表示换行,<br/>表示必须换行。而<wbr>意思是在浏览器窗口或父级窗口宽度足够的情况下,不换行;在宽度不足的情况下,在加了<wbr>处主动换行。
例子:
<p>To learn AJAX, you must be familiar with the XMLHttpRequest Object.To learn AJAX, you must be familiar with the XMLHttp<wbr>Request Object.</p>
当正常情况下英文宽度过小,不足以在行末书写完一个词时,就将行末整个词放到下一行,实现换行,但是加入上面位置的<wbr>时,软换行就能收主动拆分单词,可以在支持HTML5的浏览器中测试(IE系列除了9都不支持,可以用Chrome)。
这个<wbr>好像对字符型的语言用处挺大,但是对于想中文这种字,貌似没多大用处。