html是web前端的基礎知識，初學者們真的學對了嗎

html是web前端的基礎知識，初學者們真的學對了嗎？

tml

概念
前端最核心的技術 HTML + CSS + javascript
HTML - 結構 - 骨架
CSS - 樣式 - 效果
JAVASCRIPT - (用戶)行為 - 做的事情
超文本標記語言
超文本
文本(txt文件) - 瀏覽器可以直接打開
如果具有中文，可能出現亂碼問題
標記
語法結構 - <標簽名>
注意 - 瀏覽器解析標記（規定的標記內容）
注意
HTML是不嚴格的語言
允許不用編寫所有內容
標簽名沒有明確的規定(大小寫)
建議標簽名使用小寫
XHTML
解釋為嚴格意義的HTML

HTML結構

HTML結構

<!DOCTYPE html> - 聲明:當前頁面使用的是哪個HTML版本

<html lang="en">- 根標簽:有且僅有一個

<head>- 用于設置當前頁面的信息

<title>Title</title> - 當前頁面的標題

</head>

<div>- 用于顯示在瀏覽器中

</div>

</html>

聲明

注意 - 必須在HTML文檔的 0 行 0 列
記住 - HTML5的聲明<!DOCTYPE html>
作用 - 告訴瀏覽器當前HTML頁面使用的版本
不同的HTML版本支持不同的標記(標簽)內容

根標簽

<html></html>
除聲明以外，所有內容全部被包含在根標簽中
注意 - 有且僅有一個
標記（標簽）
起始標簽 - 有開始，有結束
開始標簽 - <標簽名>
結束標簽 - </標簽名>
空標簽 - 只有開始標簽
<br/>- 換行標簽
注意 - 建議使用小寫

<meta>元素

第一個作用 - 設置當前HTML頁面的編碼格式
<meta charset="UTF-8">
第二個作用 - 設置當前HTML頁面的關鍵字
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
第三個作用 - 設置當前HTML頁面的描述(很少)
<meta name="description" content="Free Web tutorials on HTML and CSS">
第四個作用 - 設置當前HTML頁面的作者
<meta name="author" content="King">

HTML屬性

出現在標簽中的開始標簽中，而不是結束標簽
格式
屬性名=屬性值
屬性值 - 必須使用雙引號包裹

HTML頁面被搜索引擎抓取

<title>元素 - 頁面的標題
<meta name="keywords">元素 - 頁面的關鍵字
<h1>元素 - 標題

分類

私有屬性 - 當前標簽獨有的屬性
標準屬性 - 幾乎所有標簽都有的屬性
事件屬性 - 標準事件(了解)

HTML標題

<h1> ~ <h6> - 從最大到最小
并不關心標題顯示的效果 - 可以通過 CSS 完成
關心標題的語義化
語義化 - 當前標簽的含義

HTML列表

有序列表

<ol>

</ol>

默認情況下 - 1,2,3,4,5...
無序列表

<ul>

</ul>

默認情況下 - 黑點
定義列表

<dl>

dd>列表項</dd>

</dl>

HTML鏈接

鏈接元素<a>

作用
用于從當前頁面跳轉到另一個(指定)頁面
實現錨點效果
實現回到頂部效果
實現發送郵件功能(了解)
href="mailto:郵件地址"
路徑(地址)
絕對路徑 - 查找的開始位置是固定
相對路徑 - 查找的開始位置是變化
在實際開發中，使用更多
完整的地址
http:// localhost : 8080 /day02 #name
網絡協議 IP地址端口號相對路徑錨點
localhost - 等價于 127.0.0.1 - 表示本機
網絡訪問 - 通過互聯網
http://192.168.10.165:63342/D...
file:///C:/0507/DAY02/CODE/00.html

C:07\DAY02\CODE>C:\0507\DAY02\CODE\00.html<.html

本地訪問 - 和網絡無關

圖片元素

<img> - 空標簽，沒有結束標簽
必要屬性 - src屬性

可選屬性

width
height
單位
像素值
百分值

HTML表格

