day36 html

時間 2019-12-09

標籤 day36 day html 欄目 HTML 简体版

原文原文鏈接

day36 html

 
   <!--文檔的聲明--> 
  
   <!doctype html> 
  
   <html lang="en">    #瀏覽器右上角彈出"翻譯中文" 
  
   <head> 
  
       <!--網站配置: 配置元信息--> 
  
       <meta charset="UTF-8"> 
  
       <!--標題標籤--> 
  
       <title>八戒愛誰誰</title> 
  
   </head> 
  
   <body> 
  
       <h1>嘻嘻哈哈</h1> 
  
       <h2>嘻嘻哈哈</h2> 
  
       <h3>嘻嘻哈哈</h3> 
  
       <h4>嘻嘻哈哈</h4>    #這個應該就是默認的16px     
  
       <h5>嘻嘻哈哈</h5> 
  
       <h6>嘻嘻哈哈</h6> 
  
       <!--默認文本: 16px--> 
  
       嘻嘻哈哈 
  
   </body> 
  
   </html>

一.web標準

w3c: 萬維網聯盟組織, 用來制定web標準的機構

web標準: 製做網頁遵循的規範

web標準規範的分類: 結構標準, 表現標準, 行爲標準

html: 結構標準, 用來製做頁面的

css: 表現標準, 對頁面進行美化的

javascript: 行爲標準, 就是讓網頁動起來, 具備生命力的

二.瀏覽器介紹

瀏覽器是頁面運行的平臺, 經常使用的瀏覽器有ie(trident), firefox(gecko), chrome(blink), 獵豹瀏覽器, safari(webkit) 和 opera等

瀏覽器內核: 也就是瀏覽器所採用的渲染引擎, 決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息

渲染引擎是兼容性問題出現的根本緣由

三.html概述

hyper text markup language, 超文本標記語言

不是編程語言, 是一種描述性的標記語言, 用於描述超文本內容的顯示方式: 字體,顏色,大小等

做用:

是負責描述文檔語義的語言

注意:

不是編程語言,沒有編譯的過程; 而是標記語言, html頁面直接由瀏覽器解析執行,除了語義,其餘什麼都沒有

四.html的網絡術語

網頁:由各類標記組成的一個頁面就叫網頁

主頁(首頁):一個網站的起始頁面或者導航頁面

標記:<p>稱爲開始標記, </p>稱爲結束標記,也叫標籤: 每一個標籤都規定好了特殊的含義

元素:<p>內容</p>稱爲元素

屬性:給每一個標籤所作的輔助信息

五.html的規範

是一個弱勢語言

不區分大小寫

後綴名: html或htm(簡寫: 由於有些系統不支持後綴名超過3個字符,好比dos)

html的結構:

聲明部分: 主要告訴瀏覽器這個頁面使用的是哪一個標準, 如:html5標準

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

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

六.編寫html的規範

1.全部的標記元素都要正確的嵌套,不能交叉嵌套

2.全部的標記用小寫(習慣, 易讀)

3.全部的標記必須關閉

雙邊標記：<span></span>

單邊標記：<br> 轉成 <br /> <hr> 轉成 <hr />，還有<img src=「URL」 />

4.全部的屬性值必須加引號

5.全部的屬性必須有值

七.html的語法特徵

html對換行不敏感, 對tab不敏感

html只在意標籤的嵌套結構, 嵌套的關係: 和換行, tab無關(不影響頁面的結構)

也就是說html不是依靠縮進來表示嵌套的,可是,咱們要有良好的縮進, 使代碼更易讀

空白摺疊現象

html中全部的文字之間, 若是有空格,換行,tab都將被摺疊爲一個空格顯示

標籤要嚴格封閉

八.html結構詳解

新建html文件, 輸入 ! 或 html:5, 按tab鍵後, 自動生成一部分代碼

1.文檔聲明頭:

<!doctype html>:任何一個標準的html頁面, 第一行必定有聲明, 告知瀏覽器文檔使用哪一種html或xhtml規範

doctype declaration, 文檔聲明, DTD

xhtml: 可擴展(extensible)超文本標記語言, 目的是爲了取代html, 由於html書寫不很規範, 會形成其餘設備(ipad, 手機, 電視)等沒法正常顯示

xhtml與html4.0的標記基本上同樣

xhtml是嚴格的,純淨的html

html5中極大簡化了DTD,也就是說html5中沒有xhtml了(w3c本身打臉了)

2.頭標籤(head)

head標籤都放在頭部分之間, 這裏包含了<title>,<meta>,<link>,<style>

<title>:指定整個網頁的標題, 在瀏覽器最上方顯示

標籤位於文檔的頭部,不包含任何內容

