HTML&CSS&JavaScript基本介紹

本文內(nèi)容為慕課網(wǎng)學(xué)習(xí)筆記睁枕。

CSS

CSS樣式類型

內(nèi)聯(lián)式css樣式挎塌，直接寫在現(xiàn)有的HTML標(biāo)簽中

<p style="color:red;font-size:12px">這里文字是紅色忌栅。</p>

嵌入式css樣式车酣，寫在當(dāng)前的文件中

嵌入式css樣式必須寫在<style></style>之間曲稼，并且一般情況下嵌入式css樣式寫在<head></head>之間
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css樣式</title>
<style type="text/css">
span{
   color:blue;
}
</style>
</head>
<body>
    <p>慕課網(wǎng)，<span>超酷的互聯(lián)網(wǎng)</span>湖员、IT技術(shù)免費(fèi)學(xué)習(xí)平臺(tái)贫悄，創(chuàng)新的網(wǎng)絡(luò)一站式學(xué)習(xí)、實(shí)踐體驗(yàn)娘摔；<span>服務(wù)及時(shí)貼心</span>窄坦，內(nèi)容專業(yè)、<span>有趣易學(xué)</span>凳寺。專注服務(wù)互聯(lián)網(wǎng)工程師快速成為技術(shù)高手鸭津！</p>
</body>

</html>

外部式css樣式，寫在單獨(dú)的一個(gè)文件中

在<head>內(nèi)（不是在<style>標(biāo)簽內(nèi)）使用<link>標(biāo)簽將css樣式文件鏈接到HTML文件內(nèi)
1肠缨、css樣式文件名稱以有意義的英文字母命名逆趋，如 main.css。
2晒奕、rel="stylesheet" type="text/css" 是固定寫法不可修改闻书。
3、<link>標(biāo)簽位置一般寫在<head>標(biāo)簽之內(nèi)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css樣式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <p>慕課網(wǎng)脑慧，<span>超酷的互聯(lián)網(wǎng)</span>魄眉、IT技術(shù)免費(fèi)學(xué)習(xí)平臺(tái)，創(chuàng)新的網(wǎng)絡(luò)一站式學(xué)習(xí)闷袒、實(shí)踐體驗(yàn)坑律；<span>服務(wù)及時(shí)貼心</span>，內(nèi)容專業(yè)囊骤、<span>有趣易學(xué)</span>晃择。專注服務(wù)互聯(lián)網(wǎng)工程師快速成為技術(shù)高手！</p>
</body>
</html>

CSS選擇器類型

標(biāo)簽選擇器
標(biāo)簽選擇器其實(shí)就是html代碼中的標(biāo)簽
類選擇器

.類選器名稱{css樣式代碼;}

使用方法：
設(shè)置標(biāo)簽
<span class="stress">膽小如鼠</span>
設(shè)置CSS樣式
.stress{color:red;}

ID選擇器
將(.)號(hào)改成(#)號(hào)就行

<span id="stress">膽小如鼠</span>
#stress{
    color:red;
}

類和ID選擇器的區(qū)別
a. ID選擇器只能在文檔中使用一次
b. 可以使用類選擇器詞列表方法為一個(gè)元素同時(shí)設(shè)置多個(gè)樣式,ID是不可以的

#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年級(jí)</span>下學(xué)期時(shí)淘捡，我們班上了一節(jié)公開課...</p>

子選擇器
還有一個(gè)比較有用的選擇器藕各，即大于符號(hào)(>),用于選擇指定標(biāo)簽元素的第一代子元素池摧。如右側(cè)代碼編輯器中的代碼：

.food>li{border:1px solid red;}

包含(后代)選擇器
包含選擇器焦除，即加入空格,用于選擇指定標(biāo)簽元素下的后輩元素

.first  span{color:red;}

請(qǐng)注意這個(gè)選擇器與子選擇器的區(qū)別，子選擇器（child selector）僅是指它的直接后代作彤，或者你可以理解為作用于子元素的第一代后代膘魄。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進(jìn)行選擇竭讳，而子選擇器是通過“>”進(jìn)行選擇创葡。

通用選擇器
通用選擇器是功能最強(qiáng)大的選擇器，它使用一個(gè)（*）號(hào)指定绢慢，它的作用是匹配html中所有標(biāo)簽元素灿渴，如下使用下面代碼使用html中任意標(biāo)簽元素字體顏色全部設(shè)置為紅色

* {color:red;}

