前端之HTML

時間  2019-11-19
標籤 前端 html 欄目 HTML 简体版
原文   原文鏈接

HTML解釋：

HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫，他是一種製做萬維網頁面標準語言（標記）。至關於定義統一的一套規則，你們都來遵照他，這樣就可讓瀏覽器根據標記語言的規則去解釋它。javascript

瀏覽器負責將標籤翻譯成用戶「看得懂」的格式，呈現給用戶！css

超級文本標記語言是標準通用標記語言下的一個應用，也是一種規範，一種標準，它經過標記符號來標記要顯示的網頁中的各個部分。網頁文件自己是一種文本文件，經過在文本文件中添加標記符，能夠告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。

基本組成：html

<!DOCTYPE html>     #標準規範
<html lang="en">
<head>                  #html頭
    <meta charset="UTF-8">      #字符編碼
    <title>Title</title>        #頁面頭部顯示內容
</head>
<body>
        <p>主體內容</p>         #頁面內容主體
</body>
</html>


<head>和</head>之間的內容，是元信息和網站的標題 元信息通常是不顯示出來的,可是記錄了你這個HTML文件的不少有用的信息
<body>和</body>之間的內容，是瀏覽器呈現出來的，用戶看到的頁面效果。也就是說這裏是網頁的主體。也就是body的身體之意
<html></html>是說明這個是一個網頁。告訴瀏覽器這個網頁的開始和結束。他包含了以後的兩個元素。<head>和</head>|<body>和</body>

　　

HTML文檔

一、DOCTYPE 前端

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

HTML語言須要一個標準，當咱們在第一行指定了<!DOCTYPE html>的時候，當瀏覽器去訪問咱們的代碼的時候就就按照HTML代碼裏指定的標準去讀取和渲染給咱們展示的頁面。python

 

爲何要使用<!DOCTYPE html>這個去告訴瀏覽器呢？？？？？？？？：web

DOCTYPE模式：瀏覽器

咱們先了解一下DOCTYPE的模式安全

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

問題產生：post

當Netscape4（譯註：網景公司早期的瀏覽器）和IE4（微軟公司早期的瀏覽器）實現CSS機制時，並無遵循W3C提出的標準。Netscape4 提供了糟糕的支持，而IE4 雖然接近標準，但依舊未能徹底正確的支持標準。儘管IE 5 修復了IE4 許多的問題（bugs），可是依然延續CSS實現中的其它故障（主要是盒模型（box model）問題）。

爲了保證本身的網站在不一樣的瀏覽器中都能正確展示，網頁開發者不得不依據各個瀏覽器的自身的規範來使用CSS。所以大部分網站的CSS實現並未符合W3C的標準。

然而隨着標準一致性變得愈來愈重要，瀏覽器開發商不得不面臨一個艱難的抉擇：逐漸遵循W3C的標準是前進的方向。可是改變現有CSS的實現，完整去遵循標準，會使許多網站或多或少受到破壞。若是瀏覽器忽然以正確的方式解析現存的CSS，陳舊的網站顯示必然受到影響。

所以當即遵循標準會產生問題，然而忽略標準則又會維持瀏覽器大戰時（譯註：微軟和網景之間的一段競爭）所產生的混亂。

解決方案：

  1. 容許網站開發者可以選擇他們所熟知的模式。
  2. 依然使用舊式規則顯示陳舊的網站。

換句話說，全部的瀏覽器須要提供兩種模式：怪異模式（即兼容模式）服務於舊式規則，嚴格模式服務於標準規則。Mac平臺的IE瀏覽器最早實現這兩種模式，Mozilla， Safari、Opera和Windows平臺的IE6也相繼實現了這兩種模式。WIndows平臺的IE5和Netscape4則只提供了怪異模式。