提供的信息是用戶不可見的,meta標籤的組成: meta標籤共有兩個屬性,他們分別是http-equiv屬性和name屬性, 不一樣的屬性又有不一樣的參數值,這些不一樣的參數值實現了不一樣的網頁功能

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">    #(compatible: 兼容)

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

 
  <!--這些關鍵詞，就是告訴搜索引擎，這個網頁是幹嗎的，可以提升搜索命中率。讓別人可以找到你，搜索到--> 
 
              <meta name="Keywords" content="網易,郵箱,遊戲,新聞,體育,娛樂,女性,亞運,論壇,短信" /> 
 
  <!--只要設置Description頁面描述，那麼百度搜索結果，就可以顯示這些語句，這個技術叫作SEO（search engine optimization，搜索引擎優化）。--> 
 
              <meta name="Description" content="網易是中國領先的互聯網技術公司，爲用戶提供免費郵箱、遊戲、搜索引擎服務，開設新聞、娛樂、等30多個內容頻道,網聚人的力量。" /> 
 
  <!--下面這個標籤，是讓咱們網頁支持移動端，移動設備優先（瞭解便可)--> 
 
              <meta name="viewport" content="width=device-width, initial-scale=1">

<title>:主要用來告訴用戶和搜索引擎這個網頁的主要內容是什麼, 搜索引擎能夠經過網頁標題, 迅速地判斷出當前網頁的主題.

 
          <title>八戒愛誰誰</title> 
 

<link>:

 
  <!--標題前面的小圖標--> 
 
          <link rel="shortcut icon" href="http://hcdn1.luffycity.com/static/frontend/index/Luffy-study-logo.png"> 
 
          <link rel="shortcut icon" href="file:///C:\Users\THINKPAD\Desktop\bajie.jpg"> 
 
  <!--css的做用: 修飾標籤, 靜態資源--> 
 
          <link rel="stylesheet" href="./index.css">

 
         <style> 
 
              h2{ 
 
                  color: blue; 
 
                } 
 
          </style>

3.body標籤

字體標籤相關

 
  <!DOCTYPE html> 
 
  <html lang="en"> 
 
  <head> 
 
      <meta charset="UTF-8"> 
 
      <title>Title</title> 
 
  </head> 
 
  <body> 
 
      <h1>bajieaishuishui</h1> 
 
      <!--h1~h6: 頁面中只有一個 h1, 是給爬程用的: 都是獨佔一行顯示-->    #具備align(排列)屬性:屬性值能夠是left, center, right 
 
      <h2>bajieaishuishui</h2> 
 
      <!--分隔線---------------------------------------------------------------> 
 
      <hr /> 
 
      <!--回車換行--> 
 
      八戒<br />愛誰誰<br /> 
 
      <!--空格--> 
 
      愛&nbsp;&nbsp;&nbsp;誰誰 
 
      <!--下劃線underline--> 
 
      <u>悟空</u> 
 
      <!--粗體--> 
 
      <strong>大唐</strong> 
 
      <!--斜體--> 
 
      <em>斜體</em> 
 
      <i>斜體</i> 
 
      <!--上標--> 
 
      <sup>bajie</sup> 
 
      <!--下標--> 
 
      <sub>bajie</sub> 
 
      <!--刪除線--> 
 
      <del>刪除線</del> 
 
  </body> 
 
  </html>

排版標籤:

塊級標籤

div:division分割;

行內標籤

span:範圍,跨度:不會影響網頁的結構;

這兩個東西是最重要的"盒子"

 
  <!DOCTYPE html> 
 
  <html lang="en"> 
 
  <head> 
 
      <meta charset="UTF-8"> 
 
      <title>Title</title> 
 
      <style type="text/css"> 
 
          span{                        #對body中全部的span都起做用 
 
              color: red; 
 
          } 
 
          h3{ 
 
              color: darkblue;        #對body中全部的h3標題都起做用 
 
          } 
 
      </style> 
 
  </head> 
 
  <body> 
 
  <h3><span>9.9元</span>&nbsp;<del>99</del></h3> 
 
      <div id="topBar">topBar: 頂部欄 
 
          <div class="top-l">左邊區域</div> 
 
          <div class="shopCar">購物<span>車</span></div> 
 
          <div class="login">登陸</div> 
 
      </div> 
 
      <div id="header">header: 頭部</div> 
 
      <div id="container">container: 內容區域</div> 
 
      <div id="footer">footer: 腳部</div> 
 
  </body> 
 
  </html>

