HTML5语义标签

kyrie28
109 阅读2分钟

常用样式

外部样式文件

<link rel="stylesheet" href="./css/style.css">

设置边框圆角

        border-radius: 8px;
        border-radius: 50%;

将元素转为行内块元素

        display: inline-block;

将元素转为行内元素

        display: inline;

将元素转为块元素

        display: block;

语义标签

     <!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">

  <!--  1. 方便浏览器识别；
    2. 优化seo;
    3. 方便屏幕阅读器、盲人阅读器解析、识别页面内容；
    4. 方便团队协作开发-->

        <title>语义标签</title>
     </head>
    <body>
<!-- header：头部标签，页眉，常用来放置一些头部信息或者是导航内容  -->
<header>
    <!-- nav：导航，导航里面常放置一些页面跳转，或者状态切换 -->
    <nav>
        <a href="./ch01-常用样式.html">常用样式</a>
        <a href="./ch01-常用样式.html">常用样式</a>
        <a href="./ch01-常用样式.html">常用样式</a>
    </nav>
</header>
<header>
    <nav>
        <a href="./ch01-常用样式.html">常用样式</a>
        <a href="./ch01-常用样式.html">常用样式</a>
        <a href="./ch01-常用样式.html">常用样式</a>
    </nav>
</header>

<!-- main：主体标签，放置网页主体内容 -->
<main>
    <!-- section：模块标签、主题标签 -->
    <section>
        <h2>个人信息</h2>
        <div>
            名字：伊贰玖<br>
            联系方式：123445555
        </div>
    </section>

    <section>
        <h2>学习科目</h2>
        <div>
            课程名：HTML <br>
            学习时间：9月
        </div>

        <!-- pre：预格式化，会保留页面的文本格式 -->
        <pre>
            文本

            文本
        </pre>

        <div>
            文本

            文本
        </div>
    </section>
</main>


<!-- footer：页脚，常用来放置一些作者相关的信息、或者是友情链接 -->
<footer>
    <a href="https://www.bai.com">跳转百度</a>
</footer>

  </body>
   </html>

  1. 方便浏览器识别；

  2. 优化seo;

  3. 方便屏幕阅读器、盲人阅读器解析、识别页面内容

  4. 方便团队协作开发

  • header：头部标签，页眉，常用来放置一些头部信息或者是导航内容
  • nav：导航，导航里面常放置一些页面跳转，或者状态切换
  • main：主体标签，放置网页主体内容
  • section：模块标签、主题标签
  • pre：预格式化，会保留页面的文本格式
  • footer：页脚，常用来放置一些作者相关的信息、或者是友情链接

小案例-个人介绍

           <!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>作业1-个人介绍</title>
<style>
    body{
        margin: 0;
    }
    .head-box,.main-box,.footer-box{
        width: 800px;
    }
    .head-box{
        text-align: center;
        margin: 20px auto;
    }
    .user-avatar{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: solid 1px gray;
    }
    .user-avatar-fix{
        position: fixed;
        right: 0;
        top: 50%;
        margin-top: -50px;
    }
    .main-box{
        margin: 0 auto 40px;
    }
    .brief-box p{
        text-indent: 2em;
    }
    .brief-box p,.like-box p{
        line-height: 1.6;
    }
    .like-box h2 span{
        font-size: 14px;
        color: red;
        margin-left: 6px;
    }
    .color-green{
        color: green;
    }
    .color-orange{
        color: orange;
    }
    .like-box p{
        color: #6e6e96;
    }
    .border-solid,.border-dashed{
        border-radius: 4px;
    }
    .border-solid{
        border: solid 1px #6e6e96;
        margin-bottom: 20px;
    }
    .border-dashed{
        margin: 2px;
        /* 内边距 */
        padding: 5px;
        /* dashed: 虚线 */
        border: dashed 1px #6e6e96;
    }
    .footer-box{
        font-size: 12px;
        color: #666;
        margin: 0 auto;
    }
    .footer-box a{
        color: blueviolet;
        font-weight: 600;
        font-style: oblique;
    }
</style>
</head>
    <body>
<!-- head 头部 -->
<header class="head-box">
    <img class="user-avatar user-avatar-fix" src="image/user-avatar.jpg" alt="个人头像" title="头像选自《千与千寻》">
    <img class="user-avatar" src="image/user-avatar.jpg" alt="个人头像" title="头像选自《千与千寻》">
    <h1>伊贰玖的个人博客</h1>
