1.html5的优点:

①对人友好,更加语义化,更直观,增加了代码的可读性。

②对计算机友好,浏览器更容易解析,搜索引擎更容易抓取文档内容。

③代码更加的简洁。

2.新增的布局标签:

Article:定义一个独立内容区块,一篇文章,一个视频等;

Section:定义一个区域,如文章的章节等;

Header/footer:定义一个头部/尾部;

Aside:定义侧边栏;

Nav:定义目录导航;

Hgroup:标题分组,通常放在header里面;

Address:地址,联系信息等;里面的内容回以斜体显示;

Figure:对其他媒体元素进行组合,比如图像、图表等。

Figcaption:用来给figure定义标题;

Time:

①Time元素代表24小时中某个时刻或某个日期,表示时刻时允许带时差。它可以定义很多格式的日期和时间。

②Datetime属性中日期和时间要用T分割,T表示时间。时间加上Z表示给机器编码时使用utc标准时间,表示向机器编码另一地区时间,如果是编码本地时间,则不需要添加时差。

③Pubdate属性是个可选标签,加上他搜索引擎可以很方便识别出那个日期是文章、新闻的发表日期。

3.移动端实例:

①Name=”viewport” 屏幕设定

②Maximum-scale=1.0,minimum-scale=1.0;initial-sacle=1.0 最大最小缩放比例为1(其实就是不允许带年纪缩放)

③User-scalable=0,width=devive-width 设定内容和设备的屏幕等宽、等高

④Overflow:auto 内容超出父元素容器后自动加滚动条

⑤Text-decoration:none 给a标签去掉下划线

⑥List-style-type:none 把列表前面的点去掉

⑦Display:inline 在同一行显示

⑧Font-size:10pt 设置字体大小

2.html5新布局元素的更多相关文章

  1. 【HTML5】HTML5新布局元素

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. HTML5结构元素

    前面的话 几年前,用于网页布局的一般都用div元素,但语义化并不好.HTML5引入了大量新的块级元素来帮助提升网页的语义,使页面具有逻辑性的结构.容易维护,并且对数据挖掘服务更加友好.本文将详细介绍H ...

  3. 三天学会HTML5 ——多媒体元素的使用

    目录 1. HTML5 Media-Video 2. HTML5 Media-Audio 3. 拖拽操作 4. 获取位置信息 5. 使用Google 地图获取位置信息 多媒体是互联网中的最重要的一部分 ...

  4. 【转】HTML5新增元素兼容旧浏览器方法

    ref:http://www.jb51.net/html5/163906.html 问题:如何让IE8-兼容这些标签?(需要设计JS中的DOM) 代码如下: <span style=" ...

  5. HTML5 语义元素、迁移、样式指南和代码约定

    语义元素是拥有语义的元素. 什么是语义元素? 语义元素清楚地向浏览器和开发者描述其意义. 非语义元素的例子:<div> 和 <span> - 无法提供关于其内容的信息. 语义元 ...

  6. HTML5部分元素

    Document HTML4文档声明 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &qu ...

  7. HTML5 template元素

    前言 转自http://www.zhangxinxu.com/wordpress/2014/07/hello-html5-template-tag/ 在单页面应用,我们对页面的无刷新有了更高的要求,H ...

  8. WebVTT 及 HTML5 <track> 元素简介

    https://dev.opera.com/articles/zh-cn/an-introduction-to-webvtt-and-track/ 简介 网络视频文本轨道,简称为 WebVTT, 是一 ...

  9. HTML5语义元素总结

    HTML5语义元素 语义=意义 语义元素=元素的意义   什么事语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者. 无语义 元素实例:div.span.无需考虑内容. 语义 元素实例:fo ...

随机推荐

  1. Leetcode之回溯法专题-216. 组合总和 III(Combination Sum III)

    Leetcode之回溯法专题-216. 组合总和 III(Combination Sum III) 同类题目: Leetcode之回溯法专题-39. 组合总数(Combination Sum) Lee ...

  2. C# - AutoMapper之不同类型的转换

    一.Dto & Model约定 class TestDto { public string Name { get; set; } public int Age { get; set; } pu ...

  3. JS核心之DOM操作 下

    目录: 1.节点类型之Document类型 2.节点类型之Element类型 3.节点类型之Text类型 4.综合小示例 -- 动态添加外部样式文件 5.查找元素的扩展方法 接上篇,我们先来看常用的三 ...

  4. 通过PHP与Python代码对比浅析语法差异

    一.背景 人工智能这几年一直都比较火,笔者一直想去学习一番:因为一直是从事PHP开发工作,对于Python接触并不算多,总是在关键时候面临着基础不牢,地动山摇的尴尬,比如在遇到稍微深入些的问题时候就容 ...

  5. [python] - 读取文件内容,并输出

    1.读取文件,并逐行输出内容,代码如下: # coding=gbk import os path = 'E:\python_practice' os.chdir(path) fname = raw_i ...

  6. [Error]syntaxerror: non-ascii character '/xd6' in file

    eclipse代码运行时显示:syntaxerror: non-ascii character '/xd6' in file 原因:如果文件里有非ASCII字符,需要在第一行或第二行指定编码声明. 解 ...

  7. CodeForces 809B Glad to see you!

    Glad to see you! 题解: 交互题一般都是需要用二分去完成. 在二分时候每次检查左边和右边哪边会和答案更近, 然后在更近的那段新区间去重复检查, 知道区间长度为1. 在检查的时候,可以使 ...

  8. Atcode B - Colorful Hats(思维)

    题目链接:http://agc016.contest.atcoder.jp/tasks/agc016_b 题解:挺有意思的题目主要还是模拟出最多有几种不可能的情况,要知道ai的差距不能超过1这个想想就 ...

  9. virtualbox下最小化安装centos7后上网设置

    在虚拟机中以最小化方式安装centos7,后无法上网,因为centos7默认网卡未激活. 可以设置 文件 /etc/sysconfig/network-scripts/ifcfg-enp0s3 将 O ...

  10. 一道算法问题:一幢 200 层的大楼,给你两个鸡蛋. 如果在第 n 层扔下鸡蛋,鸡蛋不碎,那么从前 n-1 层扔鸡蛋都不碎. 这两只鸡蛋一模一样,不碎的话可以扔无数次. 已知鸡蛋在0层扔不会碎. 提出一个策略, 要保证能测出鸡蛋恰好会碎的楼层, 并使此策略在最坏情况下所扔次数最少.

    今晚要参加网易的笔试,所以一直在刷题,刷到这个题的时候觉得自己的思路很模糊,就去网上百度了一下,找到一个大神给的解决方案: 如下: (http://ppwwyyxx.com/2013/Problem- ...