HTML5

是定义 HTML 标准的最新版本。

  • 是一个新版本的 HTML 语言,具有新的元素,属性,行为,
  • 是一个技术及,允许更多样化和强大的网站和应用程序
  • 优势:
  • 跨平台: 通吃 MAC PC Linux Andriod 各大平台
  • 快速迭代
  • 降低成本
  • 导流入口多
  • 分发效率高
  • 语义化标签

div 无语义化意义,

各大浏览器发现 div 的 id 名重复

于是 HTML5 引入了一系列语义化标签

解决 IE8 不支持语义化标签,导入一个 html5shiv.min.js 文件

必须在 语义化标签 之前导入

  • 意义:

    • 语义化标签更具可读性便于团队开发和维护
    • 没有 CSS 的情况下,页面也能很好地呈现内容结构,代码结构
    • 搜索引擎 能更好的理解页面中各部分间的关系,可以搜索更快,更准确的信息

以下的一系列语义化元素, 都是 块元素

  • <header></header>

    • 无个数的限制
    • 通常包含 h1-h6 或者 hgroup,但是如果 hgroup 或者 h1-h6 自己就能实现好,就不需要用 header
    • 作为整个网页,或者一个内容块的标题
  • <footer></footer>
  • <hgroup></hgroup>

    • 文字网站用的多
    • 包裹 h1-h6
  • <nav></nav>

    • 包裹 多个导航链接
    • 如果元素 固定不动了,就可以直接包裹  nav→a
    • 整个导航条 可以拖动,则须 nav→ul→li→a
  • <section><section>

    • 包含一个较大的整体内容
  • <aside></aside>

    • 包裹 整体内容的附属内容
  • <article></article>

    • 正文内容,或者说主题内容
  • 其他新增标签:

    • <meter value="0.8"></meter> 

      • 电量_最优_警告_过载    用来显示已知范围的标量值或者分数值。
      • <meter value="30" min="20" max="100"></meter>
      • <meter value="30" min="20" max="100" low="40" high="80"></meter>
      • <meter value="90" min="20" max="100" low="40" high="80" optimum="90"></meter>
    • <progress value="50" max="100"></progress>
      • <progress max="100"></progress>    进度条动态滚动,因为进度不确定
    • <datalist></datalist>
      • 会包含一组 option 元素,这些元素表示其表单控件的可选值
      • 它的 id 必须要和 input 中的 list 一致
    • <detail></detail>
      • 列表区域
      • <details open >    <!--open 默认打开-->
        <summary>娘子</summary>
        <p>啊哈</p>
        <p>啊哈</p>
        <p>啊哈</p>
        </details>
    • <ruby>嫑<rt>biao</rt></ruby>
      • 注释标签
    • <mark>高亮文字</mark>
      • 标记标签

HTML5_新标签的更多相关文章

  1. 最新 去掉 Chrome 新标签页的8个缩略图

    chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...

  2. HTML5新标签 w3c

    w3c标准下的HTML5新标签 ,做个归纳总结: H5标签 定义和用法 兼容性 <artical> 规定独立的自包含内容, 支持html中的全局属性, 支持html中的事件属性 IE: 支 ...

  3. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  4. HTML5部分新标签属性及DOM扩展元素

    HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. ...

  5. HTML语义化:HTML5的新标签及IE5.5~9的部分兼容方案

    一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.t ...

  6. 让ie浏览器支持html5新标签的解决方法(使用html5shiv)

    没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...

  7. html5 基本布局+新标签+新选择器 + 线性渐变

    html5 基本布局+新标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  8. html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

    * HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加.   * 拖拽释放(Drag an ...

  9. HTML:模拟链接被按下,在新标签页打开页面,不使用window.open(可能被拦截)

    当按下一个按钮时,想打开一个新的标签页,可以使用window.open去实现但是因为使用window.open在新窗口或者新标签页中打开页面,有可能被浏览器给拦截.为了解决这个问题,可以模拟链接被按下 ...

随机推荐

  1. Quartz.net 3.x使用总结(二)——Db持久化和集群

    上一篇简单介绍了Quartz.net的概念和基本用法,这一篇记录一下Quartz.net通过数据库持久化Trigger和Jobs等数据,并简单配置Quartz.net的集群. 1.JobStore介绍 ...

  2. 为Nexus配置阿里云代理仓库

    Nexus默认远程仓库为https://repo1.maven.org/maven2/ 慢死,还常连不上. 可以添加阿里云代理仓库 URL:http://maven.aliyun.com/nexus/ ...

  3. DirectX11 With Windows SDK--07 添加光照与常用几何模型

    前言 对于3D游戏来说,合理的光照可以让游戏显得更加真实.接下来会介绍光照的各种分量,以及常见的光照模型.除此之外,该项目还用到了多个常量缓冲区,因此还会提及HLSL的常量缓冲区打包规则以及如何设置多 ...

  4. [物理学与PDEs]第1章第2节 预备知识 2.1 Coulomb 定律, 静电场的散度与旋度

    1. Coulomb 定律, 电场强度 (1) 真空中 $P_1$ 处有电荷 $q_1$, $P$ 处有电荷 $q$, ${\bf r}_1=\vec{P_1P}$, 则 $q$ 所受的力为 $$\b ...

  5. EffectiveC++ 第2章 构造/析构/赋值运算

    我根据自己的理解,对原文的精华部分进行了提炼,并在一些难以理解的地方加上了自己的"可能比较准确"的「翻译」. Chapter 2 构造 / 析构 / 赋值 条款 05:了解C++ ...

  6. java8 list统计(求和、最大、最小、平均)

    list.stream().mapToDouble(User::getHeight).sum()//和 list.stream().mapToDouble(User::getHeight).max() ...

  7. dense prediction问题

    dense prediction  理解:标注出图像中每个像素点的对象类别,要求不但给出具体目标的位置,还要描绘物体的边界,如图像分割.语义分割.边缘检测等等. 基于深度学习主要的做法有两种: 基于图 ...

  8. webpack 代码优化压缩方法

    在配置基于webpack的react单页面脚手架时,公共依赖库代码打包至vender.js中,页面逻辑代码打包至app.js中,使用webpack-bundle-analyzer分析发现,两个js中包 ...

  9. input全选和取消全选

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

  10. 解压unzip的用法

    1.把文件解压到当前目录下 [root@instance-q6z0ksfb xmerge_test]# unzip db1.zip 2.把文件解压到指定的目录下,需要用到-d参数. unzip -d ...