html标签的语义化

  • 语义化标签更具有可读性，便于团队的开发和维护
  • 没有css的情况下，网页也能很好的呈现出内容结构和代码结构
  • 关于SEO，搜索引擎更能理解到网页中各部分之间的关系，更准确更快速搜索信息

header标签

  1. 用来定义文档（网页或者是某一个段落）的页眉（头部）
  2. 可能包含一些标题元素，也可能包含其他元素，比如logo、搜索框、作者信息等等
  3. <header> 元素不是分段内容，而是属于独立分块的头部.因此不会往 大纲 中引入新的段落。也就是说，<header> 元素通常用于包含周围部分的标题（h1 至 h6 元素），但这不是必需的。
  4. 完成的网页或者是完整的块（网页的一个独立区域）是头部、内容、 尾部组成的（并不是强制）
  5. 整个页面没有header限制个数，可以使用多个
  6. <header> 元素不能作为 <address>、<footer> 或另一个 <header> 元素的子元素。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>header标签</title>
</head>
<body>
    <div>
        <!--头部区域-->
        <header>
            <h1>你看我像不像logo</h1>
            <nav>
                <a href="###">news</a>
                <a href="###">my</a>
                <a href="###">tiyu</a>
            </nav>
        </header>
        <!--内容区域-->
    </div>
</body>
</html>

 

footer标签

  1. footer标签代表一个网页或者章节内容的底部区域（页脚）
  2. footer通常包含章节的作者，版权数据和文章的其他链接
  3. 其他和header同理，比如不是独立的区域，应该是隶属于一个章节或者是网页
  4. <footer> 元素不能作为 <address>、<header> 或另一个 <footer> 元素的子元素。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>footer</title>
</head>
<body>
    <div>
        <!--头部区域-->
        <header>
            <h1>你看我像不像logo</h1>
            <nav>
                <a href="###">news</a>
                <a href="###">my</a>
                <a href="###">tiyu</a>
            </nav>
        </header>
        <!--内容区域-->

        <!--底部区域-->
        <footer>
            <div>
                <h3>友情链接</h3>
                <a href="###">百度</a>
                <a href="###">阿里巴巴</a>
                <a href="###">阿里妈妈</a>
            </div>
        </footer>
    </div>
</body>
</html>

 

  1. <nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。
  2. 导航部分的常见示例是菜单，目录和索引
  3. 并不是所有的导航都需要用nav标签，只是当前页面中比较重要的热门的可以使用nav，比如在底部导航，就没有必要加入链接
  4. 一个网页可能会有多个导航，比如整个网页的导航，也可以是某一块区域的导航

注意 nav使用有两种方法：

  1. 当nav中的导航列表是静态的：nav中直接嵌套a标签使用即可

  2. 当nav中的导航是动态的（需要滑动查看更多，主要出现在移动端）：nav中最好嵌套ul>li>a标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nav标签</title>
</head>
<body>
    <div>
        <!--头部区域-->
        <header>
            <h1>你看我像不像logo</h1>
            <nav>
                <a href="###">news</a>
                <a href="###">my</a>
                <a href="###">tiyu</a>
                <a href="###">tiyu</a>
                <a href="###">tiyu</a>
                <a href="###">tiyu</a>
            </nav>
            <!--
            <nav>
                <ul>
                    <li><a href="###">news</a></li>
                    <li><a href="###">news</a></li>
                    <li><a href="###">news</a></li>
                    <li><a href="###">news</a></li>
                    <li><a href="###">news</a></li>
                    <li><a href="###">news</a></li>
                    <li><a href="###">news</a></li>
                    <li><a href="###">news</a></li>
                    <li><a href="###">news</a></li>
                </ul>
            </nav>-->
        </header>
        <!--内容区域-->

        <!--底部区域-->
        <footer>
            <div>
                <h3>友情链接</h3>
                <a href="###">百度</a>
                <a href="###">阿里巴巴</a>
                <a href="###">阿里妈妈</a>
            </div>
        </footer>
    </div>


</body>
</html>

 

