html基本结构及标签相关总结

html基本结构及标签相关总结

1.html基本结构

<!DOCTYPE html > <!-- 使用 HTML5 doctype，不区分大小写 -->
<html>
    <head>
    </head>
    <body>
    </body>
</html>

!DOCTYPE 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令, 请始终向 HTML 文档添加!DOCTYPE声明，这样浏览器才能获知文档类型。
参考链接！DOCTYPE

2.常用头部标签< meta >

< meta > 标签的属性定义了与文档相关联的名称/值对。

在 HTML 中，< meta >没有结束标签。
在 XHTML 中，< meta >标签必须被正确地关闭

  • http-equiv 把 content 属性关联到 HTTP 头部。
  • name 把 content 属性关联到一个名称。
  • scheme 定义用于翻译 content 属性值的格式。

由于搜索引擎一般使用机器人自动查找Meta值来给网页分类，注意到这点后将有助于SEO优化。合理利用Meta标签的Description和Keywords属性，加入网站的关键字或者网页的关键字，可使网站的SEO优化排名提升，更加贴近用户体验。

参考链接meta标签
meta标签http-equiv属性详解
如何做好网页中Meta标签的SEO优化设置

3.html5新特性–语义化

作为标记语言，语义化让标签的使用更加的易懂。HTML 4 的文档结构定义和其隐含的大纲算法非常粗糙而且造成了很多问题：

  1. 定义语义性章节的< div > 元素的用法,如果没有为class属性赋以特殊的值，使生成自动生成大纲的算法变得不可能 。换句话说, HTML4规范在章节的定义和章节的范围都不精确。 自动生成大纲是重要的,尤其是在倾向于通过根据文档大纲内容去展示内容的辅助技术（ assistive technology）。 HTML5 在自动生成大纲算法的过程中去掉了div元素，并新增了一个元素，section元素。
  2. 合并多个文档是困难的：主文档中包含子文档意味着改变HTML标题元素的级别，以使得文档大纲能够保持下来。 这个已经被HTML5的新的章节元素解决了，因为新引入的元素(< article>, < section>, < nav> 和 < aside>) 总是距离其最近的祖先章节的子章节, 与子文档章节内部的标题没有关系.
  3. HTML4中，所有的章节都是文档大纲中的一部分。但是文档并不总是这样。文档可以包含那些不是大纲的特殊章节, 但是与文档有关的, 就像广告块和解释区域。 HTML5 引入aside元素 < aside>使得这样的节点不会插入到主纲要中。
  4. 另外, 因为在 HTML4中任何的部分都是文档大纲的一部分, 没有办法产生与网站相关而不是与文档相关的节段，比如logos,menus,目录或版权信息和法律声明。为了这个目的, HTML5 引入了三个特殊的节段 元素： 包含链接集合的nav元素< nav> , 例如目录, 包含网站相关信息的footer元素< footer> 和header元素 < header> 。

参考链接
1.使用< header >,< footer >,< nav >等h5标签，和全部使用< div >有什么区别？
2.开发者必须知道的HTML5十五大新特性
3.HTML5的文档节段和纲要

4.基本常用标签注意内容

在 HTML 4 中，有若干的标签和属性是被废弃的，建议使用样式代替！

  • < p style=”background-color:green”>This is a paragraph.< /p>
  • font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸
  • text-align 属性规定了元素中文本的水平对齐方式
posted @ 2017-03-03 10:56  某星座的海星  阅读(169)  评论(0)    收藏  举报