HTML基本知識點總結

HTML&CSS很久沒有用了，再拿出來已是有點生疏，現在將自己總結的主要知識點記錄在這裏，可以快速回憶。

HTML

基本標籤

<span>標籤是沒有語義的，它的作用就是爲了設置單獨的樣式用的。如果現在我們想把上一小節的第一段話“美國夢”三個字設置成blue（藍色），但注意不是爲了強調“美國夢”，而只是想爲它設置和其它文字不同的樣式（並不想讓屏幕閱讀器對“美國夢”這三個字加重音讀出），所以這樣情況下就可以用到<span>標籤了，並且在style中修改其樣式的使用方法爲span{}
<q>標籤的意義是引用別人的話，注意這裏用<q>標籤的真正關鍵點不是它的默認樣式雙引號（如果這樣我們不如自己在鍵盤上輸入雙引號就行了），而是它的語義：引用別人的話。語義化！！！讓網頁更好的被搜索引擎理解
<blockquote>的作用也是引用別人的文本。但它是對長文本的引用，如在文章中引入大段某知名作家的文字，這時需要這個標籤。等等，上一節<q>標籤不是也是對文本的引用嗎？不要忘記<q>標籤是對簡短文本的引用，比如說引用一句話就用到<q>標籤。瀏覽器對<blockquote>標籤的解析是縮進樣式。
在 html 代碼中輸入回車、空格都是沒有作用的。在html文本中想輸入回車換行，就必須輸入<br />；要想輸入空格，必須寫入&nbsp（no-breaking space）;
在介紹語言技術的網站中，避免不了在網頁中顯示一些計算機專業的編程代碼，當代碼爲一行代碼時，你就可以使用<code>標籤了，如果是多行代碼，可以使用<pre>標籤。<pre> 標籤的主要作用：預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。<pre> 標籤不只是爲顯示計算機的源代碼時用的，在你需要在網頁中預顯示格式時都可以使用它，只是<pre>標籤的一個常見應用就是用來展示計算機的源代碼。
列表就可以使用ul-li標籤來完成。ul-li是沒有前後順序的信息列表。ul-li在網頁中顯示的默認樣式一般爲：每項li前都自帶一個圓點。如果想在網頁中展示有前後順序的信息列表，怎麼辦呢？如，噹噹網上的書籍熱賣排行榜，如下圖所示。這類信息展示就可以使用<ol>標籤來製作有序列表來展示。<ol>在網頁中顯示的默認樣式一般爲：每項<li>前都自帶一個序號，序號默認從1開始
在網頁製作過程過中，可以把一些獨立的邏輯部分劃分出來，放在一個<div>標籤中，這個<div>標籤的作用就相當於一個容器。什麼是邏輯部分？它是頁面上相互關聯的一組元素。如網頁中的獨立的欄目版塊，就是一個典型的邏輯部分。同時，爲了使邏輯更加清晰，我們可以爲這一個獨立的邏輯部分設置一個名稱，用id屬性來爲<div>提供唯一的名稱，這個就像我們每個人都有一個身份證號，這個身份證號是唯一標識我們的身份的，也是必須唯一的。
有時候我們需要在網頁上展示一些數據，創建表格的四個元素：table、tbody、tr、th、td。表格還是需要添加一些標籤進行優化，可以添加標題和摘要。摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。語法：<table summary="表格簡介文本">。標題用以描述表格內容，標題的顯示位置：表格上方。<table><caption>標題文本</caption></table>。
使用<a>標籤可實現超鏈接，它在網頁製作中可以說是無處不在，只要有鏈接的地方，就會有這個標籤。<a href="目標網址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>。<a>標籤在默認情況下，鏈接的網頁是在當前瀏覽器窗口中打開，有時我們需要在新的瀏覽器窗口中打開。<a href="目標網址" target="_blank">click here!</a>。<a>標籤還有一個作用是可以鏈接Email地址，使用mailto能讓訪問者便捷向網站管理者發送電子郵件。我們還可以利用mailto做許多其它事情。如果mailto後面同時有多個參數的話，第一個參數必須以“?”開頭，後面的參數每一個都以“&”分隔。
在網頁的製作中爲使網頁炫麗美觀，肯定是缺少不了圖片，可以使用<img>標籤來插入圖片。<img src="圖片地址" alt="下載失敗時的替換文本" title = "提示文本">

