这段时间找实习看的眼花缭乱的,然后也被拒得落花流水,啊哈哈~还是写博客好玩儿~嘿嘿,下面正题

一、doctype

  • 标准模式 (Full Standards Mode)
  • 接近标准模式 (Almost Standards Mode)
  • 混杂模式 (Quirks Mode)

以上三种模式是浏览器在解析CSS时的三种工作模式,混杂模式是依据旧式的、非标准的CSS规则来渲染网页;标准模式则是遵循W3C标准去解析CSS的,接近标准模式与标准模式实际上差异并不大;关于Firefox中DTD与浏览器工作模式的详细信息可参见 Mozilla's_DOCTYPE_sniffing,关于Opera中DTD与浏览器工作模式的详细信息可参见  DOCTYPE Switches support in Opera Presto 2.10

在编写一个页面时,要使用能够触发浏览器“标准模式”的DTD(Document Type Definition),推荐使用 < !DOCTYPE html > ,并且书写符合规范的代码,这样才能保证页面在各个浏览器中可以最大程度的兼容;

二、HTML结构之标签语义化

  • 更容易被搜索引擎收录,与搜索引擎建立起良好的沟通,有利于爬虫抓取更多的有效信息:爬虫依据标签来确定上下文和关键字的权重;
  • 便于团队开发和维护,语义化更具有可读性,也是下一步网页的重要动向;遵循W3C标准的团队都遵循这个标准,有利于减少差异性;
  • 去掉或丢失样式时能让页面的结构呈现相对清晰;
  • 更方便其他设备解析网页内容(如屏幕阅读器、盲人阅读器、移动设备);

HTML 语义化标签的几个栗子:

  1. <a>标签实现超链接;注意title属性的作用,方便搜索引擎了解链接地址的内容;
  2. <p>文章段落
  3. <hx>文章标题或者栏目标题
  4. <strong>和<em>强调文本,粗体和斜体
  5. <q>短文本引用
  6. <blockquote>长文本引用
  7. <adress>为页面加入地址信息
  8. <ul>无序列表
  9. <ol>有序列表
  10. <caption>为表格添加标题;注意表格的summary属性,和<a>标签的title属性很像;

HTML5 语义化标签的几个栗子:

  1. <article>装载显示一个独立的文章内容;

    例如一篇完整的论坛帖子,一篇新闻、一篇博客文章、一个用户评论等;<article>标签可以嵌套,内层对外层有隶属关系;举个栗子:

    <article>
    <h1>文章标题</h1>
    这是一篇文章
    <article>评论01</article>
    <article>评论02</article>
    </article>
  2. <section>定义文档中的节,比如文章的章节、页眉、页脚等;举个栗子:
    <section>
    <h1>章节一</h1>
    <p>详细内容</p>
    </section>
    <section>
    <h1>章节二</h1>
    <p>详细内容</p>
    </section>
  3. <aside>用来装载非正文的内容,比如广告、侧边栏、成组的链接等;
  4. <hgroup>用于对网页或区段的标题(h1-h6)将行组合;栗子+1:
    <hgroup>
    <h1>标题一</h2>
    <h1>标题二</h2>
    </hgroup>
  5. <header>表示一组引导性的帮助,可能包含标题元素,也可以包含比如像logo、分节头部、搜索导航等;
  6. <footer>表示最近一个章节内容或者根节点元素的页脚;一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息;
  7. <nav>导航链接放在<nav>标签里;
  8. <time>用来表示24小时制时间或者公历日期,若表示日期则也可包含时间和时区;此元素意在以机器可读的格式表示日期和时间。 有安排日程表功能的应用可以利用这一点
  9. <mark>代表突出显示的文字,例如可以为了标记特定上下文中的文本而使用这个标签;不要把<mark>元素和<strong>元素搞混淆,<strong>元素用来表示文本在上下文的重要型的,而<mark>元素是用来表示上下文的关联性的;
  10. <figure>规定独立的流内容(如 图片、图表、照片、代码等),<figure>中的内容应当是与主内容相关的,但是若是删除的话应当是并不会对文档流产生影响的;
  11. <figcaption>定义<figure>元素的标题,注意应被置于<figure>元素的第一个或最后一个子元素的位置;

注:关于语义化标签部分内容来自博客园ToNiQ,以下地址:http://www.cnblogs.com/ToNi/p/4271537.html?utm_source=tuicool&utm_medium=referral

/******暂时就到这里吧,又饿了,再过一个小时去吃饭**********************/

