Web前端基礎(1):HTML(一)

時間 2019-11-17

標籤 web 前端基礎 html 欄目 HTML 简体版

原文原文鏈接

1. HTML概述

1.1 什麼是HTML

HTML稱爲超文本標記語言，是一種標識性的語言。它包括一系列標籤．經過這些標籤能夠將網絡上的文檔格式統一，使分散的Internet資源鏈接爲一個邏輯總體。HTML文本是由HTML命令組成的描述性文本，HTML命令能夠說明文字，圖形、動畫、聲音、表格、連接等。

超文本是一種組織信息的方式，它經過超級連接方法將文本中的文字、圖表與其餘信息媒體相關聯。這些相互關聯的信息媒體可能在同一文本中，也多是其餘文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分佈在不一樣位置的信息資源用隨機方式進行鏈接，爲人們查找，檢索信息提供方便。

1.2 HTML能幹什麼

HTML用於編寫網頁。平時上網經過瀏覽器咱們看到的大部分頁面都是由html編寫的。在瀏覽器訪問網頁時，能夠經過「右鍵/查看網頁源代碼」看到具體的html代碼。html

網頁內容包含：HTML代碼、CSS代碼、JavaScript代碼等內容。前端

HTML代碼：用於展現須要顯示的數據。html5

CSS代碼：使顯示的數據更加好看。編程

JavaScript代碼：使整個頁面顯示的數據具備動畫效果。windows

網頁根據內容是否改變分爲：靜態頁面、動態頁面。瀏覽器

靜態頁面：編寫以後在瀏覽器再也不改變的網頁。HTML就是用於編寫靜態網頁的。服務器

動態頁面：會根據不一樣的狀況展現不一樣的內容。例如：登陸成功後頁面顯示用戶名。網絡

1.3 HTML語言特色

HTML文件不須要編譯，直接使用瀏覽器閱讀便可學習

HTML文件的擴展名是*.html或*.htm優化

HTML結構都是由標籤組成

標籤名預先定義好的，咱們只須要了解其功能便可。

標籤名不區分大小寫

一般狀況下標籤由開始標籤和結束標籤組成。例如：<a></a>

若是沒有結束標籤，建議以/結尾。例如：<img/>

HTML結構包括兩部分：頭head和體body

2. HTML結構

對於一個網頁來講，咱們在HTML中主要來學習一些經常使用的標籤。經過學習這些標籤，咱們能把90%的網站均可以慢慢搭建。

前端知識咱們使用軟件HBuilder來編程，首先打開sublime，新建index.html，輸入html回車：

<html>
    <head>
        <title></title>
    </head>
    <body>
        
    </body>
</html>

生成一大堆的內容，是否是看的很懵逼。那麼接下來咱們來剖析這段代碼。

2.1 html標籤

每個頁面中的結構，都會有一個最外層的標籤，它表示文檔內容的開始。

html標籤包含兩部分：頭部聲明(<head>)和內容部分(<body>)。

若是把網頁比做洋蔥，一層包一層，那<html>標籤就是洋蔥最外層的皮， <html> 元素是一張網頁的根標籤，因此其餘全部元素都是是此元素的後代。

2.2 head標籤

把一個網頁比做一我的的話，那麼head標籤就是這我的的基本信息，雖然這個無法直接觀察到，但這些內容確實存在，而且是在網頁中必不可少的。head用於表示網頁的中的一個基礎的信息(元信息)

2.3 body標籤

把一個網頁比做一我的的話，那麼body標籤就是這我的的身體，膚色，痔瘡。它裏面的內容是看得見摸得着的。對於人的性格，意淫的想法，性取向等body是管不着的。那麼body標籤包含頁面中全部的可見元素，好比網頁中的文本的展現內容，漂亮meinv ，動聽的音樂，炫酷的電影等都屬於body所管。

好了，相信你們對html文檔結構有了必定的認知，那麼咱們接下來，就一一的學習head和body中的相關標籤。

3. HTML規範和註釋

3.1 HTML規範

HTML不區分大小寫，也就是說<head>和<HEAD>均可以。

HTML頁面的後綴名是html或者htm(win32時代，系統只能識別3位擴展名時使用的。如今通常都使用.html。

HTML的結構：

聲明部分：主要做用是用來告訴瀏覽器這個頁面使用的是哪一個標準。是HTML5標準。

head部分：將頁面的一些額外信息告訴服務器。不會顯示在頁面上。

body部分：咱們所寫的代碼必須放在此標籤內。

3.2 編寫HTML的規範

全部標籤都要正確的嵌套，不能交叉嵌套。

交叉嵌套：

<html><head></html><head>

正確寫法：

<html><head><head></html>

全部的標籤儘可能都小寫，固然也能夠大寫，由於html中不區分大小寫，可是小寫相對比大寫來講，它更易於閱讀。

全部的標籤要閉合：

雙閉合好比<html></html>

單閉合好比<meta />

3.3 HTML註釋

在頁面中，凡是被註釋掉的代碼，瀏覽器都不會去解析。

html中的註釋：

<!--這是我關鍵性的內容-->

註釋的做用：

給本身看。隨着頁面的內容越多，高效的註釋能讓咱們的代碼更易閱讀，而且關鍵性的代碼咱們能夠用註釋標註出來。

給別人看。好比本身寫的html代碼，有的地方代碼須要說明一下，同時要轉給別人看和解讀分析的，這個時候就有必要使用html註釋。

正確使用註釋：

<!--<!--這是我關鍵性的內容-->-->

不能一個html註釋中，再放一個html註釋，否則瀏覽器會以下解析。

註釋快捷鍵：windows上 Ctrl + /

4. head中相關的標籤

head標籤中的相關標籤，是看不見摸不着的，僅僅是對應用於網頁的一些基礎信息(元信息)。

4.1 經常使用的meta標籤屬性

meta標籤共有兩個屬性，它們分別是http-equiv屬性和name屬性，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣的網頁功能。

4.1.1 http-equiv屬性

它用來向瀏覽器傳達一些有用的信息，幫助瀏覽器正確地顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。

在html4.01版本中，咱們使用下面配置來規定HTML 文檔的字符編碼。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

但在html5版本中，咱們使用更簡化的方式來規定HTML 文檔的字符編碼。

<meta charset="UTF-8">

4.1.2 name屬性

主要用於頁面的關鍵字和描述，是寫給搜索引擎看的，關鍵字能夠有多個用 ‘,’號隔開，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。

這些關鍵詞，就是告訴搜索引擎，這個網頁是幹嗎的，可以提升搜索命中率。讓別人可以找到你，搜索到。

只要設置Description頁面描述，那麼百度搜索結果，就可以顯示這些語句，這個技術叫作SEO（search engine optimization，搜索引擎優化）。

4.2 title標籤

主要用來告訴用戶和搜索引擎這個網頁的主要內容是什麼，搜索引擎能夠經過網頁標題，迅速的判斷出當前網頁的主題。

<title>愛編程的小灰灰</title>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。