表單

使用表單標籤，與用戶交互！！！
網站怎樣與用戶進行交互？答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的數據傳送到服務器端，這樣服務器端程序就可以處理表單傳過來的數據。語法：<form method="傳送方式" action="服務器文件">，<form> ：<form>標籤是成對出現的，以<form>開始，以</form>結束；action ：瀏覽者輸入的數據被傳送到的地方,比如一個PHP頁面(save.php)；method ：數據傳送的方式（get/post）。注意: 1、所有表單控件（文本框、文本域、按鈕、單選框、複選框等）都必須放在<form></form>標籤之間（否則用戶輸入的信息可提交不到服務器上哦！）。2、method:post/get的區別這一部分內容屬於後端程序員考慮的問題。介紹如下：
Form中的get和post方法，在數據傳輸過程中分別對應了GET和POST方法。
二者主要區別如下：
1、Get將表單中數據的按照variable=value的形式，添加到action所指向的URL後面，並且兩者使用“?”連接，而各個變量之間使用“&”連接；Post是將表單中的數據放在form的數據體中，按照變量和值相對應的方式，傳遞到action所指向URL。
如下形式：
http://www.imooc.com/test.asp?name=lilian&password=12345678
2、Get是不安全的，因爲在傳輸過程，數據被存放在請求的URL地址中，這樣就可能會有一些隱私的信息被第三方看到。
3、Get方式傳輸的數據量非常小，一般限制在 2KB 左右，但是執行效率卻比 Post 方法好；而 Post 方式傳遞的數據量相對較大，它是等待服務器來讀取數據，不過也有字節限制，這是爲了避免對服務器用大量數據進行惡意攻擊，根據微軟方面的說法，微軟對用 Request.Form()可接收的最大數據有限制，IIS4中爲 80KB 字節，IIS5 中爲 100KB 字節。
綜上所述，請儘量用 Post 方法。
當用戶要在表單中鍵入字母、數字等內容時，就會用到文本輸入框。文本框也可以轉化爲密碼輸入框。當type=”text”時，輸入框爲文本輸入框，當type=”password”時, 輸入框爲密碼輸入框；name：爲文本框命名，以備後臺程序ASP 、PHP使用。（name是獨一無二的id！value纔是顯示值！！！）

<form>
   <input type="text/password" name="名稱" value="默認文本" />
</form>

4.在使用表單設計調查表時，爲了減少用戶的操作，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和複選框，兩者的區別是單選框中的選項用戶只能選擇一項，而複選框中用戶可以任意選擇多項，甚至全選。語法：<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>。當 type=”radio” 時，控件爲單選框，當 type=”checkbox” 時，控件爲複選框；value：提交數據到服務器的值（後臺程序PHP使用）；name：爲控件命名，以備後臺程序 ASP、PHP 使用（value和name一個是值，一個是名稱，都是要提交到後臺的！！！都不是要顯示的值）；checked：當設置 checked=”checked” 時，該選項被默認選中。注意:同一組的單選按鈕，name 取值一定要一致，比如上面例子爲同一個名稱“radioLove”，這樣同一組的單選按鈕纔可以起到單選的作用。
5.下拉列表在網頁中也常會用到，它可以有效的節省網頁空間。既可以單選、又可以多選。

<form action="save.php" method="post" >
    <label>愛好:</label> （所有文字都應用label、span之類的框住，不要孤零零）
    <select>
      <option value="看書">看書</option>
      <option value="旅遊" selected="selected">旅遊</option>
      <option value="運動">運動</option>
      <option value="購物">購物</option>
    </select>
</form>

