前端笔记1

时间 2019-11-17

标签前端笔记繁體版

原文原文链接

1.html的注释css

html

2.标题浏览器

在HTML一共有h1 ~ h6 六级标题6级标题中 h1最大 h6最小
从h1 到 h6 重要性依次下降,h1最重要，h2其次依次递减布局

搜索引擎检索页面时，h1仅次于title，也会影响到页面在搜索引擎中的排名性能

一个页面通常只有一个h1标签通常页面中只会使用h1 ~ h3 学习

3.p标签字体

段落标签使用p标签来表示一个段落,段落标签会独占一行，并和其余内容会有一个距离网站

床前明月光 
疑是地上霜 
举头望明月 
低头思故乡 
搜索引擎

在HTML中，默认将多个空格和换行认为是一个空格,使用br标签来表示一个换行编码

4.转义字符

在HTML中可使用实体（转义字符），来表示一些特殊的字符
语法：
&实体的名字;
空格  
< <
> >
版权符号 ©
使用转义字符，来表示一个Unicode编码, &#x编码; 编码须要的是4位的十六进制编码
你     好
ac ©
<h1>✋</h1>

5.列表

列表相似于购物清单,HTML中一共有三种列表
1.无序列表
- 使用ul标签来建立一个无序列表
- 使用li向无序列表中添加列表项
- 无序列表默认使用圆点来做为项目符号
2.有序列表
- 有序列表和无序列表相似，不一样的是它使用ol来建立其余的都和无序列表同样
- 有序列表使用有序的序号做为项目符号
3.定义列表
- 定义列表用来对一些内容作解释说明的
- 使用 dl 来建立一个定义列表
- 在dl中使用dt，来建立一个定义项
- 使用dd来建立一个对定义项的描述
- 列表之间能够互相嵌套，能够在有序列表中放无序列表，也能够在无序列表放有序列表

6.a标签

href ：指定一个目标地址，点击超连接之后，将会跳转到该地址
能够指定一个外部网站的地址，也能够指定一个相对路径

target：指定在哪一个窗口中打开目标页面
　　- 可选值：
　　　　_self 默认值在当前窗口打开新的页面
　　　　_blank 在新的窗口中打开页面

<a href="demo06.html" target="_self">去DEMO06</a>


<a href="demo06.html" target="_blank">去DEMO06</a>

在个人后园...

<a id="bottom" href="#">回到顶部</a>
<a href="#p1">去文章的开头</a>

7.css样式

基本语法：
　　选择器声明块

声明实际上就是一个名值对结构，样式名:样式值;

1.将样式编写到元素的style属性中，咱们称为内联样式,不推荐使用

落霞与孤鹜齐飞，秋水共长天一色

2.能够将样式表编写到head中的style标签里 ,只能在当前页面中使用，不能在其余页面中应用,不推荐使用

<head>
　　<style type="text/css">
        p {
        　　color:red;
        　　font-size:50px;
        }
　　</style>
</head>

3.经过link引入，能够在不一样的页面中同时应用相同的样式，使结构和表现彻底分离，方便后期维护，是开发中用的最多的方式

<link rel="stylesheet" type="text/css" href="style.css" />

8.div和span

块元素（block）
        - 在页面中块元素会独占一行，不会与其余元素出如今一行
        - 不管内容多少，块元素总会独占一行
        - 学习过的块元素
        p h1~h6 ul ol dl li div....
        - div是一个块元素，没有语义，在页面中使用div对页面进行布局

        内联元素或行内元素（inline）
        - 内联元素不会独占一行，只占自身内容的大小
        - 学习过的内联元素
        a img span
        - 可使用一个内联元素来选中一段文字，来为文字设置样式

        - 在页面中主要使用块元素进行布局，使用内联元素来选中文字，
        在页面中通常会使用块元素去包含内联元素，而不适用内联元素去包含块元素
        a元素能够包含任意元素，除了他自己
        p元素中不能包含任何的块元素

<div style=" width: 200px;">我是一个div</div>
<span style="background-color:green">我是一个span</span>

9.经常使用选择器

1.元素选择器,语法：标签名 {}

p {
　　font-size: 30px;
}

2.id选择器,惟一语法：#id属性值 {}

#p1 {
　　color: cornflowerblue;
}

3.类选择器 ,语法：.class属性值 {}. 能够根据元素的class属性值选中一组元素

.p2{
　　background-color: yellow;
}

4.并集选择器, 语法：选择器1 , 选择器2 , 选择器N {}

.p3 , div , span{
　　color: green;
}

5.交集选择器,语法：选择器1选择器2选择器N {}

span.t1{
　　background-color: red;
}

6.通配选择器- 语法：* { }, 通配选择器的性能较差，尽可能少用

* {
font-size: 50px;
}

能够为一个元素同时指定多个class，多个class值之间使用空格隔开

汗滴禾下土

10.后代和子元素选择器

1.后代元素选择器,语法：祖先元素后代元素 {} ,中间是空格

div span{}

2.子元素选择器,语法：父元素 > 子元素{}

div > span{
　　background-color: yellow;
}

11.伪类选择器

<style type="text/css">
         
         /*
          * 将未访问过的连接设置为黄色
          * :link
          *        - 正常的超连接（未访问过的超连接）
          */
        a:link{
        color: yellow;
        }
         
         /*
          * 将访问过的连接设置为红色
          * :visited
          *      - 已访问过的超连接
          *      - 是经过浏览器中是否有对应的历史记录，来判断连接访问过
          *        可是因为隐私的缘由，该为类只能够修改字体的颜色
          */
        a:visited{
        color: red;
        }
         
         /*
            :hover
               - 表示鼠标移入的元素
          * */
        a:hover{
        color: blue;
        }
         
         /*
            :active
               - 表示元素正在被点击的状态
          * */
        a:active{
        color: orange;
        }
        
</style>

12.样式的继承

p{
　　font-size: 40px;
　　background-color: yellow;
}

利用继承能够将后代元素上的样式，统一设置给他们祖先元素，这样只须要设置一个，就能够同时应用到多个元素上
可是并非全部的样式都会被继承，好比：背景相关的边框相关宽度高度等都不会被继承

13.选择器的优先级

当使用不一样的选择器选择同一个元素，而且设置相同的样式时，此时会发生样式的冲突此时到底应用哪一个样式由选择器的优先级来决定，优先级高的优先显示

选择器的优先级（权重）
1. 内联样式     优先级是 1000  
2. id选择器   优先级是    100
   #box1 {}
3. 类和伪类选择器   优先级  10
   .b1.b2.b3.b4.b5.b6.b7.b8.b9.b10.b11 {} 
4. 元素选择器   优先级  1
5. 通配选择器   优先级  0
6. 继承的样式   没有优先级
当一个选择器中含有多个选择器时，须要将全部的选择器的优先级进行相加，而后在进行比较
   优先级高的优先显示，选择器的计算不会超过其最大的数量级
若是两个选择器的优先级相同，则谁在下边就用谁

若是在样式的最后添加一个!important，则该样式将会获取到最高的优先级，
将会优先于全部的样式显示，可是这个东西慎用

14.a标签的伪类

<style type="text/css">         /*            因为选择器的优先级的问题，因此在给a设置伪类时，必定要注意他们的顺序            咱们通常使用的顺序是               link               visited               hover               active           * */        a:link{        color: red;        }        a:visited{        color: orange;        }        a:hover{        color: yellow;        }        a:active{        color: yellowgreen;        }</style>