選擇使用哪一種模式須要一個觸發器，而 「DOCTYP切換」 則用於此目的。依照標準：任何一個(X)HTML文檔必須擁有一個DOCTYPE（譯註：DTD（文檔類型定義）是一組機器可讀的規則，它們指示 (X)HTML文檔中容許有什麼，不容許有什麼，DOCTYPE正是用來告訴瀏覽器使用哪一種DTD,通常放在(X)HTML文檔開頭聲明）用以告訴其餘人 這個文檔的類型風格

  1. 產生於標準化浪潮之前的網頁並無DOCTYPE聲明。所以'沒有DOCTYPE'意味着觸發怪異模式：既依據舊式的CSS規則渲染網頁。
  2. 相反，若是開發者明確知道包含DOCTYPE，他們應該明白他們想要怎麼作。所以大部分的DOCTYPE聲明將觸發嚴格模式：即依據標準的CSS規則渲染網頁。
  3. 任何新的或未知的DOCTYPE將觸發嚴格模式。
  4. 一些頁面依據怪異模式而寫，可是卻包含DOCTYPE。這種狀況下各個瀏覽器依據本身的DOCTYPE規則列表來觸發怪異模式，參照下面的瀏覽器比較圖表 。

 

 head部分

一、Meta(metadata information)

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

 一、頁面編碼

<meta charset="UTF-8">  #指定編碼類型爲UTF-8

　　

二、刷新和跳轉

<meta http-equiv="refresh" content="5">  #指定每5秒刷新一次
<meta http-equiv="refresh" Content="1;Url=http://www.cnblogs.com/luotianshuai/" /> #指定1秒以後跳轉頁面至另外一個網頁

　　

三、關鍵字

關鍵字的做用：通常是讓爬蟲之類的收錄程序，當他們在爬你的網站的時候，若是你有關鍵字，那麼他們會優先把關鍵字收錄到他們的記錄中，好比百度：若是他們收錄以後，他們搜索你的關鍵字的時候，就能找到我們的網站。

<meta name="keywords" content="博客,Mr、心絃,帥哥,羅天帥">

　　

四、描述

例如cnblog裏的就是一個描述：

<meta name="description" content="博客園是一個面向開發者的知識分享社區。自建立以來，博客園一直致力並專一於爲開發者打造一個純淨的技術交流社區，推進並幫助開發者經過互聯網分享知識，從而讓更多開發者從中受益。博客園的使命是幫助開發者用代碼改變世界。">

五、X-UA-Compatible

X-UA-Compatible  這個是IE8特有的，知道便可，由於作前端的同窗都很懼怕IE由於他們問題比較多各個版本問題很詭異，當IE8的時候微軟想把各個版本的統一，那麼這個參數就出現了，他爲了向下兼容，以下的代碼若是使用IE8的時候他會以IE7的模式運行。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

　　

二、title

網頁頭部信息，以下圖所示：

三、Link

網頁頭部的圖標

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

　　

效果圖以下：

導入CSS相似python中導入模塊相似

<link rel="stylesheet" href="css/css_model.css">

四、Style

一、在當前文件中寫Css樣式

二、在其餘文件中寫Css樣式相似python的模塊導入的方式把Css樣式導入到當前文件中使用

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

　　

五、Script

一、在當前文件中寫JS

二、在其餘文件中寫JS相似python的模塊導入的方式把JS導入到當前文件中使用

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

寫js代碼
< script type="text/javascript" > ... </script >

　　

body部分

基礎知識

一、body裏面分爲兩類標籤：塊級標籤和內聯標籤，塊級標籤佔用的是整行，內聯標籤佔用的他所使用的實際大小以下圖：

塊級別標籤&內聯標籤：

 

二、特殊符號特殊處理

舉例來講<h1>是標題標籤，若是我想輸出<h1>這個字符串，而不是想獲取<h1>的樣式怎麼辦呢？

正常狀況下若是直接在html文件裏輸入<h1>當有瀏覽器在讀取的時候就會講<h1>解釋,頁面將沒法顯示，因此特殊的標籤須要特殊處理

因此特殊符號有本身的定義更多請看鏈接：更多

經常使用標籤：

 一、<p></p>標籤和<br/>標籤

<p></p>標籤：段落標籤，每一對p標籤爲一段,代碼以下

    <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p>
    <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p>
    <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p>
    <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p>
    <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p>

顯示效果以下：

<br/>標籤：換行標籤；有一個<br/>爲一個換行，看下面的代碼

    <p>帥哥帥帥哥帥帥哥帥<br/>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p>
    <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p>
    <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p>
    <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p>
    <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p>

顯示效果以下，我加了一個<br/>標籤以後段落就被換行了：

二、<a></a>標籤

<a></a>標籤用來跳轉和錨

<a>標籤之：跳轉