概念 - 具有行和列（單元格）
行 - 表示水平方向（多個單元格）
列 - 表示垂直方向（多個單元格）
HTML表格
表示為表格
作用
表格的語義化 - 配合 CSS 可以實現漂亮的表格效果
利用表格的行和列的概念 - 實現頁面元素的布局
HTML表單
<form>標簽
語義化 - 表示為表單
容器元素 - 瀏覽器中不會有任何顯示效果
文件的編碼格式 - UTF-8
HTML頁面的編碼格式 - UTF-8
<meta charset="UTF-8">
設置當前HTML頁面的編碼格式
在瀏覽器運行當前HTML頁面時，告訴瀏覽器當前的編碼格式
字符集
概念 - 存放所使用的所有的字符（漢字）

分類

ANSI - 美國
ISO-8859-1 - 歐洲
GBK - 中國
GB2312
Unicode - 萬國碼
UTF-8 - 主要使用
UTF-16
計算機的存儲方式
利用二進制方式 - 1和0
中國
存儲 - 將漢字 "中國" 轉換成二進制進行存儲 - GBK
讀取 - 將二進制轉換成 "中國" 進行顯示 - UTF-8

tml

概念
前端最核心的技術 HTML + CSS + javascript
HTML - 結構 - 骨架
CSS - 樣式 - 效果
JAVASCRIPT - (用戶)行為 - 做的事情
超文本標記語言
超文本
文本(txt文件) - 瀏覽器可以直接打開
如果具有中文，可能出現亂碼問題
標記
語法結構 - <標簽名>
注意 - 瀏覽器解析標記（規定的標記內容）
注意
HTML是不嚴格的語言
允許不用編寫所有內容
標簽名沒有明確的規定(大小寫)
建議標簽名使用小寫
XHTML
解釋為嚴格意義的HTML

HTML結構

HTML結構

<!DOCTYPE html> - 聲明:當前頁面使用的是哪個HTML版本

<html lang="en">- 根標簽:有且僅有一個

<head>- 用于設置當前頁面的信息

<title>Title</title> - 當前頁面的標題

</head>

<body>- 用于顯示在瀏覽器中

</body>

</html>

聲明

注意 - 必須在HTML文檔的 0 行 0 列
記住 - HTML5的聲明<!DOCTYPE html>
作用 - 告訴瀏覽器當前HTML頁面使用的版本
不同的HTML版本支持不同的標記(標簽)內容

根標簽

<html></html>
除聲明以外，所有內容全部被包含在根標簽中
注意 - 有且僅有一個
標記（標簽）
起始標簽 - 有開始，有結束
開始標簽 - <標簽名>
結束標簽 - </標簽名>
空標簽 - 只有開始標簽
<br/>- 換行標簽
注意 - 建議使用小寫

<meta>元素

第一個作用 - 設置當前HTML頁面的編碼格式
<meta charset="UTF-8">
第二個作用 - 設置當前HTML頁面的關鍵字
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
第三個作用 - 設置當前HTML頁面的描述(很少)
<meta name="description" content="Free Web tutorials on HTML and CSS">
第四個作用 - 設置當前HTML頁面的作者
<meta name="author" content="King">

HTML屬性

出現在標簽中的開始標簽中，而不是結束標簽
格式
屬性名=屬性值
屬性值 - 必須使用雙引號包裹

HTML頁面被搜索引擎抓取

<title>元素 - 頁面的標題
<meta name="keywords">元素 - 頁面的關鍵字
<h1>元素 - 標題

分類

私有屬性 - 當前標簽獨有的屬性
標準屬性 - 幾乎所有標簽都有的屬性
事件屬性 - 標準事件(了解)

HTML標題

<h1> ~ <h6> - 從最大到最小
并不關心標題顯示的效果 - 可以通過 CSS 完成
關心標題的語義化
語義化 - 當前標簽的含義

HTML列表

有序列表

<ol>

</ol>

默認情況下 - 1,2,3,4,5...
無序列表

<ul>

</ul>

默認情況下 - 黑點
定義列表

<dl>

dd>列表項</dd>

</dl>

HTML鏈接

鏈接元素<a>

