HTML相關知識-創(chuàng)新互聯

HTML含義:

從網站建設到定制行業(yè)解決方案，為提供成都網站設計、成都網站制作服務體系，各種行業(yè)企業(yè)客戶提供網站建設解決方案，助力業(yè)務快速發(fā)展。創(chuàng)新互聯將不斷加快創(chuàng)新步伐，提供優(yōu)質的建站服務。

HTML是的英文全稱是Text Mark-up Language（超文本標記語言）的縮寫，它也是一種制作萬維網頁面的標準語言，相當于定義統(tǒng)一的一套規(guī)則，這樣可以讓瀏覽器根據標記語言的規(guī)則進行解釋。

超級文本標記語言是標準通用標記語言下的一個應用，也是一種規(guī)范，一個中標準，它通過標記符號來標記要顯示網頁中的各個部分。網頁文件本身是一種文本文件，通過文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內容(如:文件如何處理，畫面如何安排，圖片如何顯示等).

網頁的組成:

一個網頁一般由兩部分組成:

HTML(Hypertext Markup Language)
CSS(Cascade Style Sheets)
HTML負責描述網頁的結構和內容（如標題、導航欄等）
<head>和</head>之間的內容，是元信息和網站的標題，元信息一般不顯示出來，但是記錄了了這個HTML文件的很多描述性質的信息
<body>和</body>之間的內容，是瀏覽器展示出來的，用戶看到的頁面效果。也就是說這里是網頁的支柱或者說主體，即body的身體之意
<html>和</html>說明這個文件是一個網頁。告訴瀏覽器這個網頁的開始和結束。包含了之后的連個元素<head>和</head>|<body>和</body>

HTML文檔

代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
</html>

代碼解釋:

DOCTYPE:告訴瀏覽器使用什么樣的html或者xhtml規(guī)范來解析html文檔

DOCTYPE的模式:

BackCompat：標準兼容模式未開啟（或叫怪異模式【Quirks mode】、混雜模式）

CSS1Comat:標準兼容模式已開啟（或叫做嚴格模式[Standards mode/Strict mode]）

head部分

1、meta(metadata information)

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

①、頁面編碼

②、刷新和跳轉

③、關鍵字

關鍵字作用其實就是用來讓爬蟲之類的收錄程序，當他們在爬我們網站的時候，如果你有關鍵字，那么他們會優(yōu)先把關鍵字收錄到他們的記錄中，比如百度，如果他們收錄之后，然后我們在搜索關鍵字的時候就能找到咱們的網站。

④、描述

例如一個51cto里就有一個描述

⑤、X-UA-Compatible

X-UA-Compatible 這個是IE8特有的，知道即可，因為做前端的同學都很害怕IE因為他們問題比較多各個版本問題很詭異，當IE8的時候微軟想把各個版本的統(tǒng)一，那么這個參數就出現了，他為了向下兼容，如下的代碼如果使用IE8的時候他會以IE7的模式運行。

2、title

網頁頭部信息，如下所示:

HTML相關知識

HTML文件各標簽舉例說明如下:

<!DOCTYPE html><!--定義通用規(guī)則標準-->
<html lang="en">
<head>
    <meta charset="UTF-8"> <!--定義字符編碼-->
    <meta http-equiv="refresh" Content="5"><!--每5秒鐘刷新一次請求你頁面-->
    <meta http-equiv="refresh" Content="5" Url=http://www.baidu.com><!--5秒鐘后刷新后跳轉到百度-->
    <title>Python之路</title>
    <link rel="shortcut icon" href="favicon.ico">
</head>
<body>
     <h2 >addafagag</h2><!--不管內容多少一直占用整行的標簽為塊級標簽 -->
     <a >"汽車之家"</a><!--根據內容自己有多少內容占多少空間的標簽叫做內嵌標簽 -->
     <p>段落標簽①</p><!--段落標簽!-->
     <br/><!--換行標簽-->
     <p>段落標簽②</p><!--換行標簽-->
     <br/><!--換行標簽-->
     <a>Python之路</a><!--超鏈接標簽-->
     <br/>
     <a href="www.python.org">python之路</a><!--超鏈接實現跳轉，在原來的頁面打開-->
     <br/><!--換行標簽-->
     <a target="_blank" href="www.python.org">python之路</a><!--超鏈接實現跳轉，在新頁面打開,target的屬性為_blank表示在新的頁面打開-->
     <br/>
     <a href="#要跳轉的位置參數">python之路</a><!--錨的定位,注意要有#開頭-->
     <br/>
     <a href="#a1">python之路</a><!--錨的定位-->
     <br/>
     <div id="a1" >
         id為a1的內容所在位置
     </div>
     <div id="a2" >
         id為a2的內容所在位置
     </div>
     <h2>h2標簽作用是將標簽加大加粗</h2><!--H標簽的作用僅僅是將標簽字體進行大小粗細設置-->
     <h3>h3標簽作用是將標簽加大加粗</h3>
     <h4>h4標簽作用是將標簽加大加粗</h4>
     <h5>h5標簽作用是將標簽加大加粗</h5>
     <select>
         <option value="1">上海</option>
         <option value="2">北京</option>
         <option value="3" selected="selected">廣州</option>
     </select>
     <!--單選標簽-select-->
     <select size=2>
         <option value="1">上海</option>
         <option value="2">北京</option>
         <option value="2" selected="selected">廣州</option>
     </select>
     <!--多顯標簽，最多顯示2個-->
     <select multiple="multiple" size="4">
         <option value="1">北京</option>
         <option value="2">上海</option>
         <option value="3">廣州</option>
         <option value="4">深圳</option>
         <option value="5" selected="selected">武漢</option>
     </select>
     <!--多選標簽，在顯示4個的基礎上可以進行多選-->
     <select>
         <optgroup label="湖北省">
             <option>武漢市</option>
             <option>襄陽市</option>
             <option>宜昌市</option>
         </optgroup>
       <optgroup label="廣東省">
           <option>廣州市</option>
           <option>深圳市</option>
           <option>珠海市</option>
       </optgroup>
     </select>
    <!--分組標簽，該標簽不能進行選擇，只是對元素進行了分組-->
     <!--復選標簽-->
    <input type="checkbox" />
    <input type="checkbox" />
     <input type="checkbox" />
   <!--input標簽系的復選框，類型為checkbox 默認是沒有選擇，如果默認要選擇則需要添加如下屬性字段checked="checked" -->
   <input type="checkbox" checked="checked" />
     <!-- radio標簽，單選標簽，默認請三個選項都可以選擇 -->
   <input type="radio"/>
   <input type="radio"/>
   <input type="radio"/>
    <!-- radio標簽實現單選功能，可以在標簽內添加字段name="gender"來實現 -->
   <hr/>
     <input type="radio" name="gender"/>
     <input type="radio" name="gender"/>
     <input type="radio" name="gender"/>
  <!--標準的單行文本輸入框，類型為text-->
    <input type="text"/>
     <!--通過value屬性對文本輸入框設置默認值 -->
     <input type="text" value="請輸入內容">
  <!--標準的密碼輸入框,類型為password -->
    <input type="password"/>
  <!--標準的email類型輸入框,類型為email,輸入類容必須滿足郵件格式，一般用于高版本瀏覽器IE或者chrome Firefox-->
    <input type="email"/>
 <!-- 標準的按鈕標簽類型為button或者為submit,當類型為submit的value值默認為提交-->
   <input type="button"/>
   <input type="submit"/>
 <!--值可以通過value屬性來設置,這里設置提交 -->
   <input type="button" value="提交"/>
   <input type="submit" />
 <!--標準的選擇上傳文件標簽其類型為file -->
   <input type="file"/>