默認若是在<a><a/>標籤中不設置那麼他僅僅在瀏覽器中顯示文本，以下面代碼

    <a>帥哥博客</a>

顯示效果：（這裏僅僅顯示的文字沒有任何功能）

 指定跳轉後，代碼以下

<a href="https://home.cnblogs.com/u/fengdao/">帥哥博客</a>

效果以下：

點擊後將跳轉到指定的鏈接地址~，在自身的頁面打開的！

若是讓他用一個新的標籤中打開鏈接地址代碼以下：

<a target="_blank" href="https://home.cnblogs.com/u/fengdao/">帥哥博客</a>

 

target 屬性

使用 Target 屬性，你能夠定義被連接的文檔在何處顯示。

下面的這行會在新窗口打開文檔：

<a href="http://www.baidu.com/" target="_blank">百度</a>

 

顯示以下：

百度

 

<a>標籤之：錨

錨的做用是相似於讀書時候的書籤，當你你點擊這個「錨」=「書籤」，的時候就跳轉到指定的位置

複製代碼 
    <a href="#a2">
        書籤
    </a>
    <!--在標籤裏，ID是這個標籤的惟一的值，咱們在作錨的時候指定他的ID便可-->
    <!--<a href="#a2"> 上面的代碼href="#要跳轉的標籤"-->
    <div id="a1" style="height:700px;">
        mark_1
    </div>

    <div id="a2" style="height:700px;">
        mark_2
    </div>
複製代碼

上面的代碼中，若是點擊了書籤以後，那麼就會跳轉到id=a2的書籤的位置！

三、H標籤

即標題標籤,代碼以下

    <h1>H1</h1>
    <h2>H2</h2>
    <h3>H3</h3>
    <h4>H4</h4>
    <h5>H5</h5>
    <h6>H6</h6>

顯示效果以下：

四、Select標籤

第一種select標籤

<select>
    <option value="1">上海</option>
    <option value="2">北京</option>
    <option value="3" selected="selected">廣州</option>
    <!--這裏默認是廣州由於selected="selected" 這裏設置了默認的！-->
</select>

顯示效果以下圖：

第二種select標籤

<select size="2">
    <option>上海</option>
    <option>北京</option>
    <option>廣州</option>
    <option>山東</option>
</select>

顯示效果以下圖：

 

第三種select標籤,能夠進行多選

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

第4中select標籤，能夠進行分組

複製代碼 
<select>
    <optgroup label="河北省">
        <option>石家莊</option>
        <option>邯鄲</option>
    </optgroup>
    <optgroup label="山西省">
        <option>太原</option>
        <option>平遙</option>
    </optgroup>
</select>
複製代碼

效果圖以下：

 

五、input系列標籤

input:checkbox標籤-複選框

<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox" checked="checked"/>
<!--這裏加一個標識checked="checked，爲默認選擇"-->

效果以下圖：

input:radio標籤-單選框

複製代碼 
<!--第一中狀況不互斥    -->
<input type="radio"/>
<input type="radio"/>
<input type="radio"/>
<hr/>
<!--對於input標籤來講只要，radio的name值相同，那麼他們就會互斥-->
<input type="radio" name="gender"/>
<input type="radio" name="gender"/>
<input type="radio" name="gender"/>
複製代碼

效果圖以下：

input:text & password 輸入框

<!--標準的輸入框-->
<input type="text"/>
<!--密碼的輸入框（輸入的內容是保密的）-->
<input type="password"/>

效果圖以下：

input:button & submit 提交按鈕

<input type="button" value="提交"/>
<input type="submit" value="提交"/>

效果圖以下：

file標籤-用來提交文件時使用

<input type="file"/>

效果圖以下:

六、多行文本框

<textarea style="height: 100px;width: 100px;"></textarea>

效果圖以下：

七、form表單

複製代碼 
<form>
    <p>用戶名:<input type="text"/></p>
    <p>密碼:<input type="password"/></p>
    <input type="submit" value="提交"/>
    <input type="button" value="按鈕"/>
    <!--這裏按提交纔有反映，submit是用來提交當前的表單的，固然能夠有多個表單-->
    <!--可是，這個submit須要寫入表單內，那麼提交的時候是提交的當前表單-->
</form>
複製代碼

效果圖以下：

