html 主要的標簽的介紹： <head></head>標簽裡面是放的是思想,設置瀏覽器用的，是人看不到的 編碼字元集：gb2312 國家編碼字元集（簡體，亞裔字元集） gbk（gb2312+繁體） unicode 是萬國碼，包括了所有國家的語言 uft-8 是 unicode 一般放的是<meta ...
html 主要的標簽的介紹：
<head></head>標簽裡面是放的是思想,設置瀏覽器用的，是人看不到的
編碼字元集：gb2312 國家編碼字元集（簡體，亞裔字元集） gbk（gb2312+繁體）
unicode 是萬國碼，包括了所有國家的語言 uft-8 是 unicode
一般放的是<meta charsrt = "utf-8"> 自閉和標簽
<body></body>是展示給用戶看的 所有的標簽是寫在body裡面
1 <p></p>段落，讓內容成段展示 <br>換行
2 div 和span標簽（最重要的標簽）
<div></div>獨占一行
<span></span>不獨占一行
div和span這兩個標簽是為了成塊展示，規格化，這兩個就是一個容器
功能1：分塊明確，讓整個頁面更加結構化
- 功能2：捆綁操作的作用（搬書架） 通常配合css一起用
<div> <strong>加粗字體<strong> <em>斜體展示</em> <del>劃線標簽</del> </div>
3<ul><ol></ol></ul> 標簽
<ul type="A"> <ol>小紅是傻子</ol> <ol>蘋果</ol> <ol>我是傻子</ol> 將裡面的代碼有序的輸出 按字母A~Z排序 排序方式1，a，A，i，I </ul>
4<a href="">標簽 超文本連接
<a href="https://www.baidu.com"> 點擊我</a> 點擊就能直接跳轉到百度 <a href = "tel:17548935889">打電話</a> <a href ="maito :[email protected]">發郵件</a>
5 <img src="" alt="" title="">標簽
src裡面寫路勁 1網上url 2 本地的絕地路徑 3 本地的相對路勁
alt圖片占位符 可以降低錯誤
title圖片提示符 當滑鼠放在上面可以提示圖片的意識
6 <form method="get/post" action=" "> method是發送數據的方式 有兩個值 action 是發送給人的地址
7<input type ="text" name="" value=""> 輸入框
<input type ="password" name="" value="">密碼輸入框
<input type ="button" name="" value="">按鈕
<input type ="radio" name="" value="">單選框
<input type ="checkbox" name="" value="">覆選框
8 <select name=""><option></option></select>下拉框
9<table><tr><tb></tb><tb></tb></tr><table>
CSS選擇器
1.id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。
HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 "#" 來定義
#para1 { text-align:center; color:red; }
2.
lass 選擇器用於描述一組元素的樣式，class 選擇器有別於id選擇器，class可以在多個元素中使用。
class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示：
.center {text-align:center;}
3.父子選擇器
div span{ background-color:red; 父子選擇器有嚴格的層級關係 但不局限什麼類型的選擇器 }
經過我的總結
4.通配符選擇器
*{ backgroun-color:red; 是所有的代碼都變成紅色 }
5分組選擇器
em， strong， span，{ background-color:red; 簡化代碼量 }
CSS權重（重點）
！important Infinity
行間樣式 1000
id 100
class/偽類 10
標簽/偽元素 1
通配符 0
權重的重點是 當2個屬性共同作用一個屬性，誰的權重高，就輸出誰，如果權重一樣的話，後面的代碼會覆蓋前面的代碼
CSS代碼
1 CSS背景
- background-color：； 添加背景顏色
- background-image：url（‘’）：添加背景圖片
- background-repeat：；背景圖片水平或垂直平鋪
- background-attachment：； 背景圖片是否固定或者隨著頁面的其餘部分滾動
- background-position：；背景圖片設置定位 改變圖片位置
4CSS鏈接的樣式，可以用任何CSS屬性（如顏色，字體，背景等）。
特別的鏈接，可以有不同的樣式，這取決於他們是什麼狀態。
a：link 正常 未訪問過的鏈接
a: visited 用戶已訪問過的連接
a ：hover 當用戶滑鼠放在鏈接上時
a: active 鏈接被點擊的那一刻
- a:hover 必須跟在 a:link 和 a:visited後面
- a:active 必須跟在 a:hover後面
border margin padding 都有4個值 分別為 上 ，右， 下， 左
盒模型計算 真正的width = width + border*2 + padding左右2個像素
真正的height = width + border*2 +padding 上下2個像素
隱藏元素 - display:none或visibility:hidden
塊級元素(block)特性：
- 總是獨占一行，表現為另起一行開始，而且其後的元素也必須另起一行顯示;
- 寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;
內聯元素(inline)特性：
- 和相鄰的內聯元素在同一行;
- 寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變，就是裡面文字或圖片的大小;
塊級元素主要有：
- address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
內聯元素主要有：
- a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
可變元素(根據上下文關係確定該元素是塊元素還是內聯元素)：
- applet ,button ,del ,iframe , ins ,map ,object , script
CSS中塊級、內聯元素的應用：
利用CSS我們可以擺脫上面表格裡HTML標簽歸類的限制，自由地在不同標簽/元素上應用我們需要的屬性。
主要用的CSS樣式有以下三個：
- display:block -- 顯示為塊級元素
- display:inline -- 顯示為內聯元素
- display:inline-block -- 顯示為內聯塊元素，表現為同行顯示並可修改寬高內外邊距等屬性
我們常將<ul>元素加上display:inline-block樣式，原本垂直的列表就可以水平顯示了
position 定位屬性的五個值：
- static
HTML 元素的預設值，即沒有定位，遵循正常的文檔流對象。
靜態定位的元素不會受到 top, bottom, left, right影響。
- relative 相對定位元素的定位是相對其正常位置。 移動相對定位元素，但它原本所占的空間不會改變
- fixed
元素的位置相對於瀏覽器視窗是固定位置。
即使視窗是滾動的它也不會移動：
- absolute 絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於<html>:
- sticky 基於用戶的滾動位置來定位
CSS Overflow
Overflow 有5個值：
visible 預設值 內容不會被修剪 會呈現在元素框之外
hidden 內容會被修剪 ，並且其餘部分不可見
scroll 內容會被修剪 但是瀏覽器會顯示滾動條以便查看其餘的內容
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其餘的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。
CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。
Float（浮動），往往是用於圖像，但它在佈局時一樣非常有用。
一個浮動元素會儘量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動元素之後的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
如果圖像是右浮動，下麵的文本流將環繞在它左邊 左浮動 下麵的文本流將環繞在它右邊
float ： left/right
消除浮動 如果想哪個標簽不受浮動影響 直接對那個標簽 clear ： both；
想消除所有浮動流 對用浮動的那個標簽進行消除
span::before { content:""; display:block; clear:both; } 消除浮動3要素 span:: after { content:""; display:block; clear:both; }
CSS 文本佈局 - 水平 -垂直對齊
要水平居中對齊一個元素(如 <div>), 可以使用 margin: auto;。
設置到元素的寬度將防止它溢出到容器的邊緣。
元素通過指定寬度，並將兩邊的空外邊距平均分配：
text-align ：center； 文本居中對齊
要讓圖片居中對齊, 可以使用 margin: auto; 並將它放到 塊 元素中
左右對齊 使用定位 position
Css 偽類 用的最多的 ：hover 當滑鼠放上去會顯示的狀態
Css偽元素
first-letter" 偽元素只能用於塊級元素。
下麵的屬性可應用於 "first-letter" 偽元素：
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (only if "float" is "none")
- text-transform
- line-height
- float
- clear
opacity 0.0 ~1.0 值越小 元素就會越透明
一個網頁最重要的是佈局 點擊我教你如何佈局
