html常用標籤及其屬性

<!DOCTYPE> 聲明位於文檔中的最前面的位置,處於 <html> 標籤之前。此標籤可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。
作用:聲明文檔的解析類型(document.compatMode),避免瀏覽器的怪異模式。
document.compatMode:
BackCompat:怪異模式,瀏覽器使用自己的怪異模式解析渲染頁面。
CSS1Compat:標準模式,瀏覽器使用W3C的標準解析渲染頁面。
這個屬性會被瀏覽器識別並使用,但是如果你的頁面沒有DOCTYPE的聲明,那麼compatMode默認就是BackCompat
meta介紹
<meta>元素可提供有關頁面的元信息(meta-information),針對搜索引擎和更新頻度的描述和關鍵詞。
<meta>標籤位於文檔的頭部,不包含任何內容。
<meta>提供的信息是用戶不可見的
meta標籤的組成:meta標籤共有兩個屬性,它們分別是http-equiv屬性和name 屬性,不同的屬性又有不同的參數值,這些不同的參數值就實現了不同的網頁功能。 
(1)name屬性: 主要用於描述網頁,與之對應的屬性值爲content,content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。    
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
<meta name="description" content="老男孩培訓機構是由一個很老的男孩創建的">
(2)http-equiv屬性:相當於http的文件頭作用,它可以向瀏覽器傳回一些有用的信息,以幫助正確地顯示網頁內容,與之對應的屬性值爲content,content中的內容其實就是各個參數的變量值。
<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意後面的引號,分別在秒數的前面和網址的後面)
<meta http-equiv="content-Type" charset=UTF8">
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /> 
<title>oldboy</title>
    <link rel="icon" href="http://www.jd.com/favicon.ico">
    <link rel="stylesheet" href="css.css">
    <script src="hello.js"></script> 
<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.
<p>: 段落標籤. 包裹的內容被換行.並且也上下內容之間有一行空白.
<b> <strong>: 加粗標籤.
<strike>: 爲文字加上一條中線.
<em>: 文字變成斜體.
<sup><sub>: 上角標 和 下角表.
<br>:換行.
<hr>:水平線
特殊字符:
      &lt; &gt;&quot;&copy;&reg;
<div></div><div>只是一個塊級元素,並無實際的意義。主要通過CSS樣式爲其賦予不同的表現. 
<span></span><span>表示了內聯行(行內元素),並無實際的意義,主要通過CSS樣式爲其賦予不同的表現.
塊級元素與行內元素的區別
所謂塊元素,是以另起一行開始渲染的元素,行內元素則不需另起一行。如果單獨在網頁中插入這兩個元素,不會對頁面產生任何的影響。
這兩個元素是專門爲定義CSS樣式而生的。
<img>
src: 要顯示圖片的路徑.
alt: 圖片沒有加載成功時的提示.
title: 鼠標懸浮時的提示信息.
width: 圖片的寬
height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
<a href="" target="_blank" >click</a>
href屬性指定目標網頁地址。該地址可以有幾種類型:
    絕對 URL - 指向另一個站點(比如 href="http://www.jd.com)
    相對 URL - 指當前站點中確切的路徑(href="index.htm")
    錨 URL - 指向頁面中的錨(href="#top")
<ul>: 無序列表 [type屬性:disc(實心圓點)(默認)、circle(空心圓圈)、square(實心方塊)]
<ol>: 有序列表
         <li>:列表中的每一項.
<dl>  定義列表
         <dt> 列表標題
         <dd> 列表項
<table>
         <tr>
                <td>標題</td>
                <td>標題</td>
         </tr>
         <tr>
                <td>內容</td>
                <td>內容</td>
         </tr>
</table>


<tr>: table row
<th>: table head cell
<td>: table data cell
屬性:
    border: 表格邊框.
    cellpadding: 內邊距
    cellspacing: 外邊距.
    width: 像素 百分比.(最好通過css來設置長寬)
    rowspan:  單元格豎跨多少行
    colspan:  單元格橫跨多少列(即合併單元格)
<form>

<input>
<1> 表單類型
type:        text 文本輸入框
             password 密碼輸入框
             radio 單選框
             checkbox 多選框  
             submit 提交按鈕            
             button 按鈕(需要配合js使用.) button和submit的區別?
             file 提交文件:form表單需要加上屬性enctype="multipart/form-data" 
            上傳文件注意兩點:
                     1 請求方式必須是post
                     2 enctype="multipart/form-data"
<2> 表單屬性
name: 表單提交項的鍵.
      注意和id屬性的區別:name屬性是和服務器通信時使用的名稱;
      而id屬性是瀏覽器端使用的名稱,該屬性主要是爲了方便客戶端編程,而在css和javascript中使用的
value:表單提交項的值.對於不同的輸入類型,value 屬性的用法也不同:
      type="button", "reset", "submit" - 定義按鈕上的顯示的文本
      type="text", "password", "hidden" - 定義輸入字段的初始值
      type="checkbox", "radio", "image" - 定義與輸入相關聯的值
checked:  radio 和 checkbox 默認被選中
readonly: 只讀. text 和 password
disabled: 對所用input都好使.

<select> 下拉選標籤屬性
          name:表單提交項的鍵.
          size:選項個數
          multiple:multiple 
                 <optgroup>爲每一項加上分組
                 <option> 下拉選中的每一項 屬性:
                       value:表單提交項的值.   
                       selected: selected下拉選默認被選中

<textarea> 多行文本框
<form id="form1" name="form1" method="post" action="">
        <textarea cols=“寬度” rows=“高度” name=“名稱”>
                   默認內容
        </textarea>
</form>

<label>標籤
定義:<label> 標籤爲 input 元素定義標註(標記)。
說明:
1 label 元素不會向用戶呈現任何特殊效果。
2 <label> 標籤的 for 屬性值應當與相關元素的 id 屬性值相同。
<form method="post" action="">
        <label for=“username”>用戶名</label>
        <input type=“text” name=“username” id=“username” size=“20” />
</form>

<fieldset>標籤
<fieldset>
    <legend>登錄吧</legend>
    <input type="text">
</fieldset>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章