整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
基本概念
HTML 是網(wǎng)頁內(nèi)容的載體。內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
CSS 樣式是表現(xiàn)。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等，所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)。
JavaScript 是用來實現(xiàn)網(wǎng)頁上的特效效果。如：鼠標滑過彈出下拉菜單，或鼠標滑過表格的背景顏色改變，還有焦點新聞（新聞圖片）的輪換。有動畫的，有交互的一般都是用 JavaScript 來實現(xiàn)的。
2.常用標簽
強調(diào)語氣：<em>是斜體，<strong>是加粗
引用：<q>短文本引用，<blockquote>長文本引用
換行 <br />
水平橫線 <hr />
空格
表格 <table><tbody>
加上后表格內(nèi)容全部下載完才會顯示
行 <tr>
列 <td>
表格表頭 <th>
標題 <caption>
超鏈 <a>
例子：<a href="目標網(wǎng)址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>
新標簽打開：target="_blank"
圖片 <img>，圖像可以是 GIF，PNG，JPEG 格式的圖像文件
例子：<img src="圖片地址" alt="下載失敗時的替換文本" title = "提示文本">
表單 <form>
文本域 <textarea>
例子 <textarea rows="行數(shù)" cols="列數(shù)">文本</textarea>
cols 多行輸入域的列數(shù)；rows 多行輸入域的行數(shù)。這兩個屬性可用 CSS 樣式的 width 和 height 來代替：col 用 width、row 用 height 來代替
輸入框 <input type="text/password" name="名稱" value="文本" />
當 type=”text” 時，輸入框為文本輸入框
當 type=”password” 時, 輸入框為密碼輸入框
單/復選框 <input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
當 type=”radio” 時，控件為單選框，同一組單選框 name 命名要一致
當 type=”checkbox” 時，控件為復選框
提交按鈕 <input type="submit" value="提交">
重置按鈕 <input type="reset" value="重置">
下拉列表框 ` `
value <option value="提交值">選項</option>
選中 selected="selected"
多選 multiple="multiple"
標簽 <label for="控件id名稱">，標簽的 for 屬性中的值應當與相關控件的 id 屬性 值一定要相同
基本知識
CSS 樣式由選擇符和聲明組成，而聲明又由屬性和值組成。
選擇符：又稱選擇器，指明網(wǎng)頁中要應用樣式規(guī)則的元素。
聲明：在英文大括號{}中的的就是聲明，屬性和值之間用英文冒號{}分隔。當有多條聲明時，中間可以英文分號;分隔。
從CSS 樣式代碼插入的形式來看基本可以分為以下3種：內(nèi)聯(lián)式、嵌入式和外部式三種。優(yōu)先級遵循就近原則，一般來說，內(nèi)聯(lián)式 > 嵌入式 > 外部式。
內(nèi)聯(lián)式
例子 <p style="color:red;font-size:12px">這里文字是紅色。</p>
嵌入式
外部式
例子：<link href="base.css" rel="stylesheet" type="text/css" />
CSS 選擇器
常見的類選擇器類型有如下幾種：
標簽選擇器，.標簽選擇器名稱{css樣式代碼;}
類選擇器，.類選器名稱{css樣式代碼;}
ID 選擇器，＃類選器名稱{css樣式代碼;}
子選擇器，即大于符號(>),用于選擇指定標簽元素的第一代子元素
包含選擇器，即加入空格 ,用于選擇指定標簽元素下的后輩元素
通用選擇器，匹配html中所有標簽元素，* {css樣式代碼;}類選擇器和ID選擇器都可以應用于任何元素，但 ID 選擇器只能在文檔中使用一次，可以使用類選擇器詞列表方法為一個元素同時設置多個樣式，ID 選擇器是不可以的。
子選擇器和包含選擇器區(qū)別：>作用于元素的第一代后代，空格作用于元素的所有后代。
另外還有兩種選擇符：
偽類選擇符，允許給 HTML 不存在的標簽（標簽的某種狀態(tài)）設置樣式。常用的有 a:hover{color:red;}
分組選擇符，為 HTML 中多個標簽元素設置同一個樣式時，可以使用分組選擇符,
。例如h1,span{color:red;}
CSS 的繼承、層疊和特殊性
CSS 的某些樣式是具有繼承性的，繼承是一種規(guī)則，它允許樣式不僅應用于某個特定 HTML 標簽元素，而且應用于其后代。
特殊性：不同選擇器具有不同權值，標簽的權值為 1，類選擇符的權值為 10，ID選擇符的權值最高為 100。
層疊 就是在 HTML 文件中對于同一個元素可以有多個 CSS 樣式存在，當有相同權重的樣式存在時，會根據(jù)這些 CSS 樣式的前后順序來決定，處于最后面的 CSS 樣式會被應用。
CSS 格式化排版
文字排版
字體，body{font-family:"Microsoft Yahei";}
字號、顏色，body{font-size:12px;color:#666}
粗體，body{font-weight:bold;}
斜體，body{font-style:italic;}
下劃線，body{font-style:italic;}
刪除線，body{text-decoration:line-through;}
段落排版
縮進，p{text-indent:2em;}
行間距（行高），p{line-height:1.5em;}
中文字間距、字母間距，letter-spacing:50px;和word-spacing:50px;
對齊，div{text-align:center;}
CSS 盒模型
元素分類
在 CSS 中，HTML 中的標簽元素大體被分為三種不同的類型：塊狀元素、內(nèi)聯(lián)元素(又叫行內(nèi)元素)和內(nèi)聯(lián)塊狀元素。
常用的塊狀元素有：
塊級元素特點：
每個塊級元素都從新的一行開始，并且其后的元素也另起一行。
元素的高度、寬度、行高以及頂和底邊距都可設置。
元素寬度在不設置的情況下，是它本身父容器的 100%（和父元素的寬度一致），除非設定一個寬度。
設置 display:block就是將元素顯示為塊級元素，從而使元素具有塊狀元素特點。
注：img 標簽與 div 層之間會有空隙的解決方法是：使用 display:block 就可以消除間隙。
常用的內(nèi)聯(lián)元素有：
內(nèi)聯(lián)元素特點：
和其他元素都在一行上；
元素的高度、寬度及頂部和底部邊距不可設置；
元素的寬度就是它包含的文字或圖片的寬度，不可改變。
塊狀元素也可以通過代碼 display:inline將元素設置為內(nèi)聯(lián)元素。
常用的內(nèi)聯(lián)塊狀元素有：
inline-block 元素特點：
和其他元素都在一行上；
元素的高度、寬度、行高以及頂和底邊距都可設置。
內(nèi)聯(lián)塊狀元素（inline-block）就是同時具備內(nèi)聯(lián)元素、塊狀元素的特點，代碼 display:inline-block就是將元素設置為內(nèi)聯(lián)塊狀元素。
盒模型
邊框
盒子模型的邊框就是圍繞著內(nèi)容及補白的線，這條線你可以設置它的粗細、樣式和顏色(邊框三個屬性)。
單獨設置下邊框的例子 div{border-bottom:1px solid red;}
寬度和高度
CSS 內(nèi)定義的寬（width）和高（height），指的是 填充以里的內(nèi)容范圍。一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界。
W3C 的標準 Box Model:
所以有時會設置 box-sizing: border-box;來避免計算內(nèi)部元素大小
填充(padding)
元素內(nèi)容與邊框之間是可以設置距離的，稱之為“填充”。填充也可分為上、右、下、左(順時針)。
例子：
邊界(margin)
元素與其它元素之間的距離可以使用邊界（margin）來設置，順序和填充一樣是上，右，下，左。padding 在邊框里，margin 在邊框外。
CSS 布局模型
CSS 包含 3 種基本的布局模型，用英文概括為：Flow、Layer 和 Float。 在網(wǎng)頁中，元素有三種布局模型：
流動模型（Flow）
浮動模型 (Float)
層模型（Layer）
流動模型
流動模型，流動（Flow）是默認的網(wǎng)頁布局模式。
流動布局模型具有2個比較典型的特征：
塊狀元素 都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因為在默認狀態(tài)下，塊狀元素的寬度都為 100%。實際上，塊狀元素都會以行的形式占據(jù)位置。
在流動模型下，內(nèi)聯(lián)元素 都會在所處的包含元素內(nèi)從左到右水平分布顯示。
浮動模型
任何元素在默認情況下是不能浮動的，但可以用 CSS 定義為浮動。例子：#div1{float:left;}
層模型
CSS 定義了一組定位（positioning）屬性來支持層布局模型。
層模型有三種形式：
絕對定位(position: absolute)
相對定位(position: relative)
固定定位(position: fixed)
絕對定位(position: absolute)
如果想為元素設置層模型中的絕對定位，需要設置 position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用 left、right、top、bottom 屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對于 body 元素，即相對于瀏覽器窗口。
相對定位(position: relative)
如果想為元素設置層模型中的相對定位，需要設置 position:relative（表示相對定位），它通過 left、right、top、bottom 屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按 static(float) 方式生成一個元素(并且元素像層一樣浮動了起來)，然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
簡單來說，就是相對元素原來的位置進行移動，元素本身所占的位置會保留。
固定定位(position: fixed)
設置 position:fixed;。fixed：表示固定定位，與 absolute 定位類型類似，但它的相對移動的坐標是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會始終位于瀏覽器窗口內(nèi)視圖的某個位置，不會受文檔流動影響，這與 background-attachment:fixed; 屬性功能相同。
Relative 與 Absolute 組合使用,必須遵守下面規(guī)范：
參照定位的元素必須是相對定位元素的前輩元素
參照定位的元素必須加入 position:relative;
定位元素加入 position:absolute，便可以使用 top、bottom、left、right 來進行偏移定位了
例子(HTML 和 CSS 代碼分別為)：
顏色和長度
設置顏色的方法也有很多種：
英文命令顏色，p{color:red;}
RGB顏色，p{color:rgb(133,45,200);} 和 p{color:rgb(20%,33%,25%);}
十六進制顏色， 這種顏色設置方法是現(xiàn)在比較普遍使用的方法，其原理其實也是 RGB 設置，但是其每一項的值由 0-255 變成了十六進制 00-ff。p{color:#00ffff;}(當你設置的顏色是 16 進制的色彩值時，如果每兩位的值相同，可以縮寫一半，#0ff)RGB 配色表參考 RGB顏色對照表 - 在線工具 - 開源中國 或者 RGB 配色表長度單位總結一下，目前比較常用到px（像素）、em、% 百分比，要注意其實這三種單位都是相對單位。
像素
em，就是本元素給定字體的 font-size 值
% 百分比
設置小技巧
水平居中設置
行內(nèi)元素。如果被設置元素為文本、圖片等行內(nèi)元素時，水平居中是通過給父元素設置 text-align:center來實現(xiàn)的。
定寬塊狀元素(塊狀元素的寬度 width 為固定值)。滿足定寬和塊狀兩個條件的元素是可以通過設置“左右 margin”值為 auto 來實現(xiàn)居中的。
不定寬塊狀元素。
加入 table 標簽(包括 <tbody>、<tr>、<td>)，為這個 table 設置“左右 margin 居中”
設置 display: inline方法：與第一種類似，顯示類型設為 行內(nèi)元素，然后使用 text-align:center來實現(xiàn)居中效果，進行不定寬元素的屬性設置。
給父元素設置 float 和 position:relative; left:50%，子元素設置 position:relative 和left: -50% 來實現(xiàn)水平居中。
垂直居中設置
父元素高度確定的單行文本。通過設置父元素的 height 和 line-height 高度一致來實現(xiàn)的。(height: 該元素的高度；line-height: 顧名思義，行高（行間距），指在文本中，行與行之間的 基線間的距離 )。
父元素高度確定的多行文本。使用插入 table (包括 tbody、tr、td)標簽，同時設置 vertical-align：middle。
另外，為元素設置以下兩個屬性之一會隱形改變 display 類型，元素的display顯示類型就會自動變?yōu)橐?span>display:inline-block（塊狀元素）的方式顯示，當然就可以設置元素的 width 和 height 了，且默認寬度不占滿父元素。
position: absolute
float: left 或 float:right
互聯(lián)網(wǎng)時代的今天，各種各樣的網(wǎng)頁充斥著我們的生活。只要使用瀏覽器，打開的每一個頁面都可以稱之為網(wǎng)頁。即使使用頭條這樣的APP，其內(nèi)容布局、展示的方法也脫胎于網(wǎng)頁頁面設計的方法與原則。可以說頁面的概念已經(jīng)遍布我們的信息化世界。
作為蕓蕓眾生中的一員，學習網(wǎng)頁制作對我們的事業(yè)、生活有怎樣的幫助呢？
第一，學習網(wǎng)頁制作有助于理解網(wǎng)絡信息的傳播運行機制，即使通過本課程不能全面了解這些核心機制，也能為大家鋪墊下繼續(xù)深入學習的知識基礎。即使自己不必親自制作網(wǎng)頁，在使用第三方工具時，比如微信公眾號、微信小程序或者其他自動網(wǎng)頁或網(wǎng)站生成工具時也會比沒有基礎的人更快的掌握這些工具。
第二，學好網(wǎng)頁制作是制作網(wǎng)站的基礎，如果您因為事業(yè)需要或者個人愛好打算制作自己的網(wǎng)站或博客，無論是打算使用php還是Java還是Python去構建您的網(wǎng)站，精通網(wǎng)頁制作技術是您的第一塊技術基石。
第三，如果您打算學習網(wǎng)絡爬蟲來分析一些網(wǎng)絡數(shù)據(jù)，了解網(wǎng)頁頁面構成也是必要基礎，至少您要知道一個網(wǎng)頁頁面中每個標簽中對應的是哪些信息，才能有的放矢拿到自己想要的信息。
第四，如果您想學習編程，但是缺少相應的基礎知識，看不懂復雜的C語言教學，那么從網(wǎng)頁制作入手嘗試理解編程的語法也是一個很不錯的選擇。
除此之外，瀏覽器可以做的事情越來越多，比如webgl的出現(xiàn)，可以讓我們通過瀏覽器構建3d世界，無論是虛擬現(xiàn)實（VR）還是增強現(xiàn)實（AR）都有很多開源免費的解決方案。TensorFlow的JavaScript版本的出現(xiàn)，讓我們可以通過結合瀏覽器學習使用人工智能技術，且非常容易實現(xiàn)。
所以，新的一年里，我打算做網(wǎng)頁制作的學習教程，讓更多沒有基礎卻對網(wǎng)絡技術感興趣的小伙伴能加入進來。
簡單來說學習網(wǎng)頁制作需要掌握三門技術。
第一，也是最基礎最核心的內(nèi)容是HTML超文本標記語言。大家不必糾結HTML到底是什么，但是一定要記住它能干什么。HTML通俗來說可以比喻成容器。大家試想，網(wǎng)頁里都有哪些內(nèi)容呢？
一般網(wǎng)頁中都會有文字、圖片、聲音、視頻、表格等內(nèi)容，這些內(nèi)容就是靠HTML中的標簽添加進頁面的。
所以說HTML這個工具就是個容器，我們使用HTML標簽語言為網(wǎng)頁添加所有需要的信息內(nèi)容。
第二，CSS層疊樣式表，這是一個用來裝飾頁面的工具。如果說HTML是個信息容器，那么如何讓這些信息條理清晰的顯示出來呢？那就需要CSS來幫忙了。如下圖所示，這是一個最簡單的頁面，只用到了HTML，里面裝了一個標題和一個只有六個字的段落。
為了讓這個頁面看起來美觀些，我們?yōu)槠涮砑觕ss樣式表。添加后如圖所示：
我們可以看出來，CSS讓標題文字換了顏色，也居中顯示了，背景也變成了藍色。
第三，JavaScript，這個工具相比HTML和CSS來講是最難學習的，學習JavaScript就是在學習編程了。它雖然只是個腳本語言，但是用到的知識和其他編程語言相差不大。
那JavaScript能干什么呢？
首先，它能為頁面中添加很多交互效果。舉個例子，我們常見的圖片翻頁、輪播很多就是基于JavaScript腳本實現(xiàn)的。
其次，JavaScript可以為傳統(tǒng)頁面擴展出很多新功能，例如結合three.js我們可以很容易的在頁面中構建三維空間，或者實現(xiàn)一些3d游戲或其他三維動態(tài)演示效果。舉個例子（https://renaultespace.littleworkshop.fr/），打開可能略慢。3d展示的汽車廣告是不是很酷！
再次，JavaScript可以以網(wǎng)頁為基礎，實現(xiàn)各種各樣的在線小游戲，例如Phaser.js就是目前非常火的一個開源免費網(wǎng)頁游戲制作庫。phaser官網(wǎng)：http://phaser.io/
JavaScript為網(wǎng)頁的功能拓展提供了很多可能性，無論是3d顯示還是游戲制作還是未來的人工智能工具，都是由JavaScript都為大家提供了將功能引入到頁面的接口，這也是學習難度比較大的原因。不過只要堅持下去一定能學通的！
網(wǎng)頁是指我們看到的單個頁面。這些頁面分為靜態(tài)頁面和動態(tài)頁面兩種。靜態(tài)頁面指的是不能與服務器進行數(shù)據(jù)交互的頁面，顧名思義動態(tài)頁面指的是可以與服務器進行數(shù)據(jù)交互的頁面，這一點大家不必糾結。
簡單來說，靜態(tài)頁面寫好后什么樣就是什么樣，誰打開都是事先編輯好的內(nèi)容，而動態(tài)頁面寫好后會隨著不同的訪問變換不同數(shù)據(jù)，動態(tài)頁面更像是一個頁面模板，隨時套用不同信息。
大部分網(wǎng)站中的頁面都是動態(tài)頁面。
如果使用靜態(tài)頁面做網(wǎng)站會出現(xiàn)什么問題呢？如果您有300篇博客文章，那您就要做300個靜態(tài)頁面來顯示，大型資訊網(wǎng)站信息量更加龐大，如果都用靜態(tài)頁面來做，占用的服務器空間也是龐大到不可想象。
網(wǎng)站中的動態(tài)頁面就解決了這個問題，例如一個簡單的網(wǎng)站我們只需一個主頁、文章頁、搜索頁基本上就可以了，這些頁面中沒有具體內(nèi)容，我們稱之為模板。當您打開后，顯示的內(nèi)容都是在數(shù)據(jù)庫中調(diào)出的。這樣，一個數(shù)據(jù)庫用來存儲壓縮過的精簡信息，這些信息通過不同頁面模板顯示在用戶面前就成為網(wǎng)站的基本運行模式。
例如在靜態(tài)頁面中顯示文字字數(shù)的代碼是這樣
<p>300字</p>如果使用以php編寫的WordPress網(wǎng)站框架來動態(tài)顯示文章字數(shù)就是這樣
<p><?php echo zm_count_words($text); ?></p><?php echo zm_count_words($text); ?>這條語句可以調(diào)取數(shù)據(jù)庫中文章字數(shù)的記錄并顯示出來。這也我們通過這一條語句就可以顯示不同文章的字數(shù)了。
無論是靜態(tài)頁面還是動態(tài)頁面，他們的核心內(nèi)容都是一樣的，HTML，CSS，JavaScript都是必修知識。只是靜態(tài)頁面在HTML中插入信息，而動態(tài)頁面插入的是調(diào)取數(shù)據(jù)庫信息的語句。
因此，我們這個教程看起來是在做靜態(tài)頁面，但是我們學習的也是制作網(wǎng)站的基礎知識。
第一，可以寫出靜態(tài)頁面。
第二，有能力讀懂他人寫好的頁面代碼。
第三，為繼續(xù)深入學習網(wǎng)站制作或更為炫酷的頁面制作打下基礎。
第四，掌握編程基礎，至少是基于JavaScript的。
我是大魚，致力于數(shù)字藝術技術分享！歡迎大家關注！祝愿大家2020年學有所成！
HTML是什么？——零基礎自學網(wǎng)頁制作
第一個HTML頁面如何寫？——零基礎自學網(wǎng)頁制作
HTML頁面中head標簽有啥用？——零基礎自學網(wǎng)頁制作
初識meta標簽與SEO——零基礎自學網(wǎng)頁制作
HTML中的元素使用方法1——零基礎自學網(wǎng)頁制作
HTML中的元素使用方法2——零基礎自學網(wǎng)頁制作
HTML元素中的屬性1——零基礎自學網(wǎng)頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網(wǎng)頁制作
使用HTML添加表格1（基本元素）——零基礎自學網(wǎng)頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網(wǎng)頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網(wǎng)頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網(wǎng)頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網(wǎng)頁制作
HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎自學網(wǎng)頁制作
初識HTML中的<div>塊元素——零基礎自學網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網(wǎng)頁制作
封閉在家學網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎自學網(wǎng)頁制作
HTML表單元素初識1——零基礎自學網(wǎng)頁制作
HTML表單元素初識2——零基礎自學網(wǎng)頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網(wǎng)頁制作
HTML表單4（form的action、method屬性）——零基礎自學網(wǎng)頁制作
HTML列表制作講解——零基礎自學網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網(wǎng)頁制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎自學網(wǎng)頁制作
HTML中使用<a>標簽實現(xiàn)文本內(nèi)鏈接——零基礎自學網(wǎng)頁制作
1.段落標簽<p>
<style>
p{margin:0px;}
</style>
2.斜體標簽<em>
<em>斜體</em>
3.粗體標簽<strong>
<strong>加粗</strong>
4.<span>標簽
被用來組合文檔中的行內(nèi)元素。使用 <span> 來組合行內(nèi)元素，以便通過樣式來格式化它們。
例如：
<style>
span{ color:blue; }
</style>
這樣，<span>標簽包含的文本就變成了藍色的字體。
5.<q>標簽
作用：段文本引用
例如：
<p>最初知道莊子，是從一首詩<q>莊生曉夢迷蝴蝶。望帝春心托杜鵑。</q>開始的。雖然當時不知道是什么意思，只是覺得詩句挺特別。后來才明白這個典故出自是莊子的《逍遙游》，《逍遙游》代表了莊子思想的最高境界，是對世俗社會的功名利祿及自己的舍棄。</p> 在上面的例子中，“莊生曉夢迷蝴蝶。望帝春心托杜鵑。” 這是一句詩歌，出自晚唐詩人李商隱的《錦瑟》 。因為不是作者自己的文字，所以需要使用<q></q>實現(xiàn)引用。 注意要引用的文本不用加雙引號，瀏覽器會對q標簽自動添加雙引號。 這里用<q>標簽的真正關鍵點不是它的默認樣式雙引號（如果這樣我們不如自己在鍵盤上輸入雙引號就行了），而是它的語義：引用別人的話。 補充知識：語義化網(wǎng)頁結構有助于搜索引擎的收錄。同一個效果可以用很多鐘方式實現(xiàn)，但這只方便了瀏覽者，而搜索引擎不知道這里到底是什么內(nèi)容，這里如果你使用標簽，那么就告訴瀏覽器這里是引用的話。而且在手持設備或移動設備不能很好支持css的基礎上，瀏覽器會使用默認的效果，因而提供較好可讀性。
6.<blockquote>標簽
作用：長文本引用
例如：
<blockquote>明月出天山，蒼茫云海間。長風幾萬里，吹度玉門關。漢下白登道，胡窺青海灣。由來征戰(zhàn)地，不見有人還。 戍客望邊色，思歸多苦顏。高樓當此夜，嘆息未應閑。</blockquote>
注意：瀏覽器對<blockquote>標簽的解析是縮進樣式
7.<br>標簽
怎么可以讓每一句詩詞后面加入一個折行呢？那就可以用到<br />標簽了，在需要加回車換行的地方加入<br />，<br />標簽作用相當于word文檔中的回車。
語法：
xhtml1.0寫法：
<br/>
html4.01寫法：
<br>
現(xiàn)在一般使用 xhtml1.0 的版本的寫法（其它標簽也是），這種版本比較規(guī)范。
與以前我們學過的標簽不一樣，<br />標簽是一個空標簽，沒有HTML內(nèi)容的標簽就是空標簽，空標簽只需要寫一個開始標簽，這樣的標簽有<br />、<hr />和<img />。
講到這里，你是不是有個疑問，想折行還不好說嘛，就像在 word 文件檔或記事本中，在想要折行的前面輸入回車不就行了嗎？ 不好意思，在 html 中是忽略回車和空格的，你輸入的再多回車和空格也是顯示不出來的。
8.<hr>標簽
在信息展示時，有時會需要加一些用于分隔的橫線，這樣會使文章看起來整齊些。
語法：
html4.01版本
<hr>
xhtml1.0版本
<hr/>
注意：
9.<address>標簽
一般網(wǎng)頁中會有一些網(wǎng)站的聯(lián)系地址信息需要在網(wǎng)頁中展示出來，這些聯(lián)系地址信息如公司的地址就可以<address>標簽。也可以定義一個地址（比如電子郵件地址）、簽名或者文檔的作者身份。
語法：
<address>聯(lián)系地址信息</address>
如：
<address>文檔編寫：lilian 北京市西城區(qū)德外大街10號</address>
10.<code>標簽
在介紹語言技術的網(wǎng)站中，避免不了在網(wǎng)頁中顯示一些計算機專業(yè)的編程代碼，當代碼為一行代碼時，你就可以使用<code>標簽了，如下面例子：
<code>var i=i+300;</code>
注意：在文章中一般如果要插入多行代碼時不能使用<code>標簽了。
語法：
<code>代碼語言</code>
注：如果是多行代碼，可以使用<pre>標簽。
11.<pre>標簽
主要作用:預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。
語法：
<pre>語言代碼段</pre>
如下代碼：
<pre>
var message="歡迎";
for(var i=1;i<=10;i++) {
alert(message);
}
</pre>
效果如下：
注意：<pre> 標簽不只是為顯示計算機的源代碼時用的，在你需要在網(wǎng)頁中預顯示格式時都可以使用它，只是<pre>標簽的一個常見應用就是用來展示計算機的源代碼。
12.<ul>標簽
ul-li是沒有前后順序的信息列表。
ul{ list-style:circle; }
ul{ list-style:none }
<ul> <li>信息</li> <li>信息</li> ...... </ul>
<ul> <li>精彩少年</li> <li>美麗突然出現(xiàn)</li> <li>觸動心靈的旋律</li> </ul>
13.<ol>標簽
ol-li是有前后順序的信息列表
<ol> <li>信息</li> <li>信息</li> ...... </ol>
<ol> <li>前端開發(fā)面試心法 </li> <li>零基礎學習html</li> <li>JavaScript全攻略</li> </ol>
<ol>在網(wǎng)頁中顯示的默認樣式一般為：每項<li>前都自帶一個序號，序號默認從1開始。
14.<div>標簽
15.<table>標簽
1）屬性：border
作用：規(guī)定表格邊框的寬度
2）屬性：cellpadding
作用：單元格中的文本與單元格邊框的間距
3）屬性：cellspacing
作用：單元格之間的間距
table、tbody、tr、th、td
1、<table>…</table>：整個表格以<table>標記開始、</table>標記結束。
2、<tbody>…</tbody>：當表格內(nèi)容非常多時，表格會下載一點顯示一點，但如果加上<tbody>標簽后，這個表格就要等表格內(nèi)容全部下載完才會顯示。如右側(cè)代碼編輯器中的代碼。
3、<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。
4、<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。
- 常用屬性： colspan：規(guī)定單元格可橫跨的列數(shù)，值為數(shù)字 rowspan：規(guī)定單元格可橫跨的行數(shù)，值為數(shù)字
5、<th>…</th>：表格的頭部的一個單元格，表格表頭。
6、表格中列的個數(shù)，取決于一行中數(shù)據(jù)單元格的個數(shù)。
總結：
16.<caption>標簽
表格還是需要添加一些標簽進行優(yōu)化，可以添加標題和摘要。
摘要的內(nèi)容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內(nèi)容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內(nèi)容。語法：
<table summary="表格簡介文本">
用以描述表格內(nèi)容，標題的顯示位置：表格上方。語法：
<table> <caption>標題文本</caption> <tr> <td>…</td> <td>…</td> … </tr> … </table>
17.<a>標簽
<a href="目標網(wǎng)址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>
例如：
<a title="點擊進入慕課網(wǎng)">click here!</a>
上面例子作用是單擊click here!文字，網(wǎng)頁鏈接跳轉(zhuǎn)到http://www.imooc.com這個網(wǎng)頁。
<a href="目標網(wǎng)址" target="_blank">click here!</a>
<a>標簽還有一個作用是可以鏈接Email地址，使用mailto能讓訪問者便捷向網(wǎng)站管理者發(fā)送電子郵件。
注意：如果mailto后面同時有多個參數(shù)的話，第一個參數(shù)必須以“?”開頭，后面的參數(shù)每一個都以“&”分隔。引號只有一對！
例子： <a href="mailto:yy@qq.com? cc=xx@qq.com & bcc=aa@qq.com & subject=郵件主題 & body=郵件內(nèi)容">
那么： 1）A知道自己發(fā)送郵件給了B1、B2、B3，并且抄送給了C1、C2、C3，密送給了D1、D2、D3。 2）B1知道這封是A發(fā)送給B1、B2、B3的郵件，并且抄送給了C1、C2、C3，但不知道密送給了D1、D2、D3。 3）C1知道這封是A發(fā)送給B1、B2、B3的郵件，并且抄送給了C1、C2、C3，但不知道密送給了D1、D2、D3。 4）D1知道這封是A發(fā)送給B1、B2、B3的郵件，并且抄送給了C1、C2、C3，而且密送給了自己，但不知道密送給了D2、D3。 5）郵箱地址 mailto: <a href="mailto:qiujie@staff.weibo.com">發(fā)送</a> 6）抄送地址 cc: <a href="mailto:qiujie@staff.weibo.com?cc=zz@sina.com">發(fā)送</a> 7）密件抄送地址 用分號分隔: <a href="mailto:qiujie@staff.weibo.com?bcc=zz@sina.com">發(fā)送</a> 8）多個收件人、抄送人、密送人 ; bcc: <a href="mailto:qiujie@staff.weibo.com;zz@sina.com">發(fā)送</a> 9）郵件主題 subject: <a href="mailto:qiujie@staff.weibo.com？subject=郵件主題">發(fā)送</a> 10）郵件內(nèi)容 body: <a href="mailto:qiujie@staff.weibo.com？body=郵件正文">發(fā)送</a> 例子： <a href="mailto:yy@imooc.com;10001@qq.com?cc=10002@qq.com&bbc=madanteng@qqhelp.com&subject=觀了不起的蓋茨比有感。&body=你好，對此評論有些想法。">對此影評有何感想，發(fā)送郵件給我</a>
18.<img>標簽
在網(wǎng)頁的制作中為使網(wǎng)頁炫麗美觀，肯定是缺少不了圖片，可以使用
標簽來插入圖片。
[站外圖片上傳中……(2)] <img src = "myimage.gif" alt = "My Image" title = "My Image" />
src：標識圖像的位置； alt：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本； title：提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本)； 圖像可以是GIF，PNG，JPEG格式的圖像文件。 路徑有兩種填寫方式：絕對路徑、相對路徑 相對路徑：相對于我們當前 html 文件的位置來寫路徑即可！ ./表示當前目錄，../表示上一級目錄
19.<form>標簽
注意:
1、所有表單控件（文本框、文本域、按鈕、單選框、復選框等）都必須放在<form></form>標簽之間（否則用戶輸入的信息可提交不到服務器上哦！）。
2、method:post/get的區(qū)別這一部分內(nèi)容屬于后端程序員考慮的問題。
語法：
<form method="傳送方式" action="服務器文件">
<form> ：<form>標簽是成對出現(xiàn)的，以<form>開始，以</form>結束。 action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個PHP頁面(save.php)。 method ： 數(shù)據(jù)傳送的方式（get/post）。 <form method="post" action="save.php"> <label for="username">用戶名:</label> <input type="text" name="username" /> <label for="pass">密碼:</label> <input type="password" name="pass" /> </form>
20.<input>標簽
語法：
<form> <input type="text/password" name="名稱" value="文本" /> </form>
舉例： <form> 姓名： <input type="text" name="myName"/><br/> 密碼： <input type="password" name="pass"/> </form> value="xxx" 替換為 placeholder="xxx" 的體驗更好一些，placeholder屬性為 HTML 5 的新屬性。placeholder 屬性提供可描述輸入字段預期值的提示信息（hint）。該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失。
語法：
<input placeholder="text"/> 注釋：placeholder 屬性適用于以下的 <input> 類型：text, search, url, telephone, email 以及 password。
注意:同一組的單選按鈕，name 取值一定要一致，比如上同一個名稱“gender”，這樣同一組的單選按鈕才可以起到單選的作用！
type：
name：為文本框命名，以備后臺程序ASP 、PHP使用。
value：為文本輸入框設置默認值。(一般起到提示作用)
21.<textarea>標簽
語法：
<textarea rows="行數(shù)" cols="列數(shù)">文本</textarea>
舉例：
<form method="post" action="save.php"> <label>聯(lián)系我們</label> <textarea cols="50" rows="10" >在這里輸入內(nèi)容...</textarea> </form>
22.<select>標簽
語法：
<select> <option value="提交的值">顯示的值</option> ... </select> 設置selected="selected"屬性，則該選項就被默認選中。 selected="selected"
<select multiple="multiple"> 然后選擇時候按ctrl點鼠標選中
<option disabled="disabled">
把相關的選項組合在一起
屬性 label：給選項組命名
屬性 disabled：禁用該選項組
23.<label>標簽
<label for="控件id名稱">
注意：標簽的 for 屬性中的值應當與相關控件的 id 屬性值一定要相同。
<form> <label for="male">男</label> <input type="radio" name="gender" id="male" /> <br /> <label for="female">女</label> <input type="radio" name="gender" id="female" /> <label for="email">輸入你的郵箱地址</label> <input type="email" id="email" placeholder="Enter email"> </form>
24.<map>標簽
使用 map 標簽可以給圖片某塊區(qū)域加超鏈接
使用方法：
1）為 map 標簽首先加上 id 屬性用來為 map 標簽定義一個唯一的名稱
2）為了保證兼容性再加上 name 屬性，屬性值與 id 的值相同
3）為 map 標簽所作用的圖片加上 usemap 屬性，屬性值為 #id 名稱
4）在 map 標簽內(nèi)嵌套 area 標簽來實現(xiàn)給指定區(qū)域加鏈接
<area shape="" coords="" href ="" alt="" /> shape 屬性：定義鏈接區(qū)域的形狀，常用值 rect、circle coords 屬性：確定區(qū)域的精確位置。填寫坐標即可，以父元素左上角為原點，可借助qq截圖來得到想要的坐標 href 屬性：填寫鏈接地址即可 alt 屬性：給鏈接加一些說明信息
例子：
<map id="img1" name="img1"> <area shape="rect" coords="184,33,391,258" href="http:www.baidu.com" alt="百度一下" target="_blank" /> <area shape="circle" coords="507,287,20" alt="私房庫我的博客" target="_blank" /> </map>
注意：
25.<iframe>標簽
創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）
屬性：
值：1、0
作用：規(guī)定是否顯示框架周圍的邊框。
作用：定義 iframe 的寬度
作用：定義高度
作用：給 iframe 命名
值：yes、no、auto
作用：規(guī)定是否在 iframe 中顯示滾動條
作用：規(guī)定在 iframe 中顯示的文檔的 URL
可以是本地的 html 文件，也可以是遠程的 html 文件
標簽寫法
1）不允許寫結束標簽的元素
area,base,br,col,command,embed,hr,img,input,keygen,link,meta,paran,source,track,wbr。這些標簽都是單標簽例如：br 標簽，不可以這樣<br></br>，只能<br />這樣來關閉標簽。
2）可以省略結束標記的元素有：
li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th。
3）可以省略全部標記的元素有
html,head,body,colgroup,tbody
例如：disabled,readonly，checked 等只寫屬性而不寫屬性值得時候當做 ture 不寫屬性表示 false
要求：屬性值不包含 空字符串，<，>，=， ‘
標簽嵌套探討
1.html 規(guī)定我們必須要嵌套著寫的標簽
例如：頁面頭部是嵌套在 head 標簽里面的，主體內(nèi)容都是嵌套在 body 標簽里面的表單的內(nèi)容是嵌套在 form 標簽里面的，dt、dd 是嵌套在 dl 標簽里面的，li 是嵌套到ul 標簽里面的，等等...
2.塊級元素可以嵌套內(nèi)聯(lián)元素，但是內(nèi)聯(lián)元素不能包含塊元素
<div> <span>我是一個 span 元素</span> </div> —— 對 <span> <div>div 元素</div> </span> —— 錯
3.內(nèi)聯(lián)元素可以嵌套內(nèi)聯(lián)元素
<a href="#"> <span></span> </a> —— 對
4.塊級元素與塊級元素嵌套注意點
<p><ol><li></li></ol></p> —— 錯 <p><div></div></p> —— 錯
喜歡前端的小伙伴們可以在評論區(qū)留言，尋找和小馮童鞋一樣熱愛前端的友人，讓我們一起玩轉(zhuǎn)前端的世界！
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
