小白神器 - 一篇部落格學會HTML
小白神器 - 一篇部落格學會HTML
一. 簡介
1. HTML 定義
htyper text markup language 即超文字標記語言。
超文字: 就是指頁面內可以包含圖片、連結，甚至音樂、程式等非文字元素。
標記語言: 標記（標籤）構成的語言。
2. 標籤定義和屬性
是由一對尖括號包裹的單詞構成 例如: <html> *所有標籤中的單詞不可能以數字開頭.
標籤不區分大小寫.<html> 和 <HTML>. 推薦使用小寫.
標籤分為兩部分: 開始標籤<a> 和 結束標籤</a>. 兩個標籤之間的部分 我們叫做標籤體.
有些標籤功能比較簡單.使用一個標籤即可.這種標籤叫做自閉和標籤.例如: <br/><hr/><input/><img/>
標籤可以巢狀.但是不能交叉巢狀. <a><b></a></b>
3. HTML5 基本結構
通常是以鍵值對形式出現的. 例如 name="nick"
屬性只能出現在開始標籤 或 自閉和標籤中.
屬性名字全部小寫. *屬性值必須使用雙引號或單引號包裹 例如 name="nick"
如果屬性值和屬性名完全一樣.直接寫屬性名即可. 例如 readonly
4. HTML 字符集
使用Content-Type指定字符集
<meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/>
直接使用charset指定字符集
<meta charset="UTF-8">
二. <hrad>標籤
1. <title>
<title>Title</title>
2. <base>
標籤為頁面上的所有連結規定預設地址或預設目標
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <base href="http://images.cnblogs.com/cnblogs_com/suoning/845162/"/> <base target="_blank" /> </head> <body> <img src="o_s.png" alt="圖片載入失敗。。。"/> <a href="http://cnblogs.com/suoning/">nick blogs</a> </body> </html>View Code
3. <link> (rel, herf, type)
引用外部文件, 常見於引用外部樣式, 屬性: rel, href, type
rel 規定文件與被連結文件之間的關係。 • rel="dns-prefetch" 預先解析快取文件中使用的域名，目的是為了提高網頁訪問速度。使用場景：在一個網頁頻繁使用其他域名資源時。 • rel="shortcut icon"或rel="icon" 在收藏和標題欄上用於顯示的圖示。示例：<link rel="icon" href="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_s.png">。注意：IE瀏覽器只支援ico格式，為了相容IE，圖片檔案採用ico格式。 • rel="stylesheet" 引用外部樣式表。 • rel="nofollow" 用於指示搜尋引擎不要追蹤（爬蟲抓取），減少垃圾連結。用於<a>標籤，使用場景：網頁不被信任或是不希望唄搜尋引擎錄入的網站。 href 資源的路徑（相對路徑/絕對路徑）。 type 規定被連線文件的MIME型別，用於明確檔案的開啟方式。例如：.ico檔案 image/x-icon。View Code
4. <mata> (http-equiv, name, content)
定義關於HTML文件的元資料。 重要的屬性有三個：http-equiv、name、content
http-equiv 把content屬性值關聯到http頭部。 •Content-Type（瀏覽器接受的文件型別，一般是text/html） •refresh（網頁重新整理，以秒為單位） •expires（設定網頁到期時間，一旦過期，必須到伺服器上重傳） <meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/> <meta http-equiv="Refresh" content="2"> <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> <meta http-equiv="expires" content="6 Jun 2016"/> name 把content屬性關聯到一個名稱。 •keywords（搜尋關鍵字，用於搜尋引擎抓取資訊的顯示） •description（搜尋到網站後顯示的網頁內容簡描述） •author（站點製作者資訊） • generator（用以說明生成工具） •name也可以根據特定的功能自定義，在新浪網中有使用360認證和搜狐認證（<meta name="360-site-verification"content="63349**********"/>、<meta name="sogou_site_verification"content="BVI*******"/>）。 <meta name="keywords" content="搜尋關鍵字"> <meta name="description" content="簡要描述"> <meta name="author" content="http://cnblogs.com/suoning"> <meta name="generator" content="用以說明生成工具"> content 定義與http-equiv或name屬性相關的元資訊，是必要的屬性。View Code
三. <body>標籤
1. 塊級標籤和內聯標籤
塊級標籤：<p><h1><table><ol><ul><form><div>
內聯標籤：<a><input><img><sub><sup><textarea><span>
block（塊）元素的特點 :
① 總是在新行上開始；
② 高度，行高以及外邊距和內邊距都可控制；
③ 寬度預設是它的容器的100%，除非設定一個寬度。
④ 它可以容納內聯元素和其他塊元素
inline（內聯）元素的特點
① 和其他元素都在一行上；
② 高，行高及外邊距和內邊距不可改變；
③ 寬度就是它的文字或圖片的寬度，不可改變
④ 內聯元素只能容納文字或者其他內聯元素
對行內元素，需要注意如下 設定寬度width 無效。
設定高度height 無效，可以通過line-height來設定。
設定margin 只有左右margin有效，上下無效。
設定padding 只有左右padding有效，上下則無效。注意元素範圍是增大了， 但是對元素周圍的內容是沒影響的。
2. 基本標籤 （<h1>~<h6>、<p>、<b> <strong>、<strike>、<u>、<em> <i>、<sup>、<sub>、<br>、<hr>、<div>、<span>）
<h1>~<h6> 標題標籤.
<p>: 段落標籤. 包裹的內容被換行.並且也上下內容之間有一行空白.
style="text-indent: 2em"可以設定樣式為首行縮排兩個字元。
<blockquote></blockquote>可以用來設定整個段落的縮排。
<b> <strong>: 加粗標籤.
<strike>: 為文字加上一條中線.
<u>: 文字下方加下劃線.
<em> <i>: 文字變成斜體.
<sup>和<sub>: 上角標 和 下角標.
<br>:換行.
<hr>:水平線.
<div>
塊級標籤。塊級標籤常用於佈局，行級標籤常用語顯示內容。
div的顯示通常使用id或class來標識。id為唯一的標籤標識，class為標籤的類標識。
div的大小是由內容來決定的，預設情況下，高度由內容的高度決定，寬度適應螢幕。
可以容納其他元素，是一個容器。
<span>:行內標籤
3. 特殊符號 （>、<、 、"、©...）
> >
< <
空格
" 引號
© 版權符號
特殊符號 符號碼 " " ; & & ; < < ; > > ; © © ; ® ® ; ± ± ; × × ; § § ; ¢ ¢ ; ¥ ¥ ; · · ; &euro ; £ £ ; ™ &trade ;View Code
4. <a> 超連結標籤(錨標籤)（href、target、name）
重要屬性有三個：href、target、name
href 超連結地址：可以是Web上任意資源，包括圖片，網頁，樣式，指令碼檔案等。href="#"時，表 示被連結頁面就是當前頁面。
target 文件開啟時要顯示的目標位置，屬性值一般有：_blank（新視窗中開啟）、_self（預設，在超連結所在的容器中開啟）、_parent（在超連結的父容器中開啟）、_top（整個容器中開啟）、name（框架名稱）。
name 錨記名稱。作用：跳轉到文件的某個地方。返回首頁。
# 跳轉網頁 <a href="http://cnblogs.com/suoning" target="_blank">Nick Blogs</a> # 跳轉錨記書籤名稱 <a name="top"><h3>Top！</h3></a> <div style="height: 800px"></div> <a href="#top">top</a>跳轉
1.標籤最簡式 <a href="mailto:[email protected]">郵件聯絡</a> 2.標籤幫你填抄送地址 <a href="mailto:[email protected][email protected]">郵件聯絡</a> 3.標籤幫你填暗送地址 <a href="mailto:[email protected][email protected]">郵件聯絡</a> 4.暗,抄 <a href="[email protected]">郵件聯絡</a> 5.標籤幫你填主題 <a href="mailto:[email protected]?subject=這是主題">郵件聯絡</a> 6.填郵件內容 <a href="mailto:[email protected]?body=這是內容">郵件聯絡</a> 7.多址傳送 <a href="mailto:[email protected],[email protected]">郵件聯絡</a>mailto 標籤傳送郵件例項
# http://shang.qq.com/v3/widget.html <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=630571017&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:630571017:51" alt="點選這裡給我發訊息" title="點選這裡給我發訊息"/></a>連結QQ例項一
<a href="tencent://message/?uin=630571017" target="_blank"><img style="border:0px;" src=http://wpa.qq.com/pa?p=1:707321921:13></a> # 更多圖片地址如下： # http://wpa.qq.com/pa?p=1:707321921:1 # http://wpa.qq.com/pa?p=1:707321921:2 # http://wpa.qq.com/pa?p=1:707321921:3 # http://wpa.qq.com/pa?p=1:707321921:4 # http://wpa.qq.com/pa?p=1:707321921:5 # http://wpa.qq.com/pa?p=1:707321921:6 # http://wpa.qq.com/pa?p=1:707321921:7 # http://wpa.qq.com/pa?p=1:707321921:8 # http://wpa.qq.com/pa?p=1:707321921:9 # http://wpa.qq.com/pa?p=1:707321921:10 # http://wpa.qq.com/pa?p=1:707321921:11 # http://wpa.qq.com/pa?p=1:707321921:12 # http://wpa.qq.com/pa?p=1:707321921:13連結QQ例項二
5. <img> 圖形標籤（src、title、alt、width、height、align）
行級標籤，用來顯示圖片。
重要屬性有：src、title、alt、width、height、align。
src 圖片地址。
title 滑鼠懸浮在圖片上的文字。
alt 圖片找不到時要替換的文字。如果圖片資源使用的是外網資源，則不會顯示要替換的文字。如果使用的是本網站的資源（相對路徑給出），則找不到圖片時會顯示替換的文字，並保留圖片設定的寬高結構。
align 圖片周圍文字的垂直對齊情況。常用的屬性值有：top（與圖片的頂部對齊）、middle（與圖片的中部對齊）、bottom（預設，與圖片的底部對齊）。
width 圖片的寬
height 圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
<img src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" alt="圖片載入失敗。。。" title="The knife girl, kiss"/>View Code
6. 列表標籤（<ul>、<ol>、<li>、<dl>、<dt>、<dd>）
<ul> :無序列表標籤
<li>:列表中的每一項.
<ol> :有序列表標籤
<li>:列表中的每一項.
<li>主要的屬性有：type、value兩個:
-
- type指明專案的型別，屬性值有：A，a，I，i，1，disc（實心圓），square（實心正方形），circle（空心圓）。
- value表示序號值從幾開始。
<dl> 定義列表
<dt> 列表標題
<dd> 列表項
<ur> <li type="circle">A</li> <li type="1">B</li> <li type="1">C</li> </ur> <ol> <li value="3">3</li> <li>4</li> </ol> <dl> <dt><i>標題</i></dt> <dd>第一項</dd> <dd>第二項</dd> <dd>第三項</dd> </dl>View Code
7. <table> 表格標籤（<table> 、<caption> 、<tr>、<th>、<td>、<thead>、<tbody>、rowspan、colspan）
<table> 表格標籤
-
- border:（表格邊框）
- align（水平對齊方式）
- bgcolor（背景顏色）
- cellpadding（內邊距，單元格與內容之間的距離）
- cellspacing（外邊距，單元格的間距，設定為0時，表格變為實線表格）
- width（表格的寬度，可以用%或者畫素，最好通過css來設定長寬）
<caption> 表格的標題
<tr> 表格的資料行，table row
<th> 表格的表頭名稱，與<td>不同在於文字採用加粗居中的形式顯示，table head cell
<td> 單元格，用來顯示錶格內容，table data cell
<thead> 表格頭部，使結構更加分明
<tbody> 表格主體部分，使結構更加分明
rowspan 單元格豎跨多少行，作用在th或者td上
colspan 單元格橫跨多少列（即合併單元格），作用在th或者td上
table> <caption>xxxxxxxxxx</caption> <thead> <tr> <th>序號</th> <th>姓名</th> <th>年齡</th> <th>女神</th> </tr> </thead> <tbody> <tr> <th>1.</th> <td>nick</td> <td>18</td> <td>可可西</td> </tr> <tr> <th>2.</th> <td>jenny</td> <td>21</td> <td>nick!!!</td> </tr> </tbody> </table>View Code
8. <from> 表單標籤（action、method、enctype、<input>、<textarea>、<select>、<label>、<fieldset>）
表單屬性
HTML 表單用於接收不同型別的使用者輸入，使用者提交表單時向伺服器傳輸資料，從而實現使用者與Web伺服器的互動。表單標籤, 要提交的所有內容都應該在該標籤中。
屬性：action、method、enctype
action 表單要提交的地址，用於處理表單的內容（一般是提交字典到後臺的一個介面，這個介面是java寫成的，提交到這個介面後後臺就知道如何處理這些資料了）。
method 提交的方法，預設是get方式提交。
get: 1.提交的鍵值對.放在位址列中url後面. 2.安全性相對較差. 3.對提交內容的長度有限制.
post:1.提交的鍵值對不在位址列. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.
enctype 對錶單資料進行編碼，預設都是要編碼的。格式為：application/x-www-form-urlencoded（表單預設的編碼格式，表單傳送前對所有字元進行編碼。編碼規則：空格轉換為“+”號，特殊符號轉換為ASC HEX值）。提交普通的文字內容到伺服器就可以採用這種預設的編碼方式。當你需要提交的是一個檔案時，編碼就需要採用另一種格式：multipart/form-data（不對字元編碼，檔案上傳時使用）。text/plain（是一種純文字編碼，空格轉換為“+”號，但是不對特殊字元進行編碼）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="https://www.baidu.com/s"> <input type="text" name="wd"> <input type="submit" value="百度一下"> </form> </body> </html>百度搜索例項
表單元素
<input> type 屬性：
text 文字框輸入（預設text文字框型別）。
autocomplete（自動完成輸入的內容，要求表單元素要有name屬性才有自動完成的效果，off表示自動完成不可用，on表示自動完成可用）
disabled（設定或者獲取控制元件的狀態，預設是false即可用，等於true時不可用，不能輸入內容）
password 密碼框。（以下屬性text和password共有）
size（指定表單元素的初始寬度。當type為text或password時，表單元素的大小以字元為單位，對於其他元素，寬度以畫素為單位）
maxlength（type為text或password時，表示輸入的最大字元數），有利於防止sql的注入攻擊
readonly 只讀.
placeholder 框內預置內容(灰色)，寫上內容時才消失
radio 單選按鈕。屬性：
name（將name的值設定為相同值，才表示一組資料，才能實現單選功能）
value（必須要寫，提交到伺服器的key值，實際開發過程中value一般是編號）
checked（是否被選中的狀態）
checkbox 複選框。
name（名字一定要一樣一樣的，才表示是一組資料，新增到同一value值列表提交到伺服器）
value（必須要寫，提交到伺服器的key值，實際開發過程中value一般是編號）
checked（是否被選中的狀態）
file 檔案域，上傳檔案（不同的瀏覽器表現形式不同）
submit 提交按鈕。用於提交表單。
reset 重置按鈕。清空表單的輸入，恢復到表單預設的狀態。
button 普通按鈕。一般結合javascript使用。
image 圖片按鈕，用來提交表單，與submit是一樣的效果。
src（圖片路徑）
hidden 隱藏欄位。
value（隱藏的內容）
color 顏色標籤。value指定顏色值（採用#十六進位制數表示）。
date 日期。value值指定預設的日期，格式為****-**-**（年月日）。
datetime-local 顯示本地時間，value值指定預設的時間，格式為2016-05-20T11:10:10（年月日T時分秒）。
number 數字向上或者向下滑動。可以填數字然後向上或者向下選擇不同的值。
range 滑動標籤。min（指定最小值）、max（指定最大值）、value（指定當前預設值）。
week 每年的週數。value指定哪一年第幾周，格式為2016-W25（2016年第25周）。
<textarea> 文字域標籤。預設表現形式是可以輸入很多行文字的文字框。
name （表單提交項的key）
cols（設定文字域寬度）
rows（設定文字域高度，即行數）
<select> 下拉框標籤。使用時要結合<option>子標籤一起使用。
name:表單提交項的key
size：選項個數
multiple：多選
<option> 下拉選中的每一項
-
- value（表單提交項的值）
- selected（selected下拉選預設被選中）
<optgroup>為每一項加上分組
<fieldset> 對錶單中的相關元素進行分組
<fieldset> <legend>溫馨提示</legend> <div align="middle">不要忘記點贊哦 ==</div> </fieldset>View Code
value: 表單提交項的值
對於不同的輸入型別，value 屬性的用法也不同：
- type="button", "reset", "submit" - 定義按鈕上的顯示的文字
- type="text", "password", "hidden" - 定義輸入欄位的初始值
- type="checkbox", "radio", "image" - 定義與輸入相關聯的值
四. 框架
1.<frameset>
用來劃分窗體，不能放在<body>中，否則沒有效果。
cols （縱向分割頁面。其數值表示方法有三種：“30%、30（或者30px）、*”；數值的個數代表分成的視窗數目且數值之間用“,”隔開。“30%”表示該框架區域佔全部瀏覽器頁面區域的30%；“30”表示該區域橫向寬度為30畫素；“*”表示該區域佔用餘下頁面空間。例如：cols="25%,200,*" 表示將頁面分為三部分，左面部分佔頁面30%，中間橫向寬度為200畫素，頁面餘下的作為右面部分。）
rows（橫向分割頁面。屬性和cols一樣）
frameborder（設定是否顯示框架邊框。設定值只有0、1；0 表示不要邊框，1 表示要顯示邊框）
border（框架之間的距離，一般設定為0）
bordercolor（邊框的顏色）
framespacing（設定框架與框架間的保留的空白距離）<frameset cols="40%,*,*"> 第一個框架佔整個瀏覽器視窗的40%,剩下的空間平均分配給另外兩個框架。 <frameset cols="*,*,*,*"> 瀏覽器視窗等分為四部分。
2. <iframe>
元素會建立包含另外一個文件的內聯框架（即行內框架）
name （設定框架名稱。此為必須設定的屬性）
src （設定此框架要顯示的網頁名稱或路徑。此為必須設定的屬性）
scrolling （設定是否要顯示滾動條。設定值為auto, yes, no）
bordercolor （設定框架的邊框顏色）
frameborder （設定是否顯示框架邊框。設定值只有0、1；0 表示不要邊框，1 表示要顯示邊框）
noresize （設定框架大小是否能手動調節）
marginwidth （設定框架邊界和其中內容之間的寬度）
marginhight （設定框架邊界和其中內容之間的高度）
width（設定框架寬度）
height （設定框架高度）
參考文獻: suoning 部落格