整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
例
設置一個虛線輪廓的顏色：
p
{
outline-style:dotted;
outline-color:#00ff00;
}
屬性定義及使用說明
outline （輪廓）是繪制于元素周圍的一條線，位于邊框邊緣的外圍。
outline-color屬性指定輪廓顏色。
注意： 請始終在 outline-color 屬性之前聲明 outline-style 屬性。元素只有獲得輪廓以后才能改變其輪廓的顏色。
| 默認值： | invert |
|---|---|
| 繼承： | no |
| 版本： | CSS2 |
| JavaScript 語法： | object.style.outlineColor="#00FF00" |
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| outline-color | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
提示和注釋
outline是圍繞元素。它是圍繞元素的邊距。但是，它是來自不同的邊框屬性。
outline不是元素尺寸的一部分，因此元素的寬度和高度屬性不包含輪廓的寬度。
屬性值
| 值 | 描述 |
|---|---|
| color | 指定輪廓顏色。在 CSS顏色值尋找顏色值的完整列表。 |
| invert | 默認。執(zhí)行顏色反轉（逆向的顏色）。可使輪廓在不同的背景顏色中都是可見。 |
| inherit | 規(guī)定應該從父元素繼承輪廓顏色的設置。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
什么學習HTML？
理解HTML代碼是制作網(wǎng)頁的基本技能。在互聯(lián)網(wǎng)高度發(fā)達的今天，網(wǎng)頁制作技術開始變的和修圖、處理視頻一樣重要。
第一，學會制作網(wǎng)頁就可以把自己想要展示的信息讓其他人使用瀏覽器觀看，無論是文字、照片還是視頻都可以通過瀏覽器觀看，甚至是分享自己制作的小游戲。
第二，理解網(wǎng)頁運行的基本原理后可以更好的瀏覽他人的網(wǎng)頁，尋找有用信息，更合理的使用第三方工具，簡單高效的制作自己的網(wǎng)頁。
HTML學習難度與重要性
HTML代碼本身非常容易理解，使用也非常簡單，但是單純使用HTML代碼寫出的網(wǎng)頁效果和我們平時看到的網(wǎng)頁相差甚遠。要想做出一個漂亮的頁面，我們還需要CSS和JavaScript的幫助。
HTML、CSS、JavaScript這些不同的代碼都有什么作用呢？簡單來說，HTML代碼可以為網(wǎng)頁提供基本內(nèi)容，比如文字、圖片、音樂、視頻等。CSS代碼可以為頁面安排布局，比如標題的位置、字體、顏色、大小等，籠統(tǒng)的說就是為HTML代碼添加的內(nèi)容增加樣式信息，例如修改位置、尺寸、顏色等屬性。JavaScript代碼可以為頁面提供交互（互動）功能，例如通過按鈕控制頁面內(nèi)容的隱藏、出現(xiàn)，或者為多張圖片添加輪播功能等。
對比起來，HTML的學習難度最低，但作用是最重要的，因為一切頁面的基礎是內(nèi)容，沒有內(nèi)容，樣式與交互都不存在。
認識HTML基本結構
第一行 <!DOCTYPE HTML>
第二行 <html>
第三行 <head>
第四行 </head>
第五行 <body>
第六行 </body>
第七行 </html>
以上七行代碼是一個網(wǎng)頁文件的HTML代碼的基本結構。
大家觀察一下可以發(fā)現(xiàn)一個規(guī)律，每一行的內(nèi)容都是寫在“<>”里面的。原因說來話長，先記住就行。每個寫在“<>”里面的內(nèi)容叫做“標簽”。以后“標簽”這個詞會經(jīng)常出現(xiàn)。
第一行<!DOCTYPE HTML>標簽指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令（這句話可以暫時不必理解）。重要的是這句傲嬌的代碼只能存在在HTML代碼的第一行！
第二行<html>標簽與第七行的</html>標簽是一對，“<html>”叫做開始標簽，“</html>”叫做結束標簽。他們之間的區(qū)別在于結束標簽比開始標簽多一個“/”。這是HTML代碼的一個重要規(guī)律，以后我將要學到的大部分標簽都是這樣的，可能瀏覽器有些強迫癥吧，如果沒有結束標簽它會很不舒服，有可能會消極怠工而產(chǎn)生麻煩（不能正常顯示）。不過遺憾的是<!DOCTYPE HTML>太傲嬌，至今沒有另一半。<html> 與 </html> 標簽限定了文檔的開始點和結束點。
第三行與第四行組成一對，叫做“head”標簽。顧名思義，這個“頭”標簽里的內(nèi)容統(tǒng)領全局，比如控制布局與樣式的CSS代碼文件和添加互動功能的JavaScript代碼文件在這里添加或導入；搜索頁面用的關鍵詞信息在這里添加；頁面信息的編碼方式也是由此指定；瀏覽器窗口的標題也在這里顯示。
第五行與第六行組成一對，叫做“body”標簽。用來顯示所有的頁面內(nèi)容信息。
畫個圖來表示一下這四個標簽的層級關系（就是誰包含誰的意思，或者誰在誰的勢力范圍內(nèi)出現(xiàn)）：
邊學邊練------寫一個最簡單的頁面
正所謂萬丈高樓平地起，下面我們就動手做我們的第一個網(wǎng)頁文件。
工具：電腦，安裝一個瀏覽器（IE 火狐 谷歌瀏覽器都可以），確定“記事本”工具可用。
有了以上工具我們就可以寫了。
Step1 新建一個.txt文件。
操作如下：
（1）選擇合適的磁盤，比如D盤或F盤新建一個文件夾，命名為“網(wǎng)頁”。點擊進入。
（2）在空白處點擊鼠標右鍵新建一個文本文件，命名為“第一個頁面”。這時我們就有了一個“第一個頁面.txt”文件了。
如果你的電腦不顯示“.txt”這樣的文件后綴，可以在屏幕左上方尋找“查看”菜單，如圖2
圖 2
點擊后，出現(xiàn)如下菜單如圖3，點擊“選項”。
圖 3
點擊“查看”，去掉“隱藏已知文件類型的擴展名”選項前的“對號”，如圖4所示。這時就能顯示或修改文件后綴了。
圖 4
Step2 添加內(nèi)容
（1）雙擊打開“第一個頁面.txt”文件，把HTML基本結構共七行代碼輸入進去。
（2）保存，關閉文件，在“第一個頁面.txt”文件上點擊鼠標右鍵，選擇“重命名”，將“.txt”修改為“.html”。這時，系統(tǒng)會提示，如圖1，大膽點“是”。
圖 1
這時我們的文件就變成了html網(wǎng)頁文件了。
我們雙擊這個文件發(fā)現(xiàn)瀏覽器內(nèi)一片空白，這就好比我們在桌子上擺了個碟子，里面并沒有放美食。瀏覽器中的一片白就是空碟子的顏色，而HTML基本結構就是這個碟子。
下面我們往碟子里加點東西。
Step3 添加內(nèi)容
（1）在“第一個頁面.html”文件上點擊鼠標右鍵，選擇“打開方式”，選擇“記事本”，如果沒有“記事本”選項，請點擊“選擇其他應用”，點擊選擇最下面的“更多應用”，選擇“記事本”。下一次選擇“打開方式”時，“記事本”就會出現(xiàn)了。
（2）在<head></head>標簽之間添加“<title>學習寫第一個網(wǎng)頁</title>”。在<body></body>之間添加“<h1>第一個網(wǎng)頁</h1>”；“<p>隨著學的內(nèi)容越來越多，網(wǎng)頁就會越來越漂亮了！</p>”完成如圖5
圖 5
（3）保存，關閉，雙擊打開！效果如圖6
圖6
今天的邊學邊做就到這里，下一次會詳細解釋<head>標簽、<body>標簽中常出現(xiàn)的子標簽以及它們各自的作用。
第二篇《邊學邊做網(wǎng)頁篇——<head>標簽里裝點啥？》http://mp.toutiao.com/preview_article/?pgc_id=6738988870622249479
<div>元素是個有故事的元素，這個元素很早就出現(xiàn)在html超文本標記語言中，它設計之初就是為了解決網(wǎng)頁頁面布局的需求。但是遺憾的是它出生后一直懷才不遇。
在我還上初中的時候，智能手機還沒有出現(xiàn)，更沒有平板電腦等移動設備。上網(wǎng)是通過擺在桌子上的計算機來完成的。
那時，大街小巷上有好多網(wǎng)吧。
那時，馬云剛剛辭去工作準備創(chuàng)業(yè)。
那時，發(fā)送郵件的操作都會出現(xiàn)在計算機課程中。
那時，對頁面還沒有現(xiàn)在的跨平臺要求。
那時，flashplayer大行其道。
那時，dreamwaver、flash、fireworks被稱為網(wǎng)頁三劍客！
那時，制作網(wǎng)頁可以不用懂的html的寫法！
第一次接觸網(wǎng)頁制作是在大學的專業(yè)課上，使用三劍客，通過點擊軟件菜單中的按鈕就能制作網(wǎng)頁，精力都放在了如何使用flash制作酷炫的交互動畫上了。
那時，對html還沒有深刻的認識，但是卻對<table></table>這個標簽有著極深的印象。
因為當時的dreamwaver通過非代碼方式生成的頁面都是使用<table>表格元素進行布局的！
也就是說，在移動智能設備誕生之前，在用戶對頁面還沒有可以適應不同屏幕比例的要求前，<table>這個本來用來做表格的元素同時兼職了<div>的頁面布局工作，而且把兼職干成了主業(yè)，讓<div>這個專業(yè)的塊元素閑置了好久。
直到智能手機，平板電腦產(chǎn)生后，由于對頁面的跨平臺顯示的要求的出現(xiàn)（這類適應多平臺的頁面布局叫做響應式布局），<table>表格制作的頁面在響應式布局大行其道的今天，用它布局的頁面開始出現(xiàn)代碼冗余，維護困難等諸多問題。手機端的瀏覽器在播放視頻或其他交互動畫時也不再依賴flashplayer這個給我們帶來無數(shù)反感和惱火的插件。
從此，頁面制作的世道變了，從不需要編程就能制作頁面的三劍客，變成了必須懂得相關代碼寫法才能使用的HTML+CSS+JavaScript了。dreamwaverCC版本也恢復了寫代碼做頁面的操作方式，過去的點擊加拖拽的制作方式也消失了。這讓很多不懂編程和HTML等頁面制作核心技術的從業(yè)人感到難受。
dreamwaver的老東家Adobe后來也嘗試過推出新模式下通過界面操作來制作網(wǎng)頁的軟件，還搞出一個叫做Muse的軟件，但是依舊沒能撬動代碼書寫的方式。
這個故事在開始學習<div>和css布局之前我都會講給學生（一群文科生）聽，我只是想告訴大家，學習任何計算機技術，我們可以從簡單易學的方式入手，但要有透過這種方式向下挖掘核心知識的決心和勇氣！對于自己從事的工作我們不能滿足于會做，還要盡量透析它的原理，這樣才能在技術換代中不會被輕易淘汰。
在我研究生階段，有一門讓我終生難忘的選修課，這門課叫做《數(shù)字娛樂技術概述》，這門課既不娛樂也不概述，但是通篇都是數(shù)字，那位年輕的教授為我們透析了游戲、影視特效的核心----計算機圖形學。
從此我開始學習數(shù)學。因為老師的一句話：從2000年到現(xiàn)在（2014）雖然各種軟件層出不窮，但是計算機圖形學的核心算法卻幾乎沒什么改變。
向下挖掘雖然很難，但是有必要！與各位共勉！
下面開始今天的內(nèi)容。
首先，我們將之前的"第一個頁面.html"文件復制一個，叫做"塊元素學習.html"。然后把<body></body>中間的內(nèi)容清空。
如圖：
下面，我們在<body></body>中間添加<div></div>標簽。示例代碼如下：
<body><div></div></body>我們看看效果：
啦啦啦，什么都沒有！
為了讓大家可以看出來不同，我們?yōu)?lt;div>添加邊框屬性！
我們使用style屬性為<div>添加邊框，style屬性里的代碼就是以后在CSS中使用的代碼！實際上我們已經(jīng)開始接觸CSS的一些內(nèi)容了。具體寫法的講解大家可以看這個教程，這里不再贅述。
示例代碼如下：（通過style="border-style: solid;"可以為很多元素添加邊框，就不需要大家記憶或查詢不同元素的不同寫法，是不是很方便！）
<div style="border-style: solid;">效果如圖：
因為里面沒有內(nèi)容，所以<div>的寬度是0，因此顯示的就是一條直線。下面我們向<div>中添加內(nèi)容。
為了看起來花哨些，加張圖片吧！
示例圖片
示例代碼如下：
<div style="border-style: solid;"><img src="img/示例圖片/image4.jpg"/ style="width:50%；"></div>大家請按照<img>中的scr自行建立文件夾和命名吧！如果您看不懂請參照《HTML元素中的屬性2（路徑詳解）——零基礎自學網(wǎng)頁制作》
效果如下：
其中，我們也是使用了style的方式為<img>設置的寬度，這個設置方法在<div>中一樣使用！
代碼示例：大家注意寫法，不同的屬性都添加到style的雙引號中即可，同時使用；隔開！
<div style="border-style: solid; width:50%;">
<img src="img/示例圖片/image4.jpg"/ style="width:50%;">
</div>效果如圖：
整個邊框縮小了50%，圖片更有趣，尺寸變成了div的50%乘以自身的50%。這個特性大家要記住。
為了方便觀看，我們?nèi)サ鬱iv的width設置。同時在<div>中繼續(xù)添加<div>標簽。為了方便顯示，我們在新的<div>中添加一段文字！
示例代碼如下：
<div style="border-style: solid;">
<img src="img/示例圖片/image4.jpg"/ style="width:50%;">
<div>
<p>學習網(wǎng)頁制作非常有趣！</p>
</div>
</div>效果如下：
如果為了美觀，我們讓文字到圖片右邊的空間中怎么做呢？
示例代碼如下：
<div style="float:right;"><p>學習網(wǎng)頁制作非常有趣！</p></div>
我們通過為新的<div>標簽中的style屬性添加float（浮動）屬性，同時設置為right（右）。
頁面效果如圖：
大家思考一下如何讓圖片與文字都靠在左邊呢？
是不是為圖片style添加float:left;同時把新<div>的float改為left？
我們試試看！
示例代碼如下：
<div style="border-style: solid;">
<img src="img/示例圖片/image4.jpg" style="width:50%; float:left;"/>
<div style="float:left;">
<p>學習網(wǎng)頁制作非常有趣！</p>
</div>
</div>頁面效果：
效果完全不對，圖片和文字跑到外邊來了。
這是div布局中經(jīng)常出現(xiàn)的一個問題！解決方案有點奇葩，既不是修改<img>屬性也不是修改<div>屬性，而是增加一組空的<div></div>標簽！給這個新的空的<div>的style設置為"clear:both"即可修正。
示例代碼如下：
<div style="border-style: solid;">
<img src="img/示例圖片/image4.jpg" style="width:50%; float:left;"/>
<div style="float:left;">
<p>學習網(wǎng)頁制作非常有趣！</p>
</div>
<div style="clear:both;"></div>
</div>頁面效果如下：
值得注意的是，如果您不使用<div>的話直接使用<img>和<p>，同時對兩個標簽的style設置為float：left，是沒有問題的，只有把它們放到<div>中才會出現(xiàn)上面的情況。
代碼如下：
<body>
<img src="img/示例圖片/image4.jpg" style="width:50%; float:left;"/>
<p style="float:left;">學習網(wǎng)頁制作非常有趣！</p>
</body>頁面顯示效果如下：
大家觀察一下，文字也變小了。至于為什么去掉<div>之后就不會出現(xiàn)上面那種出框的情況，而且文字也變小的問題在以后的講解中我們再深入探討！
現(xiàn)在希望大家可以記牢這個情況和操作，更多布局問題我們會在CSS的浮動（float）的講解中詳細說明。
疫情期間，請大家少出門，不聚會，沒事在家學學網(wǎng)頁制作，即抗擊疫情又提高自己!
喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！
HTML序章（學習目的、對象、基本概念）——零基礎自學網(wǎng)頁制作
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)頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網(wǎng)頁制作
HTML中使用<a>標簽實現(xiàn)文本內(nèi)鏈接——零基礎自學網(wǎng)頁制作
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
