所有标签总结笔记

这里就放一放自己想过后再看两眼或者当时遇到的问题吧。

项目地址:https://github.com/Myh4ck1ife/hit_and_run

DOCTYPE

html4.01与5之间区别

4.01中有三种声明 5中只有这一种

对大小写不敏感

没有结束标签

a

HTML 4.01 与 HTML5 之间的差异

4.01中 可以是超链接或锚,5中只有超链接,如果不设置href,只是超链接占位符。

media

看到a标签里面有这么个属性,一头雾水,怎么改都没什么变化,直到自己百度到了这句话:

这个属性,仅仅起到了“建议”的作用,在实际上是没有什么真正的作用的。
但是下面的例子可以帮你理解:

<a href="index.php?format=print" media="print">打印</a> <!-- 链接指向打印版 -->

<a href="onwall.php?fullscreen=yes" media="projection">全屏</a> 
<!-- 链接可能指向一个转为投影设计的页面 -->

<a href="http://m.facebook.com" media="handheld">移动版</a>

...

相信这样你能看明白了。虽然这些链接中的media没有起到任何实际作用。
但是他们标明了目标文档是专为什么样的平台设计的。

rel

这些基于连接的微格式,好处是语义明确,能完全告诉搜索引擎,这是什么,那是什么

如果你想让搜索引擎对你好,那你首先要把自己当成搜索引擎

target

<a> 标签的 target 属性规定在何处打开链接文档。
如果在一个 <a> 标签内包含一个 target 属性,
浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。
如果这个指定名称或 id 的框架或者窗口不存在,浏览器将打开一个新的窗口,
给这个窗口一个指定的标记,然后将新的文档载入那个窗口。
从此以后,超链接文档就可以指向这个新的窗口。

打开新窗口

当用户第一次选择内容列表中的某个链接时,
浏览器将打开一个新的窗口,将它标记为 "view_window",然后在其中显示希望显示的文档内容
。如果用户从这个内容列表中选择另一个链接,且这个 "view_window" 仍处于打开状态,
浏览器就会再次将选定的文档载入那个窗口,取代刚才的那些文档。
在整个过程中,这个包含了内容列表的窗口是用户可以访问的。
通过单击窗口中的一个连接,可使另一个窗口的内容发生变化。

在框架中打开窗口

<frameset cols="200,*">
  <frame src="/example/html/toc.html">
  <frame src="/example/html/pref.html" name="view_frame">
</frameset> 

调了很久没办法在自己的页面里正常显示,后来查到资料:

html5中frameset是没有效果的, 
html5把常用的标签都封装了效果,增强了标签的结构性,头部,中间,尾部,导航栏,
都设置了相对应的标签

applet

不是很明白

定义了包含该 applet 的一系列版本的资源名称。

这里object的定义,而且说是必须属性,例子里都没有给

附篇资料明天看:http://blog.csdn.net/chentracy2008/article/details/8783097

article

<article> 标签规定独立的自包含内容。

一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。

<article> 元素的潜在来源:

    论坛帖子
    报纸文章
    博客条目
    用户评论

aside

<aside> 标签定义其所处内容之外的内容。

aside 的内容应该与附近的内容相关。

base

<base> 标签为页面上的所有链接规定默认地址或默认目标。

通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,
而使用指定的基本 URL 来解析所有的相对 URL。
这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。
<base> 标签必须位于 head 元素内部。

basefont

在 HTML 4.01 中,不赞成使用 basefont 元素的 size 属性;在 XHTML 1.0 Strict DTD 中,
不支持 basefont 元素的 size 属性。

请使用 CSS 代替。

CSS 语法(在 <head> 部分):<style>body{font-size: 10px}</style>

bdi

bdi 指的是 bidi 隔离。

<bdi> 标签允许您设置一段文本,使其脱离其父元素的文本方向设置。

在发布用户评论或其他您无法完全控制的内容时,该标签很有用。

big

<big> 标签呈现大号字体效果。

