HTML+CSS学习（五）-CSDN博客

本文链接：https://blog.csdn.net/ifjia/article/details/127973282

接上一篇

二、主要内容

< meta name ="description" content ="大连美团网精选大连美食餐厅，酒店预订，电影票旅游景点，外卖订餐，大连团购信息，您可查询商家评价店铺信息。大连生活下载美团官方 APP ，吃喝玩乐1折起。">   （信息描述）
< meta name ="keywords" content ="大连美食，大连酒店，大连团购">
< meta name ="renderer" content =" webkit ">
< meta http-equiv="X-UA-Compatible " content =" ie = edge ">
< meta http-equiv="refresh " content ="3" url ="">
< meta http-equiv="expires " content ="Wed,20 Jun 201922:33:00 GMT">

⑫、HTML5新语义化标签

1

header：页眉
footer：页脚
main：主体
hgroup：标签组合
nav：导航

写在header中
   <body>
   <hgroup>
    <h1>主标题</h1>
    <h2>副标题</h2>
   </hgroup>
   <nav>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
   </nav>
    <header></header>
    <main></main>
    <footer></footer>
</body>

header，footer main：在一个网页中只能出现一次

2

写在main标签中：
article:独立内容
aside:辅助信息的内容

写在article标签中：
section:区域（与div相似）

figure:描述图像或视频
figcaption:描述图像或视频的标题部分
注：双标签

<main>
        <article>
            <section>
                <ul>
                    <li>
                        <figure>
                            <img src="" alt="">
                            <figcaption></figcaption>
                        </figure>
                    </li>
                </ul>
            </section>
        </article>
        <aside></aside>
    </main>

3

datalist：选项列表
details/ummary：文档细节/文档标题
progress/meter:定义进度条/定义度量范围
time:定义日期或时间
mark:带有记号的文本

datalist：

            <section>
               <input type="text" list="elems">
               <datalist id="elems">
                <option valuue="a"></option>
                <option valuue="ab"></option>
                <option valuue="abc"></option>
                <option valuue="accc"></option>
                <option valuue="acc"></option>
                <option valuue="acdds"></option>
               </datalist>
            </section>

details/ummary：

           <section>
                <details open> 
                <summary>HTML</summary>
                <P>超文本标记语言</P>
                </details>
           </section>

在这里插入图片描述

progress/meter:
<section>
 <progress min="0" max="10" value="5"></progress>
 <meter min="0" max="10" value="5" low="10" hight="60"></meter>
 </section>

progress meter

布局

Flex弹性盒模型

随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。
2009年，W3C提出了一种新的方案﹣— Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

<style>
        #parent{width: 300px; height: 459px; border:1px black solid; margin: 20px auto;display: flex;}
        #box{width: 100px; height: 100px;background: red;margin: auto;}
    </style>
</head>
<body>
    <div id="parent">
        <div id="box"></div>
    </div>
</body>
</html>

作用在flex容器上的

①、flex-direction

flex-direction用来控制子项整体布局方向
是从左向右还是从右向左，是从上往下还是从下往上
在这里插入图片描述

②、flex-wrap

flex-wrap用来控制子项整体单行显示还是换行显示

在这里插入图片描述

③、flex-flow

flex-flow属性是flex-direction和flex-wrap缩写，表示flex布局的flow流动特性
第一个值表示方向，第二个值表示换行，中间用空格隔开

④、justify-content

justify-content属性决定了主轴方向上子项的对齐和分布方式

⑤、align-items

align-items中的items指的是flex子项们
因此align-items指的是flex子项们相对于flex容器在侧轴方向上的对齐方式

⑥、align-content

align-content可以看成和justify-content是相似且对立的属性
如果所有flex子项中有一行，则align-content属性是没有任何效果的

⑦、作用在flex子项上的css属性

Grid网格布局

Gird布局是一个二维的布局方法，纵横两个方向总是同时存在

作用在Gird容器上

①、grid-template-columns和grid-template-rows

对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及 fr 单位（网格剩余空间比例单位）。
有时候，我们网格的划分是很规律的如果需要頃加多个横纵网格时，可以利用 repeat (）语法进行简化操作

 <style>
    .box{display: grid;grid-template-rows: 100px auto 25%;
        grid-template-columns: 100px 100px 200px 100px;}
    </style>

②、grid-template-areas和grid-template

area 是区域的意思，grid - template - areas 就是给我们的网格划分区域的。此时grid 子项只要使用 grid - area 属性指定其隶属于那个区。
grid - template 是
grid - template - rows，grid - template - columns 和 grid - template - areas 属性的缩写。

在这里插入图片描述

③、grid-column-gap和grid-row-gap

grid-column-gap和grid-row-gap属性用来定义网格中网格间隙尺寸
CSS grid-gap属性是 grid-column-gap和grid-row-gap属性的缩写

④、justify-items和align-items

justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。
align - items 指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。
place - items （纵，横）可以让 align - items 和 justify - items 属性写在单个声明中。