作用
用于從當前頁面跳轉到另一個(指定)頁面
實現錨點效果
實現回到頂部效果
實現發送郵件功能(了解)
href="mailto:郵件地址"
路徑(地址)
絕對路徑 - 查找的開始位置是固定
相對路徑 - 查找的開始位置是變化
在實際開發中，使用更多
完整的地址
http:// localhost : 8080 /day02 #name
網絡協議 IP地址端口號相對路徑錨點
localhost - 等價于 127.0.0.1 - 表示本機
網絡訪問 - 通過互聯網
http://192.168.10.165:63342/D...
file:///C:/0507/DAY02/CODE/00.html

C:07\DAY02\CODE>C:\0507\DAY02\CODE\00.html<.html

本地訪問 - 和網絡無關

圖片元素

<img> - 空標簽，沒有結束標簽
必要屬性 - src屬性

可選屬性

width
height
單位
像素值
百分值

HTML表格

概念 - 具有行和列（單元格）
行 - 表示水平方向（多個單元格）
列 - 表示垂直方向（多個單元格）
HTML表格
表示為表格
作用
表格的語義化 - 配合 CSS 可以實現漂亮的表格效果
利用表格的行和列的概念 - 實現頁面元素的布局
HTML表單
<form>標簽
語義化 - 表示為表單
容器元素 - 瀏覽器中不會有任何顯示效果
文件的編碼格式 - UTF-8
HTML頁面的編碼格式 - UTF-8
<meta charset="UTF-8">
設置當前HTML頁面的編碼格式
在瀏覽器運行當前HTML頁面時，告訴瀏覽器當前的編碼格式
字符集
概念 - 存放所使用的所有的字符（漢字）

分類

ANSI - 美國
ISO-8859-1 - 歐洲
GBK - 中國
GB2312
Unicode - 萬國碼
UTF-8 - 主要使用
UTF-16
計算機的存儲方式
利用二進制方式 - 1和0
中國
存儲 - 將漢字 "中國" 轉換成二進制進行存儲 - GBK
讀取 - 將二進制轉換成 "中國" 進行顯示 - UTF-8

打算深入了解這個行業的朋友，可以私信我“前端” ，不論你是學生還是想轉行的朋友，我都歡迎，不定期分享干貨，整理的一份2019最新的web前端學習資料和0基礎入門教程分享給大家

TTP協議是Hyper Text Transfer Protocol（超文本傳輸協議）的縮寫,是用于從萬維網（WWW:World Wide Web ）服務器傳輸超文本到本地瀏覽器的傳送協議。。

HTTP是一個基于TCP/IP通信協議來傳遞數據（HTML 文件, 圖片文件, 查詢結果等）。

HTTP 工作原理

HTTP協議工作于客戶端-服務端架構上。瀏覽器作為HTTP客戶端通過URL向HTTP服務端即WEB服務器發送所有請求。

Web服務器有：Apache服務器，IIS服務器（Internet Information Services）等。

Web服務器根據接收到的請求后，向客戶端發送響應信息。

HTTP默認端口號為80，但是你也可以改為8080或者其他端口。

HTTP三點注意事項：

HTTP是無連接：無連接的含義是限制每次連接只處理一個請求。服務器處理完客戶的請求，并收到客戶的應答后，即斷開連接。采用這種方式可以節省傳輸時間。
HTTP是媒體獨立的：這意味著，只要客戶端和服務器知道如何處理的數據內容，任何類型的數據都可以通過HTTP發送。客戶端以及服務器指定使用適合的MIME-type內容類型。
HTTP是無狀態：HTTP協議是無狀態協議。無狀態是指協議對于事務處理沒有記憶能力。缺少狀態意味著如果后續處理需要前面的信息，則它必須重傳，這樣可能導致每次連接傳送的數據量增大。另一方面，在服務器不需要先前信息時它的應答就較快。

以下圖表展示了HTTP協議通信流程：

在線咨詢

上一篇：就“使用空格縮進的開發者比使用制表符的賺更多錢？”而
下一篇：純CSS 精美按鈕UI設計、實現及實例

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html是web前端的基礎知識，初學者們真的學對了嗎

tml

您的項目需求