html+css-1

dafeige發表於2019-04-09
HTMLCSS

1.html

1.1 常用的html標籤

【A】
<!--... -->定義註釋
<!DOCTYPE>定義文件型別
<a>定義連結跳轉 href="" target="_blank" 跳轉到新連結  target="_self"在當前連結開啟
<article>定義文章
<aside>定義頁面內容之外的內容
<audio>音樂播放器 src = "" autoplay ="autoplay" 自動播放 loop="loop"  controls  //迴圈播放(HTML5)
【B】
b 加粗
br 換行
big 變大
body 網頁主體
button 按鈕
【C】
<col>定義表格中一個或多個列的屬性值
<canvas> 定義畫布圖形
<caption>定義表格標題 ---表格外的說明內容
<colgroup>定義表格中供格式化的列數
【D】
div 劃分塊結構
dl  dt --- title  dd --- description 定義列表
datalist 下拉選單
【E】
em 斜體
<embed> 定義外掛（類似於視訊的外掛）
【F】
form 表單
frame  定義框架集的視窗或者框架
footer 底部（HTML5）
figure  figcaption(HTML5)圖文的組合 --- 上邊是圖片 下邊是文字
【H】
hr 水平線
h1-h6 標題 下標越大 字型越小
html  根元素
head 網頁的頭部
header  頁面的頭部
【I】
i 斜體
img 插入圖片
input表單元素 text 文字 password 密碼
【J K】
【li】
ul li 無序列表 預設小黑點
ol li 有序列表 預設數字
link 外鏈式
label 和 input 一起使用
【M】
meta 元資訊 編碼 關鍵詞 描述 視口。。。
menu 定義選單
map 定義影象
mark 標記文字
meter 進度（HTML5）
【N】
nav (HTML5) 導航欄
【O】
ol  有序列表
option 下拉選單 和select 配合使用
object 定義內嵌物件
【P】
p 定義段落
param 定義物件的引數
progress 定義任何型別的任務的進度
【S】
s 中劃線
sup 定義上標文字
sub 定義下標文字
span 定義小塊 小圖示
style 內嵌式的標籤
script 定義客戶端指令碼
section 相當於div 用來劃分塊 移動端常用（HTML5）
small 定義小號字型
source 定義媒介源
select  option 下拉選單
strong 定義強調文字 加粗
【T】 
title 網頁的標題
table 單元表格
th tr td  thead tbody tfooter
time 時間標籤（HTML5）
textarea 多行文字
【U】
ul li  無序標籤
u 下劃線
【v】
video  視訊播放器
複製程式碼

1.2 元素

元素:開始標籤和結束標籤之間的所有程式碼
元素= 標籤 + 標籤屬性 + 元素的內容

行內元素：因為它自身的特點 我們通常使用行內元素來進行文字、小圖示（小結構）的搭建
a  button  big small datalist em i input mark span select option s strong  b sup sub textarea u
1、不獨佔一行
2、排列方式:從左往右
3、設定寬高不起作用 如要起作用需要轉換為塊/行內塊 display:block /display:inline-block
4、不設定寬高是它本身內容的寬高
5、天生自帶display:inline
6、行內元素裡不能巢狀塊級元素(特殊a)
內聯元素只能容納文字或者其他內聯元素（此處請注意,不要在內聯元素中巢狀塊級元素）

塊級元素:因為它自身的特點，我們通常使用塊級元素來進行大布局（大結構）的搭建
table  form  dl  dt  dd  figure  figcaption  div  h1-h6  hr  ul  ol  li  nav  p
1、獨佔一行
2、排列方式：從上往下
3、可以設定寬高以及盒子模型的其他屬性
4、不設定寬高的情況下 它的寬度是父元素的寬度 它的高度是本身內容的高度
5、天生自帶display:block
6、塊級元素可以巢狀行內
7、ol ul下面 只能是li  dl 下面只能是dt dd
8、p裡不能巢狀任何的塊級元素  包括它自己本身 可以巢狀行內元素

行內塊元素
img  input 
天生自帶 display:inline-block
複製程式碼

1.3 標籤語義化

寫logo的時候 儘量用h1標籤  因為h1標籤的權重比較大
標籤語義化 - 含義
合適標籤做合適的事情，例如文章段落用p標籤，標題用h1-h6標籤
標籤語義化為瀏覽器和搜尋引擎服務
標籤語義化 --- 如何遵守
1、儘量減少使用無意義的標籤，例如:span 和div
2、儘量不使用標籤本身的css屬性，例如b、font、s等標籤 如果需要這些樣式，那麼使用css樣式來進行新增
3、在需要強調的部分，使用strong、em,使用樣式儘量使用css樣式來描述
4、表格搭建時，使用<thead>表格頭部</thead> <tbody>表格身體</tbody> <tfoot>表格尾部</tfoot>
5、表格搭建時，使用<ul>無序列表</ul> <ol>有序列表</ol> <dl>定義列表</dl>