偽選擇符(:hover)
它允許給html不存在的標(biāo)簽（標(biāo)簽的某種狀態(tài)）設(shè)置樣式洛波，比如說我們給html中一個(gè)標(biāo)簽元素的鼠標(biāo)滑過的狀態(tài)來設(shè)置字體顏色:

a:hover{color:red;}

分組選擇符
當(dāng)你想為html中多個(gè)標(biāo)簽元素設(shè)置同一個(gè)樣式時(shí)，可以使用分組選擇符（骚露，）蹬挤，如下代碼為右側(cè)代碼編輯器中的h1、span標(biāo)簽同時(shí)設(shè)置字體顏色為紅色：

h1,span{color:red;}
它相當(dāng)于下面兩行代碼：
h1{color:red;}
span{color:red;}

CSS特性

CSS繼承

繼承是一種規(guī)則棘幸，它允許樣式不僅應(yīng)用于某個(gè)特定html標(biāo)簽元素焰扳，而且應(yīng)用于其后代。比如下面代碼：如某種顏色應(yīng)用于p標(biāo)簽误续，這個(gè)顏色設(shè)置不僅應(yīng)用p標(biāo)簽吨悍，還應(yīng)用于p標(biāo)簽中的所有子元素文本，這里子元素為span標(biāo)簽蹋嵌。
注意有一些CSS樣式不具有繼承性如border:1px solid red

p{color:red;}

<p>三年級(jí)時(shí)育瓜，我還是一個(gè)<span>膽小如鼠</span>的小女孩。</p>

CSS特殊性

為同一個(gè)元素設(shè)置了不同的CSS樣式代碼栽烂，那么元素會(huì)啟用哪一個(gè)CSS樣式呢?瀏覽器是根據(jù)權(quán)值來判斷使用哪種CSS樣式的爆雹。
標(biāo)簽的權(quán)值為1，類選擇符的權(quán)值為10愕鼓，ID選擇符的權(quán)值最高為100

p{color:red;} /*權(quán)值為1*/
p span{color:green;} /*權(quán)值為1+1=2*/
.warning{color:white;} /*權(quán)值為10*/
p span.warning{color:purple;} /*權(quán)值為1+1+10=12*/
#footer .note p{color:yellow;} /*權(quán)值為100+10+1=111*/

注意：還有一個(gè)權(quán)值比較特殊--繼承也有權(quán)值但很低钙态，有的文獻(xiàn)提出它只有0.1，所以可以理解為繼承的權(quán)值最低菇晃。

CSS 層疊

如果在html文件中對(duì)于同一個(gè)元素可以有多個(gè)css樣式存在并且這多個(gè)css樣式具有相同權(quán)重值怎么辦册倒？
層疊就是在html文件中對(duì)于同一個(gè)元素可以有多個(gè)css樣式存在，當(dāng)有相同權(quán)重的樣式存在時(shí)磺送，會(huì)根據(jù)這些css樣式的前后順序來決定驻子，處于最后面的css樣式會(huì)被應(yīng)用。

p{color:red;}
p{color:green;}
<p class="first">三年級(jí)時(shí)估灿，我還是一個(gè)<span>膽小如鼠</span>的小女孩崇呵。</p>

CSS樣式優(yōu)先級(jí)：
內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部）> 嵌入樣式表（當(dāng)前文件中）> 外部樣式表（外部文件中）。

CSS重要性

在做網(wǎng)頁代碼的時(shí)馅袁，有些特殊的情況需要為某些樣式設(shè)置具有最高權(quán)值域慷，怎么辦？這時(shí)候我們可以使用!important來解決汗销。

p{color:red!important;}
p{color:green;}
<p class="first">三年級(jí)時(shí)犹褒，我還是一個(gè)<span>膽小如鼠</span>的小女孩。</p>

瀏覽器默認(rèn)的樣式 < 網(wǎng)頁制作者樣式 < 用戶自己設(shè)置的樣式弛针，但記住!important優(yōu)先級(jí)樣式是個(gè)例外叠骑，權(quán)值高于用戶自己設(shè)置的樣式

CSS格式化排版

