zoukankan      html  css  js  c++  java
  • 谈谈html5新增的元素及其他功能

        相信大家一开始学习web时看到html5就自然想到html,就算也没学过html,就好像听闻过小米2s就自然也熟悉小米3红米。不管是技术还是产品都是站在前辈的肩膀上发展起来的,正因此若是熟悉html,对于html5的学习就相当于在html这个容器里继续扔新的东西进去,哈哈哈,好像废话多了。

         目前,web已经悄然引来html5的时代了,下面揭晓html5成功背后的面纱。

     1.首先,html5语法发生了什么变化?!

       1.1内容类型(祖宗不变)

           扩展名:.html或htm

            文件类型:text/html

       1.2DOCTYPE声明的简化

        从繁琐的声明:<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "HTTP://www.w3.org/TR/xhtmll/DTD/xhtnll-transitional.dtd"> 

    敲完之后我自己都晕了,别怕以后html5不会让你晕了,现在声明只需要这样:

     <!DOCTYPE html>

    更重要的是html5在使用工具时还可以加入SYSTEM识别符

    <!DOCTYPE html SYSTEM"">

      1.3指定编码字符

      不仅可以使用原来的指定方式<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

      还可以使用简化版<meta charset="UTF-8"/>

    2.兼容html的处理

      2.1可省略的标记

         ---不允许写结束标记,</>形式不可以写成<></>(br还可以<br>)

             这样的元素有 area base br col command embed hr img input keygen  link meta param source track                 wbr 

       ---可以省略结束标记:li dt dd p tr optgroup option colgroup thead tbody tfoot tr td th-----建议不要省略,语法没错,但会影响文本的效果。

       ---都省略的有:html head body colgroup tbody

       (colgroup在上面的两项都出现,本人也费解)

     2.2具有布尔值属性---真假问题这里就不码了,可以参考贺春雷《html+css+JavaScript》

     3.新增的元素

       网页设计的分层,之前都是用<div>,设置ID属性指定功能,现在直接用属性值当做一个元素,设置它的功能,道理很简单,既然都可以到达目的地,那何必要选择弯路。

     例如<header>代替<div id="header">

    header--显示头部信息

    article---定义独立内容,常用于用户评语或博客条目

    <div>
    <p>当时间在你的回忆里流逝时...</p>
    
    </div>
    <article style="border:1px solid blue;">
        <p>我们慢慢苏醒</p>
        </article>

    section---节,例如文章的章节、页眉、页脚等,该标记中还新增一个cite属性,引用资源的URL

    nav---导航链接,在一个html中可以有多个nav

    <nav>
            <a href="#">首页 </a>
            <a href="#">图片 </a>
            <a href="#">视频 </a>
            </nav>

     hgroup---适用于多标题文档,对标题进行组合,可以理解hgroup相当一个容器,里面包含有正副标题

    footer---眉脚,页面底部,footer元素内使用address元素

    4.新增的块级语义元素

       aside定义所处的内容之外的内容,但与附近内容有关(注释、引用、提示)

      figure 定义媒介内容

     dialog定义对话框或窗口,带有open属性,跟用户互动

    5.行内语义元素

      mark元素标记,相当于荧光笔在纸上标记文字

      time元素定义时间(24小时制)、日期

     meter元素定义度量衡

     process元素定义运行中的进度

    6.其他新增元素

     video、audio、source、embed、canvas、bdi、command、datalist、details、keygen、output、rp、rt、ruby、track、summary

    暂时写到这里,首次发博不足之处欢迎强烈砸砖~

  • 相关阅读:
    Fanvas是一个把swf转为html5 canvas动画的系统
    截取中文字符防止乱码
    手机号码验证--区号验证--电话号验证--分机号验证--手机号和固定电话二选一--用户名只能为汉字或者英文请--邮箱账号
    laravel5.4学习--laravel基本路由
    laravel5.4学习--laravel目录结构
    laravel5.4学习--laravel安装
    laravel数据迁移
    laravel数据迁移的时候遇到的字符串长度的问题
    TcxLookupComboBox
    Tcxgrid使用例子
  • 原文地址:https://www.cnblogs.com/yflbk-2016/p/5339519.html
Copyright © 2011-2022 走看看