接上一篇

二、主要内容

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

布局

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 属性写在单个声明中。

⑤、justify-content和align-content

justify-content指定了网格元素的水平分布方式。
align-content指定了网格元素的垂直分布方式。
place-Content可以让align-Content和justify-Content属性写在一个 CSS 声明中。

作用在Gird子项上

HTML+CSS学习（五）相关推荐

HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML CSS 学习总结
文章目录 HTML总结一.HTML简介何为HTML? 二.HTML文档结构分析 1.HTML元素(elements) 2.剖析 HTML 文档三.HTML 文档相关说明 1.注释 2.空元素 3 ...
前端工程师高手说说CSS学习中的瓶颈
一.何为瓶颈? "瓶颈"指瓶子的颈部,相对狭窄.这是很传神的一个词,因为狭窄,因此难以突破:但是,一旦突破了,就是广阔天空(偌大瓶身)! 小弟不才,凑合画了个瓶颈示意图,如下: 图 ...
HTML5+CSS3的学习(五)
HTML5+CSS3的学习(五) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...
css学习记录三：文本属性
css学习记录三:CSS文本属性一.文本属性的作用二.文本颜色三.文本对齐四.装饰文本五.文本缩进六.行间距一.文本属性的作用 CSSS Text(文本)属性可定义文本的外观,比如文本的 ...
算警示吧——此文来自张鑫旭（说说CSS学习中的瓶颈）
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=2523 虽已数年,但 ...
CSS学习中的瓶颈期深入分析
虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...
说说CSS学习中的瓶颈【转】
一.何为瓶颈? "瓶颈"指瓶子的颈部,相对狭窄.这是很传神的一个词,因为狭窄,因此难以突破:但是,一旦突破了,就是广阔天空(偌大瓶身)! 小弟不才,凑合画了个瓶颈示意图,如下: 图 ...
说说CSS学习中的瓶颈
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=2523 虽已数年,但 ...
css学习笔记 day two
CSS学习笔记 Day two 13.3 css边框属性属性: 边框样式:border-style:solid/double/groove/ridge/insert/outset; 说明:第一个表示 ...

HTML+CSS学习（五）

二、主要内容

标签

①、strong，b，em，i

②、引用标签

③、iframe嵌套页面

④、br与wbr

⑤、pre与code

⑥、map与area

⑦、embed与object

⑧、audio与video

⑨、文字注解与文字方向

⑩、扩展link标签

⑪、meta标签