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