字體
body{font-family:"Microsoft Yahei";}
字號(hào)顏色
body{font-size:12px;color:#666}
粗體
p span{font-weight:bold;}
斜體
p a{font-style:italic;}
下劃線
p a{text-decoration:underline;}
刪除線
.oldPrice{text-decoration:line-through;}
縮進(jìn)
p{text-indent:2em;}
行高
p{line-height:2em;}
中文字間距
h1{letter-spacing:50px;}
字母間距
h1{word-spacing:50px;}
對(duì)齊
div{text-align:center;}

CSS盒模型

元素分類

塊狀元素的特點(diǎn)：
1、每個(gè)塊級(jí)元素都從新的一行開始削茁，并且其后的元素也另起一行宙枷。（真霸道掉房，一個(gè)塊級(jí)元素獨(dú)占一行）
2、元素的高度慰丛、寬度圃阳、行高以及頂和底邊距都可設(shè)置。
3璧帝、元素寬度在不設(shè)置的情況下捍岳，是它本身父容器的100%（和父元素的寬度一致），除非設(shè)定一個(gè)寬度睬隶。

常用的塊狀元素有：
<div>锣夹、<p>、<h1>...<h6>苏潜、<ol>银萍、<ul>、<dl>恤左、<table>贴唇、<address>、<blockquote> 飞袋、<form>
如下代碼就是將內(nèi)聯(lián)元素a轉(zhuǎn)換為塊狀元素戳气，從而使a元素具有塊狀元素特點(diǎn)：
**a{display:block;}**

內(nèi)聯(lián)元素也稱行內(nèi)元素。
內(nèi)聯(lián)元素的特點(diǎn)為：
1巧鸭、和其他元素都在一行上瓶您；
2、元素的高度纲仍、寬度及頂部和底部邊距不可設(shè)置呀袱；
3、元素的寬度就是它包含的文字或圖片的寬度郑叠，不可改變

常用的內(nèi)聯(lián)元素有：
<a>夜赵、<span>、<br>乡革、<i>寇僧、<em>、<strong>署拟、<label>婉宰、<q>歌豺、<var>推穷、<cite>、<code>
如下代碼就是將塊狀元素div轉(zhuǎn)換為內(nèi)聯(lián)元素类咧，從而使 div 元素具有內(nèi)聯(lián)元素特點(diǎn):
** div{display:inline;}**


內(nèi)聯(lián)塊狀元素（inline-block）就是同時(shí)具備內(nèi)聯(lián)元素馒铃、塊狀元素的特點(diǎn)
inline-block元素特點(diǎn)為：
1蟹腾、和其他元素都在一行上；
2区宇、元素的高度娃殖、寬度、行高以及頂和底邊距都可設(shè)置

常用的內(nèi)聯(lián)塊狀元素有：
<img>议谷、<input>
**display:inline-block就是將元素設(shè)置為內(nèi)聯(lián)塊狀元素**

塊級(jí)元素都具備盒子模型的特征

盒模型
1. 邊框
  盒子模型的邊框就是圍繞著內(nèi)容及補(bǔ)白的線炉爆，這條線你可以設(shè)置它的粗細(xì)、樣式和顏色(邊框三個(gè)屬性)卧晓。
1芬首、border-style（邊框樣式）常見樣式有：
dashed（虛線）| dotted（點(diǎn)線）| solid（實(shí)線）。
2逼裆、border-color（邊框顏色）中的顏色可設(shè)置為十六進(jìn)制顏色郁稍，如:
border-color:#888;//前面的井號(hào)不要忘掉。
3胜宇、border-width（邊框?qū)挾龋┲械膶挾纫部梢栽O(shè)置為：
thin | medium | thick（但不是很常用）耀怜，最常還是用象素（px）。
```
div{
border:2px  solid  red;
} 
等同于
div{
border-width:2px;
border-style:solid;
border-color:red;
}
```
css 樣式中允許只為一個(gè)方向的邊框設(shè)置樣式：
```
div{border-bottom:1px solid red;}
border-top:1px solid red;
border-right:1px solid red; 
border-left:1px solid red;
```
1. 寬度和高度
  css內(nèi)定義的寬（width）和高（height）桐愉，指的是填充以里的內(nèi)容范圍财破。
  因此一個(gè)元素實(shí)際寬度（盒子的寬度）=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界
  
  image
2. 填充
  元素內(nèi)容與邊框之間是可以設(shè)置距離的，稱之為“填充”
```
div{
    padding-top:20px;
    padding-right:10px;
    padding-bottom:15px;
    padding-left:30px;
}

如果上从诲、右狈究、下、左的填充都為10px;可以這么寫
div{padding:10px;}
如果上下填充一樣為10px盏求，左右一樣為20px抖锥，可以這么寫：
div{padding:10px 20px;}
```
1. 邊界
  元素與其它元素之間的距離可以使用邊界（margin）來設(shè)置 (上右下左)
```
div{
    margin-top:20px;
    margin-right:10px;
    margin-bottom:15px;
    margin-left:30px;
}

如果上右下左的邊界都為10px;可以這么寫：
div{ margin:10px;}
如果上下邊界一樣為10px，左右一樣為20px碎罚，可以這么寫：
div{ margin:10px 20px;}
```

