XHTML与HTML5的区别及HTML5新语义化标签

最新推荐文章于 2021-07-01 23:05:01 发布

咩有猫腻.

最新推荐文章于 2021-07-01 23:05:01 发布

阅读量245

点赞数

分类专栏： html、css 文章标签： html css css3 html5

本文链接：https://blog.csdn.net/DcTbnk/article/details/104687065

版权

html、css 专栏收录该内容

35 篇文章 2 订阅

订阅专栏

一. HTML5 与 XHTML区别

HTML4.01 -> HTML5( 功能强大 )

XHTML : XML + HTML ( 严格版本的HTML )
发展 XHTML2.0

区别：
    **DOCTYPE文档及编码**
        HTML5 : <!DOCTYPE html>
        XHTML和HTML4.01 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

        HTML5 : <meta charset="UTF-8">
        XHTML和HTML4.01 : <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    **元素大小写** 
        HTML5 和 HTML4.01 : 不区分大小写的，建议都写成小写(规范)
            <div></div> <span></span>
            <DIV></DIV> <SPAN></SPAN>

        XHTML : 要求必须小写。

    **属性布尔值**
        HTML5和 HTML4.01 : 当属性和属性值相同的时候，可以只写一个
            <input type="checkbox" checked>

        XHTML : <input type="checkbox" checked="checked">

    **属性引号**
        HTML5和 HTML4.01 : 属性值是可以不加引号的，但是建议添加（规范）
            <input type=checkbox>

        XHTML : <input type="checkbox">

    **图片的alt属性**
        HTML5和 HTML4.01 : 图片的时候alt属性可加可不加。
            <img src="">
        XHTML : <img src="" alt=""> 
        
    **单标签写法**
        HTML5和 HTML4.01 : 
            <img src="">
            <input type="">
        
        XHTML : 
            <img src="" />
            <input type="" />

    **双标签闭合**
        HTML5和 HTML4.01 : 
            <div>这是一个盒子  (不建议)

        XHTML : 双标签必须成对

            <div>这是一个盒子</div>

二. HTML5新语义化标签 ( 很重要的 )

div span h1 img -> html4.01
width height background -> css2.1
transform border-radius -> css3

header footer main -> html5
注：很多新的HTML5语义化标签，跟div类似。

header : 页眉
footer : 页脚
main : 主体 
    注：header footer main 语义化标签在一个页面中只能出现一次。

hgroup : 标题组合
nav : 导航	
article : 独立的内容
    论坛帖子
    报纸文章
    博客条目
    用户评论
aside : 辅助信息的内容
section : 区域 , 跟div的功能以及语义是一样的

figure : 描述图像或视频
figcaption : 描述图像或视频的标题部分

datalist : 选项列表
    涉及到的语法：list id value ...
    <input type="text" list="elems">
    <datalist id="elems">
        <option value="a"></option>
        <option value="ab"></option>
        <option value="abc"></option>
        <option value="abcd"></option>
        <option value="apple"></option>
        <option value="around"></option>
    </datalist>

details / summary : 文档细节 / 文档标题
    相关语法：open属性
    <details open>
        <summary>HTML</summary>
        <p>超文本标记语言</p>
    </details>

progress / meter : 定义进度条 / 定义度量范围
    <progress min="0" max="100" value="50"></progress>
    <meter min="0" max="100" value="80" low="30" high="70"></meter>

time : 定义日期或时间
    <p>今天是 <time>3月3日</time></p>
    <p>今天是 <time title="2月14日">情人节</time></p>

mark : 带有记号的文本

咩有猫腻.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
XHTML与HTML5的区别及HTML5新语义化标签

一. HTML5 与 XHTML区别HTML4.01 -> HTML5( 功能强大 )XHTML : XML + HTML ( 严格版本的HTML )发展 XHTML2.0区别： **DOCTYPE文档及编码** HTML5 : <!DOCTYPE html> XHTML和HTML4.01 : <!DOCTYPE html P...
复制链接

扫一扫