前端学习(一) html介绍和head标签
HTML
?
一. HTML 介紹
1. HTML概述:html全稱Hyper Text Mackeup Language, 翻譯為超文本標記語言, 它不是一種編程語言, 是一種描述性的標記語言, 用于描述超文本內容的顯示方式. 比如字體, 顏色, 大小等.
超文本: 音頻, 視頻, 圖片稱為超文本.
標記: <英文單詞或者字母>稱為標記, 一個HTML頁面都是由各種標記組成.
作用: HTML是負責描述文檔語義的語言.
注意: HTML語言不是一個編程語言(有編譯過程), 而是一個標記語言(沒有編譯過程), HTML頁面直接由瀏覽器解析執行.
HTML是負責描述文檔語義的語言:
html中，除了語義，其他什么都沒有。
html是一個純本文文件（就是用txt文件改名而成），用一些標簽來描述文字的語義，這些標簽在瀏覽器里面是看不到的，所以稱為“超文本”，所以就是“超文本標記語言”了。
?
2.?HTML的網絡術語
- 網頁 ：由各種標記組成的一個頁面就叫網頁.
- 主頁(首頁) : 一個網站的起始頁面或者導航頁面.
- 標記：?<p>稱為開始標記 ，</p>稱為結束標記，也叫標簽。每個標簽都規定好了特殊的含義。
- 元素：<p>內容</p>稱為元素.
- 屬性：給每一個標簽所做的輔助信息
?
二.?HTML顏色介紹
顏色表示:
- 純單詞表示：red、green、blue、orange、gray等
- 10進制表示：rgb(255,0,0)
- 16進制表示：#FF0000、#0000FF、#00FF00等
我們大家先記住幾個純單詞的顏色，css課程中會詳細講10進制和16進制。
RGB色彩模式：
- 自然界中所有的顏色都可以用紅、綠、藍(RGB)這三種顏色波長的不同強度組合而得，這就是人們常說的三原色原理。
- RGB三原色也叫加色模式，這是因為當我們把不同光的波長加到一起的時候，可以得到不同的混合色。例：紅+綠=黃色，紅+藍＝紫色，綠+藍=青
- 在數字視頻中，對RGB三基色各進行8位編碼就構成了大約1678萬種顏色，這就是我們常說的真彩色。所有顯示設備都采用的是RGB色彩模式。
- RGB各有256級(0-255)亮度，256級的RGB色彩總共能組合出約1678萬種色彩，即256×256×256=16777216。
?
三.?HTML的規范
- HTML是一個弱勢語言
- HTML不區分大小寫
- HTML頁面的后綴名是html或者htm(有一些系統不支持后綴名長度超過3個字符，比如dos系統)
- HTML的結構：
- 聲明部分：主要作用是用來告訴瀏覽器這個頁面使用的是哪個標準。是HTML5標準。
- head部分：將頁面的一些額外信息告訴服務器。不會顯示在頁面上。
- body部分：我們所寫的代碼必須放在此標簽內。
1、編寫HTML的規范
（1）所有標記元素都要正確的嵌套，不能交叉嵌套。正確寫法舉例：<h1><font></font></h1>
（2）所有的標記都必須小寫。
（3）所有的標記都必須關閉。
- 雙邊標記：<span></span>
- 單邊標記：<br>?轉成?<br />?<hr>?轉成?<hr />，還有<img src=“URL” />
（4）所有的屬性值必須加引號。<h1 id="head"></h1>
（5）所有的屬性必須有值。<input type="radio" checked="checked" />
?
2、HTML的基本語法特征
（1）HTML對換行不敏感，對tab不敏感
HTML只在乎標簽的嵌套結構，嵌套的關系。誰嵌套了誰，誰被誰嵌套了，和換行、tab無關。換不換行、tab不tab，都不影響頁面的結構。
也就是說，HTML不是依靠縮進來表示嵌套的，就是看標簽的包裹關系。但是，我們發現有良好的縮進，代碼更易讀。要求大家都正確縮進標簽。
? (2) 空白折疊現象
HTML中所有的文字之間，如果有空格、換行、tab都將被折疊為一個空格顯示。
（3）標簽要嚴格封閉
?
四.?HTML結構詳解
新建HTML文件，輸入 html:5,按tab鍵后，自動生成的代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body></body> </html>1、文檔聲明頭
任何一個標準的HTML頁面，第一行一定是一個以下代碼開頭的:
<!DOCTYPE...開頭的這一行，就是文檔聲明頭，DocType Declaration，簡稱DTD。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。
?
PS:
XHTML：Extensible Hypertext Markup Language，可擴展超文本標注語言。
XHTML的主要目的是為了取代HTML，也可以理解為HTML的升級版。
HTML的標記書寫很不規范，會造成其它的設備(ipad、手機、電視等)無法正常顯示。
XHTML與HTML4.0的標記基本上一樣。
XHTML是嚴格的、純凈的HTML
?
2、頭標簽（head）
head標簽都放在頭部分之間。這里面包含了：<title>、<meta>、<link>，<style>
- <title>：指定整個網頁的標題，在瀏覽器最上方顯示
- <meta>：提供有關頁面的基本信息
- <link>：定義文檔與外部資源的關系
- <style>: 定義內部樣式表與網頁的關系
2.1 Meta標簽介紹：
元素可提供有關頁面的原信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
標簽位于文檔的頭部，不包含任何內容。
提供的信息是用戶不可見的。 meta標簽的組成：meta標簽共有兩個屬性，它們分別是http-equiv屬性和name屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。
常用的meta標簽：
（1）http-equiv屬性
它用來向瀏覽器傳達一些有用的信息，幫助瀏覽器正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。
<!--重定向 2秒后跳轉到對應的網址，注意分號--> <meta http-equiv="refresh" content="2;URL=http://www.luffycity.com"><!--指定文檔的內容類型和編碼類型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><!--告訴IE瀏覽器以最高級模式渲染當前網頁--> <meta http-equiv="x-ua-compatible" content="IE=edge">（2）name屬性
主要用于頁面的關鍵字和描述，是寫給搜索引擎看的，關鍵字可以有多個用 ‘,’號隔開，與之對應的屬性值為content，content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的。
?
<meta name="Keywords" content="網易,郵箱,游戲,新聞,體育,娛樂,女性,亞運,論壇,短信" />這些關鍵詞，就是告訴搜索引擎，這個網頁是干嘛的，能夠提高搜索命中率。讓別人能夠找到你，搜索到。
?
<meta name="Description" content="網易是中國領先的互聯網技術公司，為用戶提供免費郵箱、游戲、搜索引擎服務，開設新聞、娛樂、體育等30多個內容頻道，及博客、視頻、論壇等互動交流，網聚人的力量。" />只要設置Description頁面描述，那么百度搜索結果，就能夠顯示這些語句，這個技術叫做SEO（search engine optimization，搜索引擎優化）。
?
<meta name=viewport content="width=device-width, initial-scale=1">上面這個標簽，是讓我們網頁支持移動端，移動設備優先（了解即可）.
?
2.2 title標簽
主要用來告訴用戶和搜索引擎這個網頁的主要內容是什么，搜索引擎可以通過網頁標題，迅速的判斷出當前網頁的主題。
<title>路飛學城</title>效果如下：
?
01-html介紹和head標簽
02-body標簽中相關標簽
03-body標簽中相關標簽
?
轉載于:https://www.cnblogs.com/haitaoli/p/9880999.html
超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生總結
以上是生活随笔為你收集整理的前端学习(一) html介绍和head标签的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue 关于solt得用法
- 下一篇： web 前端基本框架