HTML5 响应式

最新推荐文章于 2023-10-17 20:27:27 发布

VIP文章章鱼Cc_yoo

最新推荐文章于 2023-10-17 20:27:27 发布

阅读量400

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/cc200171/article/details/124455807

版权

为什么使用新标签？

为了语义化。

语义化好处：去掉样式能让页面结构清晰呈现

有益于SEO

便与团队开发和维护

一、结构标签

article 定义文章

aside 定义文章的的侧边栏

section 定义文档中的某个区域

nav 定义导航部分

header 头部信息

footer 底部信息

details 定义展开详细内容

figure 定义一组媒体元素及文字

<!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>新的结构标签</title>
</head>
<body>
    <nav>
        <ul>
            <li>105个男人与3个女人的故事</li>
            <li>一群男人的故事</li>
            <li>一群女人与一个男人的故事</li>
            <li>一个和尚的故事</li>
        </ul>
    </nav>
    <article>
        <h1>105个男人与3个女人的故事</h1>
        <aside>
            <ul>
                <li>风雪山神庙</li>
                <li>大郎，该吃药了！</li>
                <li>智取生辰纲</li>
            </ul>
        </aside>
        <section>
            <header>
                林冲，鲁智深，武松，宋江，李逵，戴宗，燕青，柴进
            </header>
            <main>
                有很多段故事
            </main>
            <footer>
                总结
            </footer>
        </section>
    </article>

    <em></em> 
    <strong></strong> 

    <details>
        <p>欲知详情，请见下回分晓！</p>
    </details>
    <figure>
        <img src="img/qq.png" alt="">
        <figcaption>这个是qq</figcaption>
    </figure>
    <!-- H5新标签：标签语义化 -->
    <!-- 为什么，作用，好处？ -->
</body>
</html>

二、表单元素

date 日期

time 时间

url

number

range 输入一定范围内的数字值

属性： placeholder 提示文字

required 定义该input为必填项

<!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>new form</title>
</head>
<body>
    <form action="">
        日期
        <input type="date"> 
        <br>
        时间
        <input type="time">
        <br>
        邮箱
        <!-- required 必须填写 -->
        <input required type="email" name="" id="">
        <br>
        网址

最低0.47元/天解锁文章

章鱼Cc_yoo

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 响应式

为什么使用新标签？为了语义化。语义化好处：去掉样式能让页面结构清晰呈现有益于SEO 便与团队开发和维护一、结构标签article 定义文章aside 定义文章的的侧边栏section 定义文档中的某个区域nav 定义导航部分header 头部信息footer 底部信息details 定义展开详细内容figure 定义一组媒体元素及文字<!DOCTYPE ht...
复制链接

扫一扫