HTML/CSS從零開始-HTML基礎(一)

最後更新：2016-10-02 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

一、web標準1.1結構

(1)xhtml(Extensible Hypertext Markup language) 可擴充超文字標記語言 (HTML)
(2)W3C(world wide web consortium)全球資訊網聯盟

a、制定了結構（xhtml、xml）、表現（css）、標準。

1.2表現

（1）css(cascading style sheets)層疊樣式表

1.3行為

（1）ECMA（Europan Computer Manufactures Association）歐洲電腦場商聯合會
a、制定了行為 DOM(Document Object Model) 文字物件模型
b、ECMAscript標準

二、HTML基本結構

<!doctype html>

三、基本文法3.1常規標記

<標記屬性1="屬性值1" 屬性2="屬性值2" ></標記>
如下：
<strong></strong> <b></b> 
<em></em> <i></i>

3.2空標記

<標記屬性="屬性值"/>
如下：
<hr/>                    <！--水平線-->
<br/>                    
<img src="路徑"/>        

 空格

四、常見標記（標籤）

4.1列表

a、有序列表
<ol> ordered
<li></li>
<li></li>
<li></li>
</ol>

b、無序列表
<ul> unordered
<li></li>
<li></li>
<li></li>
</ul>

c、自訂欄表
<dl> definition list
<dt>被解釋</dt>
<dd>解釋</dd> definition description
</dl>

說明：dd可以重複,但是dt只允許有一個;
有序列表中參數 tyle="A"，start="3",//第一個序列從C開始。

4.2圖片標籤

4.3超連結

<a href="路徑地址" target="_blank"></a>

路徑分為：絕對路徑（https//www.baidu.com）,相對路徑如（images/inder.html）.
target預設屬性值為_self;_blank為開啟新視窗

4.4塊標籤

<div></div>
說明：a、塊之間自動換行
b、如果div塊限定寬、高，內容為中文時，自動換行；如果是英文不換行，會溢出。
<span></span>
說明：a、span塊之間不換行，寬高不能限定，隨著文本的長度變化。

4.5表格標籤

1、文法：<table width="" height="" border="1（表框像素）"bordercolor="表格框顏色" cellspacing="0（儲存格間距）" cellpadding="內容離左邊框像素">
2、說明;在表格給定寬高後,用屬性cellpadding時，如果給定寬度超出設定的寬高，表格會被撐開。
      <tr>
      <th><th>
      <th><th>   
      <th><th>
      </tr>
      <tr>
      <td><td>
      <td><td>   
      <td><td>
      </tr>

3、儲存格合并屬性
   colspan 合并列
   rowspan 合并行
   文法：rowspan="3" //合并三行

4、表單

a、表單框
文法：<form name="表單名稱" method="post/get" action=""></form>
說明：

b、文字框
<input type="text" value="預設值"/>

c、密碼框
<input type="password" placeholder="提示資訊"/>

d、單選框
<input type="radio" name="自定名(一致，必寫)"/>
如下:
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女

e、多選框
<p>擇偶標準</p>
<input type="checkbox" name="boy" value="185"/>185
<input type="checkbox" name="boy" value="黑"/>黑
<input type="checkbox" name="boy" value="男"/>男
<input type="chechbox" name="boy" value="東北"/>東北

disabled="disabled"(禁用、禁選)
checked="checked"(預設選中)
f、重設
(1)<input type="reset" value="預設值"/> （重設，清空以上填寫的資料）
g、按鈕
(1)<input type="button" value="只是起跳轉，不提提交"/>
(2)<input type="submit" value="既跳轉，又提交"/>

說明：按鈕作為標籤時<button>按鈕</button>既跳轉，又提交

h、下拉式清單
(1)<select name="">
<option></option>
<option></option>
</select>

i、文本域
<textarea cols="寬" rows="行數" name="">
</textarea>

註明：
（1）以上文字框放在表單form裡；

（2）在form中屬性method的屬性值post/get的區別？
    a、get是從伺服器上擷取資料，post是向伺服器傳送資料；
    b、get是把參數值加到提交表單的Action的屬性所指的URL中，值和表單內的各個欄位一一對應，在URL中可以看見，
       post是通過HTTP，post機制將表單內的各個欄位與其內容放置在HTML HEADER內一起傳送給ACTION屬性的URL地址，使用者看不見這個       過程。
   c、對於get方式，伺服器端的ReqestQueryString擷取變數的值，對於post方式伺服器用Request.Form擷取提交資料。
   d、get資料轉送量小不大於2kb,post的傳輸量大，一般不受限制
   f、get安全性低，post安全性高，但傳輸效率高

（3）value在input中的用法
a、type="button" /"reset"/"submit"；表示按鈕上的文本
b、type="text"/"password";表示初始值
c、type="check"/"radio"定義與輸入相關值

（4）表單嵌套
<table>
<form>
<tr>
     <td><input type="text" placeholder="填寫使用者名稱"></td>
     <td><input type="password" placeholder="請輸入密碼"></td>
</tr>
<tr>
     <td><input type="button" value="忘記密碼？"></td>
     <td><button>登入</button></td>
</tr>
</form>
</table>

HTML/CSS從零開始-HTML基礎(一)

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

HTML/CSS從零開始-HTML基礎(一)

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support