開(kāi)發(fā)第一個(gè)網(wǎng)頁(yè) – 記事本
新建一個(gè).txt的文件
在其中添加一些文字虐秦，比如Hello World
保存文件
修改文件的擴(kuò)展名為.html文件
使用瀏覽器打開(kāi)頁(yè)面
這個(gè)網(wǎng)頁(yè)有什么缺點(diǎn)?
只能顯示一段普通的文本;
瀏覽器不知道是否要對(duì)這段文本加粗、放大司蔬、段落之間的間距;
案例 – 顯示一條新聞
如果我們現(xiàn)在有一條新聞需要顯示，那么可以通過(guò)某些“元素”來(lái)告知瀏覽器這部分內(nèi)容如何顯示丁存。
而我們編寫(xiě)的<h2></h2>彩匕，<p></p>就是HTML元素;
認(rèn)識(shí)HTML
-
超文本標(biāo)記語(yǔ)言(英語(yǔ):HyperText Markup Language，簡(jiǎn)稱(chēng):HTML)是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言杏愤。
- HTML元素是構(gòu)建網(wǎng)站的基石;
-
什么是標(biāo)記語(yǔ)言(markup language )?
由無(wú)數(shù)個(gè)標(biāo)記(標(biāo)簽靡砌、tag)組成;
是對(duì)某些內(nèi)容進(jìn)行特殊的標(biāo)記，以供其他解釋器識(shí)別處理;
比如使用<h2></h2>標(biāo)記的文本會(huì)被識(shí)別為“標(biāo)題”進(jìn)行加粗珊楼、文字放大顯示;
由標(biāo)簽和內(nèi)容組成的稱(chēng)為元素(element)
-
什么是超文本( HyperText )呢?
表示不僅僅可以插入普通的文本(Text)通殃，還可以插入圖片、音頻厕宗、視頻等內(nèi)容;
還可以表示超鏈接(HyperLink)画舌，從一個(gè)網(wǎng)頁(yè)跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè);
HTML文件的特點(diǎn) – 擴(kuò)展名(后綴名)
-
HTML文件的拓展名是.htm.html
因歷史遺留問(wèn)題，Win95\Win98系統(tǒng)的文件拓展名不能超過(guò)3字符已慢，所以使用.htm
現(xiàn)在統(tǒng)一使用 .html
HTML文件的特點(diǎn) – 結(jié)構(gòu)
改進(jìn)自己的網(wǎng)頁(yè)
- 修改自己的網(wǎng)頁(yè)代碼曲聂，讓自己的網(wǎng)頁(yè)也具備正確的結(jié)構(gòu):
- 運(yùn)行效果是一樣的，但是我們現(xiàn)在的網(wǎng)站也有正確的結(jié)構(gòu)了
開(kāi)發(fā)工具選擇
-
記事本可以開(kāi)發(fā)一個(gè)網(wǎng)頁(yè)嗎?答案:可以佑惠。但是有很多的缺點(diǎn):
創(chuàng)建和管理文件不方便;
沒(méi)有顏色標(biāo)識(shí)/沒(méi)有智能提示/無(wú)法調(diào)試程序;
-
專(zhuān)業(yè)的前端開(kāi)發(fā)工具
WebStorm朋腋、Sublime Text、Visual Studio Code兢仰、Atom乍丈、HBuilder、IntelliJ IDEA把将、Dreamweaver
智能提示轻专、高亮識(shí)別、語(yǔ)法檢測(cè)察蹲、集成環(huán)境请垛、開(kāi)發(fā)效率高
VSCode****工具安裝
VSCode****編輯器下載-安裝:https://code.visualstudio.com/
-
安裝插件(增加功能):右側(cè)圖標(biāo)最后一項(xiàng)，Extensions洽议，查找需要的插件(聯(lián)網(wǎng))
中文插件:Chinese
顏色主題:atom one dark
文件夾圖標(biāo):VSCode Great Icons
在瀏覽器中打開(kāi)網(wǎng)頁(yè):open in browser宗收、Live Sever p 自動(dòng)重命名標(biāo)簽:auto rename tag
-
VSCode****的配置:
Auto Save 自動(dòng)保存
Font Size 修改代碼字體大小
Word Wrap 代碼自動(dòng)換行
Render Whitespace 空格的渲染方式(個(gè)人推薦)
Tab Size 代碼縮進(jìn)
?? 推薦2個(gè)空格(公司開(kāi)發(fā)項(xiàng)目基本都是2個(gè)空格)
認(rèn)識(shí)元素
我們會(huì)發(fā)現(xiàn)HTML本質(zhì)上是由一系列的元素(Element)構(gòu)成的;
-
什么是元素(Element)呢?
元素是網(wǎng)頁(yè)的一部分;
一個(gè)元素可以包含一個(gè)數(shù)據(jù)項(xiàng)，或是一塊文本亚兄，或是一張照片混稽，亦或是什么也不包含;
-
那么HTML有哪些元素呢?
-
我們會(huì)發(fā)現(xiàn)元素非常非常的多，這么多能記得住嗎?
常用的，用的多自然就記住了;
不常用的匈勋，知道在哪里查找即可;
元素的組成
- 剖析一個(gè)HTML元素的組成:
-
這個(gè)元素的主要部分有:
1. 開(kāi)始標(biāo)簽(Opening tag):包含元素的名稱(chēng)(本例為 p)礼旅，被左、右尖括號(hào)所包圍洽洁。表示元素從這里開(kāi)始或者開(kāi)始起作用 —— 在本例中即段落由此開(kāi)始痘系。
2. 結(jié)束標(biāo)簽(Closing tag):與開(kāi)始標(biāo)簽相似，只是其在元素名之前包含了一個(gè)斜杠饿自。這表示著元素的結(jié)尾 —— 在本例中即段落在此結(jié)束汰翠。初學(xué)者常常會(huì)犯忘記包含結(jié)束標(biāo)簽的錯(cuò)誤，這可能會(huì)產(chǎn)生一些奇怪的結(jié)果昭雌。
3. 內(nèi)容(Content):元素的內(nèi)容复唤，本例中就是所輸入的文本本身。
4. 元素(Element):開(kāi)始標(biāo)簽烛卧、結(jié)束標(biāo)簽與內(nèi)容相結(jié)合苟穆，便是一個(gè)完整的元素。
元素的屬性
- 元素也可以擁有屬性(Attribute):
屬性包含元素的額外信息唱星，這些信息不會(huì)出現(xiàn)在實(shí)際的內(nèi)容中。
-
一個(gè)屬性必須包含如下內(nèi)容:
1. 一個(gè)空格跟磨，在屬性和元素名稱(chēng)之間间聊。(如果已經(jīng)有一個(gè)或多個(gè)屬性，就與前一個(gè)屬性之間有一個(gè)空格抵拘。)
2. 屬性名稱(chēng)哎榴，后面跟著一個(gè)等于號(hào)。
3. 一個(gè)屬性值僵蛛，由一對(duì)引號(hào)“ ”引起來(lái)尚蝌。
創(chuàng)建一個(gè)超鏈接元素a:
屬性的分類(lèi)
-
有些屬性是公共的，每一個(gè)元素都可以設(shè)置
- 比如class充尉、id飘言、title屬性
-
有些屬性是元素特有的，不是每一個(gè)元素都可以設(shè)置
- 比如meta元素的charset屬性驼侠、img元素的alt屬性等
單標(biāo)簽元素 – 雙標(biāo)簽元素
-
雙標(biāo)簽元素:我們會(huì)發(fā)現(xiàn)前面大部分看到的元素都是雙標(biāo)簽的;
- html姿鸿、body、head倒源、h2苛预、p、a元素;
-
單標(biāo)簽元素:也有一些元素是只有一個(gè)標(biāo)簽;
- br、img、hr台汇、meta蚂蕴、input;
-
注意事項(xiàng):
- HTML元素不區(qū)分大小寫(xiě)罚缕，但是推薦小寫(xiě)
元素的結(jié)構(gòu)總結(jié)
元素的結(jié)構(gòu)回顧:
元素的嵌套關(guān)系
- 某些元素的內(nèi)容除了可以是文本之外沦寂，還可以去其他元素鳍咱，這樣就形成了元素的嵌套荣刑。
為什么需要注釋?
-
程序員才懂的冷笑話:
在我寫(xiě)這段代碼的時(shí)候, 只有我和上帝知道這段代碼是什么意思.
一段時(shí)間之后, 只有上帝知道是什么意思了.
-
為什么會(huì)出現(xiàn)這樣的情況呢?
隨著學(xué)習(xí)的深入, 你的一個(gè)程序不再是幾行代碼就可以搞定的了.
可能我們需要寫(xiě)出有上千行, 甚至上萬(wàn)行的程序.
某些代碼完成某個(gè)功能后, 你寫(xiě)的時(shí)候思路很清晰, 但是過(guò)段時(shí)間會(huì)出現(xiàn)忘記為什 么這樣寫(xiě)的情況, 這很正常.
-
和同時(shí)協(xié)同開(kāi)發(fā)
在實(shí)際工作中, 一個(gè)項(xiàng)目通常是多人協(xié)作完成的. 可能是幾個(gè)或者十幾個(gè)等等.
這個(gè)時(shí)候, 你可能需要使用別人寫(xiě)出的代碼功能, 別人也可能使用你的代碼功能.
如果你的代碼自己都看不懂了, 更何況你的同事呢?
HTML的注釋
-
什么是注釋?
簡(jiǎn)單來(lái)說(shuō)绒极，注釋就是一段代碼說(shuō)明
注釋是只給開(kāi)發(fā)者看的骏令，瀏覽器并不會(huì)把注釋顯示給用戶看
-
注釋的意義:
幫助我們自己理清代碼的思路, 方便以后進(jìn)行查閱.
與別人合作開(kāi)發(fā)時(shí), 添加注釋, 可以減少溝通成本.(同事之間分模塊開(kāi)發(fā))
開(kāi)發(fā)自己的框架時(shí), 加入適當(dāng)?shù)淖⑨? 方便別人使用和學(xué)習(xí).(開(kāi)源精神)
可以臨時(shí)注釋掉一段代碼, 方便調(diào)試.
注釋快捷鍵:ctrl + /
