前端發展史及瀏覽器核心

前端開發

用前端技術實現使用者介面

前端技術：基礎三大要素 html5 css3 javascript +js衍生物（vue,react,angular框架,node.js）

使用者介面:pc端 + 移動端app （頁面+互動+資料渲染）

發展史

web1.0階段 蒂姆·伯納斯·李 [1] （Tim Berners-Lee） 介面：只能讀 不能寫

web2.0階段 布蘭登·艾奇（Brendan Eich，1961年～） JS 有了互動 只能讀 還能寫 建設者

web3.0階段（大前端） 09年 Ryan Dahl

瀏覽器及其核心

瀏覽器=外殼+核心

五大瀏覽器 ：

瀏覽器	核心
IE	Trident
FireFox(火狐)	Gecko
Safari（ios）	Webkit
Chrome（谷歌）	Webkit—>Blink
Opera(歐朋)	Presto–>Blink

HTML語言

編輯器(vscode,hbuilder,webstrom…)---->a.html —>瀏覽器

!+ enter —>建立模板

HTML 結構 負責網頁有什麼

CSS 樣式 負責的是這些東西長什麼樣子

JS 行為 互動+資料渲染

HTML: Hyper 超 Text 文字 Markup 標記 Language 語言

1. 不是程式語言 標記語言
2. 超 文字 .txt —>字元 .html—>不光寫字元 寫圖片，音訊，視訊，動畫 超文字傳輸協議

寫法：

起個名字 圖片 img

img + src

<img   src="./image/a.png`>

<> <>

雙標記 ，閉合標記

<標記名字>內容</標記名字>
<開始>內容</結束>

<name  屬性名="屬性值" 屬性名="屬性值" ....>內容</name>  元素 

單標記

<標記名字 屬性名="屬性值" 屬性名="屬性值" >

註釋

html 快捷鍵 ctrl+/

單行 //註釋文字

多行/註釋文字/

文字相關的標記

標題

<h1>標題內容</h1>  有且只有一個 一般用在logo
<h2>標題內容</h2>
<h3>標題內容</h3>
<h4>標題內容</h4>
<h5>標題內容</h5>
<h6>標題內容</h6>

段落P

<p>近來圍繞美國大選結果等問題，川普和拜登的支持者在美國多地集會持續對峙。當地時間13日，雙方支持者再次來到華盛頓白宮外抗議示威，併發生激烈的言語衝突。</p>

圖片標記

<img src=""  alt=""  title="" width="" height="">
src:圖片路徑

絕對路徑
    1. 網路圖片
    2. 本地絕對路徑 D：...C:\Users\Administrator\Desktop\1109\老師的\day04\images

相對路徑
    根目錄 / （編輯器裡開啟的資料夾的頂級目錄）
    同級目錄 ./ 或者不寫
    上一級 ../ 跳出一個資料夾
    上上級 ../../跳出2個資料夾
    <img src="./image/timg.jpg" alt="">
    <img src="../資料/timg.jpg" alt="">


alt: 當圖片載入失敗的文字提示

title:滑鼠懸停時的文字提示


width:寬度  等比例縮放  3:2  
height:高度

修飾文字（瞭解）

加粗

<b>adsaudf</b> bold 非語義標籤
<strong>safsf</strong> 語義化標籤  裝重要的 強調的文字  希望被爬蟲抓取

斜體

<i>斜體文字</i> italic 斜體
<em>斜體文字</em>  語義化標籤

下劃線

<u>aefresf</u>
<ins>ftrewtet</ins>語義化標籤

中劃線

<s>99.00</s>
<del>99.00</del>語義化標籤

換行

給段落內的文字換行

<br> break

水平線

<hr color="red" align=""  width="300px">

align 水平對齊方式 left 左對齊  right  center居中

字元實體

版權符 人民幣符 > < . “” —》Unicode編碼

人民幣符 ¥

                                                                                            ```html

¥ 人民幣符號
©版權符
> 大於號
<小於號

## 佈局標籤

大盒子大容器  大區域

```html
<div></div> 可以裝div,img  p hi....

小容器 小盒子 小區域

<span></span> 可以裝幾個字 小圖示 非常小的圖片