2.html5新布局元素
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新布局元素的更多相关文章
- 【HTML5】HTML5新布局元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5结构元素
前面的话 几年前,用于网页布局的一般都用div元素,但语义化并不好.HTML5引入了大量新的块级元素来帮助提升网页的语义,使页面具有逻辑性的结构.容易维护,并且对数据挖掘服务更加友好.本文将详细介绍H ...
- 三天学会HTML5 ——多媒体元素的使用
目录 1. HTML5 Media-Video 2. HTML5 Media-Audio 3. 拖拽操作 4. 获取位置信息 5. 使用Google 地图获取位置信息 多媒体是互联网中的最重要的一部分 ...
- 【转】HTML5新增元素兼容旧浏览器方法
ref:http://www.jb51.net/html5/163906.html 问题:如何让IE8-兼容这些标签?(需要设计JS中的DOM) 代码如下: <span style=" ...
- HTML5 语义元素、迁移、样式指南和代码约定
语义元素是拥有语义的元素. 什么是语义元素? 语义元素清楚地向浏览器和开发者描述其意义. 非语义元素的例子:<div> 和 <span> - 无法提供关于其内容的信息. 语义元 ...
- HTML5部分元素
Document HTML4文档声明 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &qu ...
- HTML5 template元素
前言 转自http://www.zhangxinxu.com/wordpress/2014/07/hello-html5-template-tag/ 在单页面应用,我们对页面的无刷新有了更高的要求,H ...
- WebVTT 及 HTML5 <track> 元素简介
https://dev.opera.com/articles/zh-cn/an-introduction-to-webvtt-and-track/ 简介 网络视频文本轨道,简称为 WebVTT, 是一 ...
- HTML5语义元素总结
HTML5语义元素 语义=意义 语义元素=元素的意义 什么事语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者. 无语义 元素实例:div.span.无需考虑内容. 语义 元素实例:fo ...
随机推荐
- Codeforces 976C
题意略. 思路:由于题中只要让我们找出嵌套的段就行了,那么我们只需要排序一下就好了. 排序方式:按左端由小到大排,左端一样的时候,右端小的排在前. 如果你担心1会因为2的阻隔而不能嵌套3的话,那么2可 ...
- Leetcode之回溯法专题-47. 全排列 II(Permutations II)
Leetcode之回溯法专题-47. 全排列 II(Permutations II) 给定一个可包含重复数字的序列,返回所有不重复的全排列. 示例: 输入: [1,1,2] 输出: [ [1,1,2] ...
- [Python] Django框架入门5——静态文件、中间件、上传图片和分页
说明: 本文主要描述Django其他的内容,涉及静态文件处理.中间件.上传文件.分页等. 开发环境:win10.Python3.5.Django1.10. 一.静态文件处理 在Django项目的静态文 ...
- python控制窗口对角线运动
import win32con import win32gui import time while True: time.sleep(1) notepad = win32gui.FindWindow( ...
- HZNU Training 2 for Zhejiang Provincial Collegiate Programming Contest 2019
赛后总结: T:今天下午参加了答辩比赛,没有给予队友很大的帮助.远程做题的时候发现队友在H上遇到了挫折,然后我就和她们说我看H吧,她们就开始做了另外两道题.今天一人一道题.最后我们在研究一道dp的时候 ...
- poj 1177 Picture(线段树周长并)
题目链接:http://poj.org/problem?id=1177 题意:给你n个矩形问你重叠后外边缘总共多长. 周长并与面积并很像只不过是处理的时候是 增加的周长=abs(上一次的线段的长度 ...
- Pytorch读取,加载图像数据(一)
在学习Pytorch的时候,先学会如何正确创建或者加载数据,至关重要. 有了数据,很多函数,操作的效果就变得很直观. 本文主要用其他库读取图像文件(学会这个,你就可以在之后的学习中,将一些效果直观化) ...
- Linux命令分类
系统信息arch 显示机器的处理器架构(1)uname -m 显示机器的处理器架构(2)uname -r 显示正在使用的内核版本dmidecode -q 显示硬件系统部件 - (SMBIOS / DM ...
- buuctf 随便注 writeup
1.0 打开页面 显然这个题的考点是注入,那我们来测一下 2.0 sql注入测试 1 2 输入 1' 后发现没有回显,改为 1' --+ 后,有回显,应该在这存在注入点 试一下 1' and 1=1 ...
- Java开发必备工具 ------------工欲善其事,必先利其器
java企业级开发基本工具 一.开发必备工具 1.Java开发环境 JDK (官网下载即可,需要注册账户) JRE 2.Java企业编码开发工具 IntelliJ IDEA(建议使用Idea,插件使用 ...