Web前端系统学习——课程笔记（章节13-14）

布满荆棘的人生 2024-04-17 20:14 30阅读 0赞

#### Web前端系统学习——课程笔记 ####

课程链接：[WEB前端系统学习 - 网易云课堂][WEB_ -]

参考教程：[菜鸟教程][Link 1]

笔记链接：[Web-Learn-Note][]

--------------------

*  章节13 HTML新标签使用及CSS选择器
 *  章节14 服务器字体及弹性盒模型

--------------------

##### 章节13 HTML新标签使用及CSS选择器 #####

*  课时48 H5新标签 语义 22:35
    
        <header></header>
        	语义：文档的头部或者页面的头部
        
        <nav></nav>
        	语义：导航
        
        <footer></footer>
        	语义：文档的脚部或者页面的脚部，通常用来包含文档的版权信息 或者授权 或者友情链接
        
        <aside></aside>
        	语义：侧边栏 或者附属信息
        
        <hgroup></hgroup>
        	语义：标题的集合 ，可以用来包含多个h1~h6的标签
        
        <figure></figure>
        	语义：图片区域 ，可以包含多个图片或者一个figcaption,ficaption用来表示图片标题
        
        <figcaption></figcaption>
        	语义：图片区域的标题 ，一般写在figure
        
        <section></section>
        	语义：分区 ， 页面的或者文档的一部分区域 ，有独立的内容，但结构相近，就可以用section
        	可以包含 header h1 ~ h6等等
        
        <article></article>
        	语义：独立的内容 ，可以是文章 blog 帖子 短文或者回复 评论
 *  课时49 css3子代 兄弟 同级通用 属性选择器 15:04
    
        子选择器 ： > 
        		 作用范围： div下的span会有享受样式 ， p里的不享受， 原因，p里的span是孙子
        div>span {
        	border:1px solid red;
        	background: yellow;
        }
        
        相邻兄弟选择器： +
        		作用范围 ：可以选择相邻的两个元素，元素一定要有同一个父级，+后面的元素享受样式
        p+span {
        	border:1px solid red;
        	background: yellow;
        }
        
        同级元素通用选择器： ~
        		作用范围：所有相同父级中，位于 P 标签之后的同级的 span 标签 享受样式
        p~span {
        	border:1px solid red;
        	background: yellow;
        }
        
        属性选择器
            第一种
                选择带有某种属性的所有元素
                    a[属性名]{…………}
        
            第二种
                选择带有某种属性，并且规定属性值的元素
                    input[属性名="属性值"]{
                        …………
                    }
 *  课时50 A标签的伪类 伪类选择器 18:50
    
        伪类选择器
            选择属于其父级下的第n个元素，并且必须是p标签，直到匹配位置，否则不生效
                p:nth-child(n){
                    background: red;
                }
                温馨提示：n可以用来计算
        
            选择属于其父级下的第1个元素，并且必须是p标签，否则不生效
            p:first-child{
                background: red;
            }
        
            选择属于其父级下的最后1个元素，并且必须是p标签，否则不生效
            p:last-child{
                background: red;
            }
        
            选择属于其父级下的第n个元素，并且一定会匹配p标签
                p:nth-of-type(n){
                    background: red;
                }
                温馨提示：n可以用来计算
        
            选择属于其父级下的第1个元素，并且一定会匹配p标签
            p:first-of-type{
                background: red;
            }
        
            选择属于其父级下的最后1个元素，并且一定会匹配p标签
            p:last-of-type{
                background: red;
            }
        
        伪类 ： 是一种特殊性的属性， 可以理解为表示一种状态 love hate 爱恨记忆法
        after
        before

##### 章节14 服务器字体及弹性盒模型 #####

