Web前端之HTML+CSS的知识总结
Html和CSS的關(guān)系
學(xué)習(xí)web前端開發(fā)基礎(chǔ)技術(shù)需要掌握：HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術(shù)都是用來實現(xiàn)什么的：
HTML是網(wǎng)頁內(nèi)容的載體。內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
CSS樣式是表現(xiàn)。就像網(wǎng)頁的外衣。比如，標(biāo)題字體、顏色變化，或為標(biāo)題加入背景圖片、邊框等。所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)。
JavaScript是用來實現(xiàn)網(wǎng)頁上的特效效果。如：鼠標(biāo)滑過彈出下拉菜單。或鼠標(biāo)滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這么理解，有動畫的，有交互的一般都是用JavaScript來實現(xiàn)的。
HTML篇
認識html
- html不是一種編程語言，是一種標(biāo)記語言。
- 標(biāo)記語言是由一套標(biāo)識標(biāo)簽組成的
- html使用標(biāo)簽來描述網(wǎng)頁
html結(jié)構(gòu)
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body></body> </html>不成對出現(xiàn)的標(biāo)簽
<br> <hr> <meta> <img> <input..> <option> <link>
html基本標(biāo)簽講解
<html> <head> <body> 標(biāo)簽
<h1>—<h6> 僅僅用于標(biāo)題文本，不要為了產(chǎn)生粗體文本使用它們
<p> 段落標(biāo)簽
<strong> <b> 標(biāo)簽 讓文字產(chǎn)生加粗效果
- <strong>用于強調(diào)文本，強度更深，表示重要文本—>用于SEO優(yōu)化
- <b>只是視覺加粗效果—>單純?yōu)榱水a(chǎn)生加粗
<em> <i> 標(biāo)簽
- em用于強調(diào)文本
- i只是視覺斜體效果
- <strong>比<em>強調(diào)更強
特殊符號：
—->空格
> —>大于號
<；—>小于號
"；—>引號
©–>版權(quán)號
HTML基本標(biāo)簽
span 標(biāo)簽
? ? ? ? ? ? 對被用來組合文檔中的行內(nèi)元素
? ? ? ? ? 注意：span沒有固定的格式表現(xiàn)，當(dāng)對它應(yīng)用樣式時，才會產(chǎn)生視覺上的變化
<pre> 標(biāo)簽
? ? ? ? ? ? 文字的格式按源碼的排版來顯示，我們稱之為預(yù)處理格式
<a>標(biāo)簽—>他有一個必不可少的屬性 href
? ? ? ? target屬性：
? ? ? ? _self(在原來頁面打開)
? ? ? ? _blank（新窗口打開）
? ? ? ? _top（打開時忽略所有的框架）
? ? ? ? _parent（在父窗口中打開）
創(chuàng)建錨點和錨鏈接
? ? ? ? 錨點也是一種超鏈接，是頁面內(nèi)進行跳轉(zhuǎn)的超鏈接
? ? ? ? ? ? ? ? 第一步：創(chuàng)建錨點 <a name="錨點名稱"></a>
? ? ? ? ? ? ? ?第二步：使用創(chuàng)建好的錨點名稱 <a href="#錨點名稱">內(nèi)容</a>
marquee標(biāo)簽
? ? ? ? 可以創(chuàng)建一個內(nèi)容滾動效果
direction表示滾動方向，取值有（left,right,up,down,默認left）
loop表示滾動循環(huán)的次數(shù)，默認為無限循環(huán)
表示當(dāng)鼠標(biāo)移上區(qū)域的時候停止?jié)L動，鼠標(biāo)移開繼續(xù)滾動
img圖片標(biāo)簽與路徑
圖片標(biāo)簽與路徑：
- 常見圖片格式：jpg/Jpeg png(半/全透明都支持) gif(只支持全透明)
圖片標(biāo)簽寫法：
<img src=" " alt=" " width=" " height=" " />圖片四要素：
src="" 圖片路徑
alt="" 圖片含義
width=""圖片寬度 和圖片大小保持一致
height=""圖片高度 和圖片大小保持一致
title="" 標(biāo)題
相對路徑、絕對路徑：
- 相對路徑：(Relative Path) 相對于該文件的路徑；
- 絕對路徑：(Absolute Path) 從磁盤出發(fā)的路徑；
列表
1、無序列表
<ul> 無序列表
- 無序列表是一個沒有順序項目的列表，此列表項默認粗體圓點進行標(biāo)識
2、有序列表
有序列表也是一列項目，只是列表項目使用的是數(shù)字進行標(biāo)記。 有序列表始于 <ol> 標(biāo)簽。每個列表項始于 <li>標(biāo)簽。
列表符號
- 無序列表-列表符號：
type="circle"空心圓 type=“disc”實心圓 默認值 type="square" 方塊符 - 有序列表-列表符號
1、type="A" A B C D
2、type="a"a b c d
3、type="1"1 2 3 4 默認值type=”I” I II III type=”i” i ii iii
3、無序列表-嵌套
<ul><li>柚子<ul><li>沙田柚</li><li>蜜柚</li></ul></li><li>荔枝</li><li>蘋果</li> </ul>4、有序列表-嵌套
<ol><li>茶<ul><li>紅茶</li><li>綠茶</li></ul></li><li>果汁</li><li>牛奶</li> </ol>5、定義列表
- 定義列表不僅僅是一列項目，而是項目及其注釋的組合
- 定義列表以 <dl> 標(biāo)簽開始。每個定義列表項以 <dt>開始。每個自定義列表項的定義以 <dd> 開始。
dd是對dt的解釋
< dl>< /dl>用來創(chuàng)建一個普通的列表,
< dt>< /dt>用來創(chuàng)建列表中的上層項目，
< dd>< /dd>用來創(chuàng)建列表中最下層項目，
< dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標(biāo)志對之間。
dl是definition list的縮寫
dt是definition title的縮寫
dd是definition description的縮寫
list-style屬性具有三個屬性分量：
list-style-position：設(shè)置列表項圖標(biāo)的位置，位于文本內(nèi)或者文本外
list-style-type： 設(shè)置列表項圖標(biāo)的類型
list-style-image：使用圖像設(shè)置列表項圖標(biāo)
表單元素
<form>表單標(biāo)簽
??????????<form>表單是一個包含表單元素的區(qū)域，包括起來的都是表單的內(nèi)容
html標(biāo)簽 - Action和確認按鈕
- 當(dāng)用戶單擊確認按鈕時，表單的內(nèi)容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數(shù)據(jù)進行相關(guān)的處理。
<input>標(biāo)簽常用type類型
<input type="" name="" value="" />
type="text"單行文本輸入框
type="password" 密碼（maxlength=""）
type="radio" 單項選擇（checked="checked"）
type="checkbox"多項選擇
type="button"按鈕
type="submit"提交 type="image"圖片提交
type="file"上傳文件
type="reset"重置
type="hidden"隱藏
<label>標(biāo)簽
<label></label>label 元素不會向用戶呈現(xiàn)任何特殊效果。
不過，它為鼠標(biāo)用戶改進了可用性。
如果您在 label 元素內(nèi)點擊文本，就會觸發(fā)此控件。
就是說，當(dāng)用戶選擇該標(biāo)簽時，瀏覽器就會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
表單和表格標(biāo)簽：
<textarea>文本域標(biāo)簽
<textarea>標(biāo)簽：
<textarea></textarea>是文本域標(biāo)簽，可以在其中插入一段文字內(nèi)容，它有兩個常用屬性rows和cols
- rows表示這個文本域有多少行
- cols表示這個文本域有多少列
- 除了這兩個屬性它還有readonly（只讀，文本域的內(nèi)容無法改變，相當(dāng)于協(xié)議）和title（鼠標(biāo)放上提示）
<select>標(biāo)簽的掌握
當(dāng)提交表單時，瀏覽器會提交選定的項目，或者收集用逗號分隔的多個選項，將其合成一個單獨的參數(shù)列表，并且在將 表單數(shù)據(jù)提交給服務(wù)器時包括 name屬性
<form> <select name="" id=""><option value="1">1月</option> <option value="2">2月</option> </select></form><table>表格標(biāo)簽
<table>表格標(biāo)簽：<table>是表格標(biāo)簽，可以用它定義一個表格。
<table>的border屬性不能少
<tr>可以定義表格中的一行，一個<tr></tr>表示一行。
<td>可以定義表格中的一個單元格，<td></td>表示一個單元格。
HTML5標(biāo)簽集合
CSS篇
css的特征
1>. 將HTML頁面的內(nèi)容與樣式分離。
2>. 提高web開發(fā)的工作效率。
1>. 內(nèi)容與表現(xiàn)分離
2>. 網(wǎng)頁的表現(xiàn)統(tǒng)一，容易修改
3>. 豐富的樣式，使頁面布局更加靈活
4>. 減少網(wǎng)頁的代碼量，增加網(wǎng)頁瀏覽器速度，節(jié)省網(wǎng)絡(luò)帶寬
5>. 運用獨立頁面的css,有利于網(wǎng)頁被搜索引擎收錄
1>. 選擇器；
2>. 聲明=屬性+值；
css的引入
1. 內(nèi)嵌式
一般不寫內(nèi)嵌式，以后不好維護
2. 內(nèi)鏈?zhǔn)?/strong>
<style type="text/css">h2{font-size:30px;color:red;}</style>3. 外鏈?zhǔn)?/strong>
鏈接式 link css 同時加載的！<link rel="stylesheet" type="text/css" href="./css/index.css"> 導(dǎo)入式 實際用的很少，先加載html，在加載cssimport 是css2.1特有的，對于不兼容css2.1的瀏覽器是無效的eg:IE5以下<style type="text/css">@import url('./css/index.css');</style> 注意：@import url()必須寫在文件最開始的位置。鏈接式與導(dǎo)入式的區(qū)別：
1、標(biāo)簽屬于XHTML,@import是屬性css2.1
2、使用鏈接的css文件先加載到網(wǎng)頁當(dāng)中，再進行編譯顯示
3、使用@import導(dǎo)入的css文件，客戶端顯示HTML結(jié)構(gòu)，再把CSS文件加載到網(wǎng)頁當(dāng)中
4、@import是屬于CSS2.1特有的，對于不兼容CSS2.1的瀏覽器來說就是無效的
優(yōu)先級：內(nèi)嵌式 > 內(nèi)鏈?zhǔn)?> 外鏈?zhǔn)?/p>
選擇器
什么是選擇器：css選擇器就是要改變樣式的對象
css選擇器
class 類選擇器可以重復(fù)使用
id 選擇器唯一
id選擇器
選擇id命名的元素 以 # 開頭 #p1{color:#0f0;}
class選擇器，選擇clas命名的元素 以.開頭 .first{color:#00f;}
css代碼寫完后上線前要經(jīng)過壓縮處理
本地和服務(wù)器分兩個css版本（備份）
壓縮后注釋都清除，空間體積減少
群組選擇器
選擇多個元素,以逗號隔開 #main,.first,span,a,h1{color:red;}
包含選擇器
選擇某元素的后代元素，也稱后代選擇器，父類與子類間以空格隔開p
span{color:red;}
屬性選擇器
選擇包含某一屬性的元素
a[title]{color:red;}選擇包含title的a標(biāo)簽
a[title][href]{color:red;}選擇包含title和href的a標(biāo)簽
背景屬性
背景顏色的添加:
background:red;
backgronnd-color:red;
背景圖片的添加：
什么是平鋪？平鋪就是圖片是否重復(fù)出現(xiàn)
不平鋪：background-repeat:no-repeat;
水平方向平鋪：background-repeat:repeat-x;
垂直方向平鋪：background-repeat:repeat-y;
完全平鋪：默認為完全平鋪
背景圖片的定位就是可以設(shè)置顯示背景圖片的位置，通過屬性background-position來實現(xiàn)
background-position的取值可為英文單詞或者數(shù)值和百分值。
background-positon的英文單詞取值
background-positon的數(shù)值取值
background-position:x y;
positon的百分值取值
background-position:x% y%;
背景圖片的大小可以通過屬性background-size來設(shè)置
背景圖片是否隨著內(nèi)容的滾動而滾動由background-attachment設(shè)置
background-attachment:fixed; 固定，不隨內(nèi)容的滾動而滾動
background-attachment:scroll; 滾動，隨內(nèi)容的滾動而滾動
文字文本屬性
盒子模型
HTML文檔中的每個元素都被描繪成矩形盒子，這些矩形盒子通過一個模型來描述其占用空間，這個模型稱為盒子模型。
為了更好的控制頁面效果，css定義了盒子模型， 一個HTML元素就是一個盒子
盒子模型組成部分：
自身內(nèi)容：width、height 寬高
內(nèi)邊距： padding
盒子邊框： border 邊框線
與其他盒子距離： margin外邊距
內(nèi)容+內(nèi)邊距+邊框+外邊距=面積
盒子定位共有四種方式：相對定位、絕對定位、固定定位、浮動。
相對定位 relative
元素在顯示時，相對自己本來的位置向下或者向右偏移指定數(shù)值，但元素本身并不脫離文檔流，也就說后面的元素還認為此元素在原來的位置，所以會排列在此元素原本位置的后面（但會造成覆蓋）
絕對定位absolute
以最近的已經(jīng)定位的祖先元素為基準(zhǔn)進行偏移（如果沒有這樣的祖先元素則以瀏覽器窗口為基準(zhǔn)），元素本身脫離文檔流，也就說后面元素認為此元素不存在，所以會占據(jù)此元素原來的位置（但會造成覆蓋，脫離文檔流后就不具有塊級元素獨占一行的性質(zhì)了）
固定定位fixed
和絕對定位類似也會脫離文檔流，但總是以瀏覽器窗口為基準(zhǔn)，而且位置不會隨著滾動條移動
盒子浮動float
如果一個盒子向左浮動(float: left;)：這個元素會成為行內(nèi)元素；它后面的塊級元素會失去一半的獨占一行的特性，即左邊緊靠在浮動元素后面，右邊延伸到行尾。向右浮動和向左浮動效果類似，可以使用clear: both;清除浮動效果對后面盒子的影響
實用的css代碼片段
頁面優(yōu)化方法
減少請求數(shù)
圖片合并
CSS文件合并
減少內(nèi)聯(lián)樣式
避免在 CSS中使用 import
減少文件大小
選擇適合的圖片格式
圖片壓縮
CSS 值縮寫（Shorthand Property)
文件壓縮
頁面性能
調(diào)整文件加載順序
減少標(biāo)簽數(shù)量
調(diào)整選擇器長度
盡量使用CSS 制作顯示表現(xiàn)
增強代碼可讀性與可維護性
規(guī)范化
語義化
模塊化
總結(jié)
以上是生活随笔為你收集整理的Web前端之HTML+CSS的知识总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 5G高校教学实验室/实训室建设
- 下一篇： html设置字体为5号,以下HTML代码