</header>
<hr>
<!-- main 主体 -->
<main class="main-box">
    <section class="brief-box">
        <h2>个人简介</h2>
        <p>
            本人是一个<strong>性格开朗、自信，不轻易服输</strong>的人。
            生活中我喜欢与人交往，通过与各种朋友相处，学习到了很多自身缺乏的优点。
            在工作上我有<b>上进心，认真负责，待人真诚，</b>努力学习掌握各类相关专业知识。
        </p>
        <p>
            学习汇总（重点）：昨天学习了<i>HTML5</i>，学习的内容都有网页
            <span class="color-green">基础模板</span>、
            <span class="color-orange">基础标签</span>......
        </p>
    </section>
    <section class="like-box">
        <h2>喜欢的书籍、电影、诗词节选<span>(备注:可以自己试着去研究看看如何设置虚线边框和间隔)</span></h2>
        <div class="border-solid">
            <p class="border-dashed">
                1、选自《千与千寻》：<br>
                “不管前方的路有多苦，只要走的方向正确，不管多么崎岖不平，都比站在原地更接近幸福。”
            </p>
        </div>
        <div class="border-solid">
            <p class="border-dashed">
                2、选自《夏目友人帐》：<br>
                “若结局非你所愿，就在尘埃落定前奋力一搏。”
            </p>
        </div>
    </section>
</main>

<!-- footer 底部 -->
<footer class="footer-box">
    <p>作者：伊贰玖</p>
    <p>资料网址：<a href="https://www.baidu.com/">百度</a></p>
</footer>
</body>
 </html>

行内块元素和定位

     <!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>
    body{
        height: 1000px;
        padding-top: 100px;
    }
    .box{
        width: 200px;
        border: solid 1px #333;
        display: inline-block;

        /* 行内块元素垂直（竖直）对齐，
        top：顶部对齐，middle：居中对齐，bottom：底部对齐 */
        vertical-align: top;
        vertical-align: middle;
        vertical-align: bottom;
    }
    .box1{
        height: 160px;
    }
    .box2{
        height: 100px;
    }

    .box-flaot{
        width: 200px;
        border: solid 1px #333;

        float: left;
    }

    /* 清除浮动 */
    /* 加在浮动盒子的后面 */
    .clear{
        clear: both;
    }

    /* 加在浮动的父级盒子上 */
    .clearFix::after,.clearFix::before{
        content: '';
        display: table;
    }
    .clearFix::after{
        clear: both;
    }

    .box3{
        /* 固定定位，相对网页（窗口）定位 */
        position: fixed;
        /* top: 0;
        left: 0; */

        right: 0;
        bottom: 0;
    }

    .box4{
        /* 相对定位，相对元素自身原本的位置定位 */
        position: relative;
        left: 0;
        top: 0;
    }

    .box5{
        /* 绝对定位，相对与父级盒子 */
        position: absolute;
        top: 0;
        left: 0;
    }

</style>

   </head>
       <body>
<!-- 行内块 -->
<div class="box box1">

</div>
<div class="box box2">

</div>

<!-- 浮动 -->
<div class="clearFix">
    <div class="box-flaot box1">

    </div>
    <div class="box-flaot box2">

    </div>
    <div class="clear"></div>
    
    <div>盒子</div>
    
</div>

<!-- 固定定位 -->
<div class="box3">固定定位</div>

<!-- 相对定位 -->
<div class="box4">相对定位 <div class="box5">绝对定位</div>  </div>

  </body>
        </html>
  • 行内块元素垂直（竖直）对齐

top：顶部对齐，middle：居中对齐，bottom：底部对齐

        vertical-align: top;
        vertical-align: middle;
        vertical-align: bottom;

  • 清除浮动 加在浮动盒子的后面

    .clear{ clear: both; }

  • 加在浮动的父级盒子上

    .clearFix::after,.clearFix::before{
    content: '';
    display: table;
}
.clearFix::after{
    clear: both;
}

  • 固定定位，相对网页（窗口）定位

          position: fixed;

  • 相对定位，相对元素自身原本的位置定位

        position: relative;

  • 绝对定位，相对与父级盒子

        position: absolute;
avatar
文章
阅读
粉丝