HTML5与HTML4的区别-----文档结构

HTML5在结构和语法上做了大量的简化。当然,也提供了语义化的标签

结构上区别:

  1.简化了文档声明语句     HTML5仅规定了一种:       <!DOCTYPE html>

  2.简化了设置字符编码   <meta charset="UTF-8">

    charset 属性是 HTML5 中的新属性,且替换了:<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

语法区别:
  1.省略了一些标签:

    全部省略: html   body  head  tbody

        在实际编码中,不建议省略像 html body head元素。一是习惯上无法接受;二是看着别扭

    省略结束标签:

      li     p    ( dl  dt)      (tr   th   td   thead   tbody   tfoot    table表单)         option

    可以不闭合的空标签:

       br  img  hr   input   link  meta

  2.具有boolean值属性

    checked  selected  disabled

    HTML5中    <input    type="checkbox"  checked >    或者  <input    type="checkbox"  checked="" />   都是ok的

    HTML4        <input    type="checkbox"  checked="true"   />     <input    type="checkbox"  checked="false"  />    后面的赋值不可以省略

  3.省略引号

    <input    type = radio >       语法上是ok的, 在不考虑兼容的情况下。建议带上引号

  4.忽略大小写

    在HTML5中是忽略大小写的       <INPUT  type="Radio">      引擎是可以正确编译的

================完结======================

  (补充上一篇的, 图文混排  HTML5新增了  figure  元素。    功能类似于  dl结构

  figure:     标签规定独立的流内容(图像、图表、照片、代码等等) 

       元素的内容应该与主内容相关,同时元素的位置相对于主内容是独立的。如果被删除,则不应对文档流产生影响。

    <figure>
      <img src="img_pulpit.jpg" tppabs="http://w3schools.com/tags/img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
    </figure>

  figcaption:  为figure元素定义标题

       放在figure元素的第一个或最后一个子元素的位置

  <figure>
    <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">  
    <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
  </figure>

  

  

原文地址:https://www.cnblogs.com/baota/p/8497103.html

时间: 2024-10-12 05:34:20

HTML5与HTML4的区别-----文档结构的相关文章

HTML5移动开发之路(42)——HTML4与HTML5文档结构比较

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(42)--HTML4与HTML5文档结构比较 一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head> </head> <body> <h1>第一章 小强的HTML5移动开发之路</h1> <h2>1.1 HTM

HTML5的文档结构和新的语义元素

学习前端的东西似乎没有什么捷径,就是直接上手撸就完了 本文目标:(熟知) 1.创建基本HTML5文档结构 2.使用新的语义元素来布局页面 下面直接上代码: <!DOCTYPE html> <!-- DOCTYPE简洁声明,强制现代的浏览器使用标准模式 --> <html lang="en"> <!-- 使用lang指定文档语言 --> <head> <meta charset="UTF-8">

HTML5:组织文档结构

文档部分,即body部分,包含了访问者可以看到的内容.传统的HTML文档通常通过div元素来组织文档结构,再配上适当的样式表.但div元素的问题是缺少语义信息,在查看别人的源代码时,必须费点劲才能理解哪个div表示什么,整个页面时怎么搭建起来的,通常需要在HTML页面.样式表和浏览器之间跳来跳去.特别是如果HTML页面的组织结构不好,很容易就会导致困惑.对此,HTML5中新增了许多语义元素,用来替换div元素,并且将语义和呈现分离.所有的语义元素都有一个显著的特点:不真正做任何事,它们在外观上对

HTML5的文档结构

HTML5的文档结构 HTML5简化了许多,它的设计遵循了3个原则:1.兼容性.2.实用性.3.通用访问性     1. header 元素 <header> 标签定义文档或者文档的一部分区域的页眉,又可用于设置文章标题. <header> 元素应该作为介绍内容或者导航链接栏的容器. 在一个文档中,您可以定义多个 <header> 元素. 注释:<header> 标签不能被放在 <footer>.<address> 或者另一个 <

Html5之基础-3 HTML概述、基础语法、文档结构

一.HTML 概述 超文本 (1) Web 是一个超文本文件的集合 (2) 超文本文件是 Web 的基本组成单元,也称为网页或 HTML 文档.Web页等,通常是以.html或.htm为后缀的文件 (3) Web页上之间通过超文本中的超级链接组织在一起 HTML 概述 (1) HTML(HyperText Markup Language):超文本标记语言,一种纯文本类型的语言 - 使用带有尖括号的"标记"将网页中的内容逐一标识出来 (2) 用来设计网页的标记语言 (3) 用该语言编写的

HTML5学习之文档结构和语义(一)

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <!--he

HTML5与HTML4的区别

1.    HTML5推出的理由 解决Web上存在的问题: Web浏览器间的兼容性低:在一个浏览器中可以运行的HTML.Css.Javascript,在另一个浏览器中不能运行. 原因:各浏览器规范不统一,没有被标准化. 解决方案:使各浏览器的功能符合通用标准. 文档结构不够明确:HTML4中元素不能把文档结构表示清楚. 解决方案:增加与结构相关的元素. Web应用程序的功能受到限制:HTMLL4对Web应用程序的贡献很小,比如:不允许同时上传多个文件. 解决方案:提供供Web应用程序使用的API

HTML5与HTML4的区别(2)

HTML5学习笔记之二——HTML5与HTML4的区别(2) _人人IT网 三.新增/废除的属性 1.新增的属性 1).表单相关的属性 对input(type=text),select ,textarea与button元素新增自动获取焦点的autofocus属性.auto 三.新增/废除的属性 1.新增的属性 1).表单相关的属性 对input(type=text),select ,textarea与button元素新增自动获取焦点的autofocus属性.autofocus 可以赋值为 aut

HTML5和HTML4的区别技术博文

HTML5和HTML4的区别:HTML5新标签的用法解释(部分) 1.<audio>标签 <audio>标签定义声音,比如音乐或其他音频流. HTML5: <audio src="someaudio.wav">您的浏览器不支持audio标签.</audio> HTML4: <object type="application/ogg" data="someaudio.wav"><pa