標籤語義化 --- 為什麼要遵守
1、利於SEO優化(也就是搜尋引擎的抓取，搜尋引擎的爬蟲也依賴於標記來確定上下文和各個關鍵字的權重)
2、在樣式丟失的時候，還是可以比較好的呈現結構
3、更好的支援各種終端，例如無障礙閱讀和有聲小說
4、利於團隊的開發和維護，W3C給我們定了一個標準，那麼團隊都遵守這個標準，那麼程式碼的差異就會縮小，在開發和維護的時候就可以提高效率
複製程式碼

2.css

2.1 基本語法和引入方式

css基本語法
css 規則由兩個主要的部分構成：選擇器，以及一條或多條生命(css屬性)
選擇器通常是您需要改變樣式的HTML元素
每條宣告由一個屬性和一個值組成
屬性是你希望設定的樣式屬性。每個屬性有一個值。屬性和值被冒號分開。
h1 --選擇器 {color:red;font-size:14px} color:red ---整體算作一個宣告 color: #000  black  rgb(0,0,0) 表示顏色的三種方式 color ---字型顏色

css 引入方式 之行內式 
語法:寫在開始標籤裡邊 打一個空格隔開 style="宣告；宣告..."

css 引入之內嵌式
語法<style type="text/css"> css樣式</style>
內嵌式可以放在head或者body裡 建議放在head標籤裡 title標籤的下面

css引入方式之外鏈式 --- 引入一個外部的css樣式表 最好放在head裡
<link rel="stylesheet" type="text/css" href="index.css">

css引入方式---匯入式
語法:匯入式要依賴css樣式檔案，所以他要放在style或者css樣式表裡
@import "css 樣式路徑"
如果style 裡面既有內嵌的樣式 又有匯入的樣式 匯入式要放在內嵌式的上面：放在下面會報錯，導致匯入式的樣式直接失效。
<style type="text/css">@import "index.css"</style>

css引入方式 - 外鏈式和匯入式的區別
- link和@import雖然都是引入外部的css檔案，但是他們是有天差地別的區別的
- link是html標籤，@import完全是css提供的方式，要寫在css檔案或者style標籤中
- 他們的載入順序也是有區別的，當一個頁面被載入的時候，link引用css檔案會被同時載入，而@import引入的css檔案會等頁面全部下載完後再載入
- 當使用javaScript控制DOM去改變css樣式的時候，只能使用link標籤，因為import是不能被DOM控制的
複製程式碼

2.2 css選擇器

標籤選擇器:通過標籤名找我們想要加美化效果的標籤
class或者類選擇器:在標籤名(開始標籤)裡面加上class="按照命名規範的class名" 在樣式檔案對應的是一個"."
id選擇器：在標籤名(開始標籤)裡面加上id="我們自己命名的id名稱" 在樣式檔案中對應的是一個"#"
口號:看到class就要想到小黑點 看到id 就要想到#

萬用字元選擇器"*" :代表頁面上所有的標籤名 可以用來去掉瀏覽器預設自帶的間距
 
* {
    margin:0; /*外間距*/
    padding:0/*內間距*/
}
1、並集選擇器
語法：樣式相同的標籤可以並列在一起 節約程式碼量 更加簡化 減少程式碼的多次重複使用
符號是一個逗號
div,p,h3 {
    backgroud-color:red
}
2、交集選擇器
可以更精準確地找到我們需要的標籤 在class名或者id名前面加上標籤名 縮小查詢的範圍
注意:標籤名和class/id名中間沒有空格隔開
p#class {
    backgroud-color:red;
}

3、後代選擇器
語法:單個選擇器 用空格隔開
層級的巢狀最好不要超過3個以上 只留一些關鍵標籤

ol li  {
    list-style:none /去掉ul li前面預設的小黑點/
}

ol li strong {
    backgroud-color:red
}

4、子代選擇器 
符號： >  如div>span
子代選擇器 只作用於兒子這一代 孫子以及孫子後面的代都不會受影響