基础复习之HTML (doctype、标签语义化)的更多相关文章

  1. web标签语义化的理解_web语义化是什么意思

    web语义化是什么? Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解.语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究 ...

  2. 灵魂代码分享HTML元素标签语义化及使用场景实用到爆

    灵魂三问: 标签语义化是什么?为什么要标签语义化?标签语义化使用场景有哪些? 下面让我们跟着这三个问题来展开一下本文的内容. 一.标签语义化是什么? 标签语义化就是让元素标签做适当的事情.例如 p 标 ...

  3. 标签语义化之常用HTML标签

    一.布局的理解误区 网络上流行管新型的布局方式叫“DIV+CSS”,其实是一个错误的理解,导致了很多人过度依赖与滥用DIV标签, HTML提供了我们一共七八十个标签,其中常用的有三十个左右,DIV不过 ...

  4. HTML标签语义化

    标签语义化 Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解. 如果可以在合适的位置使用恰当的标签,那么写出来的页面语义明确,结构清晰,搜索引擎也可 ...

  5. 【转载】html标签语义化

    Html语义化标签-语义化你的HTML标签和属性   1 语义化你的HTML标签和属性 1.1 <Hx> 1.2 <p> 1.3 <ul>.<ol>.& ...

  6. ASP.NET动态网站制作(5)-- 标签语义化及知识补充

    前言:这节课主要是讲标签语义化及一些知识点的补充 内容:参考老师的博文:http://www.cnblogs.com/ruanmou/p/4821894.html

  7. 谈CSS布局中HTML标签语义化

    很多人都在做前端,当然这里包括很多新手,也许在新手的想法就是在做布局的时候不要用font标签之类的就算是web标准了,这样一来,造成如今网上“div泛滥”,一看源文件,霍,除了div没其他标签了. 这 ...

  8. HTML5--(1)兼容前缀+结构性标签+语义化标签

    一.兼容前缀+兼容写法 兼容前缀 1.HTML5有部分类容兼容到IE9,IE8及以下完全不兼容的内容不再考虑. 2.部分内容需要加兼容前缀 a)     -webkit- 兼容谷歌 b)     -m ...

  9. HTML5 01. 布局、语义化标签、智能化表单、表单元素/标签/属性/事件、多媒体、类操作、自定义属性

    1.知识点 lang = “en”   所用语言是英文 文档结构更简洁 IE8一下不支持h5c3 书写更宽松 div没有语义 标签语义化:在合适的地方使用合适的标签 对seo优化友谊 网页经典布局 页 ...

随机推荐

  1. IDF-CTF-不难不易的js加密 writeup

    题目链接: http://ctf.idf.cn/index.php?g=game&m=article&a=index&id=28 就是这里 → http://ctf.idf.c ...

  2. Waiter.js

    var Waiter = function() {     var dfd = [],         doneArr = [],         failArr = [],         slic ...

  3. [Python3 练习] 010 找出藏在字符串中的“密码”

    题目:找出藏在字符串中的"密码" (1) 描述 1) 题源 1 Python Challenge, level 3 2) 题源 2 小甲鱼老师的 Python 课程,第 20 讲课 ...

  4. [功能集锦] 003 - 一键生成mysql数据字典/数据库速查表

    写在前面: 因为工作时候经常遇到半路接手项目的情况,由于年代久远,数据库字典这块经常缺失.故写此篇,以便复用,也希望对大家有点帮助. 随笔内容不高级,如有不妥,不吝指正. ps:有另一篇详细随笔可以参 ...

  5. php提交表单时如何保留多个空格及换行的文本样式

    需求是:用户提交表单时屏蔽敏感词的功能.其中敏感词来自服务器端同一路径下的ciku.txt,敏感词通过"|"连接,例如"g|c|a",提交表单时替换敏感词,更重 ...

  6. 解决java.net.BindException: Address already in use(Bind failed)端口占用问题

    问题描述: 解决办法: sudo lsof -i:20101ps -ef|grep 9905kill -9 9905ps -ef|grep 9905 ------------------------- ...

  7. python ORM的使用

    安装 >pip install sqlalchemy #coding=utf-8 ''' 原始的sql语句 CREATE TABLE user ( id INTEGER NOT NULL AUT ...

  8. route - 显示 / 操作IP选路表

    总览 SYNOPSIS route [-CFvnee] route [-v] [-A family] add [-net|-host] target [netmask Nm] [gw Gw] [met ...

  9. 如何为nginx配置https(免费证书)

    前言: 给http协议申请ssl免费证书,还是比较主流的一种方式,但是逐渐得一些浏览器不支持自签名的证书了.毕竟这是为了使用者及平台都变得安全的方式,所以无可厚非的,而且也有很多网站即使不使用商业付费 ...

  10. springboot中MongoDB的使用

    转载参考:http://www.ityouknow.com/springboot/2017/05/08/spring-boot-mongodb.html MongoDB 是一个高性能,开源,无模式的文 ...