前端技術之--HTML

時間 2019-11-25

標籤前端技術 html 欄目 HTML 简体版

原文原文鏈接

一、一套規則，瀏覽器認識的規則。
二、開發者：
　　學習Html規則
　　開發後臺程序：
　　　　- 寫Html文件（充當模板的做用） ******
　　　　- 數據庫獲取數據，而後替換到html文件的指定位置（Web框架）javascript

三、本地測試
　　- 找到文件路徑，直接瀏覽器打開
　　- pycharm打開測試css

Doctype

Doctype告訴瀏覽器使用什麼樣的html或xhtml規範來解析html文檔html

有和無的區別

BackCompat：標準兼容模式未開啓（或叫怪異模式[Quirks mode]、混雜模式）
CSS1Compat：標準兼容模式已開啓（或叫嚴格模式[Standards mode/Strict mode]）

這個屬性會被瀏覽器識別並使用，可是若是你的頁面沒有DOCTYPE的聲明，那麼compatMode默認就是BackCompat,這也就是惡魔的開始 -- 瀏覽器按照本身的方式解析渲染頁面，那麼，在不一樣的瀏覽器就會顯示不一樣的樣式。若是你的頁面添加了那麼，那麼就等同於開啓了標準模式，那麼瀏覽器就得老老實實的按照W3C的標準解析渲染頁面，這樣一來，你的頁面在全部的瀏覽器裏顯示的就都是一個樣子了。 java

HTML規則以下：「頭」和「身體」；相似HTML這種格式，標籤，HTML標籤<html>數據庫

標籤內部的屬性，瀏覽器

四、編寫Html文件
　　- doctype對應關係
　　- html標籤，標籤內部能夠寫屬性 ====> 只能有一個
　　- 註釋： 
五、標籤分類
　　- 自閉合標籤
　　　　<meta charset="UTF-8"> 指定編碼
　　- 主動閉合標籤
　　　　<title>老男孩</title>
六、
head標籤中
- <meta -> 編碼，跳轉，刷新，關鍵字，描述，IE兼容
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />框架

Meta(metadata information)

提供有關頁面的元信息，例：頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞學習

頁面編碼（告訴瀏覽器是什麼編碼）

< meta http-equiv=「content-type」 content=「text/html;charset=utf-8」>測試

刷新和跳轉

< meta http-equiv=「Refresh」 Content=「30″>（默認30s刷新一次）網站

< meta http-equiv=」Refresh「 Content=」5; Url=http://www.autohome.com.cn「 /> 一樣

關鍵詞

< meta name="keywords" content="星際2,星際老男孩,專訪,F91,小色,JOY" > 給搜索引擎用的

描述

例如：cnblogs

X-UA-Compatible

微軟的IE6是經過XP、Win2003等操做系統發佈出來，做爲佔統治地位的桌面操做系統，也使得IE佔據了通知地位，許多的網站開發的時候，就按照IE6的標準去開發，而IE6自身的標準也是微軟公司內部定義的。到了IE7出來的時候，採用了微軟公司內部標準以及部分W3C的標準，這個時候許多網站升級到IE7的時候，就比較痛苦，不少代碼必須調整後，纔可以正常的運行。而到了微軟的IE8這個版本，基本上把微軟內部本身定義的標準拋棄了，而全面的支持W3C的標準，因爲基於對標準完全的變化了，使得原先在早期IE8版本上可以訪問的網站，在IE8中沒法正常的訪問，會出現一些排版錯亂、文字重疊，顯示不全等各類兼容性錯誤。

與任何早期瀏覽器版本相比，Internet Explorer 8 對行業標準提供了更加緊密的支持。所以，針對舊版本的瀏覽器設計的站點可能不會按預期顯示。爲了幫助減輕任何問題，Internet Explorer 8 引入了文檔兼容性的概念，從而容許您指定站點所支持的 Internet Explorer 版本。文檔兼容性在 Internet Explorer 8 中添加了新的模式；這些模式將告訴瀏覽器如何解釋和呈現網站。若是您的站點在 Internet Explorer 8 中沒法正確顯示，則能夠更新該站點以支持最新的 Web 標準（首選方式），也能夠強制 Internet Explorer 8 按照在舊版本的瀏覽器中查看站點的方式來顯示內容。經過使用 meta 元素將 X-UA-Compatible 標頭添加到網頁中，能夠實現這一點。

當 Internet Explorer 8 遇到未包含 X-UA-Compatible 標頭的網頁時，它將使用指令來肯定如何顯示該網頁。若是該指令丟失或未指定基於標準的文檔類型，則 Internet Explorer 8 將以 IE5 模式（Quirks 模式）顯示該網頁。更多

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 已IE的那個版本打開

- title標籤網頁頭部信息
- <link /> 搞圖標，欠

< link rel="stylesheet" type="text/css" href="css/common.css" >

icon

< link rel="shortcut icon" href="image/favicon.ico">

- <style />欠

在頁面中寫樣式

例如：
< style type="text/css" >
.bb{
background-color: red;
}
< /style
- <script> 欠

引進文件

< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

寫js代碼

< script type="text/javascript" > ... </script >

七、body標籤

經常使用標籤

標籤通常分爲兩種：塊級標籤和行內標籤

a、span、select 等
div、h一、p 等

- 圖標，（ ）：空格 > <

p表示段落，默認段落之間是有間隔的！

br 是換行自閉和標籤

======== 小總結 =====
全部標籤分爲：
塊級標籤： div（白板），H系列（加大加粗），p標籤（段落和段落之間有間距）
行內標籤： span（白板）
標籤之間能夠嵌套
標籤存在的意義：css操做，js操做、定位

ps:chorme審查元素的使用
- 定位
- 查看樣式
- h系列
- div
- span
- input系列 + form標籤
input type='text' - name屬性，value="趙凡"
input type='password' - name屬性，value="趙凡"
input type='submit' - value='提交' 提交按鈕，表單
input type='button' - value='登陸' 按鈕

input type='radio' - 單選框 value，checked="checked"，name屬性（name相同則互斥）
input type='checkbox' - 複選框 value, checked="checked"，name屬性（批量獲取數據）
input type='file' - 依賴form表單的一個屬性 enctype="multipart/form-data"
input type='rest' - 重置

<textarea >默認值</textarea> - name屬性
select標籤 - name,內部option value, 提交到後臺，size，multiple

- a標籤
- 跳轉
- 錨 href='#某個標籤的ID' 標籤的ID不容許重複

- img

　　src alt:沒有圖片時顯示 title

- 列表

ul
　　li

ol
　　li

dl
　　dt
　　dd

- 表格
table
　　thead
　　　　tr 行
　　　　　　th
　　tbody
　　　　tr
　　　　　　td 列

colspan =" "等於幾佔幾格
rowspan = '' "
- label 用於點擊文件，使得關聯的標籤獲取光標
　　<label for="username">用戶名：</label>
　　<input id="username" type="text" name="user" />
- fieldset
legend

- 20個標籤

相關標籤/搜索

每日一句

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