|
Web前端从入门到精通
1.加粗与斜体：strong与b，em与i2.引用标签3.iframe嵌套页面4.换行：br与wbr5.pre与code组合6.map与area（给特殊图像添加链接）7.embed与object（给flash和一些插件进行渲染操作的标签）8.audio与video9.文字注解与文字方向10.引入外部资源文件：link标签11.meta标签：优化、页面渲染12.html5新语义化标签1.header,footer,main,hgroup,nav2.article,aside,section,figure,figcaption3.datalist,details/summary,progress/meter,time,mark1.datalist2.details/summary练习：3.progress/meter4.time
13.flex弹性布局1.加在父容器上的1.flex-direction,flex-wrap2.flex-flow:3.justify-content4.align-items（一行）5.align-content (多行)
2.作用在flex子元素上的CSS属性order:flex-grow (≥1）
3.flex案例自适应
14.grid网格布局1.加在grid容器上的grid-template-colums和grid-template-rows（横纵划分）grid-template-areas和grid-templategrid-templategrid-colum-gap和grid-row-gap
1.加粗与斜体：strong与b，em与i
表现形态都是文本加粗和文本斜体 区别：是否语义化 
2.引用标签
WHO成立于1948年
3.iframe嵌套页面
可以引入其他的html到当前html中显示。 主要是利用iframe的属性进行样式调节 
srcdoc和src两个同时存在，只会识别第一个
srcdoc里面也可以加标签 ...
4.换行：br与wbr
5.pre与code组合
针对网页中的程序代码的显示效果。  能输出：把转义成; ;
;!DOCTYPE html ;
Document
hello world
6.map与area（给特殊图像添加链接）
给特殊图形添加链接，area能添加的热区形状：矩形、圆形、多边形  格式：
#要写,usemap与下面map对应
圆:圆心,半径
(用个盒子包起来,让video保持正常大小)
设置最小宽高，不会按等比缩放
9.文字注解与文字方向
ruby、rt组合：文字注解  改变方向：dir=“rtl”（反：右向左排列） 与 "ltr"改变
（在head标签里面)
span{direction: rtl; unicode-bidi:bidi-override ;}
10.引入外部资源文件：link标签
加在下面一排 
通过rel指定文件类型 icon是添加网址标题栏前的小图标 dns解析，加快网站访问速度
11.meta标签：优化、页面渲染
meta：添加辅助信息 
12.html5新语义化标签
(可以用div替代）
1.header,footer,main,hgroup,nav
 注：header、footer、main标签在一个网页中只能出现一次 header 头部:  里面前两排是 主标题与副标题，两排一起是标题组合hegroup) 导航：博客园、首页 的那一行
footer尾部： 
主标题
副标题
首页
论坛
关于
2.article,aside,section,figure,figcaption
 article是一个独立的一整块,section（作用很像div）可以在artivle里面进行划分一个一个列表项
figure、figcaption两个一般组合使用 适合用figure来做的情况：（上面一个图，下面描述） 
海绵宝宝
十二生肖
3.datalist,details/summary,progress/meter,time,mark
 datalist: 用id的方式把联系到一起
1.datalist
效果： 
2.details/summary练习：
（默认展开效果）
HTML
超文本标记语言
123
效果： 
3.progress/meter
4.time
带有节日这样的时间 ，可以用time包起来 mark增加曝光率
元旦放假
元旦放假
13.flex弹性布局
1.加在父容器上的
1.flex-direction,flex-wrap
#parent{width:300px;height:300px;border:1px black solid;margin:20px auto;display: flex; flex-direction: row-reverse;} /* display:"flex" 整体形成一个弹性盒子,加上margin:auto可以让元素垂直居中 */
#box{width:150px;height:50px;background: red;margin: auto;}
#box{width:300px;height:300px;border:1px black solid;margin:20px auto;display: flex; flex-direction: column-reverse;}
#box div{width:50px; height:50px;color:aliceblue;line-height: 50px;text-align: center;background: red;}
#box2{width:300px;height:300px;border:1px black solid;margin:20px auto;display: flex; flex-wrap:wrap;}
#bo2 div{width:50px; height:50px;color:aliceblue;line-height: 50px;text-align: center;background: red;}
1
2
3
4
2.flex-flow:
#box2{width:300px;height:300px;border:1px black solid;margin:20px auto;display: flex;
flex-wrap:wrap; flex-direction: column（列）;/*改变方向折行的一种方式 flex-flow: column wrap; 另一种*/}
3.justify-content
 练习：
