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