1.HTML介紹和規範

[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語言不是一個編程語言(有編譯過程),而是一個標記語言(沒有編譯過程),HTML頁面直接由瀏覽器解析執行。編程語言

<br/>字體

###2-2 HTMl網絡術語

網頁 :由各類標記組成的一個頁面就叫網頁。
主頁(首頁) : 一個網站的起始頁面或者導航頁面。
標記: <p>稱爲開始標記 ,</p>稱爲結束標記,也叫標籤。每一個標籤都規定好了特殊的含義。
元素:<p>內容</p>稱爲元素.
屬性:給每個標籤所作的輔助信息。

<br/> <br/> <br/>

##3.HTML的規範

  • HTML是一個弱勢語言
  • HTML不區分大小寫
  • HTML頁面的後綴名是html或者htm(有一些系統不支持後綴名長度超過3個字符,好比dos系統)
  • HTML的結構: - 聲明部分:主要做用是用來告訴瀏覽器這個頁面使用的是哪一個標準。是HTML5標準。 - head部分:將頁面的一些額外信息告訴服務器。不會顯示在頁面上。 - body部分:咱們所寫的代碼必須放在此標籤內。

<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爲紅色

相關文章
相關標籤/搜索