CSS布局模型

基本概念

布局模型是建立在盒模型基礎(chǔ)之上磅废，又不同于我們常說的 CSS 布局樣式或 CSS 布局模板。
如果說布局模型是本荆烈，那么 CSS 布局模板就是末了帆竹，是外在的表現(xiàn)形式。

流動(dòng)模型
流動(dòng)模型宿接，流動(dòng)（Flow）是默認(rèn)的網(wǎng)頁布局模式德绿。
特征：
第一點(diǎn)：塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因?yàn)樵谀J(rèn)狀態(tài)下玫鸟，塊狀元素的寬度都為100%导绷。實(shí)際上，塊狀元素都會(huì)以行的形式占據(jù)位置屎飘。
第二點(diǎn)妥曲，在流動(dòng)模型下贾费，內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示。（內(nèi)聯(lián)元素可不像塊狀元素這么霸道獨(dú)占一行）
浮動(dòng)模型
塊狀元素這么霸道都是獨(dú)占一行檐盟，如果現(xiàn)在我們想讓兩個(gè)塊狀元素并排顯示褂萧，怎么辦呢？不要著急葵萎，設(shè)置元素浮動(dòng)就可以實(shí)現(xiàn)這一愿望

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>   
<!--兩個(gè)一行靠左排列--!>
div{
    width:200px;
    height:200px;
    border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}
<!--兩個(gè)一行靠左靠右排列--!>

層模型
層布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣导犹，每個(gè)圖層能夠精確定位操作，但在網(wǎng)頁設(shè)計(jì)領(lǐng)域羡忘，由于網(wǎng)頁大小的活動(dòng)性锡足，層布局沒能受到熱捧。
層模型有三種形式：
1壳坪、絕對(duì)定位(position: absolute)
如果想為元素設(shè)置層模型中的絕對(duì)定位舶得，需要設(shè)置position:absolute(表示絕對(duì)定位)，這條語句的作用將元素從文檔流中拖出來爽蝴，然后使用left沐批、right、top蝎亚、bottom屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位九孩。如果不存在這樣的包含塊，則相對(duì)于body元素发框，即相對(duì)于瀏覽器窗口

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>

2躺彬、相對(duì)定位(position: relative)
如果想為元素設(shè)置層模型中的相對(duì)定位，需要設(shè)置position:relative（表示相對(duì)定位）梅惯，它通過left宪拥、right、top铣减、bottom屬性確定元素在正常文檔流中的偏移位置她君。相對(duì)定位完成的過程是首先按static(float)方式生成一個(gè)元素(并且元素像層一樣浮動(dòng)了起來)，然后相對(duì)于以前的位置移動(dòng)葫哗，移動(dòng)的方向和幅度由left缔刹、right、top劣针、bottom屬性確定校镐，偏移前的位置保留不動(dòng)。

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

<div id="div1"></div>

3捺典、固定定位(position: fixed)
fixed：表示固定定位鸟廓，與absolute定位類型類似，但它的相對(duì)移動(dòng)的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身。由于視圖本身是固定的肝箱，它不會(huì)隨瀏覽器窗口的滾動(dòng)條滾動(dòng)而變化哄褒，除非你在屏幕中移動(dòng)瀏覽器窗口的屏幕位置稀蟋，或改變?yōu)g覽器窗口的顯示大小煌张，因此固定定位的元素會(huì)始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置，不會(huì)受文檔流動(dòng)影響退客，這與background-attachment:fixed;屬性功能相同骏融。以下代碼可以實(shí)現(xiàn)相對(duì)于瀏覽器視圖向右移動(dòng)100px，向下移動(dòng)50px萌狂。并且拖動(dòng)滾動(dòng)條時(shí)位置固定不變档玻。

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}

Relative與Absolute的組合使用

1、參照定位的元素必須是相對(duì)定位元素的前輩元素：
<div id="box1"><!--參照定位的元素-->
    <div id="box2">相對(duì)參照元素進(jìn)行定位</div><!--相對(duì)定位元素-->
</div>
2茫藏、參照定位的元素必須加入position:relative;
#box1{
    width:200px;
    height:200px;
    position:relative;        
}
3误趴、定位元素加入position:absolute，便可以使用top务傲、bottom凉当、left、right來進(jìn)行偏移定位了售葡。
#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

CSS代碼縮寫看杭，占用更少帶寬

