基本
<html>…</html> 定義 HTML 文檔
<head>…</head> 文檔的信息
<meta> HTML 文檔的元信息
<title>…</title> 文檔的標題
<link> 文檔與外部資源的關系
<style>…</style> 文檔的樣式信息
<body>…</body> 可見的頁面內容
<!--…--> 注釋
<meta>標記
<meta>的主要作用,是提供網頁的元信息。比如:指定網頁的搜索關鍵字。
<meta>標記有兩個屬性:http-equid和name。
1.http-equiv屬性
功能:模擬http協議文件頭信息,當信息從服務器端傳到客戶端時,告訴瀏覽器如何正確的顯示網頁內容。
http-equiv屬性一般要與content屬性配合使用。Content屬性指定信息的詳細參數。
?。?)設置網頁的字符集
<meta http-equiv=“Content-Type” content=“text/html;
charset=utf-8” />
?。?)網頁自動刷新
<meta http-equiv=“refresh” content=“2”> //每隔2秒鐘,自動刷新網頁一次
<meta http-equiv=“refresh” content=“2;url=http://www.ifeng.com”> //2秒鐘后,跳轉到鳳凰網
2.name屬性
name屬性主要用于設置網頁的搜索關鍵字、版權信息、作者等。
?。?)設置網頁搜索關鍵字
<meta name=“keywords” content=“網站建設,企業網站建設,網站制作,網上商城,網站推廣,域名注冊,中企動力” />
?。?)設置網頁描述信息
<meta name=“description” content=“網站建設、網站制作專家中企動力,為您提供專業的展示型網站建設、營銷型網站建設、獨立商城系統網站建設、并提供一體化的企業郵箱”>
HTML文本修飾標記
<b></b>:加粗bold。如:<b>HTML文件</b>
<i></i>:斜體italic。如:<i>HTML文本</i>
<u></u>:下劃線underline。如:<u>HTML文本</u>
<s></s>:刪除線strike。如:<s>刪除線</s>
<sup></sup>上標。
<sub></sub>下標。
<font></font>字體標記
屬性:Size:文本大小,取值1-7。1小,7大。
Color:顏色值。
Face:字體,楷體、黑體、宋體…
HTML排版標記
1.<p></p>表示一個段落。
常用屬性:align:水平對齊方式,取值:left(左)、 center(居中)、 right(右)
舉例:<p align=“center”>水平對齊方式居中對齊</p>
2.換行標記<br>
3.標題標記:<h1>……<h6>
功能:定義各種標題。
屬性:align水平對齊方式,取值:left、center、right。
語法:<h1 align = “left | center | right”></h1>
<div>和<span>標記
<div>是沒有任何意義的標記,但是,又是使用最多的標記。<div>一般要與CSS配合使用。<div>是一個塊元素。
<span>是沒有任何意義的標記,但是,又是使用最多的標記。<span>要與CSS配合使用。<span>是行內元素。
?。?)塊元素
塊元素,一般是單獨占一行,不管內容多少,總是占一行。
塊元素有哪些?<div>、<p>、<h1>、<h2>、<pre>等
?。?)行內元素
行內元素,不會單獨占一行。
行內元素的寬度,主要是根據內容決定。
多個行內元素,會排在同一行。
行內元素有哪些?<font>、<b>、<i>、<u>、<sub>、<sup>等
結論:在標記嵌套時,一般是塊元素中嵌套行內元素。
HTML項目符號(無序列表)
<ul>
<li>內容1</li>
<li>內容2</li>
<li>內容3</li>
</ul>
<ul>或<li>的常用屬性
type:項目符號的類型,取值:disc(小黑點)、circle(空心圓)、square(實心方塊)
注意:在HTML標記中,內容應該放在最底層標記中。
注意:<ul>和<li>是塊元素。
HTML編號列表(有序列表)
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<ol>或<li>的常用屬性
type:編號類型,取值:1、a、A、i、I
start:從第幾個開始編號(數字)。
圖片標記:行內元素,單邊標記
語法格式:<img 屬性 = “值”>
常用屬性:
Width:圖片寬度
Height:圖片高度
Border:圖片邊框粗細。
Src:圖片的路徑(相對路徑)
Align:圖片的水平對齊方式,取值:left、center、right
Hspace:圖片與左右文字之間的距離(水平距離)
Vspace:圖片與上下文字之間的距離(垂直距離)。
- 注意事項
如果圖片想等比例縮放,只需要指定width或height其中一個。
Align屬性只能讓文本居中,不能讓圖片單獨居中。
Align可以實現“圖文混排”效果。align = “left | right”
要想讓圖片實現居中效果,可以給圖片增加一個<div>元素
表單
1、表單的概念
表單主要用來獲取客戶端用戶數據(信息)的。如:注冊表單、查詢表單、登錄表單等。
2、表單的工作原理
瀏覽有表單的網頁,填寫一些必要的信息,然后點擊某個按鈕進行提交。
這些表單數據,通過互聯網,傳遞到了服務器上。
服務器上有專門的程序,對表單數據進行驗證。如果驗證成功,將你的數據存入數據庫(MySQL),則返回一個驗證成功的信息。如果驗證失敗,將返回一個錯誤信息。
從上面表單的工作原來看:表單的制作分兩個部分,一是前臺頁面的制作,二是后臺PHP對表單數據的處理。
3、表單的結構
<form>標記屬性——塊元素
name:給表單起個名字。這個名字主要給JavaScript來用。JS主要用來做客戶端表單驗證。
method:表單的提交方式,取值:get或post。
action:指定表單的處理程序,一般是PHP文件。
如果action為空,那么表單數據發到哪里去了?
結果:那么表單數據提交給了它自己來處理。
enctype:指定表單數據的編碼方式(解密方式)。這個屬性只能用在 method = “post” 的情況下。
application/x-www-form-urldecoded //默認的加密方式
multipart/form-data //如果你上傳文件,該值必須它自己。
轉載請保留本文網址
http://www.wearetheenergyrevolution.org/qqwd/webqd/269.html
上一篇:
WEB前端培訓:CSS3 3D 轉換
下一篇:沒有了