天天看點
傳回

html基礎+常用标簽概述HTML文檔H1

概述

HTML是英文Hyper Text Mark-up Language(超文本标記語言)的縮寫，他是一種制作網際網路頁面标準語言（标記）。相當于定義統一的一套規則，大家都來遵守他，這樣就可以讓浏覽器根據标記語言的規則去解釋它。

浏覽器負責将标簽翻譯成使用者“看得懂”的格式，呈現給使用者！(例：djangomoan模版引擎)

html基礎+常用标簽概述HTML文檔H1

HTML文檔

文檔樹

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、限制規則。

html基礎+常用标簽概述HTML文檔H1

更多

Meta(metadata information)

提供有關頁面的元資訊，例：頁面編碼、重新整理、跳轉、針對搜尋引擎和更新頻度的描述和關鍵詞

  1. 頁面編碼（告訴浏覽器是什麼編碼）

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

  2. 重新整理和跳轉

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

    < meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

  3. 關鍵詞

    < meta name="keywords" content="星際2,專訪,F91,小色,JOY" >

  4. 描述

    例如：cnblogs

  5. 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 模式）顯示該網頁

    更多

Title

網頁頭部資訊

Link

  1. css

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

  2. icon

    < link rel="shortcut icon" href="image/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">

  2. 寫js代碼

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

常用标簽

标簽一般分為兩種：塊級标簽 和 行内标簽

  • a、span、select 等
  • div、h1、p 等

各種符号

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

p 和 br

  • p表示段落，預設段落之間是有間隔的！
  • br 是換行

a标簽

  • < a href="http://www.autohome.com.cn">
  • target屬性，_black表示在新的頁面打開
  • 錨（頁面之間跳轉）

H 标簽

H1

H2

H3

H4

H5

H6

select 标簽

html基礎+常用标簽概述HTML文檔H1
<div>

                    <select>
                        <option value='1'>上海</option>
                        <option value='2'>北京</option>
                        <option value='3' selected='selected'>廣州</option>
                    </select>

                    <select size='2'>
                        <option>上海</option>
                        <option>北京</option>
                        <option>廣州</option>
                        <option>廣州</option>
                    </select>

                    <select multiple="multiple" size='2'>
                        <option>上海</option>
                        <option>北京</option>
                        <option>廣州</option>
                        <option>廣州</option>
                    </select>

                    <select>
                        <optgroup label='河北省'>
                            <option>石家莊</option>
                            <option>邯鄲</option>
                        </optgroup>
                        <optgroup label='山西省'>
                            <option>太原</option>
                            <option>平遙</option>
                        </optgroup>
                    </select>
            </div>

複制

Checkbox

html基礎+常用标簽概述HTML文檔H1
<div id='t36'>
                <h2>Checkbox</h2>
                <input type='checkbox'/>
                <input type='checkbox' checked/>
                <input type='checkbox' checked='checked'/>
            </div>

複制

redio

html基礎+常用标簽概述HTML文檔H1
<div id='t37'>
                <h2>redio</h2>
                男<input type="radio" value="man">
                女<input type="radio" value="male">
                保密<input type="radio" value="no">
                <br/><br/>
                男<input type="radio"  name="gender" value="man">
                女<input type="radio"  name="gender" value="male">
                保密<input type="radio" checked="checked" name="gender" value="no">
            </div>

複制

password and input

html基礎+常用标簽概述HTML文檔H1

password

button and submit

html基礎+常用标簽概述HTML文檔H1
<div id='t39'>
                <h2>button</h2>
                <input type='button' value='button' />
                <input type='submit' value='submit'/>
            </div>

複制

file

html基礎+常用标簽概述HTML文檔H1
<div id='t310'>
                <h2>file</h2>
                <input type='file' value='file' />
                <p>送出檔案時： enctype='multipart/form-data' method='POST'</p>
            </div>

複制

textarea

html基礎+常用标簽概述HTML文檔H1
<div id='t311'>
                <h2>textarea</h2>
                <textarea></textarea>
                <textarea style='width:500px;height: 200px;'></textarea>
            </div>

複制

label

html基礎+常用标簽概述HTML文檔H1
<div id='t312'>
                <h2>label</h2>
                姓名：<input id='name1' type='text' />
                婚否：<input id='marriy1' type='checkbox' />
                <br/>
                <label for='name2'>姓名：<input id='name2' type='text' /></label>
                <label for='marriy2'>婚否：<input id='marriy2' type='checkbox' /></label>
            </div>

複制

ul and ol and dl

html基礎+常用标簽概述HTML文檔H1
<div id='t313'>
                <h2>ul ol dl</h2>

                <p>ul</p>

                <ul>
                    <li>ul.li</li>
                    <li>ul.li</li>
                    <li>ul.li</li>
                </ul>

                <p>ol</p>

                <ol>
                    <li>ol.li</li>
                    <li>ol.li</li>
                    <li>ol.li</li>
                </ol>

                <p>dl</p>

                <dl>
                    <dt>河北省</dt>
                    <dd>邯鄲</dd>
                    <dd>石家莊</dd>
                    <dt>山西省</dt>
                    <dd>太原</dd>
                    <dd>平遙</dd>
                </dl>
            </div>

複制

table

html基礎+常用标簽概述HTML文檔H1
<div id='t314'>
                <h2>table</h2>
                <table border='1'>
                    <tr><td>1</td><td>2</td><td>3</td></tr>
                    <tr><td>1</td><td>2</td><td>3</td></tr>
                    <tr><td>1</td><td>2</td><td>3</td></tr>
                </table>
                <br/>
                <br/>

                <table border='1'>
                    <thead>
                        <tr><th colspan='3'>1</th></tr>
                        <tr><th>1</th><th>2</th><th>3</th></tr>
                    </thead>
                    <tbody>
                        <tr><td>1</td><td>2</td><td>3</td></tr>
                        <tr><td>1</td><td>2</td><td>3</td></tr>
                        <tr><td>1</td><td>2</td><td>3</td></tr>
                        <tr><td rowspan='3'>1</td><td>3</td><td>3</td></tr>
                        <tr><td>3</td><td>3</td></tr>
                        <tr><td>3</td><td>3</td></tr>
                        <tr><td>3</td><td>3</td><td>3</td></tr>
                    </tbody>
                </table>
            </div>

複制

fieldset

html基礎+常用标簽概述HTML文檔H1
<div id='t315'>
                <h2>fieldset</h2>
                <fieldset>
                    <legend>登入</legend>
                    <p>使用者名：</p>
                    <p>密碼：</p>
                </fieldset>
            </div>

複制

form 表單

html基礎+常用标簽概述HTML文檔H1
<div id='t316'>
                <h2>form 表單</h2>
                <form method='POST' action='http://www.baidu.com'>
                    <input type='submit' value='submit'/>
                </form>
                <br/><br/><br/>
                <form method='GET' action='http://www.baidu.com/s'>
                    <input type='text' name='wd'>
                    <input type='submit' value='submit'/>
                </form>
                <p>檔案:enctype='multipart/form-data' method='POST'</p>
            </div>

複制

上一篇: 教你使用k8s來部署springboot服務
下一篇: Flask Nginx Gunicorn Centos7 環境部署，将項目上線