盒模型代碼縮寫
1、如果top挟伙、right楼雹、bottom、left的值相同尖阔，如下面代碼：
margin:10px 10px 10px 10px;
可縮寫為：
margin:10px;
2贮缅、如果top和bottom值相同、left和 right的值相同介却，如下面代碼：
margin:10px 20px 10px 20px;
可縮寫為：
margin:10px 20px;
3携悯、如果left和right的值相同，如下面代碼：
margin:10px 20px 30px 20px;
可縮寫為：
margin:10px 20px 30px;


顏色值縮寫
關(guān)于顏色的css樣式也是可以縮寫的筷笨，當(dāng)你設(shè)置的顏色是16進(jìn)制的色彩值時(shí)憔鬼，如果每?jī)晌坏闹迪嗤梢钥s寫一半胃夏。
p{color:#000000;}可以縮寫為：p{color: #000;}

p{color: #336699;}可以縮寫為：p{color: #369;}


字體縮寫
body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋體",sans-serif;
}
這么多行的代碼其實(shí)可以縮寫為一句：
body{
    font:italic  small-caps  bold  12px/1.5em  "宋體",sans-serif;
}
注意：
1轴或、使用這一簡(jiǎn)寫方式你至少要指定 font-size 和 font-family 屬性，其他的屬性(如 font-weight仰禀、font-style照雁、font-variant、line-height)如未指定將自動(dòng)使用默認(rèn)值。
2饺蚊、在縮寫時(shí) font-size 與 line-height 中間要加入“/”斜扛萍诱。
一般情況下因?yàn)閷?duì)于中文網(wǎng)站，英文還是比較少的污呼，所以下面縮寫代碼比較常用：
body{
    font:12px/1.5em  "宋體",sans-serif;
}
只是有字號(hào)裕坊、行間距、中文字體燕酷、英文字體設(shè)置

CSS樣式設(shè)置小技巧

水平居中設(shè)置

行內(nèi)元素的居中
如果被設(shè)置元素為文本籍凝、圖片等行內(nèi)元素時(shí)，水平居中是通過給父元素設(shè)置 text-align:center 來實(shí)現(xiàn)的
定寬塊狀元素居中
滿足定寬和塊狀兩個(gè)條件的元素是可以通過設(shè)置“左右margin”值為“auto”來實(shí)現(xiàn)居中的苗缩。我們來看個(gè)例子就是設(shè)置 div 這個(gè)塊狀元素水平居中：

html代碼：
<body>
  <div>我是定寬塊狀元素饵蒂，哈哈，我要水平居中顯示酱讶。</div>
</body>
css代碼：
<style>
div{
    border:1px solid red;/*為了顯示居中效果明顯為 div 設(shè)置了邊框*/
    
    width:200px;/*定寬*/
    margin:20px auto;/* margin-left 與 margin-right 設(shè)置為 auto */
}
</style>

不定寬塊狀元素居中
1.加入table標(biāo)簽
利用table標(biāo)簽的長(zhǎng)度自適應(yīng)性---即不定義其長(zhǎng)度也不默認(rèn)父元素body的長(zhǎng)度（table其長(zhǎng)度根據(jù)其內(nèi)文本長(zhǎng)度決定）退盯，因此可以看做一個(gè)定寬度塊元素，然后再利用定寬度塊狀居中的margin的方法泻肯，使其水平居中渊迁。

html代碼
<div>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
 </table>
</div>
css代碼：
<style>
table{
    border:1px solid;
    margin:0 auto;
}
</style>

改變塊級(jí)元素的display為inline類型，然后使用text-align:center 來實(shí)現(xiàn)居中效果软免。

html代碼:
<body>
<div class="container">
<ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
</ul>
</div>
</body>

css代碼:
<style>
.container{
    text-align:center;
}
/* margin:0;padding:0（消除文本與div邊框之間的間隙）*/
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
/* margin-right:8px（設(shè)置li文本之間的間隔）*/
.container li{
    margin-right:8px;
    display:inline;
}
</style>

這種方法相比第一種方法的優(yōu)勢(shì)是不用增加無語義標(biāo)簽宫纬，但也存在著一些問題：它將塊狀元素的 display 類型改為 inline，變成了行內(nèi)元素膏萧，所以少了一些功能漓骚，比如設(shè)定長(zhǎng)度值
3. 通過給父元素設(shè)置 float，然后給父元素設(shè)置 position:relative 和 left:50%榛泛，子元素設(shè)置 position:relative 和 left: -50% 來實(shí)現(xiàn)水平居中蝌蹂。

html代碼：
<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代碼：
    <style>
.container{
    float:left;
    position:relative;
    left:50%
}