5、相鄰兄弟選擇器
strong + span {
    backgroud-color:red
}
加號前面的選擇器只是用來作為我們查詢兄弟的參照標籤 它不參與樣式的影響
翻譯:尋找strong標籤的兄弟 而且是緊挨著的兄弟才可以
+ 相鄰兄弟
～ 所有的兄弟

6、屬性選擇器
屬性:分為標籤天生自帶 和 我們自定義的標籤屬性
符號:[屬性名]
[屬性名="屬性值"]
<div zf="zhufeng"></div>
<input type="text">
[type="text"] {
    backgroud-color:green
}
[zf] {
    background-color:red
}
複製程式碼

2.3 css 偽類選擇器

a:link 沒有訪問之前文字的顏色
a:visited 向已訪問的連結新增樣式
href="#" 我們要的訪問地址沒有連結 a:visited{color:red} 不起作用
href="http://www.zhufengpeixun.com" a:visited {color:red} 就會起作用
a:hover 表示滑鼠移上的效果
a:active 表示滑鼠按下(沒有抬起時)的效果

表單元素input:獲取焦點(滑鼠游標) 失去焦點(滑鼠游標)
input:focus 獲取焦點
input:blur 失去焦點

input  {
    預設樣式
    boder: 1px solid #000
}
input:focus {
    boder: 1px solid red
}
css3 新增偽類元素
:not 除了
:last-child 最後一個子元素
ul li :not(:last-child) {
    /*除了最後一個li沒有右邊框線 其餘的都有*/
    border-right:10px solid #000
}

:nth-child(n) 第幾個元素 odd 奇數行 even 偶數行

ul li:nth-child(odd) {
    background:red
}

ul li:nth-child(even) {
    background:red
}

:only-child 僅僅/唯一的  只包含一個子元素的生效
<div>3個span</div>
<div>1個span</div>
span:only-child  {
    width:50px;
    height:100px;
    backgroud:red;
}

:nth-last-child  倒數第幾個元素

ul li nth-last-child(2)  {
    backgroud:red //倒數第二個元素生效
}
:first-of-type 第一個同級兄弟元素
    p:fisrt-of-type {
//第一個同級兄弟元素 即第一個p元素
}
:last-of-type  最後一個同級兄弟元素
p:last-of-type {
    //最後一個同級兄弟元素 即最後一個p元素
}
:only-of-type  只有一個同級兄弟元素
p:only-of-type  {
    //同級只有一個p元素生效   如果存在多個 一個都不生效
}
:nth-of-type(n)  第幾個同級兄弟元素
p:nth-of-type  {
    //第幾個兄弟p元素生效
}
:nth-last-of-type(n)倒數第幾個同級兄弟元素
p:nth-last-of-type(n)  {
    //倒數第幾個兄弟p元素生效
}
:empty 空內容
p:empty {
    p 裡邊是空內容的才會起作用
}

input:checked + span{
    //被選中後的屬性 input被選中後旁邊span起作用
}
複製程式碼

2.4 偽元素選擇器

:first-line 偽元素用於向文字的首行設定特殊樣式，只能用於塊級元素
:first-letter 偽元素用於向文字的首字母設定特殊樣式
:before 在元素的內容前面插入新內容
:after 在元素的內容後面插入新內容

p:first-line  {
    /*第一行文字內容*/
    background-color:red
}

p:first-letter  {
    /*第一個字母設定為100px*/
    font-size:100px;
}

li:after {
    display:inline-block;
    content:"";//這個屬性不能省略 如果沒有這個屬性:after樣式不會起作用
    width:20px;
    height:20px;
    backgroud-color:red
}
口號:只要碰到偽元素 before和after就要加content=""
只要是設定寬度不起作用 就加display:block
display:block 獨佔一行
display:inline-block 不獨佔一行
複製程式碼

2.5 選擇器的權重

標籤選擇器  偽元素選擇器  權重   
div         1
class/類選擇器 權重
.right     10
id選擇器 權重
#right   100
萬用字元選擇器 權重
*      0-1
行內樣式 也是1000

權重不相等的情況如何比較:誰的權重大  聽誰的樣式
權重相等的情況如何比較:遵循就近原則 下面的會覆蓋上面的
權重相等  不遵循就近原則 可以用 !important 1000
先從高等級進行比較  高等級相同時 才比較低等級

!important > style > id > class > 標籤 > 萬用字元
複製程式碼
  • 動力: 這是我的學習筆記(來源於視訊或者查閱文件),您能從中得到收穫和進步,是我分享的動力,幫助別人,自己也會更快樂
  • 期望: 不喜勿噴,謝謝合作！如果涉及版權請及時聯絡我,馬上刪除!