html標簽簡介（常用）

阿新 • • 發佈：2018-09-01

長度 multipart cte 默認組成包含元素方式引擎

html常識

什麽是HTML

htyper text markup language 即超文本標記語言
超文本: 就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
標記語言: 標記（標簽）構成的語言.

網頁==HTML文檔，由瀏覽器解析，用來展示的
靜態網頁：靜態的資源，如xxx.html
動態網頁：html代碼是由某種開發語言根據用戶請求動態生成的

什麽是標簽

是由一對尖括號包裹的單詞構成例如: <html> *所有標簽中的單詞不可能以數字開頭.
標簽不區分大小寫.<html> 和 <HTML>. 推薦使用小寫.
標簽分為兩部分: 開始標簽<a> 和結束標簽</a>. 兩個標簽之間的部分我們叫做標簽體.
有些標簽功能比較簡單.使用一個標簽即可.這種標簽叫做自閉和標簽.例如: <br/> <hr/> <input /> <img />
標簽可以嵌套.但是不能交叉嵌套. <a><b></a></b>

標簽屬性

通常是以鍵值對形式出現的. 例如 name="aaron"
屬性只能出現在 開始標簽 或 自閉和標簽中.
屬性名字全部小寫. *屬性值必須使用雙引號或單引號包裹例如 name="aaron"
如果屬性值和屬性名完全一樣.直接寫屬性名即可. 例如 readonly

標簽分類

　　標簽一般分為兩種：

　　1. 塊級標簽

　　　　霸占一整行的標簽。比如：<h>,<p>,<div>,<form>等

　　2. 行內標簽

　　　　可以多個標簽共同占用一行的標簽。比如：<span>,<a>,<input>,<img>,<label>等

　　3. 塊級標簽特點

總是在新行上開始
寬度缺省是它的容器的100%，除非設定一個寬度
它可以容納內聯元素和其他塊元素

　　4. 行內標簽特點

和其他元素都在一行上
寬度就是它的文字或圖片的寬度，不可改變
內聯元素只能容納文本或者其他內聯元素

特殊字符

< &gt；&quot；©®

html文件結構

技術分享圖片

標簽使用範圍說明

　　由上圖可以看出，html文件主要由<head>標簽和<body>標簽組成。在這兩個標簽的標簽體中能夠嵌套如下標簽：

<head>標簽：<!DOCTYPE html> <meta> <title> <link> <style> <script>
其余標簽都在<body>標簽中嵌套

<!DOCTYPE html>標簽

由於歷史的原因，各個瀏覽器在對頁面的渲染上存在差異，甚至同一瀏覽器在不同版本中，對頁面的渲染也不同。在W3C標準出臺以前，瀏覽器在對頁面的渲染上沒有統一規範，產生了差異(Quirks mode或者稱為Compatibility Mode)；

由於W3C標準的推出，瀏覽器渲染頁面有了統一的標準(CSScompat或稱為Strict mode也有叫做Standarsmode)，這就是二者最簡單的區別。

W3C標準推出以後，瀏覽器都開始采納新標準，但存在一個問題就是如何保證舊的網頁還能繼續瀏覽，在標準出來以前，很多頁面都是根據舊的渲染方法編寫的，如果用的標準來渲染，將導致頁面顯示異常。為保持瀏覽器渲染的兼容性，使以前的頁面能夠正常瀏覽，瀏覽器都保留了舊的渲染方法（如：微軟的IE）。這樣瀏覽器渲染上就產生了Quircks mode和Standars mode，兩種渲染方法共存在一個瀏覽器上。

window.top.document.compatMode：
//BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。 
//CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。

這個屬性會被瀏覽器識別並使用，但是如果你的頁面沒有DOCTYPE的聲明，那麽compatMode默認就是BackCompat,這也就是惡魔的開始 -- 瀏覽器按照自己的方式解析渲染頁面，那麽，在不同的瀏覽器就會顯示不同的樣式。

如果你的頁面添加了<!DOCTYPE html>那麽，那麽就等同於開啟了標準模式，那麽瀏覽器就得老老實實的按照W3C的標準解析渲染頁面，這樣一來，你的頁面在所有的瀏覽器裏顯示的就都是一個樣子了。

這就是<!DOCTYPE html>的作用。

<meta>標簽

　　有兩個屬性：http-equiv屬性和 name屬性，不同屬性有不同的參數，這些不同的參數使得名，meta標簽有不同的功能。

