HTML常用標簽及其屬性


  • 基本
<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屬性指定信息的詳細參數。

(1)設置網頁的字符集
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />

(2)網頁自動刷新
<meta http-equiv="refresh" content="2">   //每隔2秒鍾,自動刷新網頁一次
<meta http-equiv="refresh" content="2;url=http://www.ifeng.com">   //2秒鍾后,跳轉到鳳凰網


2.name屬性
       name屬性主要用於設置網頁的搜索關鍵字、版權信息、作者等。

(1)設置網頁搜索關鍵字

<meta name="keywords" content="網站建設,企業網站建設,網站制作,網上商城,網站推廣,域名注冊,中企動力" />

(2)設置網頁描述信息
<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>是行內元素。

(1)塊元素
塊元素,一般是單獨占一行,不管內容多少,總是占一行。
塊元素有哪些?<div><p><h1><h2><pre>等

(2)行內元素
行內元素,不會單獨占一行。
行內元素的寬度,主要是根據內容決定。
多個行內元素,會排在同一行。
行內元素有哪些?<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  //如果你上傳文件,該值必須它自己。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM