html基礎學習

標籤：技術分享   可重複   不可用   技術   下標   meta   沒有   rip   使用者數   

一、HTML概述1.簡介

HTML：Hyper Text Markup Language 超文本標記語言

註：“超文本”，就是指頁面內可以包括除了文字以外的元素，如：圖片、連結、音樂以及程式等。

2.特點

①使用標籤來指明頁面的不同內容。<head></head>

②平台無關性：HTML文檔不含任何與平台和程式相關的資訊，它們可以被任何文字編輯器讀取。

註：HTML文檔（也叫web頁面），包含了HTML標籤及常值內容。

二、HTML1.基本結構

2.基本標籤（1）文本①標題：h1~h6    eg. <h1>大家好~我是一級標題（最大）</h1>
②<font>標籤     eg.<font size=6 face="黑體" color=red>歡迎光臨我的首頁</font>   註：size只能設定七種字型大小
③<label>標籤    eg.<label for="name">使用者名稱</label>         <input type="text" id="name" name="name"/>     註：for屬性可以綁定一個控制項，此標籤，會將焦點轉到綁定的控制項上。
④格式標籤粗體：<b>…</b>
斜體：<i>…</i>底線：<u>…</u>
刪除線：<strike>...</strike>
強調：<strong>…</strong>
下標：_...
上標：^...   eg.<b>x+y=x²<b/>
⑤<span>標籤    用來組合行內元素，span的前後不會換行。   eg.<p>hello</p>        <span style="color:red">*</span>
⑥段落標籤換行：<br/>段落：<p>....</p>
⑦<div>標籤區塊層級元素，div的前後會換行。eg.<div id="login">
<label for="username">使用者名稱</label><input type="text" id="username"/>
<span style="color:red"> * </span>
<br/>
<label for="psd">密&nbsp;&nbsp;碼</label><input type="password" id="psd"/>
<span style="color:red">*</span>
</div>
<div id="tip" style="font-size:12px;">
說明：使用者名稱和密碼必填
</div>
（2）圖片<img src="url" width="寬度值（單位：像素點）" height="高度值" alt="說明（連結不存在時的顯示）">eg.<img height="75px" width="311px" alt="wust" src="http://www.wust.edu.cn/images/141638742011865585.png">註：可以修改src後看alt的功能。（3）超連結<a href="url">連結文字</a>eg.<a href="http://www.wust.edu.cn">武漢科技大學</a>
<a href="E:\KwDownloadx\mp3\your bag.mp3">音樂</a>
<a href="E:\娛樂\搞笑\flash\交通安全.swf">動漫</a>
（4）列表①無序列表（沒有序號，用其他符號表示）<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ul>

②有序列表<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

（5）表格

（6）特殊標籤由於大於符號與小於符號與標籤的符號有歧義，不可用，故而有特殊標籤。HTML注釋為：<!--注釋內容-->

3.Form表單（1）介紹 form：為使用者輸入建立表單。其中可包括文字框、密碼框、單/複選框、列表框、按鈕等。表單通常用於向指定的URL提交使用者資料。
（2）基本結構
（3）常用元素①文字框、密碼框
②單/複選框

③列表框
預設單選，多選：添加屬性mutiple:multiple
④檔案域
⑤文本地區
⑥提交和重設按鈕/一般按鈕/圖片按鈕


⑦fieldset標籤：將表單內的相關元素分組

三、FAQ1.id與name的區別An:   id唯一，name可重複。用途不同。name用途：

用途1:作為可與伺服器互動資料的HTML元素的伺服器端的標示，比如input、select、textarea、和button等。我們可以在伺服器端根據其Name通過Request.Params取得元素提交的值。

用途2:HTML元素Input type=‘radio‘分組，我們知道radio button控制項在同一個分組類，check操作是mutex的，同一時間只能選中一個radio，這個分組就是根據相同的Name屬性來實現的。

 用途3: 建立頁面中的錨點，我們知道<a href="URL">link</a>是獲得一個頁面超級連結，如果不用href屬性，而改用Name，如：<a name="PageBottom"></a>，我們就獲得了一個頁面錨點。

用途4:作為對象的Identity，如Applet、Object、Embed等元素。比如在Applet對象執行個體中，我們將使用其Name來引用該對象。

用途5: 在IMG元素和MAP元素之間關聯的時候，如果要定義IMG的作用區，需要使用其屬性usemap，使usemap="#name"(被關聯的MAP元素的Name)。

用途6: 某些特定元素的屬性，如attribute，meta和param。例如為Object定義參數<PARAM NAME = "appletParameter" VALUE = "value">或Meta中<META NAME = "Author" CONTENT = "Dave Raggett">。

2.div標籤的理解div標籤用於劃分一塊地區，然後CSS等用於對於塊內的填充。可以div中嵌diveg.一個例子，修改其中的一些值，去理解這個布局。此處只列出body部分的語句。<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的網頁標題</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left">
<b >菜單</b><br>
HTML<br>
CSS<br>
JavaScript<br>
</div>

<div  id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
內容內容在這裡
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center">哈哈哈
</div>

</div>

html基礎學習