其中，<option value="向服務器提交的值">顯示的值</option>。（給服務器的傳值和顯示的值要區分清楚）
下拉列表也可以進行多選操作，在<select>標籤中設置multiple=”multiple”屬性，就可以實現多選功能，在 widows 操作系統下，進行多選時按下Ctrl鍵同時進行單擊（在 Mac下使用 Command +單擊），可以選擇多個選項。
6. 在表單中有兩種按鈕可以使用，分別爲：提交按鈕、重置。這一小節講解提交按鈕：當用戶需要提交表單信息到服務器時，需要用到提交按鈕。語法：<input type="submit/reset" value="提交/重置">
7. form表單中的label標籤：label標籤不會向用戶呈現任何特殊效果，它的作用是爲鼠標用戶改進了可用性。如果你在 label 標籤內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上（就自動選中和該 label標籤相關連的表單控件上）。語法：<label for="控件id名稱"> 注意：標籤的 for 屬性中的值應當與相關控件的 id 屬性值（即name而非value）一定要相同。
**

CSS

**
1. CSS全稱爲“層疊樣式表 (Cascading Style Sheets)”，它主要是用於定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字體加粗等。使用CSS樣式的一個好處是通過定義某個樣式，可以讓不同網頁位置的同一元素的文字有着統一的字體、字號或者顏色等。
2. css 樣式由選擇符和聲明組成，而聲明又由屬性和值組成，如下圖所示：
選擇符：又稱選擇器，指明網頁中要應用樣式規則的元素，如本例中是網頁中所有的段（p）的文字將變成藍色，而其他的元素（如ol）不會受到影響。聲明：在英文大括號“｛｝”中的的就是聲明，屬性和值之間用英文冒號“：”分隔。當有多條聲明時，中間可以英文分號“;”分隔。
3. 就像在Html的註釋一樣，在CSS中也有註釋語句：用/*註釋語句*/來標明（Html中使用)。
4. CSS樣式可以寫在哪些地方呢？從CSS 樣式代碼插入的形式來看基本可以分爲以下3種：內聯式、嵌入式和外部式三種。
內聯式css樣式表就是把css代碼直接寫在現有的HTML標籤中，如下面代碼：<p style="color:red">這裏文字是紅色</p>。注意要寫在元素的開始標籤裏，並且css樣式代碼要寫在style=”“雙引號中，如果有多條css樣式代碼設置可以寫在一起，中間用分號”;”隔開。如若需要更改多個標籤，爲每一個標籤加入style=””很不方便。
嵌入式 css樣式，就是可以把css樣式代碼寫在<style type="text/css"></style>標籤之間。嵌入式css樣式必須寫在<style></style>之間，並且一般情況下嵌入式css樣式寫在<head></head>之間。如右邊編輯器中的代碼。
外部式 css樣式(也可稱爲外聯式)就是把css代碼寫一個單獨的外部文件中，這個css樣式文件以“.css”爲擴展名，在<head>內（不是在<style>標籤內）使用<link>標籤將css樣式文件鏈接到HTML文件內，如下面代碼：<link href="base.css" rel="stylesheet" type="text/css" /> 注意，css樣式文件名稱以有意義的英文字母命名，如 main.css。rel=”stylesheet” type=”text/css” 是固定寫法不可修改。<link>標籤位置一般寫在<head>標籤之內。
5. 這三種樣式是有優先級的，記住他們的優先級：內聯式 > 嵌入式 > 外部式。但是嵌入式>外部式有一個前提：嵌入式css樣式的位置一定在外部式的後面。如右代碼編輯器就是這樣，<link href="style.css" ...>代碼在<style type="text/css">...</style>代碼的前面（實際開發中也是這麼寫的）。其實總結來說，就是–就近原則（離被設置元素越近優先級別越高）。
選擇器（6-10不太熟）
1. 每一條css樣式聲明（定義）由兩部分組成，形式如下：選擇器{ 樣式; } 在{}之前的部分就是“選擇器”，“選擇器”指明瞭{}中的“樣式”的作用對象，也就是“樣式”作用於網頁中的哪些元素。
2. 標籤選擇器其實就是html代碼中的標籤。如右側代碼編輯器中的<html>、<body>、<h1>、<p>、<img>。例如下面代碼：p{font-size:12px;line-height:1.6em;} 爲p標籤設置12px字號，行間距設置1.6em的樣式。
3. 類選擇器在css樣式編碼中是最常用到的，如右側代碼編輯器中的代碼:可以實現爲“膽小如鼠”、“勇氣”字體設置爲紅色。語法：.類選器名稱{css樣式代碼;} 注意：1、英文圓點開頭2、其中類選器名稱可以任意起名（但不要起中文噢）使用方法：第一步：使用合適的標籤把要修飾的內容標記起來，如下：<span>膽小如鼠</span> 第二步：使用class=”類選擇器名稱”爲標籤設置一個類，如下：<span class="stress">膽小如鼠</span> 第三步：設置類選器css樣式，如下：.stress{color:red;}/*類前面要加入一個英文圓點*/
4. 在很多方面，ID選擇器都類似於類選擇符，但也有一些重要的區別：1、爲標籤設置id=”ID名稱”，而不是class=”類名稱”。2、ID選擇符的前面是井號（#）號，而不是英文圓點（.）。
5. 類選擇器和ID選擇器：相同點：可以應用於任何元素不同點：1、ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。2、可以使用類選擇器詞列表方法爲一個元素同時設置多個樣式。我們可以爲一個元素同時設多個樣式，但只可以用類選擇器的方法實現，ID選擇器是不可以的（不能使用 ID 詞列表）
6. 還有一個比較有用的選擇器子選擇器，即大於符號(>),用於選擇指定標籤元素的第一代子元素。如右側代碼編輯器中的代碼：.food>li{border:1px solid red;} 這行代碼會使class名爲food下的子元素li（水果、蔬菜）加入紅色實線邊框。即改變某一個標籤的第一個子元素。
7. 包含選擇器，即加入空格,用於選擇指定標籤元素下的後輩元素。如右側代碼編輯器中的代碼：.first span{color:red;} 請注意這個選擇器與子選擇器的區別，子選擇器（child selector）僅是指它的直接後代，或者你可以理解爲作用於子元素的第一代後代。而後代選擇器是作用於所有子後代元素。後代選擇器通過空格來進行選擇，而子選擇器是通過“>”進行選擇。總結：>作用於元素的第一代後代，空格作用於元素的所有後代。
8. 通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，它的作用是匹配html中所有標籤元素，如下使用下面代碼使用html中任意標籤元素字體顏色全部設置爲紅色：* {color:red;}
9. 更有趣的是僞類選擇符，爲什麼叫做僞類選擇符，它允許給html不存在的標籤（標籤的某種狀態）設置樣式，比如說我們給html中一個標籤元素的鼠標滑過的狀態來設置字體顏色：a:hover{color:red;} 上面一行代碼就是爲 a 標籤鼠標滑過的狀態設置字體顏色變紅。這樣就會使第一段文字內容中的“膽小如鼠”文字加入鼠標滑過字體顏色變爲紅色特效。關於僞類選擇符，到目前爲止，可以兼容所有瀏覽器的“僞類選擇符”就是 a 標籤上使用 :hover 了（其實僞類選擇符還有很多，尤其是 css3 中，但是因爲不能兼容所有瀏覽器，本教程只是講了這一種最常用的）。其實 :hover 可以放在任意的標籤上，比如說 p:hover，但是它們的兼容性也是很不好的，所以現在比較常用的還是 a:hover 的組合。
10. 當你想爲html中多個標籤元素設置同一個樣式時，可以使用分組選擇符（，），如下代碼爲右側代碼編輯器中的h1、span標籤同時設置字體顏色爲紅色：h1,span{color:red;} 就相當於多個選擇器設置爲相同樣式時使用。（分組選擇器是”,”，如果是空格就變成包含選擇器了）
繼承
1. CSS的某些樣式是具有繼承性的，那麼什麼是繼承呢？繼承是一種規則，它允許樣式不僅應用於某個特定html標籤元素，而且應用於其後代。比如下面代碼：如某種顏色應用於p標籤，這個顏色設置不僅應用p標籤，還應用於p標籤中的所有子元素文本，這裏子元素爲span標籤。p{color:red;} <p>三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p> 但注意有一些css樣式是不具有繼承性的。如border:1px solid red;
2. 有的時候我們爲同一個元素設置了不同的CSS樣式代碼，那麼元素會啓用哪一個CSS樣式呢?
p{color:red;}
.first{color:green;}

