開發(fā)第一個網(wǎng)頁-元素
回顧 0324上午
一躏吊、邂逅前端開發(fā)
1.1.軟件開發(fā)、軟件開發(fā)體系
1.2.完善的應用程序包括那些游盲？
- 服務器開發(fā)
- iOS開發(fā) Android開發(fā)
- web開發(fā)
- 桌面開發(fā) (window Mac)
1.3.前端開發(fā)的內(nèi)容
- 前端開發(fā)的任務
- web開發(fā) 小程序開發(fā)
- 移動端 桌面端 服務端開發(fā)(Node)
- 前端開發(fā)的路線
1.4.學習方法和學習建議
- 學習任何新的東西的介袜，最好了解他的歷史，局限行唁影、本質(zhì)
- 知識進行分類
- 常用的知識 必須熟練掌握
- 不常用的知識i 知道有它耕陷，知道在哪里查
二、邂逅Web開發(fā)
2.1.電腦配置据沈、推薦如阿納金
2.2.網(wǎng)站和網(wǎng)頁的關系
2.3.網(wǎng)頁的顯示過程
- 用戶的角度
- 前端開發(fā)工程師的角度
- 服務器是什么哟沫？
2.4.網(wǎng)頁的組成部分
- HTML
- 網(wǎng)頁的結(jié)構(gòu)
- CSS
- 網(wǎng)頁的樣式(美化)
- JavaScript
- 網(wǎng)頁的交互(靈魂)
瀏覽器的作用
- 瀏覽器最核心的部分其實 ”瀏覽器內(nèi)核“
- 瀏覽器最核心的部分是渲染引擎，一般也稱之為 ”瀏覽器內(nèi)核“
- 負責解析網(wǎng)頁語法锌介，并渲染(顯示)網(wǎng)頁
常見的瀏覽器
- Trident(三叉戟)
- IE
- 360安全瀏覽器
- 搜狗高速瀏覽器
- 百度瀏覽器
- uc瀏覽器
- Gecko(壁虎)
- Mozilla Firefox
- Presto(急板樂曲) -> Blink(眨眼)
- Opera
- Webkit
- Safari
- 360極速瀏覽器
- 搜狗高速瀏覽器
- 移動端瀏覽器
- Webkit -> Blink
- Google Chrome
- Edge
不同的瀏覽器內(nèi)核有不同的解析嗜诀、渲染規(guī)則，所以在同一網(wǎng)頁在 不同內(nèi)核的瀏覽器中的渲染效果也可能不同
我的第一個網(wǎng)頁
記事本開發(fā)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
HelloWorld
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>【奮進新征程 建功新時代·偉大變革】福建木蘭溪的綠色之變</h1>
<h3>
1.央視網(wǎng)消息（新聞聯(lián)播）：位于福建省莆田市的木蘭溪曾經(jīng)水患嚴重孔祸，20多年前隆敢，習近平總書記在福建工作期間，指揮推動木蘭溪流域治理崔慧，木蘭溪也成為了全國第一條全流域系統(tǒng)治理的河流筑公。
</h3>
<p>
2.黨的十八大以來，福建廣大干部群眾牢記總書記囑托尊浪，堅持不懈匣屡、久久為功封救，木蘭溪再次迎來綠色之變，昔日水患之河如今已成為造福人民的生態(tài)之河捣作、發(fā)展之河誉结。
</p>
</body>
</html>
邂逅HTML
- 不是編程語言 ，而是一種標記語言
-
超文本標記語言是一種用于創(chuàng)建網(wǎng)頁的標記語言
- HTML元素是構(gòu)建網(wǎng)站的基石
-
什么是標記標記語言
- 有無數(shù)個標記(標簽券躁、tag)組成
- 是對某些內(nèi)容進行特殊的標記惩坑，以供其他解釋器識別處理
- 比如使用<h2></h2>標記的文本會被標識為“”進行加粗、文字放大顯示
- 由標簽和內(nèi)容組成的部分成為元素
-
什么是超文本呢
- 不僅僅可以插入普通的文本也拜，還可以插入圖片以舒、音頻、視頻等內(nèi)容
- 還可以表示超鏈接慢哈，從一個網(wǎng)頁跳轉(zhuǎn)到另一個網(wǎng)頁
-
HTML文件的擴展名.html .htm
- 因歷史遺留問題蔓钟，win95/win98系統(tǒng)的文件擴展名不能超過3字符，所以使用.htm
- 現(xiàn)在同一使用.html
-
HTML文件的特點 - 結(jié)構(gòu)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> </html>
此時安裝了搜狗輸入法
- 摒棄微軟輸入法
- 雖然好用卵贱，但是還是使用搜狗輸入法的工具
VSCode開發(fā)工具
開發(fā)工具選擇
- 記事本
- 創(chuàng)建和管理文件不方便
- 沒有顏色表示
- 沒有智能提示
- 無法調(diào)試程序
- VSCode
- webstorm
- sublime text
- atom
- hbuilder
- idea
- dreamwear
- 智能提示
- 高亮識別
- 語法檢測
- 集成環(huán)境
- 開發(fā)效率高
上課推薦開發(fā)工具
- Webstorm
- 優(yōu)點
- 集成開發(fā)工具滥沫，包羅萬象
- 缺點
- 重
- 收費
- 優(yōu)點
- VSCode(微軟開發(fā)的)
- 優(yōu)點
- 免費
- 缺點
- 需要安裝一些插件來輔助開發(fā)
- 優(yōu)點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.red {
color: #ff0000;
}
</style>
</head>
<body>
<h1>【奮進新征程 建功新時代·偉大變革】福建木蘭溪的綠色之變</h1>
<h3>
1.央視網(wǎng)消息（新聞聯(lián)播）：位于福建省莆田市的木蘭溪曾經(jīng)水患嚴重，20多年前键俱，習近平總書記在福建工作期間兰绣，指揮推動木蘭溪流域治理，木蘭溪也成為了全國第一條全流域系統(tǒng)治理的河流编振。
</h3>
<p>
2.黨的十八大以來缀辩，福建廣大干部群眾牢記總書記囑托，堅持不懈踪央、久久為功臀玄，木蘭溪再次迎來綠色之變，昔日水患之河如今已成為造福人民的生態(tài)之河杯瞻、發(fā)展之河。
</p>
</body>
<script>
const name = "why";
function abc() {
console.log("終端");
}
</script>
</html>
認識元素
- 我們會發(fā)現(xiàn)HTML本質(zhì)上是由一列系列元素構(gòu)成的
什么是元素
- 元素是網(wǎng)頁的一部分
- 一個元素可以包含一個數(shù)據(jù)項炫掐，或是一個塊文本魁莉，或是一張照片，亦或是什么也不包含
HTML有哪些元素呢
- MDN看文檔
元素的組成
剖析一個HTML元素的組成
- 元素的組成
- 開始標簽
- 內(nèi)容
- 結(jié)束標簽
- 元素分類
- 單標簽元素
- 雙標簽元素
編寫第一個元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p>
<span></span>
</p>
<p>我是段落</p>
</body>
</html>
元素 單雙標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 1.注釋 雙標簽 -->
<p>
<span></span>
</p>
<p>我是段落</p>
<!-- 2.注釋 單標簽 -->
<img src="" alt="" />
<input type="text" />
</body>
</html>
注意事項
- HTML元素不區(qū)分大小寫募胃，但是推薦小寫
元素的屬性
- 元素也可以擁有屬性
- 屬性包含元素的額外信息旗唁，這些信息不會出現(xiàn)在實際的內(nèi)容中
- 一個屬性必須包含如下內(nèi)容
- 一個空格
- 屬性名稱
- 一個屬性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.title {
color: red;
}
</style>
</head>
<body>
<!-- <h1 屬性名="屬性值">我是標題</h1> -->
<h1 title="我是標題" class="title">我是標題</h1>
<h1>我是標題</h1>
<!-- 超鏈接 -->
<a >百度一下</a>
</body>
</html>
元素屬性的分類
- 有些屬性是公共的
- class
- id
- title
- 有些屬性是特有的
- meta屬性的charset屬性
- img元素的alt屬性
元素的結(jié)構(gòu)總結(jié)
元素的結(jié)構(gòu)回顧
- 開始標簽
- 屬性
- 屬性名
- 屬性值
- 屬性
- 內(nèi)容
- 結(jié)束標簽
元素的嵌套關系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul>
<li>
<div>
<span>aaa</span>
<span>bbb</span>
</div>
<div></div>
</li>
<li></li>
</ul>
</body>
</html>
- 元素之間的關系
- 父子關系
- 兄弟關系
為什么需要注釋
程序員才懂的冷笑話
- 在我寫這段代碼的時候，只有我和上帝知道這段代碼是什么意思
- 一段時間之后痹束，只有上帝知道是什么意思了
為什么會出現(xiàn)這樣的情況呢
- 隨著學習的深入检疫，你的一個程序不再是幾行代碼就可以搞定的了
- 可能我們需要寫出有上千行埋合，甚至上萬行的程序
- 某些代碼完成某個功能后萧朝，你寫的時候思路很細清晰，但是過段時間會出現(xiàn)為什么這樣寫 的情況，這很正常
和同事協(xié)同開發(fā)
- 在實際開發(fā)工作中肩豁，一個項目通常是多人寫作完成的，可能是幾個或者十幾個等等
- 這個時候镀层，你可能需要使用別人寫出的代碼功能嗜浮，別人也可能使用你的代碼功能
- 如果你的代碼自己都看不懂了，更何況你的同事呢
HTML的注釋
什么是注釋
- 簡單來說丹禀，注釋就是一段代碼注釋
- \
- 注釋是只給開發(fā)者看的状勤，瀏覽器并不會把注釋顯示給用戶看
注釋的意義
- 幫助我們自己理清代碼的思路，方便以后進行查閱
- 與別人合作開發(fā)時双泪，添加注釋持搜，可以減少溝通成本
- 開發(fā)自己的框架時，加入適當?shù)淖⑨尡好奖銊e人使用和學習
- 可以臨時注釋掉一段代碼葫盼，方便調(diào)試
快捷鍵
- ctrl + /
回顧 0326
一、瀏覽器和瀏覽器內(nèi)核
常見的瀏覽器
- 核心部分瀏覽器內(nèi)核 ： 渲染引擎
二薄扁、開發(fā)自己的第一個網(wǎng)頁
2.1.記事本開發(fā)網(wǎng)頁
2.2.對網(wǎng)頁進行補充
- 增加標記 -> 元素 -> 瀏覽器 -> 渲染對應的瀏覽器
- 增強網(wǎng)頁的結(jié)構(gòu)
- html
- head
- title
- body
- h1
- p
- div
- span
- a
- head
- html
2.3.HTML語言
- 超文本標記語言
- 為什么叫標記語言
- 超文本
- 圖片 音頻 視頻 超鏈接
- 超文本
- 為什么叫標記語言
2.4.開發(fā)工具
- 安裝
- 安裝插件
- 配置
2.5.剖析元素結(jié)構(gòu)
- 開始標簽
- 結(jié)束標簽
- 內(nèi)容
- 屬性
- 元素的嵌套
2.6.HTML注釋
- 理解注釋的作用
- HTML注釋的編寫方法
- ctrl + /
課后作業(yè)
一剪返、說出軟件和應用程序的區(qū)別(自己整理)
二、說出一個完善的應用系統(tǒng)包含哪些環(huán)節(jié)
三邓梅、整理出網(wǎng)頁從編寫到瀏覽器顯示的整個過程(重要)
- 用戶角度
- 用戶在瀏覽器輸入一個網(wǎng)址
- 瀏覽器會找到對應的服務器地址脱盲，請求靜態(tài)資源
- 服務器返回靜態(tài)資源給瀏覽器
- 瀏覽器對靜態(tài)資源進行解析和展示
- 前端工程師
- 開發(fā)項目
- 打包、部署項目到服務器里面
四日缨、服務器是什么? 說出你的理解
- 一臺類似于個人電腦的主機
- 特點
- 24h運行
- 沒有顯示器
- 一般系統(tǒng)為linux
- 特點
五钱反、網(wǎng)頁的三大組成是哪些？分別說出他們的作用
- HTML
- 網(wǎng)頁的內(nèi)容結(jié)構(gòu)
- CSS
- 網(wǎng)頁的視覺體驗
- JavaScript
- 網(wǎng)頁的交互處理
六匣距、瀏覽器內(nèi)核是什么面哥？有哪些常見的瀏覽器內(nèi)核
- 渲染引擎
- 負責解析網(wǎng)頁語法，并渲染(顯示)網(wǎng)頁
- 常用瀏覽器內(nèi)核
- Trident
- Presto
- Gecko
- webkit
- blink
七毅待、手動編寫出HTML頁面的結(jié)構(gòu)(不利用開發(fā)者工具提示)
- html
- head
- title
- body
- p
- div
- h1
- a
- span
- head
八尚卫、元素的結(jié)構(gòu)是什么？有哪些單標簽元素尸红、雙標簽元素
- 開始標簽
- 屬性
- 屬性名
- 屬性值
- 屬性
- 內(nèi)容
- 結(jié)束標簽
- 雙標簽元素
- div
- p
- ul
- li
- h1
- i
- 單標簽
- input
- img
- br
- 雙標簽元素
九吱涉、元素之間有哪些關系？寫出一個例子外里，并且說明他們的關系
- 兄弟關系
- div
- div
- 父子關系
- div
- div
- div
十怎爵、注釋的作用，HTML的注釋如何編寫
- 幫助我們理清代碼的思路盅蝗，方便以后進行查閱
- 與別人合作開發(fā)時鳖链，添加注釋，可以減少溝通成本
- 開發(fā)自己的框架時墩莫，加入適當?shù)淖⑨屲轿奖銊e人使用和學習
- 可以臨時注釋掉一段代碼逞敷，方便調(diào)試
- 注釋的寫法
- \
- 快捷鍵
- ctrl + /
- 注釋的寫法
