配置環(huán)境
網(wǎng)頁(yè)編寫常用的編輯器
記事本: 無(wú)提示功能恋日，不推薦寿羞。
editplus/nodepad++: 小巧方便，語(yǔ)法高亮矫废，適合普通編寫盏缤。
Dreamwaver: 功能強(qiáng)大，啟動(dòng)較慢蓖扑，適合非專業(yè)設(shè)計(jì)唉铜。
Sublime: 輕量小巧方便，自帶功能不太全律杠，插件功能強(qiáng)大潭流，需自行安裝各種功能插件竞惋。
WebStorm: 重量級(jí), 自帶功能全面，收費(fèi)軟件灰嫉，啟動(dòng)較慢拆宛，適合專業(yè)前端人員。
因?yàn)槲覀儸F(xiàn)在只是練習(xí)html的寫法讼撒，推薦大家使用小巧方便的editplus/nodepad++或Sublime浑厚。其中sublime需要安裝各種插件，也不太適合新手用根盒。如果是老手钳幅，就沒(méi)所謂了，都只是工具而已炎滞。
editplus的下載與安裝
-
百度Editplus[中文版]
image.png -
選擇合適的下載網(wǎng)站：
image.png
image.png
3.運(yùn)行下載的文件后敢艰，在軟件目錄雙擊EditPlusPortable.exe即可
image.png
常用瀏覽器：現(xiàn)代瀏覽器（如谷歌瀏覽器、火狐瀏覽器）和IE瀏覽器
有興趣的同學(xué)可以百度“常用瀏覽器”和“常用瀏覽器內(nèi)核”進(jìn)行了解厂榛。
設(shè)計(jì)網(wǎng)頁(yè)最好使用谷歌瀏覽器：第一盖矫，他的速度很快，第二击奶，他的調(diào)試工具很方便，第三他對(duì)網(wǎng)頁(yè)標(biāo)準(zhǔn)的支持很好责掏。當(dāng)然還有其它的優(yōu)點(diǎn)柜砾，比如說(shuō)插件比較多等等。
常用的文本標(biāo)簽
段落標(biāo)簽p與換行標(biāo)簽br
- 段落標(biāo)簽p
<p>p是段落標(biāo)簽</p>
<p>段落標(biāo)簽正常情況是一個(gè)雙標(biāo)簽换衬，有開始和結(jié)束標(biāo)簽</p>
<p>在實(shí)際使用中痰驱，段落標(biāo)簽如果寫成單標(biāo)簽，絕大多數(shù)的瀏覽器都能正常識(shí)別瞳浦，但是不推薦担映。</p>
注意：<p>我是中國(guó)人。<p>我熱愛自己的祖國(guó).這種寫法叫潦，將<p>用做單標(biāo)簽蝇完，大部分瀏覽器是認(rèn)識(shí)的，會(huì)形成兩個(gè)段落矗蕊，但是不推薦短蜕。
- 換行標(biāo)簽br
我是第一行。
<br />
我是第二行傻咖。
- 段落標(biāo)簽與換行標(biāo)簽的區(qū)別：
- 從文章結(jié)構(gòu)上講朋魔，段落標(biāo)簽形成的是段落，換行標(biāo)簽只是將一行文字變成兩行卿操，這兩行文字仍然在一個(gè)段落中警检。
- 從形式上講孙援，段落的間距比行間距要大。
- 從輸入的角度上講扇雕，段落是按回車鍵拓售，行是按shift鍵加回車。
- 輸入如下代碼洼裤，保存后測(cè)試效果邻辉。
<p>段落標(biāo)簽與換行標(biāo)簽的區(qū)別：</p>
<p>從文章結(jié)構(gòu)上講，段落標(biāo)簽形成的是段落腮鞍，換行標(biāo)簽只是將一行文字變成兩行值骇，這兩行文字仍然在一個(gè)段落中。</p>
<p>從形式上講移国，段落的間距比行間距要大吱瘩。</p>
<p>從輸入的角度上講，段落是按回車鍵迹缀，行是按shift鍵加回車使碾。</p>
<br />
從文章結(jié)構(gòu)上講，段落標(biāo)簽形成的是段落祝懂，換行標(biāo)簽只是將一行文字變成兩行票摇，這兩行文字仍然在一個(gè)段落中。
<br />
從形式上講砚蓬，段落的間距比行間距要大矢门。
<br />
從輸入的角度上講，段落是按回車鍵灰蛙，行是按shift鍵加回車祟剔。
效果應(yīng)該如下圖
標(biāo)題字標(biāo)簽h1-h6
標(biāo)題字標(biāo)簽用于標(biāo)記文檔中的標(biāo)題，從形式上講摩梧，標(biāo)題是默認(rèn)加粗顯示物延，并獨(dú)占一行，標(biāo)題字標(biāo)簽按級(jí)別仅父，可分為六級(jí)叛薯，h1最大，h2其次驾霜，h6最小案训。
在編輯器中輸入如下代碼并保存：
<h1>1級(jí)標(biāo)題</h1>
<h2>2級(jí)標(biāo)題</h2>
<h3>3級(jí)標(biāo)題</h3>
<h4>4級(jí)標(biāo)題</h4>
<h5>5級(jí)標(biāo)題</h5>
<h6>6級(jí)標(biāo)題</h6>
效果應(yīng)該如下：
注意，標(biāo)簽是標(biāo)簽會(huì)對(duì)網(wǎng)頁(yè)中的文本起到化結(jié)構(gòu)的作用粪糙，同時(shí)强霎， 搜索引擎也會(huì)使用標(biāo)題為您的網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容編制索引，其中h1具有更重要的意義蓉冈，所以城舞，通常只能設(shè)置一個(gè)轩触，否則可能會(huì)被搜索引擎懲罰。那么實(shí)際應(yīng)用當(dāng)中家夺，h1經(jīng)常用來(lái)設(shè)置頁(yè)面的logo或品牌脱柱。
- 思考：本頁(yè)哪些可能是一級(jí)標(biāo)題，哪些可能是二級(jí)標(biāo)題拉馋，哪些可能是三級(jí)標(biāo)題榨为？
常見文本格式化（表現(xiàn)）標(biāo)簽
| 標(biāo)簽 | 描述 |
|---|---|
| <strong></strong> | 強(qiáng)調(diào)語(yǔ)義，加粗文字 |
| <em></em> | 強(qiáng)調(diào)語(yǔ)義煌茴，傾斜文字 |
| <del></del> | 刪除語(yǔ)義随闺，貫穿文字 |
| <ins></ins> | 新插入語(yǔ)義，下劃線文字 |
| <b></b> | 加粗文字,因?yàn)榧儽憩F(xiàn)蔓腐，沒(méi)有語(yǔ)義矩乐，已經(jīng)被HTML5標(biāo)準(zhǔn)廢棄 |
| <i></i> | 傾斜文字, 因?yàn)榧儽憩F(xiàn)，沒(méi)有語(yǔ)義回论，已經(jīng)被HTML5標(biāo)準(zhǔn)廢棄 |
| <u></u> | 下劃線文字, 因?yàn)榧儽憩F(xiàn)散罕，沒(méi)有語(yǔ)義，已經(jīng)被HTML5標(biāo)準(zhǔn)廢棄 |
| <s></s> | 貫穿文字,因?yàn)榧儽憩F(xiàn)傀蓉，沒(méi)有語(yǔ)義欧漱，已經(jīng)被HTML5標(biāo)準(zhǔn)廢棄 |
| <big></big> | 加大文字 |
| <small></small> | 減小文字 |
| <mark></mark> | 標(biāo)記文字 |
其它不常用標(biāo)簽
標(biāo)簽可以分為表現(xiàn)標(biāo)簽和語(yǔ)義標(biāo)簽兩類，表現(xiàn)標(biāo)簽是可以修改文本外形的標(biāo)簽葬燎，語(yǔ)義標(biāo)簽是有意義的標(biāo)簽硫椰，便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時(shí)讓瀏覽器的爬蟲和機(jī)器很好地解析。
- 表現(xiàn)標(biāo)簽：例如<sub>上標(biāo)萨蚕，</sub><sup>下標(biāo)，</sup>和<pre>預(yù)格式化文本容器</pre>等等蹄胰，可以改變文本外形的標(biāo)簽岳遥，如果純粹是為了表現(xiàn)的而沒(méi)有語(yǔ)義，那么慢慢的不被推薦使用了裕寨。
- 語(yǔ)義標(biāo)簽：例如
- <blockquote>引用文本塊</blockquote>
- <code>代碼</code>
- <time>時(shí)間</time>
- <samp>程序輸出</samp>
- <abbr title="PRC">People's Republic of China縮略語(yǔ)</abbr>
練習(xí)
-
觀察下列文字浩蓉，思考有哪些標(biāo)簽，并試著完成宾袜。
image.png 代碼參考：
<h1>《賦得古原草送別》<small>又名草</small></h1>
<p>（唐）白居易<sup>注1</sup></p>
<p>離離原上<b>草</b>捻艳，一歲一枯榮，</p>
<p>野火燒不盡庆猫，春風(fēng)吹又生认轨。</p>
<p>遠(yuǎn)芳侵古道，晴翠接荒城月培，</p>
<p>又送王孫去嘁字，萋萋滿別情恩急。</p>
小結(jié)
- 標(biāo)簽的分類：
- 單雙標(biāo)簽
- 語(yǔ)義和表現(xiàn)標(biāo)簽
- 結(jié)構(gòu)和文本標(biāo)簽