<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>

p和.first都匹配到了p這個標籤上，那麼會顯示哪種顏色呢？green是正確的顏色，那麼爲什麼呢？是因爲瀏覽器是根據權值來判斷使用哪種css樣式的，權值高的就使用哪種css樣式。
下面是權值的規則：標籤的權值爲1，類選擇符的權值爲10，ID選擇符的權值最高爲100。注意：還有一個權值比較特殊–繼承也有權值但很低，有的文獻提出它只有0.1，所以可以理解爲繼承的權值最低。

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

3.我們來思考一個問題：如果在html文件中對於同一個元素可以有多個css樣式存在並且這多個css樣式具有相同權重值怎麼辦？好，這一小節中的層疊幫你解決這個問題。層疊就是在html文件中對於同一個元素可以有多個css樣式存在，當有相同權重的樣式存在時，會根據這些css樣式的前後順序來決定，處於最後面的css樣式會被應用。層疊很好理解，理解爲後面的樣式會覆蓋前面的樣式。所以前面的css樣式優先級就不難理解了：內聯樣式表（標籤內部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）。
4. 我們在做網頁代碼的時，有些特殊的情況需要爲某些樣式設置具有最高權值，怎麼辦？這時候我們可以使用!important來解決。注意：!important要寫在分號的前面

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

