• HTML5学习笔记一:与html4的区别(整合)


    一 语法的改变

    1.1 HTML5中标记方法

      1.内容类型(ContentType):扩展符仍为“.html”或".htm",内容类型仍是“text/html”。

      2.DOCTYPE声明:<!DOCTYPE html>(不区分大小写)。

      3.指定字符编码:<meta charset = "UTF-8">

    1.2 元素

      1.2 .1新增的结构元素

      1. section:内容区块,如章节,页眉,页脚,或页面中其他部分,可以和h1~h6等元素结合,标示文档结构。

      2. article :与上下文不相关的独立内容,如博客(报纸)中的一篇文章 ;

      3. aside : 表示article元素的内容之外的,与article元素的内容相关的辅助信息;

      4. header:标题;

      5. hgroup:对标题的组合

      6. footer:脚注;

      7. nav : 导航链接部分

      8. figure:独立的流内容,表示文档流内容中一个独立单元,使用figcaption元素为figure元素添加标题。

      1.2.2 新增的其他元素

      1.vedio:视频,<vedio src="movie.ogg" controls="controls">...</vedio>

      2. audio:音频,<audio src="audio.ogg">...</vedio>

      3. embed:插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3等,<embed src="horse.wav"/>

      4. mark:呈现突出显示或高亮显示的文字,应用:在搜索结果中向用户高亮显示搜索的关键词。<mark>博客园</mark>

       5. progress:运行中的进程,可显示JS中耗费时间的函数进程,<progress value="22" max="100"></progress><meter></meter>

      6. time:日期和时间,<time></time>

      7. ruby:表示ruby注释(中文注音或字符),与rt,rp元素结合使用,例:<ruby>漢 <rt> ㄏㄢˋ </rt></ruby>

      8. wbr:软换行,表示浏览器窗口或父级元素宽度不够时,此处主动换行。

      9. canvas:提供画布,把绘图API展现给客户端JS

      10. command:命令按钮,如单选按钮,复选框或按钮,<command onclick="alert('Hello World')"> Click Me!</command>

       11. details:用于描述文档或文档某个部分的细节。可以和summary元素配合,summary提供标题或图例,标题可见,用户点击时,会显示细节信息。summary是它第一个子元素

          <details>

            <summary>Copyright 2011.</summary>

            <p>All pages and graphics on this web site are the property of W3School.</p>

          </details>

      12. datalist:可选数据的列表,与input元素配合。制作出输入值的下拉列表

            <input list="cars" />
        <datalist id="cars">
            <option value="BMW">
            <option value="Ford">
            <option value="Volvo">
        </datalist>

      13. datagrid:可选数据的列表,以树形列表的形式显示。

      14. keygen:生成密钥,用于表单的密钥对生成器字段

      15. output:不同类型的输出,比如脚本的输出

      16. source:为媒体元素(如<vedio>和<audio>)定义媒介资源

      17. menu:菜单列表,当希望列出表单控件时使用

            <menu>

                <li><input type="checkbox" />red</li>

                <li><input type="checkbox" />blue</li>

            </menu>

      1.2.3 新增的input元素的类型

      HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证

    • email
    • url
    • number
    • range
    • Date pickers (date, month, week, time, datetime, datetime-local)
    • search
    • color

    1.3 属性

      1.3.1 表单相关属性

      1. 可对input(type=text)、select、textarea、button指定autofocus属性;

      2. 可对input(type=text、textarea指定placeholder属性

      3. 可对input、output、select、textarea、button、fieldset元素指定form属性,声明属于那个表单,然后将其放置在页面任何位置而不在表单之内;

      4. 可对input元素(type=text)与textarea指定required属性,提交时进行检查,必须填写;

      5. 为input元素新增的属性:autocomplete、mim、max、multiple、pattern与step

      1.3.2 链接相关属性

      1. 为a和area增加了media属性,规定目标URL是为什么类型的媒介/设备进行优化,只能在href属性存在时使用;

      2. 为area元素增加了hreflang和rel属性,保持与a元素,link元素的一致;

      3. 为link元素增加了新属性sizes,可与icon元素结合使用,制定关联图标(icon)的大小;

      4. 为base元素增加了target属性,主要目标是保持与a元素的一致;

      1.3.3 其他属性

      1.为ol元素增加了属性reversed。指定列表倒序显示;

      2. 为meta元素增加了charset属性,

      3. 为menu元素增加type和label;label为菜单定义一个可见标注,type属性让菜单可以以上下文菜单、工具条与列表菜单的三种形式出现;

      4. 为style增加scoped属性,规定样式的作用范围,比如只对某个树起作用;

      5. 为script元素增加async属性,定义脚本是否异步执行;

      6. 为html元素增加mainfest,开发离线的Web应用程序时它与API结合使用,定义一个URL,在这个URL上描述文档的缓存信息;

      7. 为iframe元素增加三个属性sandbox、seamless、srcdoc,用来提高页面安全性,防止不信任的Web页面执行某些操作;

    另外,html5中还废弃了很多属性;

      1.3.4  全局属性

      所谓全局属性,就是任何元素都可以使用的属性

      1. contentEditable属性:允许用户编辑元素中内容,true或false,inherit; 另外,还有isContentEditable属性,元素可编辑时为true

      2. designMode属性:指定整个页面是否可编辑;该属性只能在js脚本中被编辑修改,有两个值——on和off,例:document.designMode = "on";

      3. hidden属性:布尔值属性;

      4. spellcheck属性:针对input(type=text)和textarea,对用户输入的文本进行拼写和语法检查,布尔值;必须声明属性值;

      5. tabindex属性:表示该控件是第几个被访问到的

  • 相关阅读:
    2017.3.13-afternoon
    2017.3.13-morning
    2017.3.10-afternoon
    2017.3.10-morning
    2017.3.9-afternoon
    2017.3.9-morning
    神经网络入门
    webpack 安装
    git 常用命令
    mysql 用户管理和权限设置
  • 原文地址:https://www.cnblogs.com/hawthornn/p/5427187.html
Copyright © 2020-2023  润新知