【## 1、浏览器及内核-】
- web瀏覽器是用于讀取HTML文件，并將其作為網(wǎng)頁(yè)顯示- 瀏覽器最重要的部分或其核心是渲染引擎，我們一般稱為內(nèi)核；
- 內(nèi)核的作用負(fù)責(zé)對(duì)網(wǎng)頁(yè)語(yǔ)法的解釋并渲染網(wǎng)頁(yè)；
- 五大瀏覽器：chrome、safari、Firefox、Opera、IE 1.chrome 谷歌瀏覽器 生產(chǎn)商：Google 內(nèi)核：webkit、blink 2.Firefox 火狐瀏覽器 生產(chǎn)商：Mozilla 內(nèi)核：gecko 3.Safari 蘋(píng)果瀏覽器 生產(chǎn)商：蘋(píng)果公司 內(nèi)核：webkit 4.opera 歐朋瀏覽器 生產(chǎn)商：挪威歐普拉軟件公司 內(nèi)核：presto blink 5.IE 瀏覽器 生產(chǎn)商：微軟公司 Microsoft 內(nèi)核：trident 其他瀏覽器： 大部分國(guó)產(chǎn)的瀏覽器（qq瀏覽器，uc瀏覽器，獵豹瀏覽器，360瀏覽器）基本上是在IE瀏覽器的內(nèi)核上進(jìn)行的二次開(kāi)發(fā) 現(xiàn)在國(guó)內(nèi)市場(chǎng)上有許多雙內(nèi)核的瀏覽器，使用的是trident,webkit內(nèi)核
?
## 2、頁(yè)面的三大組成部分
* 結(jié)構(gòu)：給頁(yè)面搭建基本的框架結(jié)構(gòu)。 html ，類比于建房子的時(shí)候要搭的地基跟鋼筋。
* 表現(xiàn)：頁(yè)面的美化，裝飾。 css 相當(dāng)于給房子加背景和家具的排列布局。
* 行為：頁(yè)面的輪播圖，返回頂部... javascript 相當(dāng)于房子加燈的開(kāi)關(guān)。 結(jié)構(gòu)層html和表現(xiàn)層css，是 W3C 制定的規(guī)范，萬(wàn)維網(wǎng)聯(lián)名。? 行為層js，是 ECMA 制定的規(guī)范，歐洲計(jì)算機(jī)協(xié)會(huì)。
## 2、HTML介紹##
1、什么是HTML
* HTML是 HyperText Mark-up Language 的首字母簡(jiǎn)寫(xiě)，意思是超文本標(biāo)記語(yǔ)言。 通過(guò)HTML標(biāo)記（標(biāo)簽）對(duì)網(wǎng)頁(yè)中的文本、圖片、多媒體等內(nèi)容進(jìn)行描述。
**說(shuō)明：
** - “超文本”：不僅能承載簡(jiǎn)單的文字、還能包含超鏈接、圖片、音頻、視頻等。
- “標(biāo)記語(yǔ)言”：標(biāo)記語(yǔ)言是由一套標(biāo)記標(biāo)簽組成的。
## 2、HTML文檔——網(wǎng)頁(yè)HTML文檔也被稱為網(wǎng)頁(yè)- 后綴名.html- 文件名格式： 主文件名.后綴名創(chuàng)建HTML文檔- 1）新建一個(gè)后綴名為.html的文件- 2）添加基本結(jié)構(gòu)：英文狀態(tài)下!回車(chē) - 3) 輸入HTML：5
## 3、標(biāo)記（標(biāo)簽）構(gòu)成網(wǎng)頁(yè)的基本單位- 標(biāo)簽：由尖括號(hào)括起來(lái)的關(guān)鍵詞 - 單標(biāo)簽：<標(biāo)簽名 >或 <標(biāo)簽名 /> - 雙標(biāo)簽：``<開(kāi)始標(biāo)簽名>[內(nèi)容]</結(jié)束標(biāo)簽名>``- 元素：標(biāo)簽及內(nèi)容的整體- 屬性```html<標(biāo)簽名 屬性名1="屬性值1" 屬性名2="屬性值2"></標(biāo)簽名>```<后面的第一個(gè)單詞叫做標(biāo)簽的名字，標(biāo)簽名空格之后的叫做標(biāo)簽的屬性。
* 屬性由屬性名和屬性值組成，屬性名和屬性值用等號(hào)連接
* 屬性值用引號(hào)引起來(lái)。 多個(gè)屬性之間用空格隔開(kāi)。
* tab可以進(jìn)行縮進(jìn)，shift+tab取消縮進(jìn)。
## 4、HTML注釋
* 注釋即對(duì)代碼的解釋和說(shuō)明，不會(huì)被瀏覽器解析執(zhí)行
* 注釋內(nèi)容不會(huì)出現(xiàn)在網(wǎng)頁(yè)中，只是對(duì)代碼的一個(gè)說(shuō)明
* 語(yǔ)法```html<!-- html注釋內(nèi)容 -->HTML中的注釋以`<!--`開(kāi)頭，以`-->`結(jié)束，開(kāi)始和結(jié)束中間為注釋內(nèi)容。```* ctrl + / * alt + shift + a: 可以在一行代碼的后面進(jìn)行注釋
## 5、HTML文檔的基本結(jié)構(gòu)```html<!DOCTYPE html><!-- <!doctype> 文件類型定義DTD 作用：告訴瀏覽器該文檔的版本信息，讓瀏覽器解析器知道使用哪種語(yǔ)法解析文檔 文檔第一代碼是HTML5標(biāo)準(zhǔn)網(wǎng)頁(yè)聲明，告知瀏覽器用HTML5標(biāo)準(zhǔn)解析此網(wǎng)頁(yè)。 不是標(biāo)簽，是聲明語(yǔ)句 必須寫(xiě)在HTML文檔的第一行 --><html lang="en"><!-- 網(wǎng)頁(yè)的根元素 定義整個(gè)HTML文檔，包含head和body lang屬性
- 作用：定義當(dāng)前文檔顯示文字的語(yǔ)言- 語(yǔ)法：lang=“en” (lang是language的簡(jiǎn)寫(xiě))- 取值: en定義語(yǔ)言為英語(yǔ) zh-CN定義語(yǔ)言為中文 --><head> <!--網(wǎng)頁(yè)的頭部信息 其內(nèi)容不會(huì)顯示在網(wǎng)頁(yè)中定義文檔的頭部，包含文檔的標(biāo)題（title），可以包含文檔腳本（script），樣式（style），meta信息以及更多的其他信息。--> <meta charset="UTF-8"> <!-- 文檔字符集字符集(Character set)是多個(gè)字符的集合，便于計(jì)算機(jī)識(shí)別和存儲(chǔ)各種文字。在<head>標(biāo)簽內(nèi),通過(guò)<meta> 標(biāo)簽的 charset 屬性來(lái)規(guī)定 HTML 文檔應(yīng)該使用哪種字符編碼。 charset屬性:設(shè)置編碼方式 UTF-8：萬(wàn)國(guó)碼，通用性較好(2)常用的字符集- UTF-8被稱為萬(wàn)國(guó)碼，包含全世界所有國(guó)家需要用到的字符- GB2312簡(jiǎn)單中文，包括6763個(gè)漢字- GBK包含全部中文字符，是GB2312的擴(kuò)展，加入對(duì)繁體字的支持，兼容GB2312- BIG5繁體中文，港澳臺(tái)等用 --> <title>標(biāo)題</title> <!--網(wǎng)頁(yè)標(biāo)題添加到收藏夾時(shí)的標(biāo)題顯示在搜索引擎結(jié)果中的頁(yè)面標(biāo)題。--></head><body> <!-- 網(wǎng)頁(yè)的主體內(nèi)容 定義文檔的主體，在瀏覽器窗口中可以看到的所有內(nèi)容都包含在它內(nèi)部。--> 父子關(guān)系——嵌套關(guān)系 兄弟關(guān)系——并列關(guān)系</body></html>```
## 6、常用HTML標(biāo)簽### 1）塊級(jí)標(biāo)記- div標(biāo)簽 搭建網(wǎng)頁(yè)結(jié)構(gòu)的基本標(biāo)簽——盒子；無(wú)語(yǔ)義標(biāo)簽```<div>[內(nèi)容]</div><div> 文字內(nèi)容</div><div> <div></div></div>``````html
- 特性 - 寬度默認(rèn)撐滿整個(gè)父元素 - 高度默認(rèn)由內(nèi)容撐開(kāi) - 獨(dú)立成行——垂直布局
作用：可以用來(lái)劃分頁(yè)面的區(qū)塊，里面嵌套任何的標(biāo)簽```
- h系列標(biāo)簽：標(biāo)題標(biāo)簽 標(biāo)題標(biāo)簽中文字大小依次減小，重要程度依次減弱。
注意事項(xiàng)：h1標(biāo)題一個(gè)頁(yè)面中只有一個(gè)，h2~h6是可以有多個(gè)的。``` <h1>title1</h1> <h2>title2</h2> <h3>title3</h3> <h4>title4</h4> <h5>title5</h5> <h6>title6</h6>``````
html- 特性 - 寬度默認(rèn)撐滿整個(gè)父元素 - 高度默認(rèn)由內(nèi)容撐開(kāi) - 獨(dú)立成行——垂直布局 - 自帶外間距 - 自帶加粗效果
應(yīng)用場(chǎng)景： - logo - 文章頁(yè)標(biāo)題、內(nèi)容章節(jié)標(biāo)題 - 產(chǎn)品標(biāo)題 - 模塊標(biāo)題等```
- p標(biāo)簽：段落標(biāo)記```<p>[文字]</p>``````html
- 特性 - 寬度默認(rèn)撐滿整個(gè)父元素 - 高度默認(rèn)由內(nèi)容撐開(kāi) - 獨(dú)立成行——垂直布局 - 自帶外間距
應(yīng)用場(chǎng)景：文章中的段落、頁(yè)面中的文字塊
注意：p標(biāo)簽不能嵌套塊級(jí)標(biāo)簽，例如：div，p,h1~h6```- hr標(biāo)簽：水平分割線 塊級(jí)標(biāo)記 ```html
?- 特性 - 默認(rèn)自帶間距、自帶邊框
作用：在頁(yè)面中顯示一條水平線 ```
- 其他 - br標(biāo)簽：強(qiáng)制換行 ``` <br > | <br />
應(yīng)用場(chǎng)景:用于強(qiáng)行換行 > 不參與分類，不能設(shè)置其他樣式 ```
### 2）行級(jí)標(biāo)記#### 文本格式化標(biāo)簽
- span標(biāo)簽:無(wú)語(yǔ)義標(biāo)簽，用于區(qū)分樣式
* 沒(méi)有實(shí)際的語(yǔ)義，可以理解為一個(gè)小盒子，里面一般裝著一個(gè)或幾個(gè)文本內(nèi)容
* 應(yīng)用場(chǎng)景：控制局部文本的樣式
- b標(biāo)簽：一個(gè)實(shí)體標(biāo)簽，它里面包圍的文本顯示粗體效果
- strong標(biāo)簽：一個(gè)語(yǔ)義標(biāo)簽，強(qiáng)調(diào)語(yǔ)氣，它里面包圍的文本顯示粗體效果
- i標(biāo)簽：它里面包圍的文本顯示斜體效果
- em標(biāo)簽：一個(gè)語(yǔ)義標(biāo)簽，強(qiáng)調(diào)語(yǔ)氣，它里面包圍的文本顯示斜體效果
- del標(biāo)簽：刪除線
- sup標(biāo)簽：上標(biāo)
- sub標(biāo)簽：下標(biāo)
- 特性
- 寬度默認(rèn)由內(nèi)容撐開(kāi)
- 高度默認(rèn)由內(nèi)容撐開(kāi)
- 默認(rèn)橫向顯示
——水平布局，一行排不下，自動(dòng)折行 - 換行和空格會(huì)被解析
#### a標(biāo)簽--超鏈接標(biāo)簽```html <!-- 網(wǎng)址 --> <a href="https://www.baidu.com/">百度</a> <!-- 本地文件 --> <a href="./摩洛哥/moluoge.html" target="_self">本地文件1</a> <!-- 空鏈接 --> <a href="#">空鏈接</a> <!-- 偽鏈接 --> <a href="javascript:" title="我是偽鏈接">偽鏈接</a> <!-- title --> <a href="https://www.baidu.com/" title="百度">百度title</a> <!-- a:超鏈接標(biāo)簽 href:跳轉(zhuǎn)的路徑； 網(wǎng)址，本地文件，空鏈接（#占位，跳轉(zhuǎn)到當(dāng)前頁(yè)的頂部），偽鏈接（href="javascript:"假鏈接，不跳轉(zhuǎn)的）
title:提示信息的作用 target:被鏈接文檔在哪里顯示
1.target='_self' 在當(dāng)前窗口跳轉(zhuǎn),默認(rèn)值 2.target='_blank'在新窗口跳轉(zhuǎn) 語(yǔ)法： <a href="">內(nèi)容</a>
特性：
1.寬度默認(rèn)由內(nèi)容撐開(kāi)
2.高度默認(rèn)由內(nèi)容撐開(kāi)
3.默認(rèn)橫向顯示，水平布局，一行排不下，自動(dòng)折行
4.換行和空格會(huì)被解析
5.自帶文字顏色
6.自帶下劃線
7.鼠標(biāo)指針的形狀為手型
8.去掉a標(biāo)簽下劃線text-decoration: none; 利用錨點(diǎn)來(lái)跳轉(zhuǎn)指定錨點(diǎn)處 定義錨點(diǎn) <div id='錨點(diǎn)名稱'></div> 引用錨點(diǎn) <a href="#錨點(diǎn)名稱">內(nèi)容</a> --> <!-- 點(diǎn)擊這個(gè)也會(huì)跳轉(zhuǎn)到頂部，但是跳轉(zhuǎn)到頂部的原因:由于href屬性沒(méi)有寫(xiě)東西，點(diǎn)擊的時(shí)候會(huì)刷新頁(yè)面 --> <a href="">點(diǎn)擊跳轉(zhuǎn)到頂部沒(méi)有#</a>```
### 3）行內(nèi)塊級(jí)標(biāo)記img圖像標(biāo)簽```html <!-- 網(wǎng)址 右擊--復(fù)制圖片地址 --> <img src="https://img0.baidu.com/it/u=2409410196,1796254698&fm=26&fmt=auto&gp=0.jpg" alt=""> <!-- 盤(pán)符下的某個(gè)路徑 --> <img src="C:\Users\Administrator\Desktop\1.jpg" alt=""> <!-- 本地文件 --> <img src="./images/2.jpg" alt=""> <img src="./images/3.gif" alt=""> <!-- alt --> <img src="./images/4.jpg" alt="圖片4"> <img src="./images/44.jpg" alt="圖片4"> <img src="./images/444.jpg" alt=""> <!-- title --> <img src="./images/1.jpg" alt="" title="打架" width="300px" height="200px"> img標(biāo)簽 語(yǔ)法：<img src="" alt=""> src:圖片的路徑 ../../表示上上級(jí)目錄 alt:作用:指定替換文本,默認(rèn)不顯示，當(dāng)圖像不能正常顯示時(shí)，顯示該文字對(duì)圖像進(jìn)行替換,有利于用戶體驗(yàn) title:提示信息的作用,鼠標(biāo)懸停在圖片時(shí)顯示提示信息 width：寬度 height:高度 注意：值可以不帶單位默認(rèn)px，只指定寬或高屬性其中一個(gè)，另一個(gè)按照原比例等比縮放
特性：
1.默認(rèn)橫向顯示，水平布局，一行排不下，自動(dòng)折行
2.換行和空格會(huì)被解析
3.可以設(shè)置寬高 ```
## 四、路徑###
1、絕對(duì)路徑- 帶著協(xié)議的完整的路徑 https://www.baidu.com/- 盤(pán)符下的某個(gè)路徑 E:\1_1.jpg###
2、相對(duì)路徑- ./ 表示當(dāng)前目錄 一個(gè)點(diǎn)（.）后面跟一個(gè)斜杠表示當(dāng)前目錄也就是當(dāng)前文件所在目錄。 可以省略的- ../ 表示上一級(jí)目錄 兩個(gè)點(diǎn)（.）后跟一個(gè)斜杠表示前文件所在目錄的上一級(jí)目錄。- ../../表示上上級(jí)目錄- 文件夾名/ 表示下一級(jí)目錄? ?
**注意:**在鏈接到同一網(wǎng)站內(nèi)的其他位置時(shí)，應(yīng)盡可能使用相對(duì)鏈接。鏈接到另一個(gè)網(wǎng)站時(shí)，需要使用絕對(duì)鏈接。
?
總結(jié)
以上是生活随笔為你收集整理的【## 1、浏览器及内核-】的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 三维图形学课程笔记，3D建模与游戏开发方
- 下一篇： 前端基础知识--Document的常用属