.container ul{
    list-style:none;
    margin:0;
    padding:0;
    
    position:relative;
    left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>

垂直居中設(shè)置

父元素高度確定的單行文本
設(shè)置父元素的 height 和 line-height 高度一致來實(shí)現(xiàn)的。(height: 該元素的高度曹锨，line-height: 顧名思義孤个，行高（行間距），指在文本中沛简，行與行之間的基線間的距離 )
line-height 與 font-size 的計(jì)算值之差齐鲤，在 CSS 中成為“行間距”。分為兩半椒楣，分別加到一個(gè)文本行內(nèi)容的頂部和底部给郊。
這種文字行高與塊高一致帶來了一個(gè)弊端：當(dāng)文字內(nèi)容的長(zhǎng)度大于塊的寬時(shí)，就有內(nèi)容脫離了塊捧灰。

html代碼：
<div class="container">
    hi,imooc!
</div>
css代碼：
<style>
.container{
    height:100px;
    line-height:100px;
    background:#999;
}
</style>

父元素高度確定的多行文本
1. 使用插入 table (包括tbody淆九、tr、td)標(biāo)簽，同時(shí)設(shè)置 vertical-align：middle炭庙。
  css 中有一個(gè)用于豎直居中的屬性 vertical-align饲窿，在父元素設(shè)置此樣式時(shí)，會(huì)對(duì)inline-block類型的子元素都有用焕蹄。

html代碼：
<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中逾雄。</p>
</div>
</td></tr></tbody></table>
</body>

css代碼：
table td{height:500px;background:#ccc}

2. 在 chrome、firefox 及 IE8 以上的瀏覽器下可以設(shè)置塊級(jí)元素的 display 為 table-cell（設(shè)置為表格單元顯示）擦盾，激活 vertical-align 屬性嘲驾，但注意 IE6淌哟、7 并不支持這個(gè)樣式, 兼容性比較差迹卢。

html代碼：
<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中徒仓。</p>
        <p>看我是否可以居中腐碱。</p>
    </div>
</div>

css代碼：
<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome掉弛、Firefox*/
}
</style>

隱性改變display類型

有一個(gè)有趣的現(xiàn)象就是當(dāng)為元素（不論之前是什么類型元素症见，display:none 除外）設(shè)置以下 2 個(gè)句之一：
1. position : absolute
2. float : left 或 float:right
簡(jiǎn)單來說，只要html代碼中出現(xiàn)以上兩句之一殃饿，元素的display顯示類型就會(huì)自動(dòng)變?yōu)橐?display:inline-block（塊狀元素）的方式顯示谋作，當(dāng)然就可以設(shè)置元素的 width 和 height 了，且默認(rèn)寬度不占滿父元素乎芳。
如下面的代碼遵蚜，小伙伴們都知道 a 標(biāo)簽是行內(nèi)元素，所以設(shè)置它的 width 是沒有效果的奈惑，但是設(shè)置為 position:absolute 以后吭净，就可以了。

html代碼
<div class="container">
    <a href="#" title="">進(jìn)入課程請(qǐng)單擊這里</a>
</div>

css代碼
<style>
.container a{
    position:absolute;
    width:200px;
    background:#ccc;
}
</style>

JavaScript

引用方式

html中

 <script type="text/javascript">
        document.write("開啟JS之旅!");
        </script>

引用外部JS文件

html中：
<script src="script.js"></script>
script.js文件中：
document.write("引用JS文件肴甸！")

放在<head>部分
最常用的方式是在頁面中head部分放置<script>元素寂殉，瀏覽器解析head部分就會(huì)執(zhí)行這個(gè)代碼，然后才解析頁面的其余部分原在。
放在<body>部分
JavaScript代碼在網(wǎng)頁讀取到該語句的時(shí)候就會(huì)執(zhí)行友扰。

JS中如何輸出空格

1. 使用輸出html標(biāo)簽 來解決
 document.write("  "+"1"+"    "+"23");
 結(jié)果:  1    23
2. 使用CSS樣式來解決
 document.write("<span style='white-space:pre;'>"+"  1        2    3    "+"</span>");
 結(jié)果:  1       2     3

三種提示框 alert、 prompt庶柿、 confirm

alert(字符串或變量);  
alert彈出消息對(duì)話框(包含一個(gè)確定按鈕)村怪。

confirm(str);
參數(shù)說明:
str：在消息對(duì)話框中要顯示的文本
返回值: Boolean值
返回值:
用戶點(diǎn)擊"確定"按鈕時(shí)，返回true
當(dāng)用戶點(diǎn)擊"取消"按鈕時(shí)澳泵，返回false

