前端學習隨筆 html

概述


HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫,他是一種製作萬維網頁面標準語言(標記)。相當於定義統一的一套規則,大家都來遵守他,這樣就可以讓瀏覽器根據標記語言的規則去解釋它。


瀏覽器負責將標籤翻譯成用戶“看得懂”的格式,呈現給用戶!(例:djangomoan模版引擎)


Doctype


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


有和無的區別



  1. BackCompat:標準兼容模式未開啓(或叫怪異模式[Quirks mode]、混雜模式)


  2. CSS1Compat:標準兼容模式已開啓(或叫嚴格模式[Standards mode/Strict mode])



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


有,用什麼?


Doctype告訴瀏覽器使用什麼樣的html或xhtml規範來解析html文檔, dtd文件則包含了標記、attributes 、properties、約束規則。



Meta(metadata information)


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



  1. 頁面編碼(告訴瀏覽器是什麼編碼)


< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

刷新和跳轉

< meta http-equiv=“Refresh” Content=“30″>

< 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" />




Title


網頁頭部信息


<title>test</title>


Link

鏈接一個外部樣式表:


  1. css


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

icon

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


Style


在頁面中寫樣式

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



Script


  1. 引進文件

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


2.寫js代碼


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


標籤

標籤一般分爲兩種:塊級標籤 和 行內標籤

內聯元素
* a - 錨點
    <a href="http://www.w3school.com.cn">W3School</a> a = anchor 
 target屬性,_black表示在新的頁面打開
* abbr - 縮寫 
* acronym - 首字
* b - 粗體(不推薦)
* bdo - bidi override
* big - 大字體
* br - 換行
* cite - 引用
* code - 計算機代碼(在引用源碼的時候需要)
* dfn - 定義字段
* em - 強調
* font - 字體設定(不推薦)
* i - 斜體
* img - 圖片
<img src="/i/eg_tulip.jpg"  alt="上海鮮花港 - 鬱金香" /> alt如果圖片無法顯示則顯示alt
* input - 輸入框
* kbd - 定義鍵盤文本
* label - 表格標籤
    <label for="id_name"> 
        <input id="id_name" type="text"></input>
    </label>
    
* q - 短引用
* s - 中劃線(不推薦)
* samp - 定義範例計算機代碼
* select - 項目選擇
    <select size="2"> <!-- size同屏顯示個數 -->
	<option value="1">上海</option>
	<option value="2">北京</option>
	<option value="3" selected="selected">廣州</option>
    </select>
    
    <select>
	<optgroup label="河北省">
	    <option>石家莊</option>
	    <option>邯鄲</option>
        </optgroup>
	<optgroup label="山西省">
	    <option>太原</option>
	    <option>平遙</option>
	</optgroup>
    </select>
* small - 小字體文本
* span - 常用內聯容器,定義文本內區塊
* strike - 中劃線
* strong - 粗體強調
* sub - 下標
* sup - 上標
* textarea - 多行文本輸入框
* tt - 電傳文本
* u - 下劃線
* var - 定義變量

塊元素(block element)
* address - 地址
* blockquote - 塊引用
* center - 舉中對齊塊
* dir - 目錄列表
* div - 常用塊級容易,也是css layout的主要標籤
* dl - 定義列表
    definition List
* fieldset - form控制組
* form - 交互表單

* h1 - 大標題
* h2 - 副標題
* h3 - 3級標題
* h4 - 4級標題
* h5 - 5級標題
* h6 - 6級標題
* hr - 水平分隔線
* isindex - input prompt
* menu - 菜單列表
* noframes - frames可選內容,(對於不支持frame的瀏覽器顯示此區塊內容
* noscript - )可選腳本內容(對於不支持script的瀏覽器顯示此內容)
* ol - 排序表單
    ordered List
* p - 段落
    p=paragraph p表示段落,默認段落之間是有間隔的!
* pre - 格式化文本
* table - 表格
* ul - 非排序列表 
    Unordered List   


可變元素
可變元素爲根據上下文語境決定該元素爲塊元素或者。

* applet - java applet
* button - 按鈕
* del - 刪除文本
* iframe - inline frame
* ins - 插入的文本
* map - 圖片區塊(map)
* object - object對象
* script - 客戶端腳本

表格

<table>

    <thead>

        <tr>

            <th colspan="3">1</th>  <!-- th=table header cell colspan=合併橫列

                                                        tr=table row -->

        </tr>

    </thead>

    <tfoot>

        <tr>

            <td rowspan>sum</td> <!-- rowspan=合併豎列 td=table data -->

    </tfoot>

    <tbody>

    </tbody>

    <tbody>

    </tbody>

<table>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章