html语义化结构标签

1.HTML页面语义化结构

<h1>-<h6>:划分段落
<header>：页眉
<main>:主体
<aside>:边栏
<section>:展示
<footer>:页脚
<nav>:导航
<div>:通用容器

2.文本元素

<a>标签

href属性可用于链接、文件下载、发邮件、打电话、设置锚点等功能的实现，如下：

描述	举例
`<a href="https://wwww.baidu.com target="_black"">点我百度</a>`	点击链接后打开新窗口页面
`<a href="demo.php" download="php的demo文件">点我下载文件</a>`	下载文件，可预定义文件名称
`<a href="tel:136100*****>点我打电话</a>`	打电话（需要安装打电话插件）
`<a href="mailto:123455@qq.com">点我发邮件</a>`	发邮件（需要安装邮件插件）
`<a href="#top">跳到锚点</a><h1 id="top" style="margin-top: 800px;">我是锚点</h1>`	设置锚点（类似于网页的当中的”回到顶部“功能）

3.列表

无序列表：<ul>
有序列表：<ol>(start=”3”属性表示从”3“开始排序显示)
自定义列表：<dl><dt><dd></dd><dd></dd><dd></dd></dt></dl>

4.示例效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语义化结构-html页面结构</title>
    <style>
        html,
        body,
        header,
        aside,
        main,
        section,
        footer,
        td {
            /* 给元素添加边框 */
            border: 1px solid skyblue;
        }
    </style>
</head>
<body>
    <h1 id="top" style="margin-top: 800px;">我是锚点</h1>
    <!-- 页头header -->
    <header>
        <tr>
            <td>首页</td>
            <td>视频</td>
            <td>手册</td>
            <td>工具</td>
            <td>联系我们</td>
        </tr>
    </header>
    <!-- 主体区main -->
    <!-- 边栏aside -->
    <aside style="border: 1px soild red;">
        <nav>html5</nav>
        <nav>css3</nav>
        <nav>php7</nav>
        <nav>mysql5</nav>
    </aside>
    <main>
        <section>
            <h2></h2>
            <!-- href值为URL，则跳转到地址页面 -->
            <a href="https://www.baidu.com">百度咨询</a>
            <ul>
                <li>我是谁</li>
                <li>我在哪</li>
                <li>我要去哪里</li>
            </ul>
            <button type="submit">提交</button>
        </section>
        <section>
            <h2></h2>
            <!-- href值为文件名，则用来下载文件 -->
            <a href="demo.php" download="php的demo文件">下载文件</a>
            <ol start="4">
                <li>我在学什么</li>
                <li>为什么要学</li>
                <li>学了能干嘛</li>
            </ol>
        </section>
        <section>
            <h2></h2>
            <!-- href值为电话号码，则用来打电话（需要安装打电话插件） -->
            <a href="tel:1361008****">打电话给我</a>
        </section>
        <section>
            <h2></h2>
            <!-- href值为邮件地址，则用来发邮件（需要安装发邮件插件） -->
            <a href="maito:123456@qq.com">给我发邮件</a>
            <form action="1.html" method="get">
                <textarea name="" id="" cols="30" rows="10" required></textarea>
                <button type="submit">提交</button>
            </form>
        </section>
        <!-- 锚点演示 a标签中的href属性值为"#+锚点id名"-->
        <a href="#top">跳到锚点</a>
        <!-- <h1 id="top" style="margin-top: 1000px;">我是锚点</h1> -->
    </main>
    <!-- 页脚footer -->
    <footer style="text-align: center;">
        <tr>
            <td>首页</td>
            <td>备案号：sifsj</td>
            <td>联系我们：1361008****</td>
        </tr>
    </footer>
</body>
</html>

HTML语义化标签总结

HTML语义化结构重新定义了HTML标签，方便了开发中的使用，对网页结构有更明显的理解
标签的不同属性值决定了其不同的功能

批改老师：

天蓬老师

批改状态：合格

老师批语：挺好的

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

0401.教学内容

2020-04-04 09:23:42