prompt(str1, str2);
參數(shù)說明：
str1: 要顯示在消息對(duì)話框中的文本实愚，不可修改
str2：文本框中的內(nèi)容，可以修改
返回值:
1. 點(diǎn)擊確定按鈕，文本框中的內(nèi)容將作為函數(shù)返回值
2. 點(diǎn)擊取消按鈕腊敲，將返回null

JavaScript打開新窗口

window.open([URL], [窗口名稱], [參數(shù)字符串])
參數(shù)說明：
URL：可選參數(shù)击喂，在窗口中要顯示網(wǎng)頁的網(wǎng)址或路徑。如果省略這個(gè)參數(shù)碰辅，或者它的值是空字符串懂昂，那么窗口就不顯示任何文檔。
窗口名稱：可選參數(shù)没宾，被打開窗口的名稱凌彬。
    1.該名稱由字母、數(shù)字和下劃線字符組成循衰。
    2."_top"铲敛、"_blank"、"_self"具有特殊意義的名稱会钝。
       _blank：在新窗口顯示目標(biāo)網(wǎng)頁
       _self：在當(dāng)前窗口顯示目標(biāo)網(wǎng)頁
       _top：框架網(wǎng)頁中在上部窗口中顯示目標(biāo)網(wǎng)頁
    3.相同 name 的窗口只能創(chuàng)建一個(gè)伐蒋，要想創(chuàng)建多個(gè)窗口則 name 不能相同。
    4.name 不能包含有空格迁酸。
參數(shù)字符串：可選參數(shù)先鱼，設(shè)置窗口參數(shù)，各參數(shù)用逗號(hào)隔開奸鬓。
示例：
<script type="text/javascript"> window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>

JavaScript關(guān)閉窗口

window.close();   //關(guān)閉本窗口
<窗口對(duì)象>.close();   //關(guān)閉指定的窗口

DOM樹

文檔對(duì)象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標(biāo)準(zhǔn)方法焙畔。DOM 將HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹結(jié)構(gòu)（節(jié)點(diǎn)樹）

HTML文檔可以說由節(jié)點(diǎn)構(gòu)成的集合串远，三種常見的DOM節(jié)點(diǎn):

元素節(jié)點(diǎn)：上圖中<html>宏多、<body>、<p>等都是元素節(jié)點(diǎn)抑淫，即標(biāo)簽绷落。
文本節(jié)點(diǎn):向用戶展示的內(nèi)容，如<li>...</li>中的JavaScript始苇、DOM砌烁、CSS等文本。
屬性節(jié)點(diǎn):元素屬性催式，如<a>標(biāo)簽的鏈接屬性函喉。

image

image

通過ID獲取元素

網(wǎng)頁由標(biāo)簽將信息組織起來，而標(biāo)簽的id屬性值是唯一的荣月，就像是每人有一個(gè)身份證號(hào)一樣管呵，只要通過身份證號(hào)就可以找到相對(duì)應(yīng)的人。那么在網(wǎng)頁中哺窄，我們通過id先找到標(biāo)簽捐下，然后進(jìn)行操作

 document.getElementById(“id”)

innerHTML屬性

innerHTML 屬性用于獲取或替換 HTML 元素的內(nèi)容账锹。
語法:
Object.innerHTML
注意:
1.Object是獲取的元素對(duì)象，如通過document.getElementById("ID")獲取的元素.
2.注意書寫坷襟，innerHTML區(qū)分大小寫

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一種基于對(duì)象奸柬、事件驅(qū)動(dòng)的簡(jiǎn)單腳本語言，嵌入在HTML文檔中婴程，由瀏覽器負(fù)責(zé)解釋和執(zhí)行廓奕，在網(wǎng)頁上產(chǎn)生動(dòng)態(tài)的顯示效果并實(shí)現(xiàn)與用戶交互功能。</p>
<script type="text/javascript">
  var mychar= document.getElementById("con")          ;
  document.write("原標(biāo)題:"+mychar.innerHTML+"<br>"); //輸出原h(huán)2標(biāo)簽內(nèi)容
  mychar.innerHTML = "Hello world";
  document.write("修改后的標(biāo)題:"+mychar.innerHTML); //輸出修改后h2標(biāo)簽內(nèi)容
</script>
</body>
</html>

改變HTML樣式

HTML DOM 允許 JavaScript 改變 HTML 元素的樣式
語法:
Object.style.property=new style;
注意:Object是獲取的元素對(duì)象档叔，如通過document.getElementById("id")獲取的元素桌粉。

