html5新语义化标签

九阈

已于 2022-04-24 15:52:55 修改

阅读量1.2k

点赞数

分类专栏： # CSS 文章标签： css

于 2021-08-16 16:40:52 首次发布

本文链接：https://blog.csdn.net/weixin_46048542/article/details/119734384

版权

CSS 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

HTML5的浏览器兼容

支持Html5的浏览器包括Firefox (火狐浏览器) , IE9及其更高版本，Chrome (谷歌浏览器)，Safari, Opera等; 国内的遨游浏览器(Maxthon) ，以及基于IE或Chromium (Chrome的工程版或称实验版)所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

常用的五大浏览器有: IE, chrome,firefox,safari,opera

内容类型(ContentType)

HTML5的文件扩展符与内容类型保持不变,仍然为".html" 或" .htm"。

DOCTYPE声明

不区分大小写

指定字符集编码

meta charset=“UTF-8”

可省略标记的元素

不允许写结束标记的元素: br、col、 embed、 hr、img、 input、link、meta
可以省略结束标记的元素: li、dt、dd、p、 option、colgroup、thead、 tbody、tfoot、 tr、td、 th
可以省略全部标记的元素: html、head、 body、colgroup、 tbody

省略引号

属性值可以使用双引号，也可以使用单引号。

HTML5新增语义化标签

section元素表示页面中的一个内容区块

article元素表示一块与上下文无关的独立的内容

aside元素在article之外的，与article内容相关的辅助信息

header元素表示页面中一个内容区块或整个页面的标题

footer元素表示页面中一个内容区块或整个页面的脚注

nav元素表示页面中导航链接部分

figure元素表示一段独立的流内容,使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)main元素表示页面中的主要的内容(ie不兼容)
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        header,footer{
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: orange;
        }
        section{
            height: calc(100% - 100px);
        }
        nav,aside{
            width: 100px;
            height: 100%;
            background-color: #ccc;
            float: left;
        }
        main{
            float: left;
            width: calc(100% - 200px);
            background-color: white;
            height: 100%;
        }
        aside_p{
            font-size: 12px;
            color: white;
        }
        main .article1{
            height: 60%;
        }
        main .article2{
            height: 40%;
        }
    </style>
</head>
<body>
    <header>header</header>
    <section>
        <nav>
            <figure>nav</figure>
            <ul>
                <li>111</li>
                <li>222</li>
                <li>333</li>
                <li>444</li>
            </ul>
        </nav>
        <main>
            <article class="article1">
                <header>article-header</header>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab quod id, nulla tempora expedita animi eum eius, quia sint eos, quisquam dolores dignissimos modi aliquam commodi? Enim eligendi eos earum?</p>
                <footer>article-footer</footer>
            </article>
            <article class="article2">
                <header>article-header</header>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab quod id, nulla tempora expedita animi eum eius, quia sint eos, quisquam dolores dignissimos modi aliquam commodi? Enim eligendi eos earum?</p>
                <footer>article-footer</footer>
            </article>
        </main>
        <aside>
            <figure>aside</figure>
            <p class="aside_p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos amet magni nisi reprehenderit quis quisquam. At nesciunt tempore architecto possimus amet voluptates itaque libero placeat quibusdam perferendis, praesentium consectetur alias.</p>
        </aside>
    </section>
    <footer>footer</footer>
</body>
</html>

请添加图片描述

H5新增音频标签

请添加图片描述

H5新增视频标签

请添加图片描述

link标签最常见的用途是链接样式表

<html>
<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>
<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样！</p>
</body>
</html>

header页眉
footer页脚
main主体
hgroup标题组合
nav导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <hgroup>
            <h1>主标题</h1>
            <h2>副标题</h2>
        </hgroup>
        <nav>
            <ul>
                <li>首页</li>
                <li>论坛</li>
                <li>关于</li>
            </ul>
        </nav>
    </header>
    <main></main>
    <footer></footer>
</body>
</html>

在这里插入图片描述
注：header和main和footer在一个网页中只能出现一次
article独立的内容
aside辅助信息的内容
section区域
figure描述图像或视频
figcaption描述图像或视频的标题部分

<main>
        <article>
            <section>
                <ul>
                    <figure>
                        <img src="https://pic3.iqiyipic.com/image/20171009/64/c9/a_100104281_m_601_m1_260_360.jpg?caplist=jpg,webp,avif" alt="干物妹！小埋第2季 ">
                        <figcaption>干物妹！小埋第2季 2017</figcaption>
                    </figure>
                </ul>
            </section>
        </article>
    </main>

在这里插入图片描述
datalist选项列表
details/summary文档细节/文档标题
progress/meter定义进度条/定义度量范围
time定义日期或时间
mark带有记号的文本

 <main>
        <input type="text" list="elems">
        <datalist id="elems">
            <option value="围棋少年"></option>
            <option value="超智能足球"></option>
            <option value="干物妹！小埋"></option>
        </datalist>
        <details open>
            <summary>HTML</summary>
        </details>
        <progress min="0" max="10" value="8"></progress><br>
        <meter min="0" max="100" value="80" ></meter>
        <p>
            今天是<time title="2-14">情人节</time>，街上人很多
        </p>
        <p>
            今天是<mark>情人节</mark>，街上人很多
        </p>
    </main>

在这里插入图片描述

H5新增标签

Type= "color” 生成一个颜色选择的表单

Type= "tel” 唤起拨号盘表单

Type= "search” 产生一个搜索意义的表单

Type= "range” 产生一个滑动条表单

Type= "number” 产生一个数值表单

Type= "email" 限制用户必须输入email类型

Type= "url" 限制用户必须输入url类型

Type= "date" 限制用户必须输入日期
Type= "month” 限制用户必须输入月类型
Type= "week" 限制用户必须输入周类型

Type= "time” 限制用户必须输入时间类型
Type= "datetime-local" 选取本地时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <div>
            颜色选择：<input type="color" name="color">
        </div>
        <div>
            邮箱：<input type="email" name="myemail">
        </div>
        <div>
            url地址(完整地址): <input type="url">
        </div>
        <div>
            电话号码:<input type="tel">
        </div>
        <div>
            滑块效果:
            <input type="range" name="range" min="100px" max="200px">
        </div>
        <div>
            数字类型<input type="number"><br>
            数字类型<input type="number" name="age" min="0" max="10" value="4" step="2">
        </div>
        <div>
            搜索:<input type="search">
        </div>
        <div>
            日期选择:<input type="date"><br>
            月份选择:<input type="month"><br>
            周数选择:<input type="week"><br>
            <input type="datetime-local" name="" id="">
        </div>
        <input type="submit">
    </form>
</body>
</html>

请添加图片描述

九阈

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
html5新语义化标签

link标签最常见的用途是链接样式表。<html><head><link rel="stylesheet" type="text/css" href="/html/csstest1.css" ></head><body><h1>我通过外部样式表进行格式化。</h1><p>我也一样！</p></body></html>header页眉footer页脚ma
复制链接

扫一扫