#box3{width:300px;height:300px;border:1px black solid;margin:20px auto;display: flex;justify-content: space-between; flex-direction: column;}
#box3 div{width:50px; height:50px;color:wheat;line-height: 50px;text-align: center;background: rgb(206, 86, 86);}
1
2
3
4
效果： 
4.align-items（一行）
 练习：
#box4{width:300px;height:300px;border:1px black solid;margin:20px auto;display: flex;justify-content: space-evenly;align-items: flex-start;}
#box4 div{width:50px; background: rgb(206, 86, 86);}
测试文本
测试文本2222
测试文本测试文本
测试文本12323
效果： 
5.align-content (多行)
#box4{width:300px;height:300px;border:1px black solid;margin:20px auto;display: flex;justify-content: space-evenly;flex-wrap:wrap; align-items: flex-start;align-content: space-around;}
#box4 div{width:50px; background: rgb(206, 86, 86);}
2.作用在flex子元素上的CSS属性
 order默认是0，值越大，就会越向后排
order:
#box{width:300px;height:300px;border:1px black solid;margin:20px auto;display: flex;}
#box div{width:50px; height:50px;color:aliceblue;line-height: 50px;text-align: center;background: red;}
#box div:nth-child(3){order: 1;}
#box div:nth-child(5){order: -1;}
flex-grow (≥1）
全部的空余空间整合是1，超过1的，相同空余空间等比分配
#box div:nth-child(2){background: yellow;color: rgb(17, 235, 151);flex-grow: 1/*把空余的空白全部占满 */;}
 flex-basis 给的是像素，不像上面是比例值，优先级高于width flex属性是flex-grow shrink basis三个的复合写法 flex默认值：0 1 auto（第二三个可省）
想要弹性优先级高于默认宽时，用flex 保留默认宽用 flex-grow
3.flex案例
骰子点数 注：1.三个点可以先整体居中align-items: center;，然后第一个放到左上角flex-start起始位置对齐，第二个右下角flex-end 2.四个点可以把两个点做成两行包起来
/* 一个点 */
#box1{width: 100px;height: 100px;border:1px black solid;border-radius: 5px;display: flex;justify-content: center;align-items: center;}
#box1 div{width:30%;height:30%;background: black; border-radius:50%;}
/* 两个点 */
#box2{width: 100px;height: 100px;border:1px black solid;border-radius: 5px;display: flex;justify-content: space-between;}
#box2 div{width:30%;height:30%;background: black; border-radius:50%;}
#box2 div:last-child{align-self: flex-end;}
/* 三个点 */
#box3{width: 100px;height: 100px;border:1px black solid;border-radius: 5px;display: flex;justify-content: space-between;align-items: center;}
#box3 div{width:30%;height:30%;background: black; border-radius:50%;}
#box3 div:first-child {align-self: flex-start;}
#box3 div:last-child {align-self: flex-end;}
/* 四个点 */
#box4{width: 100px;height: 100px;border:1px black solid;border-radius: 5px;display: flex;flex-wrap: wrap;}
#box4 div{width:100%;display: flex;justify-content: space-between;}
#box4 div:last-child{align-items: flex-end;}
#box4 i{display:block;/* i标签是内联元素，不支持宽高，把转成块 */ width:30%;height:60%;background: black; border-radius:50%;}
/* 五个点 */
#box5{width: 100px;height: 100px;border:1px black solid;border-radius: 5px;display: flex;flex-wrap: wrap;}
#box5 div{width:100%;display: flex;justify-content: center;align-items: center;}
#box5 div:first-child{align-items: flex-start;justify-content: space-between;}
#box5 div:last-child{align-items: flex-end;justify-content: space-between;}
#box5 i{display:block; width:30%;height:90%;background: black; border-radius:50%;}
/* 六个点 */
#box6{width: 100px;height: 100px;border:1px black solid;border-radius: 5px;display: flex;flex-wrap: wrap;}
#box6 div{width:100%;display: flex;justify-content: space-between;}
#box6 div:first-child{align-items: flex-start;}
#box6 div:last-child{align-items: flex-end;}
#box6 i{display:block;width:30%;height:90%;background: black; border-radius:50%;}
效果： 
自适应
自适应布局：flex:1，侧边栏大小固定后，内容区会自动放大占满剩余空间。
练习：两列固定，一列自适应
body{margin:0;padding: 0;}
.main{display: flex;}
.main-left{width: 200px;height: 200px;background: plum;}
.main-center{flex:1;height: 280px;background: khaki;}
.main-right{width: 300px;height: 120px;background: darkcyan;}
效果： 
百度弹性导航
body{margin: 0;padding: 0;}
.nav{width: 500px;height: 250px;background: bisque;display: flex;flex-flow: row wrap;align-content: center;}
.nav1-top{width: 100%;height: 50%;text-align: center;display:flex;flex-wrap: wrap;align-items: center;justify-content: space-between;}
.nav1-top-li{align-self: center;border-radius: 50%;border: 1px black solid;}
.nav1-li-1{width:14%;height: 50%;background: blue;border-radius: 50%;}
.nav1-li-2{width:14%;height: 50%;background: blue;border-radius: 50%;}
.nav1-li-3{width:14%;height: 50%;background: green;border-radius: 50%;}
.nav1-li-4{width:14%;height: 50%;background: blue;border-radius: 50%;}
.nav1-li-5{width:14%;height: 50%;background: blue;border-radius: 50%;}
.nav2-bottom{width:100%;height:50%;text-align: center;display:flex;flex-wrap: wrap;align-items: center;justify-content: space-between;}
.nav2-bottom-li{align-self: center;border-radius: 50%;border: 1px black solid;}
.nav2-li-1{width:14%;height: 50%;background: blue;border-radius: 50%;}
.nav2-li-2{width:14%;height: 50%;background: blue;border-radius: 50%;}
.nav2-li-3{width:14%;height: 50%;background: green;border-radius: 50%;}
.nav2-li-4{width:14%;height: 50%;background: blue;border-radius: 50%;}
.nav2-li-5{width:14%;height: 50%;background: blue;border-radius: 50%;}
效果： 
14.grid网格布局
特殊图形不起作用，只能形成矩形 
1.加在grid容器上的
grid-template-colums和grid-template-rows（横纵划分）
 repeat(重复的个数，单位fr），条件是每个网格大小都一样 
grid-template-areas和grid-template
grid-template
.box2{width:300px;height:300px;border: 1px gray dotted;display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"a1 a1 a1"
"a2 a2 a3"
"a2 a2 a3";}
.box2 div{background: bisque;border: 1px black solid;}
.box2 div:nth-child(1){grid-area: a1;}
.box2 div:nth-child(2){grid-area: a2;}
.box2 div:nth-child(3){grid-area: a3;}
1
2
3
.box2{width:300px;height:300px;border: 1px gray dotted;display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"a1 a1 a1"
"a2 a2 a3"
"a2 a2 a3";
grid-templates:/* 复合写法 */
"a1 a1 a1" 1fr /* 每一行 分别写1fr*/
"a2 a2 a3" 1fr
"a2 a2 a3" 1fr
/1fr 1fr 1fr; /* 纵向加斜线 */
}
grid-colum-gap和grid-row-gap
|