image

<p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="blue";
</script>

顯示和隱藏(display屬性)

網(wǎng)頁中經(jīng)常會(huì)看到顯示和隱藏的效果，可通過display屬性來設(shè)置
語法：
Object.style.display = value
value取值：
none.此元素不會(huì)被顯示（隱藏）
block,瓷元素顯示為塊級(jí)元素(顯示)

控制類名（classname屬性）

語法：
object.className = classname
作用:
1.獲取元素的class 屬性

為網(wǎng)頁內(nèi)的某個(gè)元素指定一個(gè)css樣式來更改該元素的外觀

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className屬性</title>
<style>
    body{ font-size:16px;}
    .one{
        border:1px solid #eee;
        width:230px;
        height:50px;
        background:#ccc;
        color:red;
    }
    .two{
        border:1px solid #ccc;
        width:230px;
        height:50px;
        background:#9CF;
        color:blue;
    }
    </style>
</head>
<body>
    <p id="p1" > JavaScript使網(wǎng)頁顯示動(dòng)態(tài)效果并實(shí)現(xiàn)與用戶交互功能衙四。</p>
    <input type="button" value="添加樣式" onclick="add()"/>
    <p id="p2" class="one">JavaScript使網(wǎng)頁顯示動(dòng)態(tài)效果并實(shí)現(xiàn)與用戶交互功能铃肯。</p>
    <input type="button" value="更改外觀" onclick="modify()"/>

    <script type="text/javascript">
       function add(){
          var p1 = document.getElementById("p1");
          p1.className = "one";
       }
       function modify(){
          var p2 = document.getElementById("p2");
          p2.className = "two";
       }
    </script>
</body>
</html>

最后編輯于：2017.12.05 06:02:12

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市届搁，隨后出現(xiàn)的幾起案子缘薛，更是在濱河造成了極大的恐慌窍育，老刑警劉巖卡睦，帶你破解...
沈念sama閱讀 217,826評(píng)論 6贊 506
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異漱抓，居然都是意外死亡表锻，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,968評(píng)論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門乞娄，熙熙樓的掌柜王于貴愁眉苦臉地迎上來瞬逊，“玉大人，你說我怎么就攤上這事仪或∪纺鳎” “怎么了？”我有些...
開封第一講書人閱讀 164,234評(píng)論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵范删，是天一觀的道長(zhǎng)蕾域。經(jīng)常有香客問我，道長(zhǎng)到旦，這世上最難降的妖魔是什么旨巷？我笑而不...
開封第一講書人閱讀 58,562評(píng)論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮添忘，結(jié)果婚禮上采呐，老公的妹妹穿的比我還像新娘。我一直安慰自己搁骑，他們只是感情好斧吐，可當(dāng)我...
茶點(diǎn)故事閱讀 67,611評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布又固。她就那樣靜靜地躺著，像睡著了一般煤率。火紅的嫁衣襯著肌膚如雪口予。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,482評(píng)論 1贊 302
城市分裂傳說
那天涕侈，我揣著相機(jī)與錄音沪停，去河邊找鬼。笑死裳涛，一個(gè)胖子當(dāng)著我的面吹牛木张，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播端三，決...
沈念sama閱讀 40,271評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼舷礼，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來了郊闯？” 一聲冷哼從身側(cè)響起妻献，我...
開封第一講書人閱讀 39,166評(píng)論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎团赁，沒想到半個(gè)月后育拨，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,608評(píng)論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡欢摄，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,814評(píng)論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年熬丧，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片怀挠。...
茶點(diǎn)故事閱讀 39,926評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡析蝴，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出绿淋，到底是詐尸還是另有隱情闷畸，我是刑警寧澤，帶...
沈念sama閱讀 35,644評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布吞滞，位于F島的核電站佑菩，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏冯吓。R本人自食惡果不足惜倘待，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,249評(píng)論 3贊 329
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望组贺。院中可真熱鬧凸舵，春花似錦、人聲如沸失尖。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,866評(píng)論 0贊 22
一樁弒父案渐苏，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至菇夸，卻和暖如春琼富，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背庄新。一陣腳步聲響...
開封第一講書人閱讀 32,991評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來泰國(guó)打工鞠眉，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人择诈。一個(gè)月前我還...
沈念sama閱讀 48,063評(píng)論 3贊 370
代替公主和親
正文我出身青樓械蹋，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親羞芍。傳聞我的和親對(duì)象是個(gè)殘疾皇子哗戈，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,871評(píng)論 2贊 354