http-equiv屬性

　　http-equiv顧名思義，相當於http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。

頁面編碼

<meta http-equiv="content-Type" charset=UTF8">

頁面刷新和跳轉

<meta http-equiv="Refresh"Content="30"> 每隔30秒刷新一次網頁
<meta http-equiv="Refresh"Content="5;Url=http://www.baidu.com"> 過5秒跳轉到某網頁。（關於跳轉，可以在應急的時候用，一般可以用js實現）

解決IE瀏覽器兼容性問題

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

name屬性

　　name屬性主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。

供搜索引擎使用（關鍵詞）

<meta name="keywords" content="星際2，飛船，UFO，皮卡">  關鍵字

網站信息描述

<meta name="description" content="為您提供最新的信息">  網站描述

<title>標簽

　　title標簽寫網站頭部信息，即網頁標簽的名稱

<link>標簽

　　link標簽有兩個作用：

1.設置標簽頁圖標：

<link rel="shortcut icon" href="image/favicon.ico">  # rel指的是類型，href是文件路徑，(image是存放圖片的文件夾)

2.外聯CSS文件：

<link rel="stylesheet" type="text/css" href="css/common.css">    # rel指的是類型，href是存放css文件的文件夾

<style>標簽

　　在html文件中編寫css樣式

<script>標簽

1.引進文件

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

2.寫js代碼

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

基本標簽

<hn>：n的取值範圍是1~6; 從大到小. 用來表示標題.
<p>：段落標簽. 包裹的內容被換行.並且也上下內容之間有一行空白.
<b> <strong>：加粗標簽.
<strike>：為文字加上一條中線.
<em>：文字變成斜體.
<sup>和<sub>：上角標 和 下角表.
<br>：換行.
<hr>：水平線
<div>：白板，本身沒有特性，塊級標簽。
<span>：白板，本身沒有特性，行內標簽。

<sup>和<sub>的使用

<p>這個文本包含 <sub>下標</sub>文本。</p>
<p>這個文本包含 <sup>上標</sup> 文本。</p>

　顯示結果：

　　這個文本包含 _下標文本。

　　這個文本包含 ^上標文本。

<input>標簽

type屬性

　　可以有如下取值：

text 文本輸入框
password 密碼輸入框
radio 單選框
checkbox 多選框  
submit 提交按鈕         
button 按鈕(需要配合js使用.) button和submit的區別？
file 提交文件：form表單需要加上屬性enctype="multipart/form-data"

name屬性

表單提交項的鍵。
註意和id屬性的區別：name屬性是和服務器通信時使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客戶端編程，而在css和javascript中使用的。

value屬性

　　表單提交項的值。

checked屬性

　　radio 和 checkbox 默認被選中

readonly屬性

　　只讀，text 和 password 標簽中使用

disabled屬性

　　使得input標簽無法編輯，對所用的input標簽都有效

<textarea>標簽

文本域標簽，有如下三個屬性：

name:  表單提交項的鍵.
cols:  文本域默認有多少列
rows:  文本域默認有多少行

<label>標簽

<label for="xxx">姓名</label>
<input id="xxx" type="text">

　　當label標簽通過for屬性與其他標簽的id屬性關聯時，點擊label標簽的標簽體時，會自動響應label標簽所關聯的標簽

<select>標簽

　　選擇框，有如下屬性：

name: 表單提交項的鍵。
value：表單提交項的值。
size：選項個數
multiple：multiple 
selectted：默認選擇項

　　如果屬性設置multiple="multiple" size="3"，表示選擇框只能同時顯示三項。<option>內的 value 為後臺識別，innerText為文本內容。

<p>選擇你的地址</p>
        <select name="city">
            <option value="1" selected="selected">北京</option> <!-- selected 默認選項 -->
            <option value="2">深圳</option>
            <option value="3">上海</option>
            <option value="4">杭州</option>
            <option value="5">成都</option>
        </select>

<p>請選擇籍貫</p>
        <select name="jiguan">
            <optgroup label="河北省">
                <option value="1">石家莊</option>
                <option value="2">保定</option>
                <option value="3">邯鄲</option>
            </optgroup>
            <optgroup label="湖南">
                <option>長沙</option>
                <option>株洲</option>
                <option>湘潭</option>
            </optgroup>
            <optgroup label="廣東">
                <option>廣州</option>
                <option>深圳</option>
                <option>佛山</option>
                <option>珠海</option>
                <option>中山</option>
            </optgroup>
        </select>