section标签

  1. section是html中一个独立的区域（主要针对网页分块），没有其他语义，一般会包含一个独立的标题
  2. 假设有一个效果，上边是nav导航栏，导航栏一般对对应一个区域，用来显示这个导航到的内容，这个区域我们就可以使用section
  3. section主要是对网页进行分块，也可以对网页中的某块内容进行分块
  4. 通常一个完整的section是有标题和内容组成的，不推荐给没有标题的区域设置section
  5. 如果想要给一个内容设置有个容器用来书写样式，那么还是推荐使用div
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>section标签</title>
</head>
<body>
    <div>
        <!--头部区域-->
        <header>
            <h1>你看我像不像logo</h1>
            <nav>
                <a href="###">news</a>
                <a href="###">my</a>
                <a href="###">tiyu</a>
                <a href="###">tiyu</a>
                <a href="###">tiyu</a>
                <a href="###">tiyu</a>
            </nav>
        </header>
        <!--内容区域-->
        <section>
            <h2>我是section元素的头部啊啊啊啊啊</h2>

        </section>
        <!--底部区域-->
        <footer>
            <div>
                <h3>友情链接</h3>
                <a href="###">百度</a>
                <a href="###">阿里巴巴</a>
                <a href="###">阿里妈妈</a>
            </div>
        </footer>
    </div>
</body>
</html>

 

article标签

  1. 代表文档、页面、或程序中，可以独立的完整的被外部引用的内容
  2. 比如一篇博客、一篇文章、一段用户的评论、一个日历插件，或者是其他独立内容
  3. 一般来说 一个article也有自己的头部header，或者是footer
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>article</title>
</head>
<body>
    <div>
        <!--头部区域-->
        <header>
            <h1>你看我像不像logo</h1>
            <nav>
                <a href="###">news</a>
                <a href="###">my</a>
                <a href="###">tiyu</a>
                <a href="###">tiyu</a>
                <a href="###">tiyu</a>
                <a href="###">tiyu</a>
            </nav>
        </header>
        <!--内容区域-->
        <section>
            <h2>这里是评论区域</h2>
            <article>
                <h3>评论人：张三</h3>
                <p>今天天气真好</p>
            </article>
            <article>
                <h3>评论人：李四</h3>
                <p>今天天气真好</p>
            </article>
            <article>
                <h3>评论人：王五</h3>
                <p>今天天气真好</p>
            </article>
        </section>
        <!--底部区域-->
        <footer>
            <div>
                <h3>友情链接</h3>
                <a href="###">百度</a>
                <a href="###">阿里巴巴</a>
                <a href="###">阿里妈妈</a>
            </div>
        </footer>
    </div>

</body>
</html>Copy to clipboardErrorCopied

 

div、article和section

  • article和section

    1. article元素可以看做是特殊的section，但是强调独立性比section更强
    2. section主要强调分段分块，article是强调很强的独立性
    3. 原则上来说能用article的时候，也可以使用section，但是假设用article更合适，请使用article

  • div、article和section

    1. div、section、article语义依次递增
    2. div没有任何的语义，仅仅是用作样式，可以用在任何场景，但是我们容易看不清上下文关系
    3. 对于主题性的区域，我们可以使用section
    4. 加入这个区域可以脱离上下文，作为完整独立的内容存在，使用article

aside元素

  1. 表示一个和其余页面内容几乎无关的区域
  2. 被认为是独立于内容的一部分，并且可以拆出来而不会使整体收到影响，通常表现为侧边栏
  3. 这个里边的内容和其他元素内容关联性不强
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>aside元素</title>
</head>
<body>
    <div>
        <!--头部区域-->
        <header>
            <h1>你看我像不像logo</h1>
            <nav>
                <a href="###">news</a>
                <a href="###">my</a>
                <a href="###">tiyu</a>
                <a href="###">tiyu</a>
                <a href="###">tiyu</a>
                <a href="###">tiyu</a>
            </nav>
        </header>
        <!--内容区域-->

        <div>
            <!-- 主题区域-->
            <section>
                <h2>这里是评论区域</h2>
                <article>
                    <h3>评论人：张三</h3>
                    <p>今天天气真好</p>
                </article>
                <article>
                    <h3>评论人：李四</h3>
                    <p>今天天气真好</p>
                </article>
                <article>
                    <h3>评论人：王五</h3>
                    <p>今天天气真好</p>
                </article>
            </section>
            <!--侧边栏-->
            <aside>
                我是侧边栏内容
            </aside>
        </div>

        <!--底部区域-->
        <footer>
            <div>
                <h3>友情链接</h3>
                <a href="###">百度</a>
                <a href="###">阿里巴巴</a>
                <a href="###">阿里妈妈</a>
            </div>
        </footer>
    </div>

