Html5基础系列(6)--HTML5与HTML4的区别

1 HTML5的目的

  • 为了解决当前web上存在的各种问题:
    • Web浏览器之间的兼容性很低
    • 文档结构不够明确
    • Web应用程序的功能受到了限制

2 语法的改变

  • 内容类型
    • 扩展名和内容类型依然保持不变,即扩展名依然是.html或者是.htm,内容类型也依然是 text/html
  • DOCTYPE声明
    • HTML5中DOCTYPE的声明变化比较大,在HTML5中,如下声明即可
    <!DOCTYPE html>
    
    而在HTML4中,却要指定具体的版本,如下:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
  • 指定字符编码
    • HTML5中指定编码比较简单,如下:
    <meta charset="UTF-8">
    
    • HTML4中指定编码相对要复杂
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    
  • 可以省略标记的元素
  • 具有boolean值的属性
    如下代码所示,前三个均为True,最后一个不写时表示False
    <input type="checkbox" checked>
    <input type="checkbox" checked="checked">
    <input type="checkbox" checked="">
    <input type="checkbox" >
  • 省略引号
    在HTML5中,属性值是可以省略引号的,如下两行代码效果是完全一样的
    <input type="checkbox" checked=checked>
    <input type="checkbox" checked="checked">

3 新增的元素

  • 新增的结构元素:
section         表示页面当中的一个内容块,比如章节、页眉、页脚等,可以与h1-h6等结合使用,表示文档的结构               
article         表示页面中的一块与上下文不相关的独立内容,如博客中的一篇文章或者报纸中的一篇文章
aside           表示article内容之外的与article相关的辅助信息          
header          表示页面内容中的一个区域块,通常它用来表示标题
hgroup          用于对整个页面或者页面中的标题进行结合            
footer          用于表示页面内容中的一个区域块,通常表示这个区域块的脚部,通常用来承载作者姓名等与作者通讯等相关的内容
nav             表示页面中的导航链接的部分            
figure          表示一段独立的流的内容,一般表示文档主题流中的文档的一个单元
  • 新增的其他元素:
video           用来定义视频,比如电影片段或者视频流                    
audio           用来定义音频,比如音乐或者音频流
embed                       
mark
progress                    
meter
time                        
ruby
rt                          
rp
wbr                         
canvas         表示图形,比如图标或者图形
command                     
details
datalist                    
datagrid
keygen                      
output
source                      
menu
  • 新增的input元素类型:
email           表示email输入的地址                           
url             表示页面输入的url地址
number          表示数字       
range           表示输入框内的一个范围值
DatePickers     关于日历日期时间的

4 废除的元素

  • 能使用CSS替代的元素:
basefont            big             center
font                s               tt
u
  • 不再使用frame框架
  • 只有部分浏览器支持的元素
  • 其他被废除的元素

5 新增的属性

  • 表单相关的属性
  • 链接相关的属性
  • 其他属性

6 废除的属性

废除的属性

7 全局属性

  • contentEditable属性

    主要功能是允许用户编辑元素的内容,所以此元素必须是能获取到鼠标焦点的元素,
    而且在鼠标点击后向用户提供一个插入符号,提示用户该元素允许用户进行编辑,
    此属性时布尔类型,可以被设置为True或者False,True代表可编辑,False代表不可编辑,
    此外此属性还有一个继承状态,如果此属性没有设置True或者False,
    则根据其父元素是否是可编辑来确定其是否可编辑

    如下代码演示了一个可编辑的列表

    <body>
        <h1>可编辑列表</h1>
        <ul contenteditable>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </ul>
    </body>
    
  • designMode属性

    用来指定整个页面是否可编辑,当设置为True时,则整个页面中contentEditable属性设置为true的元素都可以进行编辑,
    此属性值只能在JavaScript脚本中被修改,该属性有两个值,on和off,被指定为on时,页面
    可编辑,被指定为off时则不可编辑,

  • hidden属性

    该属性的功能是通知浏览器不渲染该元素,使该元素处于不可见状态,页面加载之后仍然可以使用JavaScript脚本修改,
    修改后该元素仍然可以处于可见状态,即元素的内容即可以在浏览器中显示,该属性是一个布尔值的类型,
    设置为True时元素处于不可见状态,设置为False时元素处于可见状态,

    如下代码列表不可见了

    <body>
        <h1>可编辑列表</h1>
        <ul hidden>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </ul>
    </body>
    
  • spellcheck属性

    该属性的功能对输入框用户输入的内容进行拼写和语法检查

    如下代码演示了拼写检查

     <body>
         <input type="text" spellcheck="true">
     </body>
    
  • tabindex属性

    当不断敲击tab键,让窗口或页面中的控件获得焦点,对窗口或页面中的所有控件进行遍历,
    每个tabindex表示该控件是第几个被访问到的

    如下代码,通过设置tabindex值可以控制按tab键后跳转的顺序

    <body>
        <input type="text" tabindex="1">
        <input type="text" tabindex="2">
        <input type="text" tabindex="3">
    </body>
    

    在默认情况下,只有连接元素和表单元素可以通过tab键进行切换,如果想对其他元素进行tab切换,就需要增加tabindex属性设置

原文链接

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页