p標籤:段落標籤

 
  <!DOCTYPE html> 
 
  <html lang="en"> 
 
  <head> 
 
      <meta charset="UTF-8"> 
 
      <title>Title</title> 
 
  </head> 
 
  <body> 
 
  <!--p標籤: 是一個文本級標籤, p裏面只能放文字,圖片,表單元素, 其餘的一概不能放.(不能包含容器標籤: 如div,h1~h6), 也不能嵌套--> 
 
  <!--p標籤: 能夠裝的有: strong, em, i, u, del, a, span, img--> 
 
      <p> 
 
          <strong>八戒愛誰誰</strong> 
 
          文本 
 
      </p> 
 
      <p>大唐</p> 
 
  </body> 
 
  </html>

a標籤: 超連接標籤

 
  <!DOCTYPE html> 
 
  <html lang="en"> 
 
  <head> 
 
      <meta charset="UTF-8"> 
 
      <title>Title</title> 
 
  </head> 
 
  <body> 
 
      <a href="file:///C:\Users\THINKPAD\Desktop\bajie.jpg">八戒一下</a><br />          #超連接默認是藍色, 按住是紅色, 訪問過是紫色, 懸浮還能夠是別的顏色 
 
      <a href="http://www.baidu.com/">百度一下</a> 
 
      <p> 
 
          <a href="http://www.baidu.com/">百度一下</a>                                  #p裏面能夠放a標籤 
 
          #<h2>bajie</h2>                                                                #可是,不能放h1,h2... ...標籤,由於h1等是獨佔一行的, 是能夠裝東西的,是容器 
 
      </p> 
 
      <p> 
 
          <a href="http://www.baidu.com/", id="anchor", class="anchor", title="bajie">百度一下</a>   #id不能重複 
 
          <a href="#", id="anchor1", class="anchor", title="這個是假連接">百度一下</a>               #類名能夠重複 
 
      </p> 
 
  </body> 
 
  </html>

img標籤:圖片標籤

 
  <!DOCTYPE html> 
 
  <html lang="en"> 
 
  <head> 
 
      <meta charset="UTF-8"> 
 
      <title>Title</title> 
 
      <style type="text/css"> 
 
          .bajie{                         #選中某一個span的方法 
 
              width: 200px;               #span裏面不能設置寬和高(由於是行內標籤, 若是要設置須要轉成塊級標籤) 
 
              height: 100px; 
 
              color: red; 
 
              display: block; 
 
          } 
 
          div{ 
 
              width: 300px; 
 
              height: 300px; 
 
          } 
 
      </style> 
 
  </head> 
 
  <body> 
 
  <div> 
 
      悟空 
 
  </div> 
 
      <span class="bajie">bajie</span> 
 
      <span>八戒</span> 
 
  <!--img: src:連接的圖片資源, alt:是圖片資源加載失敗時顯示的內容--> 
 
  <!--img: 高度和長度寫一個就好了, 比例會本身匹配--> 
 
      <img src="file:///C:\Users\THINKPAD\Desktop\xiongmao.jpg" alt="大熊貓來了!", width="100"> 
 
      <img src="file:///C:\Users\THINKPAD\Desktop\xiongmao.jpg" alt="大熊貓來了!", width="900", height="200">    #都寫, 若是比例不對, 圖片會失真 
 
  </body> 
 
  </html>

#標籤分類:

 
  1.行內標籤: 
 
          在一行內顯示: span, strong, em, i, del, a 
 
          不能設置寬和高: 默認寬和高是根據內容的大小填充的 
 
          1.1行內塊標籤:img, input輸入框 
 
              在一行內顯示 
 
              能夠設置寬高 
 
  2.塊級標籤: 
 
          獨佔一行: p, div, h1~h6 
 
          能夠設置寬和高: 不過不設置, 默認寬是父標籤的100%填充的, 高度是內容的高度 
 
  #html標籤 特徵 
 
      對空格和換行不敏感 
 
      空白摺疊現象 
 
      標籤要嚴格封閉

form表單控件:

 
  <!DOCTYPE html> 
 
  <html lang="en"> 
 
  <head> 
 
      <meta charset="UTF-8"> 
 
      <title>Title</title> 
 
  </head> 
 
  <body> 
 
      <form action="https://www.baidu.com/s"> 
 
          <!--表單控件--> 
 
          <!--https://www.baidu.com/s?wd=bajie: 這樣色地提交--> 
 
          <input type="text" name="wd", value="bajie" />           #key value 
 
          <input type="password" name="pwd", value="bajie" />      #key value 
 
          <input type="submit" value="搜索">                       #把?wd=bajie的輸入內容, 提交到form表單中寫明的地址 
 
      </form> 
 
  </body> 
 
  </html>

九.mime文件類型

 
  https://www.w3school.com.cn/media/media_mimeref.asp 
 
      格式: 類型/子類型    擴展名 
 
              text/html    html, htm

相關標籤/搜索

day36

html&html

html

html+css+javascript+html

每日一句

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