*  课时51 服务器字体 18:22
    
        @font-face {
        	font-family:"瞎编的 自定义的字体名字";
        	src:
        		url("字体图片的路径地址"),
        		url("字体图片的路径地址"),
        		url("字体图片的路径地址"),
        		url("字体图片的路径地址");
        	font-weight:;
        	font-style:;
        }
        @font-face {
            font-family: 'b_surfersplane';
            src: url('bsurp___-webfont.eot');
            src: url('bsurp___-webfont.eot?#iefix') format('embedded-opentype'),
                 url('bsurp___-webfont.woff2') format('woff2'),
                 url('bsurp___-webfont.woff') format('woff'),
                 url('bsurp___-webfont.ttf') format('truetype'),
                 url('bsurp___-webfont.svg#b_surfersplane') format('svg');
            font-weight: normal;
            font-style: normal;
        
        }
        .ttf
        .otf
        .woff
        .eot
        .svg
        http://www.dafont.com/ 找字体的网站
        https://www.fontsquirrel.com/tools/webfont-generator 修改字体图片格式的线上工具
 *  课时52 字体图标 怪异盒模型 17:57
    
        www.iconfont.cn
        @font-face {
          font-family: "aaaa";
          src: url('fontImg/1/iconfont.eot?t=1478759787428'); /* IE9*/
          src: url('fontImg/1/iconfont.eot?t=1478759787428#iefix') format('embedded-opentype'), /* IE6-IE8 */
          url('fontImg/1/iconfont.woff?t=1478759787428') format('woff'), /* chrome, firefox */
          url('fontImg/1/iconfont.ttf?t=1478759787428') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
          url('fontImg/1/iconfont.svg?t=1478759787428#iconfont') format('svg'); /* iOS 4.1- */
        }
        
        .iconfont {
          font-family:"aaaa" ;
          font-size:40px;
          font-style:normal;
          width:300px;
          height:300px;
          border:1px solid red;
          color:#2EEF64;
          text-indent: 30px;
          line-height: 300px;
        }
        
        .iconfont:before { content: "\3432"; }
        
        box-sizing: 盒模型的设置
        
        标准盒模型 content-box
        	盒子的宽：border + padding + width
        	盒子和高：border + padding + height
        怪异盒模型 border-box
        	盒子和宽：就是设置的width 会包含 border + padding 
        	盒子的高：就是设置的height 会包含 border + padding
 *  课时53 弹性盒模型 分栏 31:28
    
        弹性盒模型 ，不兼容 ，w3c目前还没有标准化 ，需要加浏览器内核前缀
        
        如果想要搭建弹性盒模型，首先要在父级建立弹性盒模型的空间
        方法：
        	display:-webkit-box;
        	display:-moz-box;
        	display:-ms-box;
        	display:-o-box;
        	display:box;
        
        排列方式 有两种 水平 和 垂直
        -webkit-box-orient:vertical; 垂直
        -webkit-box-orient:horizontal;  水平 默认值
        
        子级的排列位置 ，可以给父级加-webkit-box-pack 来实现
        方法：
        	-webkit-box-pack:
        	-moz-box-pack:
        	-ms-box-pack:
        	-o-box-pack:
        	box-pack:
        
        		相应的值有：
        			start 左边 默认值
        			center 中间
        			end 右边
        			justify 均分
        子级自己本身可以均分父级的宽度，根据自身的分数进行均分
        	设置分数的方法
        		给子级加
        			-webkit-box-flex:几份;
        			比如：
        				-webkit-box-flex:1; 根据一份的宽度来计算 分一份
        				-webkit-box-flex:5; 根据一份的宽度来计算 分五份
        
        column-count:3; 分几栏 
        	column-gap:100px; 分栏之间的间隙 数值越大 间隙越大
        	column-rule: 5px solid #25AB12; 类似border的设置，可以设置分栏之间的分界线
        	ie9以下不支持 火狐需要加前缀
        
        !important   不推荐使用
        	一般写在想要的样式后面 ，把相应的样式的优先级提升至最高

[WEB_ -]: https://study.163.com/course/courseMain.htm?courseId=1003112011
[Link 1]: https://www.runoob.com/html/html-tutorial.html
[Web-Learn-Note]: https://github.com/zz2summer/Web-Learn-Note