這裏注意當網頁製作者不設置css樣式時，瀏覽器會按照自己的一套樣式來顯示網頁。並且用戶也可以在瀏覽器中設置自己習慣的樣式，比如有的用戶習慣把字號設置爲大一些，使其查看網頁的文本更加清楚。這時注意樣式優先級爲：瀏覽器默認的樣式 < 網頁製作者樣式 < 用戶自己設置的樣式，但記住!important優先級樣式是個例外，權值高於用戶自己設置的樣式。
字體字號

font-size:20px;
color:red;
font-weight:normal/bold
font-family:Microsoft Yahei
font-style:italic
text-decoration:underline/line-through;
text-indent:2em;（2字符的縮進）
line-height:2em;（行間距、行高）
letter-spacing:20px;（字符間距）
word-spacing:20px;（單詞間距）
text-align:center/left/right;

CSS盒模型

在CSS中，html中的標籤元素大體被分爲三種不同的類型：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。
常用的塊狀元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的內聯元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的內聯塊狀元素有：

<img>、<input>

什麼是塊級元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是塊級元素。設置display:block就是將元素顯示爲塊級元素。如下代碼就是將內聯元素a轉換爲塊狀元素，從而使a元素具有塊狀元素特點：a{display:block;}
塊級元素特點：1、每個塊級元素都從新的一行開始，並且其後的元素也另起一行。（真霸道，一個塊級元素獨佔一行）2、元素的高度、寬度、行高以及頂和底邊距都可設置。3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。
在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的內聯元素（行內元素）（inline）元素。當然塊狀元素也可以通過代碼display:inline將元素設置爲內聯元素。內聯元素特點：1、和其他元素都在一行上；2、元素的高度、寬度、行高及頂部和底部邊距不可設置；3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
內聯塊狀元素（inline-block）就是同時具備內聯元素、塊狀元素的特點，代碼display:inline-block就是將元素設置爲內聯塊狀元素。(css2.1新增)，<img>、<input>標籤就是這種內聯塊狀標籤。inline-block元素特點：1、和其他元素都在一行上；2、元素的高度、寬度、行高以及頂和底邊距都可設置。
總結一下：只有塊狀的元素是可以設置寬度高度的，而且塊狀元素獨佔一行，即寬度爲100%；內聯元素，亦稱行內元素，與其餘元素在同一行，不能設置寬高。
盒子模型的邊框就是圍繞着內容及補白的線，這條線你可以設置它的粗細、樣式和顏色。也可以分別設置，border-top|border-right|border-bottom|border-left
邊框三個屬性:
border-width: thin | medium | thick（但不是很常用），最常還是用象素（px）。
border-style: dashed（虛線）| dotted（點線）| solid（實線）
border-color:#888 十六進制顏色
盒模型寬度和高度與我們平常所說的物體的寬度和高度理解是不一樣的，css內定義的寬（width）和高（height），指的是填充以裏的內容範圍。因此一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。