</body>
</html>Copy to clipboardErrorCopied

 

figure元素

  1. 代表一块独立的内容，是一个独立的引用单元
  2. 这个标签在主文中用来引用 图片、插画、表格、代码段等等信息
  3. 一般会在figure元素中插入figcaption元素（标题元素），将figcaption代表的标题与figure内容相关联
  4. 如果是单独一张图片 或者 单独的表格等等，那么直接使用相应的标签即可，如果存在图片和标题，那么请使用figure标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>figure</title>
</head>
<body>
    <figure>
        <figcaption>海贼王的图片</figcaption>
        <img src="../images/05.jpg" alt="" width="300">
    </figure>
</body>
</html>

 

mark元素

  1. 为引用的内容进行标记或突出显示文本，用来表示和上下文之间的关联性
  2. 突出显示的文本通常可能和用户当前的活动等有一定的关联性
  3. 比如，用户搜索的时候，它可以显示搜索之后的关键字
  4. 不要把mark和 em、strong进行混淆。em、strong都是表示文本在上下文的重要性，而mark只是为了表示关联性
  5. mark标签是行内标签，默认黄色背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mark元素</title>
</head>
<body>
    <input type="text" value="下雨">
    <p>今天晚上可能会<mark>下雨</mark>，明天中秋节晴朗</p>
</body>
</html>

 

time元素

  1. 用来表示24小时制 或者是 一个公历时间
  2. 作用：以机器可读的格式去表示日期和时间，安排日程表的应用就可以使用这个time标签
  3. 通用时间格式 XXXX-XX-XX XXXXXX
  4. 两种用法：
    1. time标签直接包含时间
    2. 使用datetime属性来表示时间
<!--内容区域-->
    <div>
        <!-- 主题区域-->
        <section>
            <h2>这里是评论区域</h2>
            <article>
                <h3>评论人：张三</h3>
                <p>今天天气真好</p>
                <p><time>2019-9-12 19:00:00</time></p>
            </article>
            <article>
                <h3>评论人：李四</h3>
                <p>今天天气真好</p>
                <p><time datetime="2019-9-12 18:00:00">一小时之前</time></p>
            </article>
            <article>
                <h3>评论人：王五</h3>
                <p>今天天气真好</p>
            </article>
        </section>
        <!--侧边栏-->
        <aside>
            我是侧边栏内容
        </aside>
    </div>Copy to clipboardErrorCopied

 

datalist 元素

  1. 包含了一组option元素，代表是列表可选的值
  2. 和input进行相关联，用来配套使用
  3. input中的list属性 == datalist的id属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>datalist元素</title>
</head>
<body>
    <input list="city" type="text">
    <datalist id="city">
        <option value="河南">河南</option>
        <option value="河北">河北</option>
        <option value="湖北">湖北</option>
        <option value="湖南">湖南</option>
        <option value="胡建">胡建</option>
    </datalist>
</body>
</html>

 

progress元素

  1. 主要用来显示一项任务的完成程度
  2. 规范没有规定默认的样式，所以各个浏览器默认的样式不一定相同
  3. 属性:
    1. value：是当前进度的值
    2. max：是总进度的长度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>progress元素</title>
</head>
<body>
    <progress max="100" value="80"></progress>
</body>
</html>

 

版权声明：本文为z-bky原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/z-bky/p/17030051.html