使用 <big> 标签可以很容易地放大字体。这简直不能再简单了:浏览器显示包含在 <big> 标签和其相应的 </big> 标签之间的文字时,其字体比周围的文字要大一号。但是,如果文字已经是最大号字体,这个 <big> 标签将不起任何作用。

更妙的是,可以嵌套 <big> 标签来放大文本。每一个 <big> 标签都可以使字体大一号,直到上限 7 号文本,正如字体模型所定义的那样。

但是使用 <big> 标签的时候还是要小心,因为浏览器总是很宽大地试图去理解各种标签,对于那些不支持 <big> 标签的浏览器来说,它经常将其认为是粗体字标签。

blockquote

<blockquote> 标签定义块引用。

<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。

canvas

http://www.w3school.com.cn/html5/html_5_canvas.asp

col

作者:贺师俊
链接:https://www.zhihu.com/question/42699945/answer/94710195
来源:知乎
著作权归作者所有,转载请联系作者获得授权。

首先,CSS Selectors 4 可以这样:
col.left-aligned || td { text-align: left }
或
td:nth-column(odd) { text-align: left }

不过目前为止(2016年4月),没有任何一款浏览器支持“||”combinator和nth-column伪类等特性。


下面谈点历史:

之所以直接在 col 上定义样式无效,是一个老问题了。实际上HTML4定义的col上的align属性在现代浏览器上从来没有得到过良好支持(只有始于CSS时代之前的IE支持),原因很简单,因为此设计在CSS1、2乃至3的机制中都无法实现。

按照CSS的模型,一个元素上的CSS样式值要么来自于匹配了自己的规则,要么来自于匹配了祖先元素的规则然后通过继承获得。所以一个cell(td/th)的text-align,要么来自于匹配td/th的规则,要么来自于tr,tbody,table等祖先元素。而col/colgroup不可能是其祖先元素。

因此尽管这个需求被开发者要求了十多年,但是始终未能满足。最终还是需要通过更新CSS规范,创造新的combinator和伪类来实现。


下面谈你这个需求:

一、table元素应该用于真的表格,所谓真的表格即二维数据表。从你的需求来看,其实并不像是真的数据表。因此不建议用table元素。

二、其实你可以使用 nth-child 来实现你要的效果。

details

<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>

标题是可见的,当用户点击标题时会显示出详细信息。

dialog

只有 Chrome 和 Safari 6 和支持 dialog 标签。

dir

不赞成使用,请用css代替

embed

嵌入的内容比如插件什么的

fieldset

fieldset 元素可将表单内的相关元素分组。

<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。

当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。

<fieldset> 标签没有必需的或唯一的属性。

<legend> 标签为 fieldset 元素定义标题。

figcaption

插图标题

figure

插图

frame

如果您希望验证包含框架的页面,请确保 doctype 被设置为 "Frameset DTD"。阅读更多有关 DOCTYPE 的内容。

hr

画一条直线

i

斜体

ins

带有已删除部分和新插入部分的文本:

keygen

标签规定用于表单的密钥对生成器字段。

当提交表单时,私钥存储在本地,公钥发送到服务器。

main

<main> 标签规定文档的主要内容。

<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。

注释:在一个文档中,不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代:<article>、<aside>、<footer>、<header> 或 <nav>

mark

<mark> 标签定义带有记号的文本。

menu/menuitem

目前所有主流浏览器都不支持 <menu> 标签。

nav

<nav> 标签定义导航链接的部分

optgroup

<optgroup> 标签定义选项组。

optgroup 元素用于组合选项。当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易。

output

http://www.w3school.com.cn/tags/tag_output.asp

pre

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

s/strike

删除

source

<source> 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。

<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

span

<span> 标签被用来组合文档中的行内元素。

track

<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。

用于规定字幕文件或其他包含文本的文件,当媒介播放时,这些文件是可见的。

firefox与safari不支持

wbr

如果单词太长,或者您担心浏览器会在错误的位置换行,那么您可以使用 <wbr> 元素来添加 Word Break Opportunity(单词换行时机)。