html常識 什麼是HTML htyper text markup language 即超文本標記語言 超文本: 就是指頁面內可以包含圖片、鏈接,甚至音樂、程式等非文字元素。 標記語言: 標記(標簽)構成的語言. 網頁==HTML文檔,由瀏覽器解析,用來展示的 靜態網頁:靜態的資源,如xxx.htm ...
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. 行內標簽特點
- 和其他元素都在一行上
- 寬度就是它的文字或圖片的寬度,不可改變
- 內聯元素只能容納文本或者其他內聯元素
特殊字元
< >;";©®
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>標簽
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>