複製代碼 
<form action="www.baidu.com" method="get">
    <!--這裏action是告訴html提交到那裏-->
    <!--method是經過什麼方法去action指定的地址-->
    <p>
        用戶名:<input type="text" name="username"/>
        <!--這裏的name="username" 這裏當我們指定的action接收到的數據以後縣會找到是否有這個name標籤-->
        <!--而後把這裏的用戶的輸入複製給name爲一個字典key:value模式-->
    </p>
    <p>
        密碼:<input type="password" name="password"/>
                <!--這裏的name="username" 這裏當我們指定的action接收到的數據以後縣會找到是否有這個name標籤-->
        <!--而後把這裏的用戶的輸入複製給name爲一個字典key:value模式-->
    </p>
    <p>
        部門:<select name="department">
                    <option value="1">CTO</option>
                    <option value="2">DBA</option>
        <!--這裏在選擇以後，會把選擇的value值賦予給name，當用戶點擊提交後就會提交到後臺-->
    </select>
    </p>
    <input type="submit" value="提交"/>

</form>
複製代碼

action表示提交動做，把數據提交到指定的路徑，methon指定提交類型，默認爲get

post與get的區別：

method默認爲get類型，數據會包含在html的頭部進行提交，表現形式是點擊提交後會在外部url路徑上查看提交到的數據表單內容，效果以下

1
http: / / localhost: 8888 / index?user = lianzhilei&email = James % 40123.com &pwd = 123123

method若是指定爲post類型的話，數據會包含在html的body內進行提交，從外部看不出來裏面的信息

二者 沒有誰安全之說，由於抓包都能抓到

 

八、label標籤

有一種狀況，看下圖，在不使用label標籤的時候，咱們只能點進框體裏去，不然就不能輸入或選擇，這樣用戶體驗不是很好：

代碼以下：

<div>
    <h1>Label標籤</h1>
    姓名:<input type="text"/>
    婚否:<input type="checkbox"/>
</div>

 使用label標籤，代碼以下：

複製代碼 
<div>
    <label for="name_1">
        姓名:
        <input id="name_1" type="text"/>
    </label>

    <label for="name_2">
        婚否:<input id="name_2" type="checkbox"/>
    </label>
</div>
複製代碼

顯示效果，這裏我選擇文字的時候也會進入到相應的框體，他相似一個跳轉：

 九、列表 ul/ol/dl

 ul列表在前面自動加「點」，代碼以下：

<ul>
    <li>line1</li>
    <li>line2</li>
    <li>line3</li>
</ul>

效果以下：

ol列表在前面自動加「數字」，代碼以下：

<ol>
    <li>line1</li>
    <li>line2</li>
    <li>line3</li>
</ol>

效果以下：

dl列表自動分組，代碼以下：

複製代碼 
<dl>
    <dt>河北省</dt>
    <!--dt是標籤，dd是標籤裏的內容-->
        <dd>石家莊</dd>
        <dd>衡水市</dd>
    <dt>山東省</dt>
    <!--dt是標籤，dd是標籤裏的內容-->
        <dd>濟南市</dd>
        <dd>煙臺市</dd>
</dl>
複製代碼

效果以下圖：

十、表格

複製代碼 
<table border="1">
    <!--border這裏是加上邊框-->
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <!--一個tr是1行，一個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>
複製代碼

效果以下：

合併單元格

複製代碼 
<table border="1">
    <!--border這裏是加上邊框-->
    <tr>
        <td colspan="3">1</td>
        <!--這裏colspan，就告訴html解析的時候佔3個格-->
    </tr>
    <!--一個tr是1行，一個td是一列，一行裏可能有不少列。-->
    <!--若是想加多個行就加多個tr便可-->
    <tr>
        <td rowspan="2">1</td>
        <td>2</td>
        <td>3</td>
    </tr>
        <tr>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
複製代碼

效果以下圖：

以上的表格標籤其實還不是很標準，正常標準的標籤以下：

複製代碼 
<table border="1">
    <thead>
    <!--表頭-->
        <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>
    </tbody>
</table>
複製代碼

效果以下圖：

十一、fieldset標籤

 代碼以下：

<fieldset>
    <legend>協議</legend>
請仔細閱讀協議內容：
</fieldset>

效果以下：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程