按照功能来梳理html元素

前端萌新梳理一下基础，html element和css属性。

用自己的话表达出来，重点的几个详细学。

目的是加深理解，注意一下细节，尤其是语义化，前辈指出我这个毛病了。

p.s.w3c中文翻译有些真坑啊

按照功能来学习：

基础9-0

<!DOCTYPE>声明不是html标签，指示浏览器使用哪个html（xhtml）版本。对大小写不敏感。
在 HTML 4.01 中有三种DTD（Document Type Definition） <!DOCTYPE> 声明。在 HTML5 中只有一种：

<!DOCTYPE html>
<html>此元素向浏览器告知这是一个HTML文档
<title>我们浏览网站时标签上的显示文字；此标签为<head>标签中必须被包含的东西；三个属性（规定元素中内容的文本方向；规定元素中内容的语言代码；规定xml中元素内容的语言代码）请为自己的每个文档都认真地选择一个描述性的、实用的并与上下文独立的标题
<body>定义文档的主题；包含文档的所有内容
<h1>to<h6>拥有确切语义；支持的标准属性和时间属性？（并不全部支持欸）
段落；浏览器会自动添加前后空白；
换行；xml中，是 ；clear属性因垂死听；用来输入空行而不是分割段落，分割段落请用
<hr>插入水平线；xml中依旧需要关闭标签；

在<script>中注释时加个//↓，避免js执行-->

<script type="text/javascript">
<!--
function displayMsg()
{
alert("Hello World!")
}
//-->
</script>

格式38-9

~~<acronym>缩写，html5中被<abbr>代替~~
<abbr>缩写；可以使用title属性（鼠标移动到上面显示完整版本）
<address>通常包含在footer内，不要用来放在文档内描述通讯地址
~~<tt><big>建议使用样式；~~
~~<tt>~~
~~~~
~~<big>~~
~~~~
<bdi> 隔离，脱离父元素的文本方向设置；dir=“ltr”;w3c注释chrome火狐资词，然而亲测有点抽风啊，后续需要加深理解。 http://www.iteye.com/problems/75691
<bdo>覆盖默认的文本方向，跟上面的文本方向不一样，这个是单个字母的方向（使用不慎就是乱码啊~~~感谢老祖宗发明了中文）
<blockquoto>一大块引用用这个；会在左右缩进；短的、不是一大段的引用用q元素；可以用cite属性（值=url）来规定引用来源
~~<center>对包含的文本居中，使用样式表！！！！！、~~
拥有确切语义；表示强调，引用重要术语或概念时也可以使用（与其他斜体字区分，语义化嘛~~~）
拥有确切语义；语气更强的强调；不仅内容重要，且处在页面最重要的位置时更是值得强调的
<dfn> 拥有确切语义；标记对特殊术语短语的定义（ definition？）；表现为斜体（<dfn>都体现为斜体）比如说我引入一个计算机，则<dfn> 计算机（computer）俗称电脑，是现代一种用于高速计算的电子计算机器</dfn>
<code> 拥有确切语义；在网页中插入一段代码；将文本变为等宽字体（将来会加入新显示效果咯~主要是语义化！）（仅仅为了格式，使用<tt>；有时也用<pre>,毕竟代码写出来被执行就gg了，<pre>严格输出输入格式嘛~）
<samp> 拥有确切语义；单纯为了抽取里面的字符，并没有其他功能？
<kbd> 拥有确切语义；表示里面的文本是键盘文本，通常用于什么文档手册说明书
<var> 拥有确切语义；表示变量名称，或者由用户提供的值；显示为斜体；通常与<code><pre>一起使用；是计算机编程相关的特定元素就像<code>一样，就是为了个语义化啊~~~
<cite> 拥有确切语义；包含的文本对某个参考文献的引用（斜体啊斜体）；可以把引用包括在一个<a>中，搞个大新闻超链接！因为语义化，<cite>现在也很高能啊，可以参考文献文档中自动摘录参考书目，可以生成二次引用（管他叫啥……二级引用）？感谢语义化，让功能更丰富
<del>
<ins>
<meter>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<strike>
<time>

表单14-3

框架4-0

图像6-3

音频\视频4-4

链接3-1

列表10-1

表格10-0

样式\节11-8（*语义化）

元信息4-0

编程6-1

posted on 2016-09-01 17:04 jerol 阅读(211) 评论(0) 收藏举报

刷新页面返回顶部

按照功能来梳理html元素

导航

公告