HTML相關(guān)知識(shí)-創(chuàng)新互聯(lián)

HTML含義:

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

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

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

網(wǎng)頁的組成:

一個(gè)網(wǎng)頁一般由兩部分組成:

HTML(Hypertext Markup Language)
CSS(Cascade Style Sheets)
HTML負(fù)責(zé)描述網(wǎng)頁的結(jié)構(gòu)和內(nèi)容（如標(biāo)題、導(dǎo)航欄等）
<head>和</head>之間的內(nèi)容，是元信息和網(wǎng)站的標(biāo)題，元信息一般不顯示出來，但是記錄了了這個(gè)HTML文件的很多描述性質(zhì)的信息
<body>和</body>之間的內(nèi)容，是瀏覽器展示出來的，用戶看到的頁面效果。也就是說這里是網(wǎng)頁的支柱或者說主體，即body的身體之意
<html>和</html>說明這個(gè)文件是一個(gè)網(wǎng)頁。告訴瀏覽器這個(gè)網(wǎng)頁的開始和結(jié)束。包含了之后的連個(gè)元素<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：標(biāo)準(zhǔn)兼容模式未開啟（或叫怪異模式【Quirks mode】、混雜模式）

CSS1Comat:標(biāo)準(zhǔn)兼容模式已開啟（或叫做嚴(yán)格模式[Standards mode/Strict mode]）

head部分

1、meta(metadata information)

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

①、頁面編碼

②、刷新和跳轉(zhuǎn)

③、關(guān)鍵字

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

④、描述

例如一個(gè)51cto里就有一個(gè)描述

⑤、X-UA-Compatible

X-UA-Compatible 這個(gè)是IE8特有的，知道即可，因?yàn)樽銮岸说耐瑢W(xué)都很害怕IE因?yàn)樗麄儐栴}比較多各個(gè)版本問題很詭異，當(dāng)IE8的時(shí)候微軟想把各個(gè)版本的統(tǒng)一，那么這個(gè)參數(shù)就出現(xiàn)了，他為了向下兼容，如下的代碼如果使用IE8的時(shí)候他會(huì)以IE7的模式運(yùn)行。

2、title

網(wǎng)頁頭部信息，如下所示:

HTML相關(guān)知識(shí)

HTML文件各標(biāo)簽舉例說明如下:

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

HTML常用標(biāo)簽分組:

HTML相關(guān)知識(shí)

對于a標(biāo)簽屬性小竅門:

1、知識(shí)點(diǎn)屬性，a標(biāo)簽屬性，在其調(diào)用樣式中添加：

cursor:pointer

使其指導(dǎo)目標(biāo)時(shí)鼠標(biāo)變成小手

2、a標(biāo)簽中如果想實(shí)現(xiàn)鼠標(biāo)放在目標(biāo)位置時(shí)下劃線消失，在對應(yīng)的樣式中添加:

text-decoration:none

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

當(dāng)前題目：HTML相關(guān)知識(shí)-創(chuàng)新互聯(lián)
分享網(wǎng)址：http://muchs.cn/article28/dpchjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、網(wǎng)站營銷、全網(wǎng)營銷推廣、虛擬主機(jī)、網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站策劃

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

猜你還喜歡下面的內(nèi)容