前端界面之html學習筆記

html目前常用的兩種文檔類型是xhtml 1.0和html5

html註釋

<!-- 這是一段註釋  -->

html標籤

<!-- 成對出現的標籤  -->
<body>......</body>
<p>......</p>
<div>......</div>
<b>......</b>

<!-- 單個出現的標籤  -->
<br />
<img src="..." />
<input type="..." />

<!-- 標籤之間的嵌套  -->
<p>
    <span>...</span>
    <a href="...">...</a>
</p>
<div>
      <h3>...</h3>
      <div>
              <span>...</span>
              <p>...</p>
      </div>
</div>

html標題: 通過 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,標籤可以在網頁上定義6種級別的標題

html段落:<p>標籤定義一個文本段落,一個段落含有默認的上下間距,段落之間會用這種默認間距隔開

html換行:可以在代碼的段落中插入<br />來強制換行

html圖像: 

<img src="images/pic.jpg" alt="產品圖片" />
  • 絕對地址:相對於磁盤的位置去定位文件的地址
  • 相對地址:相對於引用文件本身去定位被引用的文件地址

html鏈接:<a>標籤在網頁上定義一個鏈接地址,通過src屬性定義跳轉地址,title屬性定義鼠標懸停時彈出提示文字框。 

html有序列表:在網頁上定義一個有編號的內容列表可以用<ol>、<li>配合使用來實現

 html無序列表:在網頁上定義一個無編號的內容列表可以用<ul>、<li>配合使用來實現

定義列表通常用於術語的定義。<dl>標籤表示列表的整體。<dt>標籤定義術語的題目。<dd>標籤是術語的解釋。一個<dl>中可以有多個題目和解釋

html表單

<!-- form定義一個表單區域,action屬性定義表單數據提交的地址,
method屬性定義提交的方式。   -->
<form action="http://www..." method="get">

<!-- label標籤定義表單控件的文字標註,input類型爲text定義了
一個單行文本輸入框  -->
<p>
<label>姓名:</label><input type="text" name="username" />
</p>

<!-- input類型爲password定義了一個密碼輸入框  -->
<p>
<label>密碼:</label><input type="password" name="password" />
</p>

<!-- input類型爲radio定義了單選框  -->
<p>
<label>性別:</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>

<!-- input類型爲checkbox定義了單選框  -->
<p>
<label>愛好:</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>

<!-- input類型爲file定義上傳照片或文件等資源  -->
<p>
<label>照片:</label>
<input type="file" name="person_pic">
</p>

<!-- textarea定義多行文本輸入  -->
<p>
<label>個人描述:</label>
<textarea name="about"></textarea>
</p>

<!-- select定義下拉列表選擇  -->
<p>
<label>籍貫:</label>
<select name="site">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">廣州</option>
    <option value="3">深圳</option>
</select>
</p>

<!-- input類型爲submit定義提交按鈕  
     還可以用圖片控件代替submit按鈕提交,一般會導致提交兩次,不建議使用。如:
     <input type="image" src="xxx.gif">
-->
<p>
<input type="submit" name="" value="提交">

<!-- input類型爲reset定義重置按鈕  -->
<input type="reset" name="" value="重置">
</p>

</form>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章