语义化标签

标签	描述
`<header>`	定义了文档的头部区域
`<footer>`	定义了文档的尾部区域
`<nav>`	定义文档的导航
`<section>`	定义文档中的节
`<article>`	定义文章
`<aside>`	定义页面以外的内容
`<details>`	定义用户可以看到或者隐藏的额外细节
`<summary>`	标签包含details元素的标题
`<dialog>`	定义对话框
`<figure>`	定义自包含内容
`<main>`	定义文档主内容
`<mark>`	定义文档的主内容
`<time>`	定义日期/时间

新语义化标签的作用

去掉或样式丢失的时候能让页面呈现清晰的结构
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页
有利于SEO
便于团队开发和维护，遵循W3C标准，可以减少差异化
vscode快捷键： alt+shift+下(向下复制一行）

行内元素与块及元素

什么是行内元素?

一个行内元素只占据它对应标签的边框所包含的空间

什么是块及元素

块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。

行内元素和块及元素的区别

默认情况下，行内元素不会以新的一行开始，而块及元素会新起一行
块及元素可以设置width,height属性，注意：块及元素即使设置了宽度，仍然独占一行
块及元素可以设置margin和padding
- 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right都产生边距
- 行内元素的垂直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果也就是水平方向有效，垂直方向无效
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素
设置居中
- 行内元素想要设置水平居中，只需要text-align属性即可。这里设置的text-align是设置在外层的div当中，因为行内元素设置宽高是无效的，所以我们需要的居中其实是将块级元素当中的行内元素居中。
```
div{ text-align:center /*div当中的行内元素均会水平居中*/ }
```
- 块级元素想要设置水平居中，需要设置宽度为父容器宽度才能居中。
```
margin:0 auto; width:500px; /*块级元素父容器的宽度*/
```
- 行内元素想要设置垂直居中，需要设置宽度为父容器宽度才能居中。
```
height:30px; line-height:30px
```
- 块级元素想要设置垂直居中，要先设置外层div的宽度，然后设置内层块级元素的样式
```
margin:0 auto;
height:30px;
line-height：30px;
```

常见的行内元素和块级元素

1、常见的行内元素

<span> <a> <lable> <strong> <b> <small> <abbr> <button> <input> <textarea> <select> <code> <img> <br> <q> <i> <cite> <var> <kbd> <sub> <bdo>

2、常见的块级元素

<div> <p> <li> <h1> <h2> <h3> <h4> <h5> <h6> <form> <header> <hr> <ol> <address> <article> <aside> <audio> <canvas> <dd> <dl> <fieldset> <section> <ul> <video>

超链接`<a>`标签

语法

<a href=""></a>

作用：

跳转外部页面
跳转内部锚点
跳转邮箱/电话

跳转页面

  <div class="container">
    <!-- _blank : 在新窗口打开链接文档 -->
    <a href="https://www.bilibili.com/index.html" target="_blank">哔哩哔哩</a>
    <!-- _self : 默认。 在本窗口打开链接文档 -->
    <a href="https://www.baidu.com/" target="_self">百度</a>
 </div>

跳转文件

  <div class="container">
    <!-- 浏览器可以直接打开的文件 -->
    <a href="./resource/我的自拍.jpg">看自拍</a>
    <a href="./resource/小电影.mp4">看自拍</a>
    <a href="./resource/小姐姐.gif">看自拍</a>
    <a href="./resource/如何爆富.pdf">看自拍</a>
    <!-- 浏览器不可以直接打开的文件 点击触发下载 -->
    <a href="./resource/jdk-8u401-linux-x64.tar.gz">jdk-8u401-linux-x64</a>
    <!--浏览器可以直接打开的文件,但是要强制触发下载,其中download的属性值为下载文件的名称-->
    <a href="./img/gV_oZlvO.jpg" download>下载悟空</a>
 </div>

跳转锚点

<div class="container">
    <a href="#htm">喜羊羊</a>
    <a href="#wk">悟空</a>
    <!-- 跳转锚点 -->
    <div>
      <p id="wk">我是悟空</p>
      <img src="./img/gV_oZlvO.jpg" alt="悟空" width="400" height="400">
    </div>  
    <div>
      <a href="" name="htm"></a>
      <p>我是喜羊羊</p>
      <img src="./img/3e513ff0-a4bf-4e33-a415-62c50ff07374.jpg" width="400" height="400" alt="喜羊羊">
    </div>
  </div>

唤醒指定应用

<div class="container">
    <a href="tel:10010">电话联系</a>
    <a href="mailto:1234@qq.com">邮件联系</a>
    <a href="sms:10010">短信联系</a>
 </div>

表单

  <div class="container">
    <fieldset>
      <legend>主要信息</legend>
      <!-- 隐藏域 -->
      <div class="row">
        <label for="name" >用户名:</label>
        <input type="text"  name="name" id="name" value="123456" hidden>
      </div>
      <!-- 输入框 -->
      <div class="row">
        <label for="name">用户名:</label>
        <input type="text"  name="name" id="name" value="123456" disabled>
        <label for="pwd">密码:</label>
        <input type="password"  name="pwd" id="pwd" value="123456">
      </div>
      <!-- 单选框 -->
      <div class="row">
        <input type="radio"  name="genger" value="男" >男
        <input type="radio"  name="genger" value="女"  checked>女
      </div>
      <!-- 多选框 -->
      <div class="row">
        <label for="fruit1">苹果:</label>
        <input type="checkbox" name="fruit" id="fruit1" value="apple"checked>
        <label for="fruit2">香蕉:</label>
        <input type="checkbox" name="fruit" id="fruit2" value="banana"checked>
        <label for="fruit3">橙子:</label>
        <input type="checkbox" name="fruit" id="fruit3" value="orange">
      </div>
    </fieldset>
      <!-- 提交和重置 -->
      <div class="row">
        <button type="reset">重置</button>
        <button type="button">提交</button>
        <input type="button" value="提交">
        <input type="reset">
      </div>
      <!-- 文本框 下拉框 -->
      <div class="row">
        <label>其他:</label><br>
        <textarea name="other" id="other" cols="30" rows="5"></textarea><br>
        地址：
        <!-- 单选框 -->
        <select name="place" id="">
          <option >1</option>
          <option selected>2</option>
          <option >3</option>
          <option>4</option>
        </select>
        <br>
      </div>
  </div>

全局属性

css

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复选框示例</title>
    <style>
        /* 选中的是没有访问过的a元素  */
        a:link{
            color: orange;
        }
        /* 选中的是访问过的a元素 */
        a:visited {
            color: gray;
        }
        /* 选中的是鼠标悬浮状态的a元素 */
        a:hover{
            color: skyblue;
        }
        /* 选中的是激活状态的a元素 */
        a:active{
            color: green;
        }
        /* 获取焦点状态 适用于：可以输入东西的元素 */
        input:focus{
            color: red;
            background: rebeccapurple;
        }
</style>
</head>

<body>
    <a href="https://mybatis.net.cn/" target="_blank">hello word!</a><br>
    <input type="text">
</body>
</html>

注意: 伪类选择器中的顺序，当未访问的状态：link 鼠标悬浮状态: link hover 激活状态:link hover active 访问过: link hover active visited 访问顺序是后来者居上

UI 伪类

:checked 被选中的复选框或单选框
:disabled不可用的表单元素(有disabled属性)

目标伪类

:target 选中锚指向的元素

伪元素选择器

选择器优先级 行内>ID>类>元素>*(通配)

css选择器详解:www.w3school.com.cn/css/css_sel…

文本对齐

列表相关属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表</title>
    <link rel="stylesheet" href="./list.css">
</head>
<style>
    ul{
        /* 列表符号 */
        list-style-type: decimal;
        /* 列表符号的位置 */
        list-style-position: outside;
        /* 自定义列表符号 */
        list-style-image: url(./img/Snipaste_2024-06-11_20-58-05.png);
    }
    li{
        background: orange;
    }
</style>
<body>
    <ul>
        <li>《震惊！两男子竟然在教室做这种事情》</li>
        <li>《一夜暴富指南》</li>
        <li>《给成功男人的五条建议》</li>
    </ul>
</body>
</html>

表格相关属性

边框相关属性

    table{
        border: 1px solid rebeccapurple;
        width: 500px;
        /* 控制表格的列宽 */
        table-layout: fixed;
        /* 控制单元格间距 */
        border-spacing: 0px;
        /* 合并相邻单元格的边框 */
        border-collapse: collapse;
        /* 隐藏没有内容的单元格 */
        empty-cells: hide;
        /* 设置表格标题位置 */
        caption-side: bottom;
    }
    td,th{
        border: 1px solid orange;
    }

浮动布局

设置子元素在父元素中水平垂直居中

浮动布局

效果图

源代码

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    *{
      margin: 0;
      padding: 0;
      /* 文本水平居中 */
      text-align: center;
    }
    .leftfix{
      float: left;
    }
    .rightfix{
      float: right;
    }
    /* 在父元素添加一个空盒子 由于清除浮动后的父元素高度塌陷 */
    .clearfix::after{
      content: '';
      display: block;
      /* 清除浮动 */
      clear: both;
    }
    .container{
      width: 960px;
      /* 水平居中 */
      margin: 10px auto;
      padding: 20px;
      border: 1px solid red;
    }
    .logo,.banner1,.banner2{
      background-color: #dedede;
      height: 80px;
      line-height: 80px;
    }
    .logo{
      width: 200px;
    }
    .banner1{
      margin: 0 10px;
      width: 540px;
    }
    .banner2{
      width: 200px;
    }
    .menu{
      margin: 10px 0;
      background-color: #dedede;
      height: 30px;
    }
    .top{
      margin-bottom: 10px;
    }
    .item2{
      margin: 0 10px;
    }
    .item1,.item2{
      width: 368px;
      height: 198px;
      line-height: 198px;
      border: 1px solid black;
    }
    .item3,.item4,.item5,.item6{
      width: 178px;
      height: 198px;
      line-height: 198px;
      border: 1px solid black;
      margin-right: 10px;
    }
    .item7,.item8,.item9{
      width: 198px;
      height: 128px;
      line-height: 128px;
      border: 1px solid black;
    }
    .item8{
      margin: 10px 0;
    }
    .footer{
      width: 960px;
      margin-top: 10px;
      background-color: #dedede;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="page-header clearfix">
    <div class="logo leftfix">logo</div>
    <div class="banner1 leftfix">banner1</div>
    <div class="banner2 leftfix">banner2</div>
  </div>
  <div class="menu">菜单</div>
  <div class="content clearfix">
    <div class="left leftfix">
      <div class="top clearfix">
        <div class="item1 leftfix">栏目一</div>
        <div class="item2 leftfix">栏目二</div>
      </div>
      <div class="bottom">
        <div class="item3 leftfix">栏目三</div>
        <div class="item4 leftfix">栏目四</div>
        <div class="item5 leftfix">栏目五</div>
        <div class="item6 leftfix">栏目六</div>
      </div>
    </div>
    <div class="right leftfix">
      <div class="item7">栏目七</div>
      <div class="item8">栏目八</div>
      <div class="item9">栏目九</div>
    </div>
  </div>
  <div class="footer">页脚</div>
</div>
</body>
</html>

弹性盒子布局模型

主轴侧轴

主轴换行

主轴的对齐方式

侧轴对齐方式

弹性布局

效果图

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格布局</title>
    <link rel="stylesheet" href="./css/grid.css">
</head>
<body>
    <div class="container">
        <!-- 头部 -->
        <div class="header bg align">
            头部
        </div>
        <div class="content">
            <!-- 左侧边栏 -->
            <div class="aside-left bg align"> 左侧边栏</div>
            <!-- 主要内容区域   -->
            <div class="main bg align">主要内容区域</div>
            <!-- 右侧边栏 -->
            <div class="aside-right bg align">右侧边栏</div>
        </div>

        <div class="footer bg align">
            页脚
        </div>

    </div> 
</body>
</html>

*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}
/* 主内容 */
.container{
  height: 100vh;
  width: 100vw;
  /* 盒模型规则变更*/
  box-sizing: border-box;
  /* 弹性布局 */
  display: flex;
  /*  垂直排列 默认水平排列 */
  flex-direction: column;
}
.bg{
  background: #eeeeee;
}
/* 水平垂直对齐 */
.align{
  display: flex;
  /* 垂直居中 */
  align-items: center;
  /* 水平居中 */
  justify-content: center;
}
/* 头部 */
.header{
  flex:1 1 auto;
  margin-bottom: 10px;
}
/*  内容区域 */
.content{
  flex:8 1 auto;
  display: flex;
}

/*  左侧边栏 */
.aside-left{
  flex:1 1 auto;
}

/* 主要内容区域 */
.main{
  flex:3 1 auto;
  /* 上下  左右 */
  margin: 0 10px;
}

/* 右侧边栏  */
.aside-right{
  flex:1 1 auto;
}



/* 页脚 */
.footer{
  flex:1 1 auto;
  margin-top: 10px;
}

响应式布局

媒体查询

媒体类型

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>选择器</title>
   <style>
       h1 {
           width: 600px;
           height: 400px;
           /* 渐变背景 */
           background-image: linear-gradient(30deg, red, yellow, green);
           margin: 0 auto;
           text-align: center;
           line-height: 400px;
           font-size: 100px;
           color: white;
           text-shadow: 0 0 10px black;
       }

       /* 只有打印机或打印预览才应用的样式 */
       @media print{
           h1{
               background: transparent;
           }
       }
       /* 只有在屏幕才应用的样式 */
       @media screen {
           h1{
               font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
           }
       }
       /* 一直应用的样式 */
       @media all {
           h1{
               color: red;
           }
       }
   </style>
</head>

<body>
   <h1>新年快乐</h1>
</body>

</html>

网页布局

两栏布局

左侧固定+右侧自适应

利用浮动，左边元素宽度固定，设置向左浮动。将右边元素的 margin-left 设为固定宽度。注意，因为右边元素的 width 默认为 auto ，所以会自动撑满父元素。

<div class="outer">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
</div>

.outer div{
    /* 设置容器高度 */
    height: 100px;
}

.left {
    background-color: lightblue;
    width: 300px;
    /* 左浮动脱离文档流 */
    float: left;
}
 
.right {
    /* 外边距为left侧的宽 */
    margin-left: 300px;
    background-color: saddlebrown;
}

2.同样利用浮动，左边元素宽度固定，设置向左浮动。右侧元素设置 overflow: hidden; 这样右边就触发了 BFC ，BFC 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。

.outer div{
    height: 300px;
}
.left{
    background: lightblue;
    width: 300px;
    float: left;
}
.right {
    background: saddlebrown;
    /* 隐藏移除部分 */
    overflow: hidden;
}

使用flex实现两栏布局

*{
    margin: 0;
    padding: 0;
}
.outer{
    display: flex;
    height: 100vh;
}
.left{
    flex: 0 0 300px;
    background: lightblue;
}
.right{
    flex:1 1 300px;
    background: saddlebrown;
}

4.网格实现两栏布局

*{
    margin: 0;
    padding: 0;
}
.outer{
    height: 100vh;
    display: grid;
    grid-template-columns: 300px auto;
}
.left{
    background: lightblue;
}
.right{
    background: saddlebrown;
}

三栏布局

所谓三栏布局，就是左右定宽，右边自适应。

圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现三栏布局之圣杯布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container {
            /* 上右下左 */
            padding: 0 300px 0 200px;
        }
        /* 左浮动 */
        .item{
            float:left;
        }
        /* 中间区域 */
        .center {
            background-color: yellow;
            width: 100%;
        }  
         
        .right{
            width: 300px;
            background: saddlebrown;
            margin-left: -300px;
            position: relative;
            right: -300px;
        }
        .left{
            width: 200px;
            background-color: green;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center item">中间区域</div>
        <div class="left item">左侧区域</div>
        <div class="right item">右侧区域</div>
    </div>
</div>
</body>
</html>

双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现三栏布局之双飞翼布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container {
            float: left;
            width: 100%;
            background: rebeccapurple;
        }
        /* 左浮动 */
        .item{
            float:left;
            height: 100%;
        }
        /* 中间区域 */
        .center {
            background-color: yellow;
            margin-left: 200px;
            margin-right: 300px;
        }  
         
        .right{
            width: 300px;
            background: saddlebrown;
            margin-left: -300px;
        }
        .left{
            width: 200px;
            background-color: green;
            margin-left: -100%;
        }
    </style>
</head>
<body>
     <!-- 
        与圣杯模式相似，只是中间盒子增加一个内容盒子，用内容盒子设置左右margin，留给左右盒子，避免内容被遮挡。(不需要定位了)
        1：中间盒子宽度width:100%;独占一行
        2：三个盒子设置float： left;
        3：使用margin-left属性将左右两边的盒子拉回与中间盒子同一行
            .left{ margin-left: -100%};向左走一个父盒子的宽度
            .right{ margin-left: 负的自身宽度}
        4: 中间主盒子里面的内容盒子设置左右margin，避免被遮挡内容 
    -->
    <div class="container">
        <div class="center">center</div>
    </div>
    <div class="left item">左侧区域</div>
    <div class="right item">右侧区域</div>
</div>
</body>
</html>

flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container {
            width: 100vw;
            height: 100vh;
            /* flex */
            display: flex;
        }
        /* 公共属性 */
        .item{
        }
        /* 中间区域 */
        .center {
            flex: 1 1 auto;
            background-color: yellow;
        }  
         
        .right{
            flex: 0 0 300px;
            background: saddlebrown;
        }
        .left{
            flex: 0 0 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
      </div>
</div>
</body>
</html>

网格布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container {
            width: 100vw;
            height: 100vh;
            /* 网格布局 */
            display: grid;
            grid-template-columns: 200px auto 300px;
        }
        /* 中间区域 */
        .center {
            background-color: yellow;
        }  
         
        .right{
            background: saddlebrown;
        }
        .left{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
      </div>
</div>
</body>
</html>

position布局

<!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>position实现两栏布局</title>
</head>
<style>
    div {
        height: 500px;
    }

    .container {
        position: relative;
    }

    .left {
        width: 200px;
        background-color: green;
        position: absolute;
        left: 0;
        top: 0;
    }

    .right {
        width: 200px;
        background-color: yellow;
        position: absolute;
        right: 0;
        top: 0;
    }

    .middle {
        background-color: grey;
        margin-left: 200px;
        margin-right: 200px;
    }
</style>

<body>
    <div class="container">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
    </div>
</body>

</html>

float布局

<!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>float实现三栏布局</title>
</head>
<style>
    div {
        height: 500px;
    }

    .left {
        float: left;
        width: 200px;
        background-color: green;
    }

    .right {
        float: right;
        width: 200px;
        background-color: yellow;
    }

    .middle {
        background-color: grey;
        /* 触发一个bfc */
        overflow: hidden;
    }
</style>

<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="middle">middle</div>
    </div>
</body>
</html>

HTML5+CSS

语义化标签

行内元素与块及元素

行内元素和块及元素的区别

常见的行内元素和块级元素

超链接<a>标签

跳转页面

跳转文件

跳转锚点

唤醒指定应用

表单

全局属性

css

文本对齐

列表相关属性

表格相关属性

浮动布局

弹性盒子布局模型

响应式布局

网页布局

两栏布局

三栏布局

圣杯布局

双飞翼布局

flex布局

网格布局

position布局

float布局

超链接`<a>`标签