<!--多行輸入，可以通過css來對輸入框的長寬進行自定義設置 --->
<textarea>Python之路Python之路Python之路Python之路</textarea>
<!--通過css來設置輸入框的長寬 -->
<textarea >Python之路Python之路Python之路Python之路</textarea>
 <!--form表單 --->
<form>
    <p>
        用戶名:<input type="text">
    </p>
    <p>
        密  碼:<input tpye="password">
    </p>
</form>
<hr/>
<form action="提交到后臺的地址">
    <p>
        用戶名:<input type="text">
    </p>
    <p>
        密  碼:<input tpye="password">
    </p>
    <input type="submit" value="提交">
    <input type="button" value="按鈕">
</form>
<!--submit和button的區(qū)別是，如果submit在form標簽內，就會提交整個form標簽到后臺-->
     <!--Label標簽作用，增加用戶體驗 -->
<div>
    <h2>Label標簽</h2>
    姓名:<input type="text"/>
    婚否:<input type="checkbox"/>
</div>
<hr/>
     <!--在使用label標簽后，如果要在輸入框中輸入內容，只需要鼠標點擊旁邊的"姓名"或者"婚否"就可以自動將鼠標移至輸入框內而不需要特意點擊輸入框進行輸入 -->
<div>
    <label for="name_1">
        姓名:
        <input id="name_1" type="text"/>
    </label>
    </div>
     <div>
    <label for="name_2">
        婚否:
        <input id="name_2" type="checkbox"/>
    </label>
</div>
     <!--列表序號，ul是黑點，ol是數字序號-->
 <ul>
     <li>ul.li</li>
     <li>ul.li</li>
     <li>ul.li</li>
 </ul>
<ol>
    <li>ol.li</li>
    <li>ol.li</li>
    <li>ol.li</li>
</ol>
<!--分組dl -->
<dl>
    <dt>湖北省</dt><!--dt表示標題 -->
    <dd>武漢市</dd><!--dd表示內容 -->
    <dd>荊州市</dd>
    <dt>湖南省</dt>
    <dd>長沙市</dd>
    <dd>岳陽市</dd>
</dl>
<!--table 常見的表格標簽 tr表示行，td表示列-->
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>
<!--table表格添加邊框可以通過屬性border來設置-->
<table border="1">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
<!-- table 行和列合并用屬性"colspan"和"rowspan"來設置 -->
<table border="1">
    <tr>
        <td colspan="2">1</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td rowspan="2">1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
<!--table標簽的另外一種表示結構 -->
<table border="2">
    <thead>
           <tr>
               <th>標題1</th>
               <th>標題2</th>
               <th>標題3</th>
               <th>標題4</th>
           </tr>
    </thead>
    <tbody>
          <tr>
        <td colspan="2">1</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td rowspan="2">1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    </tbody>
</table>
<br>
<hr/>
<!-- fieldset標簽 -->
<fieldset>
    <legend>登錄</legend>
    <p>用戶名:</p>
    <p>密碼:</p>
</fieldset>
</body>
</html>

HTML常用標簽分組:

HTML相關知識

對于a標簽屬性小竅門:

1、知識點屬性，a標簽屬性，在其調用樣式中添加：

cursor:pointer

使其指導目標時鼠標變成小手

2、a標簽中如果想實現鼠標放在目標位置時下劃線消失，在對應的樣式中添加:

text-decoration:none

另外有需要云服務器可以了解下創(chuàng)新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

成都網站建設公司_創(chuàng)新互聯，為您提供營銷型網站建設、網站營銷、全網營銷推廣、虛擬主機、網頁設計公司、網站策劃

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯

猜你還喜歡下面的內容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

HTML相關知識-創(chuàng)新互聯