1. 程式人生 > >第一天 學習html 基礎知識易混淆弄錯的知識點

第一天 學習html 基礎知識易混淆弄錯的知識點

1.錨記

能夠快速定位到指定位置文件。

eg: 1.1 回到文件頂部

<a href="#top">回到頂部</a>

       1.2 回到指定id 處

<h2 ><a href="#live"  id="background">生活背景</a></h2>

<p  id="live">生活背景balabalabala</p>  <a href="#background">回到生活背景目錄</a>

2.標籤

<!DOCTYPE >指定文件型別。eg:html,xhtml 等.它是指示 web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。其內宣告dtd

<html></html> 為根標籤。<head></head> 與body 標籤為兄弟關係。標題title標籤位於head 中。標題h1-h6位於body中。標題title 類似於開啟京東網頁顯示的logo. "京東(JD.COM)-正品低價、品質保障"

<img /> <br />換行  <hr />水平分隔符  <base />只能包含在<head></head>中增加預設target、URL 屬性

<input />單標籤

eg: 

<html>

      <head>

                   <title></title>

                  <base target="_blank" />

     </head>

      <body>

                  <a href="http://www/sina.com" ></a>        <!--  在a 連結中 預設是 _self 在原頁面開啟  _blank 為新啟一個視窗開啟 -->

                 <a href="http://www/sina.com"  target="_self"></a>   

      </body>

</html>

3.表格

caption 為table 私有,為table 的標題。

通常table 三參為0,border,cellpadding,cellspacing。

border 指邊框大小。

cellspacing指一個單元格與(table邊框)、單元格(上、下、左、右)間的距離。

cellpadding指內容與單元格邊框(左,上,下)間的距離。

table在以前樣式中大幅度使用,後 來程式碼重構,用 div+css 來渲染,table 只是用來儲存資料。

table 只有行元素<tr>,單元格<td>,無列元素。

<th>為表頭,比<td>中的元素加粗了。

4.表單

表單由表單控制元件(input等),表單域(form提交),提示資訊(密碼輸入錯誤,手機號碼等文字提示)組成。

表單域是表明當有多個表單提交的時候,用於區分,如在一個頁面當中有多個搜尋框可供提交搜尋。

下拉選框 <select></select>

裡面可以包含多個<option></option>選項

<option value="" selected="seleted">請選擇</option>  value屬性用於選中後提交到後臺的值。selected 屬性用於選擇預設選中的值。

textarea 用於大文字的填寫。<textarea></textarea>

提交按鈕也可用影象代替 <input type="img" src="1.jpg" />

radio 用於單選框 ,<input type="radio" name="sex" />男.  預設選中,需新增選中屬性 checked="checked"

<input type="radio" name="sex" />女 同一內容要有相同name,才會只能選擇一個。

checkbox 複選框  <input type="checkbox" name="para" />嫵媚  <input type="checkbox" name="para" />可愛。name 屬性的值也應一致。預設選中,需新增選中屬性 checked="checked".

<label></label>標籤可用於快速定位到輸入框。eg:

 <label>

          使用者名稱:<input type="text" />            

</lable>

點選使用者名稱 滑鼠游標定位到輸入框。

for 屬性規定label 與那個表單元素繫結

<label for="position"></label>

  使用者名稱:<input type="text"  id="position"/>