H5添加了几个新标签,带有语义化的标签,像我们的div 和 span 标签,你说他两能干嘛呢, 好像他两什么事都能干。举个例子,你家里的房子,有几个房间,如果不分房间的话,是不是你 今天睡这里,明天睡另外一间房间,后天再睡另外一间房间, 是不是很乱呢?  的确是很乱,像我们的网页,比较复杂的网页,里面全都是用div来搭建,那怎么行呢,是不是有点分不清 这块区域是干嘛的, 那块区域是干嘛的?   所有才有了语义化的标签。 举几个常见的标签, ul li   这货一看,就知道他是列表吧。那么 img标签呢,是不是一看就知道他是用来放图片的。

所以为了更好的划区域,H5 新推出了几个语义化的标签。(他们的本质,就是div,跟div的作用是一样的,只不过看到标签,知道他们是用来干嘛的而已)

header标签,一看就知道,他是头部的意思吧,顾名思义,就是用来划分网页头部的位置的。

<header></header>

看下实例,美团网 就是用header标签来划分的。

nav标签,如果有导航区域,那么用他来划分。

<nav></nav>

article标签,用来划分文章的区域的

<article></article>

像下面这种,一篇文章,用article标签来划分,那是比较好的。

section标签呢,用来划分,一小块一小块区域的。

<section></section>

像下面这种。 一块区域,我们就可以用 section 来划分,

aside标签,侧边栏。

<aside></aside>

像下面这种侧边栏,就可以用aside 标签来划分

footer标签,划分尾部

<footer></footer>

像美团页面的最下面,就是用footer 划分的

没了,这些就是比较常用的语义元素。

H5系列之常用的语义元素的更多相关文章

  1. HTML5 语义元素(二)文本内容

    上一篇介绍的是关于页面结构方面的语义元素,本篇介绍文本内容方面,包含:<bdi>.<details>.<summary>.<mark>.<outp ...

  2. H5系列之History(必知必会)

    H5系列之History(必知必会)   目录 概念 兼容性 属性 方法 H5方法       概念     理解History Api的使用方式 目的是为了解决哪些问题   作用:ajax获取数据时 ...

  3. HTML5 语义元素(一)页面结构

    本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...

  4. HTML5语义元素

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. HTML5 语义元素

    返回目录 http://hovertree.com/h/bjaf/html5zixueji.htm 一个语义元素能够清楚的描述其意义给浏览器和开发者.无语义 元素实例: <div> 和 & ...

  6. 深入理解javascript选择器API系列第一篇——4种元素选择器

    × 目录 [1]id属性 [2]标签名 [3]name属性[4]all 前面的话 说到最常见的DOM应用,恐怕就要数取得特定的某个或某组元素的引用了.DOM定义了许多方式来选取元素,包括getElem ...

  7. 常用HTML标签元素结合及简介

    常用HTML标签元素结合及简介 <html></html> 创建一个HTML文档<head></head> 设置文档标题和其它在网页中不显示的信息< ...

  8. 如何让老式浏览器支持html5新增的语义元素

    html5新增加了一些语义元素,如header, footer, nav, aritcle, aside,等等. 然而,有些老款浏览器无法识别这些元素,会把它们当成 inline 元素对待,这会导致一 ...

  9. Java基础复习笔记系列 五 常用类

    Java基础复习笔记系列之 常用类 1.String类介绍. 首先看类所属的包:java.lang.String类. 再看它的构造方法: 2. String s1 = “hello”: String ...

随机推荐

  1. tomcat 登录主页成功 点击Manager App 401 等问题

    1.将项目部署在tomcat的安装路径webapps下(如果报404,查下该应用是否在tomcat的webapps下部署着) 2.启动tomcat成功,http://127.0.0.1:8080成功, ...

  2. AppWidget使用方法

    手机桌面小组件 public class AppWidget extends AppWidgetProvider { @Override public void onUpdate(Context co ...

  3. instanceof语法解释

    syso+alt+/  快速输出语句的按键.   1.  instanceof java的一个二元操作,和==,>,<,同一类的用法,作用是判断  左边的对象是否是右边的类的实例 ,左边是 ...

  4. 4G DTU的通信距离是多少

    4G是现今应用非常广泛的一种通信技术,主要是为广义的远程信息处理提供服务.随着计算机与各种具有处理功能的智能设备在各领域的日益广泛使用,数据通信的应用范围也日益扩大.在物联网领域中,4G是移动设备实现 ...

  5. Java学习的第四十九天

    1.构造函数 import java.util.Scanner; public class Cjava { public static void main(String[]args) { Time t ...

  6. 调度《Taint(污点) 和 Toleration(容忍)》

    节点亲和性(详见这里),是 pod 的一种属性(偏好或硬性要求),它使 pod 被吸引到一类特定的节点.Taint 则相反,它使 节点 能够 排斥 一类特定的 pod. Taint 和 tolerat ...

  7. 通过一个很常用的场景来展示vue数据驱动的应用

    需求:可以动态增减组合条件来进行数据查询. 界面运行效果如下图所示: 界面第一次加载时,默认会显示一个空的查询条件,如下图所示: 点击"加"图标,可以无限增加查询条件,也可以点击& ...

  8. 水题挑战3: NOIP 2017 宝藏

    参与考古挖掘的小明得到了一份藏宝图,藏宝图上标出了 \(n\) 个深埋在地下的宝藏屋, 也给出了这 \(n\) 个宝藏屋之间可供开发的 \(m\) 条道路和它们的长度. 小明决心亲自前往挖掘所有宝藏屋 ...

  9. 【Jmeter】设置语言为中文

    1.临时设置 Jmeter菜单栏选择Options-Choose Language-Chinese (Simplified) 这种方法,重启软件后又变为英文环境了. 2.永久设置 进入apache-j ...

  10. rclone 云盘同步工具的正确打开方式

    Rclone 是一款的命令行工具,支持在不同对象存储.网盘间同步.上传.下载数据. 官网网址:https://rclone.org/ Github 项目:https://github.com/ncw/ ...