元素內容與邊框之間是可以設置距離的，稱之爲“填充”，即padding。
元素與其它元素之間的距離可以使用邊界（margin）來設置。
邊框也是有寬度的！
總結一下：padding和margin的區別，padding在邊框裏，margin在邊框外。
css佈局模型（很常用，也佷容易混淆）
1. 清楚了CSS 盒模型的基本概念、盒模型類型，我們就可以深入探討網頁佈局的基本模型了。佈局模型與盒模型一樣都是 CSS 最基本、最核心的概念。但佈局模型是建立在盒模型基礎之上，又不同於我們常說的 CSS 佈局樣式或 CSS 佈局模板。如果說佈局模型是本，那麼 CSS 佈局模板就是末了，是外在的表現形式。
CSS包含3種基本的佈局模型，用英文概括爲：Flow、Layer 和 Float。
在網頁中，元素有三種佈局模型：
1、流動模型（Flow）
2、浮動模型 (Float)
3、層模型（Layer）
2. 先來說一說流動模型，流動（Flow）是默認的網頁佈局模式。也就是說網頁在默認狀態下的 HTML 網頁元素都是根據流動模型來分佈網頁內容的。
流動模型有兩個特點：第一，塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，因爲在默認狀態下，塊狀元素的寬度都爲100%。實際上，塊狀元素都會以行的形式佔據位置。如右側代碼編輯器中三個塊狀元素標籤(div，h1，p)寬度顯示爲100%。第二點，在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分佈顯示。（內聯元素可不像塊狀元素這麼霸道獨佔一行）
3. 浮動模型：塊狀元素這麼霸道都是獨佔一行，如果現在我們想讓兩個塊狀元素並排顯示，怎麼辦呢？不要着急，設置元素浮動就可以實現這一願望。任何元素在默認情況下是不能浮動的，但可以用 CSS 定義爲浮動，如 div、p、table、img 等元素都可以被定義爲浮動。如下代碼可以實現兩個 div 元素一行顯示。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>

什麼是層佈局模型？層佈局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作，但在網頁設計領域，由於網頁大小的活動性，層佈局沒能受到熱捧。但是在網頁上局部使用層佈局還是有其方便之處的。下面我們來學習一下html中的層佈局。
如何讓html元素在網頁中精確定位，就像圖像軟件PhotoShop中的圖層一樣可以對每個圖層能夠精確定位操作。CSS定義了一組定位（positioning）屬性來支持層佈局模型。
層模型有三種形式：絕對定位(position: absolute) 相對定位(position: relative) 固定定位(position: fixed)
如果想爲元素設置層模型中的絕對定位，需要設置position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然後使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器窗口。
如下面代碼可以實現div元素相對於瀏覽器窗口向右移動100px，向下移動50px。

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

如果想爲元素設置層模型中的相對定位，需要設置position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(並且元素像層一樣浮動了起來)，然後相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。（雖然div元素相對於以前的位置產生了偏移，但是div元素以前的位置還是保留着，所以後面的span元素是顯示在了div元素以前位置的後面。）
如下代碼實現相對於以前位置向下移動50px，向右移動100px;

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

7. fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的座標是視圖（屏幕內的網頁窗口）本身。由於視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，因此固定定位的元素會始終位於瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed;屬性功能相同。以下代碼可以實現相對於瀏覽器視圖向右移動100px，向下移動50px。並且拖動滾動條時位置固定不變。

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
....

