目錄
HTML標籤
常用標籤
- 標題:
<h1></h1>...<h6></h6>
- 段落:
<p></p>
- 換行:
<br/>
- 分割線:
<hr/>
- 格式化標籤:如下表格:
標籤 | 描述 |
---|---|
<b> |
定義粗體文本。 |
<big> |
定義大號字。 |
<em> |
定義着重文字。 |
<i> |
定義斜體字。 |
<small> |
定義小號字。 |
<strong> |
定義加重語氣。 |
<sub> |
定義下標字。 |
<sup> |
定義上標字。 |
<ins> |
定義插入字。 |
<del> |
定義刪除字。 |
<s> |
不贊成使用。使用 <del> 代替。 |
<strike> |
不贊成使用。使用 <del> 代替。 |
<u> |
不贊成使用。使用樣式(style)代替。 |
- 計算機輸出標籤:
標籤 | 描述 |
---|---|
<code> |
定義計算機代碼 |
<kbd> |
定義鍵盤碼 |
<samp> |
定義計算機代碼樣本 |
<tt> |
定義打字機代碼 |
<var> |
定義變量 |
<pre> |
定義預格式文本 |
<html>
<body>
<pre>
this is
pre tag
</pre>
</body>
</html>
- 引用和術語定義
標籤 | 描述 |
---|---|
<abbr> |
ect. |
<acronym> |
WWW |
<address> |
定義地址 |
<bdo> |
定義文字方向 方向 |
<blockquote> |
定義長的引用(瀏覽器通常會對 |
<q> |
定義短的引用(瀏覽器通常會爲 |
<cite> |
定義引用,引證 |
<dfn> |
定義一個定義項目 |
-
鏈接:
<a>鏈接</a>
,示例-
target 屬性:使用 Target 屬性,你可以定義被鏈接的文檔在何處顯示。
-
name 屬性:name 屬性規定錨(anchor)的名稱。當使用命名錨(named anchors)時,我們可以創建直接跳至該命名錨(比如頁面中某個小節)的鏈接,這樣使用者就無需不停地滾動頁面來尋找他們需要的信息了。
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
<a href="#C4">查看 Chapter 4。</a> <h2><a name="C4">Chapter 4</a></h2>
-
-
圖像:
<img></img>
,- src:src 指 “source”。源屬性的值是圖像的 URL 地址;
- alt:alt 屬性用來爲圖像定義一串預備的可替換的文本。替換文本屬性的值是用戶定義的,在瀏覽器無法載入圖像時,替換文本屬性告訴者她們失去的信息;
- map:定義圖像地圖;
- area:定義圖像地圖中的可點擊區域。
<body background="/i/eg_background.jpg">#背景圖片 <h2>未設置對齊方式的圖像:</h2> <p>圖像 <img src ="/i/eg_cute.gif"> 在文本中</p> <h2>已設置對齊方式的圖像:</h2> <p>圖像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p> <p>圖像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p> <p>圖像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p> <p>請注意,bottom 對齊方式是默認的對齊方式。</p> <p> <img src ="/i/eg_cute.gif" align ="left"> 帶有圖像的一個段落。圖像的 align 屬性設置爲 "left"。圖像將浮動到文本的左側。 </p> <p> <img src ="/i/eg_cute.gif" align ="right"> 帶有圖像的一個段落。圖像的 align 屬性設置爲 "right"。圖像將浮動到文本的右側。 </p> <img src="/i/eg_mouse.jpg" width="50" height="50"> <br /> <img src="/i/eg_mouse.jpg" width="100" height="100"> <br /> <img src="/i/eg_mouse.jpg" width="200" height="200"> <p>通過改變 img 標籤的 "height" 和 "width" 屬性的值,您可以放大或縮小圖像。</p> <p> 您也可以把圖像作爲鏈接來使用: <a href="/example/html/lastpage.html"> <img border="0" src="/i/eg_buttonnext.gif" /> </a> </p> <p>請點擊圖像上的星球,把它們放大。</p> <img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt="Sun" /> </map> <p><b>註釋:</b>img 元素中的 "usemap" 屬性引用 map 元素中的 "id" 或 "name" 屬性(根據瀏覽器),所以我們同時向 map 元素添加了 "id" 和 "name" 屬性。</p>
-
表格:
<table><tr><td></td></tr></table>
- 表格由
<table>
標籤來定義。每個表格均有若干行(由<tr>
標籤定義),每行被分割爲若干單元格(由<td>
標籤定義)。字母 td 指表格數據(table data),即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。 - border:設置表格邊框大小
- th:表頭
- colspan:設置跨列數
- rowspan:設置跨行數
- cellpadding:創建單元格內容與其邊框之間的空白
- cellspacing:增加單元格之間的距離
- frame:控制圍繞表格的邊框(box,above-線在上方,below-線在下方,hsides-現在左右兩側,vsides-現在上下兩側)
- 表格由
-
列表:
- 無序列表:無序列表是一個項目的列表,此列項目使用粗體圓點(典型的小黑圓圈)進行標記。無序列表始於
<ul>
標籤。每個列表項始於<li>
- 有序列表:有序列表始於
<ol>
標籤。每個列表項始於<li>
標籤 - 自定義列表:自定義列表以
<dl>
標籤開始。每個自定義列表項以<dt>
開始。每個自定義列表項的定義以<dd>
開始
<ul> <li>咖啡</li> <li>茶 <ul> <li>紅茶</li> <li>綠茶</li> </ul> </li> <li>牛奶</li> </ul> <dl> <dt>計算機</dt> <dd>用來計算的儀器 ... ...</dd> <dt>顯示器</dt> <dd>以視覺方式顯示信息的裝置 ... ...</dd> </dl>
- 無序列表:無序列表是一個項目的列表,此列項目使用粗體圓點(典型的小黑圓圈)進行標記。無序列表始於
-
div 和 span
- div:HTML
<div>
元素是塊級元素,它是可用於組合其他 HTML 元素的容器,<div>
元素沒有特定的含義。除此之外,由於它屬於塊級元素,瀏覽器會在其前後顯示折行。 - span:
<span>
元素是內聯元素,可用作文本的容器。<span>
元素也沒有特定的含義
- div:HTML
使用 HTML5 的網站佈局
HTML5 提供的新語義元素定義了網頁的不同部分:
HTML5 語義元素
標籤屬性
應該避免使用下面這些標籤和屬性:
標籤 | 描述 |
---|---|
<center > |
定義居中的內容。 |
<font> 和 <basefont> |
定義 HTML 字體 |
<s> 和 <strike> |
定義刪除線文本 |
<u> |
定義下劃線文本 |
屬性 | 描述 |
---|---|
align |
定義文本的對齊方式 |
bgcolor |
定義背景顏色 |
color |
定義字體顏色 |
-
class:對 HTML 進行分類(設置類),使我們能夠爲元素的類定義 CSS 樣式。爲相同的類設置相同的樣式,或者爲不同的類設置不同的樣式
<!DOCTYPE html> <html> <head> <style> span.red {color:red;} </style> </head> <body> <h1>My <span class="red">Important</span> Heading</h1> </body> </html>
-
style屬性
提供了一種改變所有 HTML 元素的樣式的通用方法。
樣式是 HTML 4 引入的,它是一種新的首選的改變 HTML 元素樣式的方式。通過 HTML 樣式,能夠通過使用 style 屬性直接將樣式添加到 HTML 元素,或者間接地在獨立的樣式表中(CSS 文件)進行定義。 -
文本常用屬性介紹
- font-family:定義元素中文本的字體系列
- color :定義文本顏色
- font-size :定義文本大小
<html> <body> <h1 style="font-family:arial;color:red;font-size:24px">一級標題</h1> <p style="background-color:red">這是段落</p> <h2 style="text-align:center">二級標題</h2> <!-- 淘汰了align屬性--> </body> </html>
-
背景
- 背景顏色:background-color / bgcolor
- 背景:background
CSS 樣式
通過使用 HTML4.0,所有的格式化代碼均可移出 HTML 文檔,然後移入一個獨立的樣式表。
如何使用樣式
當瀏覽器讀到一個樣式表,它就會按照這個樣式表來對文檔進行格式化。有以下三種方式來插入樣式表:
內部樣式表
當單個文件需要特別樣式時,就可以使用內部樣式表。你可以在 head 部分通過 <style>
標籤定義內部樣式表。
<html>
<head>
<style type="text/css">
body {background-color-red}
p{margin:20px}
</style>
<body>
<p></p>
</body>
</head>
</html>
外部樣式表
當樣式需要被應用到很多頁面的時候,外部樣式表將是理想的選擇。使用外部樣式表,你就可以通過更改一個文件來改變整個站點的外觀。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
內聯樣式
當單個文件需要特別樣式時,就可以使用內部樣式表。你可以在 head 部分通過 <style>
標籤定義內部樣式表。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
佈局
div
<!DOCTYPE html charset="utf-8">
<html>
<head>
<style type="text/css">
#header{
background-color:black;
text-align:center;
color:white;
padding:5px;
margin:0px;
}
#nav{
line-height:30px;
background-color:#eeeeee;
height:100%;
width:100px;
float:left;
padding:5px;
}
#section{
width:300px
float:left;
padding-left:10px;
}
#footer{
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<title>div佈局</title>
<body style="background-color:red; padding:0px;">
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id = "section">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id ="footer">
Copyright ? W3Schools.com
</div>
</body>
</html>
<! DOCTYPE html>
<html>
<head>
<style type="text/css">
header{
background-color:black;
padding:10px;
color:white;
font-size:32;
text-align:center;
}
nav{
background-color:#eeeeee;
width:100px;
height:100%;
line-height:30px;
padding-left:10px;
color:black;
font-size:20;
float:left;
}
section{
width:100px;
height:100%;
background-color:red;
float:left;
padding-left:10px;
}
footer{
background-color:black;
padding:10px;
color:white;
font-size:24;
text-align:center;
clear:both;
}
</style>
</head>
<title>HTML語義佈局</title>
<body>
<header>標題</header>
<nav>
導航1</br>
導航2</br>
導航3</br>
</nav>
<section>
<h1>章節目錄</p>
<p>
這是一個段落
</p>
</section>
<footer>頁腳</footer>
</body>
</html>
框架
通過使用框架,你可以在同一個瀏覽器窗口中顯示不止一個頁面。
實例
- 垂直框架
<html>
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>
- 水平框架
<html>
<frameset rows="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>
標籤
框架結構標籤(<frameset>
)
- 框架結構標籤(
<frameset>
)定義如何將窗口分割爲框架 - 每個 frameset 定義了一系列行或列 rows/columns
- rows/cols 的值規定了每行或每列佔據屏幕的面積
框架標籤(Frame)
基本的注意事項 - 有用的提示
假如一個框架有可見邊框,用戶可以拖動邊框來改變它的大小。爲了避免這種情況發生,可以在 標籤中加入:noresize=“noresize”。
爲不支持框架的瀏覽器添加 標籤。
內聯框架
示例:
<iframe src="URL"></iframe>
URL 指向隔離頁面的位置。
<html>
<head></head>
<title>內聯框架</title>
<body>
<h1>一級標題</h1>
<iframe name = "frame" src="div_layout1.html" width="100px" height="100px" frameborder="0"></iframe>
<hr>
<p>
<a href="https://www.baidu.com/" target="frame">測試內聯框架</a>
</p>
</body>
</html>
常用屬性:
- width:設置寬度
- height:設置高度
- frameborder:設置邊框大小,0表示去除邊框
HTML表單
form表單
HTML 表單用於收集用戶輸入。<form>
元素定義 HTML 表單:
<form>
for elements
</form>
form 屬性
-
action:action 屬性定義在提交表單時執行的動作。向服務器提交表單的通常做法是使用提交按鈕。
-
method:method 屬性規定在提交表單時所用的 HTTP 方法(GET 或 POST)
<form action="" method="GET"> #如果表單提交是被動的(比如搜索引擎查詢),並且沒有敏感信息 #當您使用 GET 時,表單數據在頁面地址欄中是可見的 </form> 或 <form action="" method="POST"> #如果表單正在更新數據,或者包含敏感信息(例如密碼) #POST 的安全性更加,因爲在頁面地址欄中被提交的數據是不可見的。 </form>
form表單屬性列表
表單元素
如果要正確地被提交,每個輸入字段必須設置一個 name 屬性。
input
<input>
元素是最重要的表單元素。根據屬性 type不同可區分爲不通的類型。
<input type="text"/> #文本輸入
根據其type屬性可區分成不同的類型
-
text:文本輸入框
-
radio:單選按鈕
<h2>單選按鈕</h2> <input type="radio" value="男"/>男<br/> <input type="radio" value="女"/>女
-
submit:提交按鈕
-
password:輸入顯示內容爲密碼
-
checkbox:複選框
<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike <br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>
-
button:等價於
<button>
,按鈕
HTML5新增輸入類型
- color:選擇顏色值
- date:選擇日期
- datatime:選擇日期時間
- datetine-local:選擇日期時間,無時區
- email:輸入郵箱
- month:選擇月份
- number:輸入只能是數字
- range:輸入自定義範圍
- search
- tel:輸入電話
- time:輸入時間
- url:輸入url地址
- week:選擇周
input屬性
-
value:規定輸入的初始值
-
readonly:輸入字段爲只讀
<input type="text" name="firstname" value="John" readonly>
-
disabled:禁用
<input type="text" name="firstname" value="John" disabled> <br>
-
size:輸入字段尺寸,以字符計算
-
maxlength:字段最大長度
HTML5 屬性
HTML5 爲 <input>
增加了如下屬性:
-
autocomplete
-
autofocus
autofocus 屬性是布爾屬性。
如果設置,則規定當頁面加載時 元素應該自動獲得焦點。First name:<input type="text" name="fname" autofocus>
-
form
-
formaction
-
formenctype
-
formmethod
-
formnovalidate
-
formtarget
-
height 和 width
-
list :list 屬性引用的
<datalist>
元素中包含了<input>
元素的預定義選項。 -
min 和 max
min 和 max 屬性規定 元素的最小值和最大值。
min 和 max 屬性適用於如需輸入類型:number、range、date、datetime、datetime-local、month、time 以及 week。 -
multiple:文件選擇
Select images: <input type="file" name="img" multiple>
-
pattern (regexp)
-
placeholder :placeholder 屬性規定用以描述輸入字段預期值的提示(樣本值或有關格式的簡短描述)
-
required
-
step
select元素(下拉列表)
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
textarea 文本域
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
button
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
datalist
<datalist>
元素爲 <input>
元素規定預定義選項列表。
用戶會在他們輸入數據時看到預定義選項的下拉列表。
<input>
元素的 list 屬性必須引用 <datalist>
元素的 id 屬性。
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
HTML 事件
詳見 W3school