<form>標簽

表單用於向服務器傳輸數據。
表單能夠包含 input 元素，比如文本字段、復選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label 標簽。

action屬性

　　表單提交到哪. 一般指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）作相應處理，比如https://www.sogou.com/web

method屬性

　　表單的提交方式 post/get 。默認取值就是 get。

get:   1. 提交的鍵值對.放在地址欄中url後面. 
       2. 安全性相對較差. 
       3.對提交內容的長度有限制.

post:    1. 提交的鍵值對 不在地址欄. 
         2. 安全性相對較高. 
         3. 對提交內容的長度理論上無限制.

get/post是常見的兩種請求方式.

enctype屬性

當上傳文件時，form標簽必須添加該屬性，而且還必須已post方式發送請求

enctype="multipart/form-data"

<a>標簽

　　有兩個作用：

作超鏈接：跳轉到指定url

<a href="http://www.baidu.com"  target="_blank"  title="點一下看看啊">你好</a>

作錨點：條轉到指定id

<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<a href="#i4">第四章</a>
<a href="#i5">第五章</a>
 
<div id="i1" style="height:600px;">第一章的內容 <p>緒論</p></div>
<div id="i2" style="height:600px;">第二章的內容 <p>公元500年</p></div>
<div id="i3" style="height:600px;">第三章的內容 <p>公園1000年</p></div>
<div id="i4" style="height:600px;">第四章的內容 <p>公元1900年</p></div>
<div id="i5" style="height:600px;">第五章的內容 <p>公元2010年</p></div>

註意：<a>標簽默認的顯示樣式會有下劃線，如果看著不爽想要去掉，在a標簽樣式中設置：text-decoration:none;

<img>標簽

　　圖片顯示標簽

屬性如下：

src: 要顯示圖片的路徑.
alt: 圖片沒有加載成功時的提示.
title: 鼠標懸浮時的提示信息.
width: 圖片的寬
height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放

註意：也可以把img標簽嵌套在a標簽中，來實現點擊圖片跳轉的功能。

列表標簽

<ul>: 無序列表
<ol>: 有序列表
         <li>:列表中的每一項.
<dl>  定義列表
         <dt> 列表標題
         <dd> 列表項

<ul> 標簽

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

　瀏覽器顯示如下：

Coffee
Milk

<ol>標簽

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

　　瀏覽器中顯示如下：

　　　　1.Coffee

　　　　2.Milk

<dl>標簽

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

　　瀏覽器顯示如下：

　　 Coffee: 　　- black hot drink
　　 Milk: 　　- white cold drink

<table>標簽

　　構建表格。

屬性如下：

border: 表格邊框.
cellpadding: 內邊距
cellspacing: 外邊距
width: 像素 百分比.（最好通過css來設置長寬）
<tr>: table row
         <th>: table head cell
         <td>: table data cell
rowspan:  單元格豎跨多少行
colspan:  單元格橫跨多少列（即合並單元格）
<th>: table header <tbody>(不常用): 為表格進行分區.

合並單元格

<h4>單元格跨兩格:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

技術分享圖片

<h4>單元格跨兩列:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

技術分享圖片

html標簽簡介（常用）

長度 multipart cte 默認組成包含元素方式引擎 html常識什麽是HTML htyper text markup language 即超文本標記語言超文本: 就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。標記語言: 標記（標簽）

html標簽簡介（常用）

html常識

什麽是HTML

什麽是標簽

標簽屬性

標簽分類

特殊字符

html文件結構

標簽使用範圍說明

<!DOCTYPE html>標簽

<meta>標簽

http-equiv屬性

name屬性

<title>標簽

<link>標簽

1.設置標簽頁圖標：

2.外聯CSS文件：

<style>標簽

<script>標簽

1.引進文件

2.寫js代碼

基本標簽

<sup>和<sub>的使用

<input>標簽

type屬性

name屬性

value屬性

checked屬性

readonly屬性

disabled屬性

<textarea>標簽

<label>標簽

<select>標簽

<form>標簽

action屬性

method屬性

enctype屬性

<a>標簽

<img>標簽

屬性如下：

列表標簽

<ul> 標簽

<ol>標簽

<dl>標簽

<table>標簽

屬性如下：

合並單元格

相關推薦