[TOC]css
##1.前端語言組成 web準備規範的分類:結構標準、表現標準、行爲標準。 web結構:html。表示:css。行爲:Javascript。html
###web準備總結: 結構標準:至關於人的骨架。html就是用來製做網頁的。 表現標準: 至關於人的衣服。css就是對網頁進行美化的。 行爲標準: 至關於人的動做。JS就是讓網頁動起來,具備生命力的前端
<br/> <br/> <br/>web
##2.HTML介紹編程
<br/>瀏覽器
###2-1 HTML概述 html全稱HyperText Mackeup Language,翻譯爲超文本標記語言,它不是一種編程語言,是一種描述性的標記語言,用於描述超文本內容的顯示方式。好比字體、顏色、大小等。服務器
做用
:HTML是負責描述文檔 語義 的語言。網絡
注意
:HTML語言不是一個編程語言(有編譯過程),而是一個標記語言(沒有編譯過程),HTML頁面直接由瀏覽器解析執行。編程語言
<br/>字體
###2-2 HTMl網絡術語
網頁 :由各類標記組成的一個頁面就叫網頁。 主頁(首頁) : 一個網站的起始頁面或者導航頁面。 標記: <p>稱爲開始標記 ,</p>稱爲結束標記,也叫標籤。每一個標籤都規定好了特殊的含義。 元素:<p>內容</p>稱爲元素. 屬性:給每個標籤所作的輔助信息。
<br/> <br/> <br/>
##3.HTML的規範
<br/>
###3-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" />
<br/>
###3-2 HTML的基本語法特性 HTML對換行不敏感,對tab不敏感
HTML只在意標籤的嵌套結構,嵌套的關係。誰嵌套了誰,誰被誰嵌套了,和換行、tab無關。換不換行、tab不tab,都不影響頁面的結構。 也就是說,HTML不是依靠縮進來表示嵌套的,就是看標籤的包裹關係。可是,咱們發現有良好的縮進,代碼更易讀。要求你們都正確縮進標籤。
空白摺疊現象
HTML中全部的文字之間,若是有空格、換行、tab都將被摺疊爲一個空格顯示。
標籤要嚴格封閉
<html></html> <meta />
<br/> <br/> <br/>
##4.HTML結構詳細
1.除了語義沒有任何東西 2.標籤格式要嚴格封閉 # !+tab鍵補全出如下代碼 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>個人標題</title> </head> <body> 顯示內容 </body> </html>
<br/>
###4-1 文檔類型聲明 標準的HTML頁面,第一行必定是文檔類型聲明 開頭的這一行,就是文檔聲明頭,DocType Declaration,簡稱DTD。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範
<!doctype html>
<br/>
###4-2 頭標籤 head
head標籤都放在頭部分之間。這裏麪包含了:<title>、<meta>、<link>,<style> <title>:指定整個網頁的標題,在瀏覽器最上方顯示。 <meta>:提供有關頁面的基本信息 <link>:定義文檔與外部資源的關係。 <style>: 定義內部樣式表與網頁的關係
<br/>
####Meta標籤 元素可提供有關頁面的原信息(mata-information),針對搜索引擎和更新頻度的描述和關鍵詞。
標籤位於文檔的頭部,不包含任何內容。
提供的信息是用戶不可見的。 meta標籤的組成:meta標籤共有兩個屬性,它們分別是http-equiv屬性和name屬性,不一樣的屬性又有不一樣的參數值,這些不一樣的參數值就實現了不一樣的網頁功能。
http-equiv屬性:
<!--重定向 2秒後跳轉到對應的網址,注意分號--> <meta http-equiv="refresh" content="2;URL=http://www.luffycity.com"> <!--指定文檔的內容類型(mime文件類型)和編碼類型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!--告訴IE瀏覽器以最高級模式渲染當前網頁--> <meta http-equiv="x-ua-compatible" content="IE=edge">
<br/>
name屬性:
主要用於頁面的關鍵字和描述,是寫給搜索引擎看的,關鍵字能夠有多個用 ‘,’號隔開,與之對應的屬性值爲content,content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
<meta name="Keywords" content="網易,郵箱,遊戲,新聞,體育,娛樂,女性,亞運,論壇,短信" />
這些關鍵詞,就是告訴搜索引擎,這個網頁是幹嗎的,可以提升搜索命中率。讓別人可以找到你,搜索到。
<br/>
只要設置Description頁面描述,那麼百度搜索結果,就可以顯示這些語句,這個技術叫作SEO(search engine optimization,搜索引擎優化)。
<meta name="Description" content="網易是中國領先的互聯網技術公司,爲用戶提供免費郵箱、遊戲、搜索引擎服務,開設新聞、娛樂、體育等30多個內容頻道,及博客、視頻、論壇等互動交流,網聚人的力量。" />
顯示效果
<br/>
####title標籤和link標籤
<title>個人標題</title>
<link rel="shortcut icon" href="//mat1.gtimg.com/www/icon/favicon2.ico">
顯示效果
link
外接資源關聯 rel:關聯關係 stylesheet:樣式腳本 href:連接資源位置; css文件:靜態資源,做用是修飾標籤
<link rel="stylesheet" href="./index.css">
<br/>
####style標籤
<style type="text/css"> h2{ color: red } </style>
顯示效果
css修飾:h1爲綠色,h2爲紅色