小夥伴們學習了12-6小節的絕對定位的方法：使用position:absolute可以實現被設置元素相對於瀏覽器（body）設置定位以後，大家有沒有想過可不可以相對於其它元素進行定位呢？答案是肯定的，當然可以。使用position:relative來幫忙，但是必須遵守下面規範：1、參照定位的元素必須是相對定位元素的前輩元素2、參照定位的元素必須加入position:relative; 3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進行偏移定位了。

<div id="box1"><!--參照定位的元素-->
    <div id="box2">相對參照元素進行定位</div><!--相對定位元素-->
</div>
#box1{
    width:200px;
    height:200px;
    position:relative;        
}
#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

這樣box2就可以相對於父元素box1定位了（這裏注意參照物就可以不是瀏覽器了，而可以自由設置了）。

JavaScript

document.write() 可用於直接向 HTML 輸出流寫內容。簡單的說就是直接在網頁中輸出內容。
我們在訪問網站的時候，有時會突然彈出一個小窗口，上面寫着一段提示信息文字。如果你不點擊“確定”，就不能對網頁做任何操作，這個小窗口就是使用alert實現的。alert(字符串或變量);
confirm 消息對話框通常用於允許用戶做選擇的動作，如：“你對嗎？”等。彈出對話框(包括一個確定按鈕和一個取消按鈕)。
confirm(str);
str：在消息對話框中要顯示的文本返回值: Boolean值
prompt彈出消息對話框,通常用於詢問一些需要與用戶交互的信息。彈出消息對話框（包含一個確定按鈕、取消按鈕與一個文本輸入框）。
prompt(str1, str2);
str1: 要顯示在消息對話框中的文本，不可修改
str2：文本框中的內容，可以修改
返回值：1. 點擊確定按鈕，文本框中的內容將作爲函數返回值2. 點擊取消按鈕，將返回null
open() 方法用於打開一個新的窗口。window.open(<URL>, <窗口名稱>, <參數字符串>)
close()關閉窗口 window.close() //關閉本窗口或 <窗口對象>.close(); //關閉指定的窗口
文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標準方法。DOM 將HTML文檔呈現爲帶有元素、屬性和文本的樹結構（節點樹）。將HTML代碼分解爲DOM節點層次圖如下。

HTML文檔可以說由節點構成的集合，三種常見的DOM節點: 1. 元素節點：上圖中<html>、<body>、<p>等都是元素節點，即標籤。2. 文本節點:向用戶展示的內容，如<li>...</li>中的JavaScript、DOM、CSS等文本。3. 屬性節點:元素屬性，如<a>標籤的鏈接屬性href=”http://www.imooc.com”。
看下面代碼: <a href="http://www.imooc.com">JavaScript DOM</a>

通過ID獲取元素：學過HTML/CSS樣式，都知道，網頁由標籤將信息組織起來，而標籤的id屬性值是唯一的，就像是每人有一個身份證號一樣，只要通過身份證號就可以找到相對應的人。那麼在網頁中，我們通過id先找到標籤，然後進行操作。語法：document.getElementById(“id”) 注:獲取的元素是一個對象，如想對元素進行操作，我們要通過它的屬性或方法。
innerHTML 屬性用於獲取或替換 HTML 元素的內容。語法：Object.innerHTML注意：1.Object是獲取的元素對象，如通過document.getElementById(“ID”)獲取的元素。2.注意書寫，innerHTML區分大小寫。
HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。如何改變 HTML 元素的樣式呢？語法：Object.style.property=new style; 注意:Object是獲取的元素對象，如通過document.getElementById(“id”)獲取的元素。
網頁中經常會看到顯示和隱藏的效果，可通過display屬性來設置。語法：Object.style.display = value value取值：none，此元素不被顯示；block，此元素將顯示爲塊級元素。
className 屬性設置或返回元素的class 屬性。語法：object.className = classname 作用：1.獲取元素的class 屬性2. 爲網頁內的某個元素指定一個css樣式來更改該元素的外觀
事件響應
JavaScript 創建動態頁面。事件是可以被 JavaScript 偵測到的行爲。網頁中的每個元素都可以產生某些可以觸發 JavaScript 函數或程序的事件。比如說，當用戶單擊按鈕或者提交表單數據時，就發生一個鼠標單擊（onclick）事件，需要瀏覽器做出處理，返回給用戶一個結果。

