前端筆記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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。