zoukankan      html  css  js  c++  java
  • 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属性:表示该控件是第几个被访问到的

  • 相关阅读:
    安装lnmp 时如何修改数据库数据存储地址及默认访问地址
    ubuntu 设置root用户密码并实现root用户登录
    解决ubuntu 远程连接问题
    linux 搭建FTP服务器
    PHP 根据ip获取对应的实际地址
    如何发布自己的composer包
    使用composer安装composer包报Your requirements could not be resolved to an installable set of packages
    laravel 框架配置404等异常页面
    使用Xshell登录linux服务器报WARNING! The remote SSH server rejected X11 forwarding request
    IoTSharp 已支持国产松果时序数据库PinusDB
  • 原文地址:https://www.cnblogs.com/hawthornn/p/5427187.html
Copyright © 2011-2022 走看看