要注意，添加事件時，格式爲οnclick=”openwin()”，其中，屬性一定要加上引號，且調用的因爲是函數，所以一定有括號！
JS內置對象
1. JavaScript 中的所有事物都是對象，如:字符串、數值、數組、函數等，每個對象帶有屬性和方法。對象的屬性：反映該對象某些特定的性質的，如：字符串的長度、圖像的長寬等；對象的方法：能夠在對象上執行的動作。例如，表單的“提交”(Submit)，時間的“獲取”(getYear)等；
訪問對象屬性的語法: objectName.propertyName如使用 Array 對象的 length 屬性來獲得數組的長度：var myl=myarray.length; 這是沒有括號的！
訪問對象的方法：objectName.methodName() 如使用string 對象的 toUpperCase() 方法來將文本轉換爲大寫：var request=mystr.toUpperCase(); 這是有括號的！
2. Date 日期對象：日期對象可以儲存任意一個日期，並且可以精確到毫秒數（1/1000 秒）。定義一個時間對象 : var Udate=new Date();Date對象中處理時間和日期的常用方法：（這些全是對象的方法！！！）

定義String字符串對象後，我們就可以訪問它的屬性和方法。屬性有length，方法有toUpperCase() charAt(index) indexOf(substring, startpos) split(separator,limit) substring(starPos,stopPos) substr(startPos,length)
Math 對象是一個固有的對象，無需創建它，直接把 Math 作爲對象使用就可以調用其所有屬性和方法。這是它與Date,String對象的區別。
Math 對象屬性：

Math 對象方法：

數組Array：數組對象是一個對象的集合，裏邊的對象可以是不同類型的。數組的每一個成員對象都有一個“下標”，用來表示它在數組中的位置，是從零開始的。
數組定義的方法：
1、定義空數組 var 數組名= new Array();
2、定義時指定有n個空元素的數組：var 數組名 =new Array(n);
3、定義數組的時候，直接初始化數據：var 數組名 = [<元素1>, <元素2>, <元素3>…];
屬性：length Array.length;
方法：

Windows對象/BOM

window對象是BOM的核心，window對象指當前的瀏覽器窗口。
在JavaScript中，我們可以在設定的時間間隔之後來執行代碼，而不是在函數被調用後立即執行。
計時器類型：
一次性計時器：僅在指定的延遲時間之後觸發一次。
間隔性觸發計時器：每隔一定的時間間隔就觸發一次。
計時器方法：
history對象記錄了用戶曾經瀏覽過的頁面(URL)，並可以實現瀏覽器前進與後退相似導航的功能。注意:從窗口被打開的那一刻開始記錄，每個瀏覽器窗口、每個標籤頁乃至每個框架，都有自己的history對象與特定的window對象關聯。
語法：window.history.[屬性|方法]
History 對象屬性：

History 對象方法：

location對象用於獲取或設置窗體的URL，並且可以用於解析URL。
location對象屬性圖示:

location 對象屬性：

location 對象方法:

Navigator 對象包含有關瀏覽器的信息，通常用於檢測瀏覽器與操作系統的版本。
對象屬性:

幾種瀏覽的user_agent.，像360的兼容模式用的是IE、極速模式用的是chrom的內核。

screen對象用於獲取用戶的屏幕信息。
語法：window.screen.屬性

Mr_Hammer

發佈了25 篇原創文章 · 獲贊 17 · 訪問量 9萬+

私信關注

HTML基本知識點總結

HTML

基本標籤

表單

CSS

CSS盒模型

JavaScript

BMP圖像內容讀取中的問題

Python中如何解決ImportError：No Module Named arcpy問題

HTML基本知識點總結

C語言代碼重構

讓人抓狂的0x0A

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結