HTML中一些常用tag

定義

HTML 用來描述網頁的被稱之為 HTML標簽(HTML tag)

特點

  • HTML中tag是由尖括號包圍的關鍵詞,比如 <html>
  • <>和關鍵字之間可以有空格,如< html >HTML tag一般是成對出現的.比如<p></p>
  • 成對的tag里,第一個(不帶"/"的)叫開始tag(又叫開放tag),第二個叫結束tag。(又叫閉合tag)

常用tag用法

1.div與span.

 DIV是塊元素,SPAN是內嵌元素。塊元素相當于內嵌元素在前后各加一個`<br>`換行。
 ```<div id="left" class = "left_css">
 <p>左側欄</p>
</div>```

如上所示,
id: 用于標識<div>塊(即<div>tag的名字).
class: 修飾<div>塊的css樣式組.
div也可以是多個div嵌套或者并列使用

<span>屬于行內樣式定義元素,它的插入不會使原有結構產生任何變化,直到設計者為它提供了屬性為止。
<span 屬性="屬性值"></span>

     <p><span style=color:blue>左側欄</span></p>
    </div>```
如上顯示出來的就是藍色體的"左側欄"。
<span>元素的首尾標記必須同時成對出現,一個<span>元素中可以嵌套任意多個<span>元素。
**-
##**2.ul與ol**
    ul-li是沒有前后順序的信息列表。

<ul>
<li>數據結構難</li>
<li>數據結構真難</li>
<li>數據結構真不會</li>
</ul>```
如上代碼所顯示出來的是:

  • 數據結構難
  • 數據結構真難
  • 數據結構真不會

ol-li是有前后順序的信息列表

<ol> 
<li>數據結構難</li>
 <li>數據結構真難</li> 
<li>數據結構真不會</li>
</ol>```
如上代碼所顯示出來的是:
1.  數據結構難
2.  數據結構真難
3.  數據結構真不會
**-
##**3.a和img**##
使用`<a>`標簽可實現超鏈接,只要有鏈接的地方,就會有這個標簽。
 <a  href="目標網址"  title="鼠標滑過顯示的文本">鏈接顯示的文本</a>

  img 元素向網頁中嵌入一幅圖像。
   alt :規定圖像的替代文本。     src :規定顯示圖像的 URL。
**-
##**4.form, button,以及各種input用法**##
####form表單:用來接收用戶輸入信息.
form表單的屬性
     action :設置URL將表單數據發送到相應的服務器。
      method:設置如何發送表單數據,分為兩種方式"post"和"get",默認為"get"方法。

<form method="post" action="http://codefordream.com/form">
<p>
<label>name: <input name="name" /></label>
</p>
<button>submit</button>
</form>


![Paste_Image.png](http://upload-images.jianshu.io/upload_images/3666178-7919e34125f35ffd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
####button按鈕:`<button type="button">Click Me!</button>`
 type="button" 按鈕為普通的可點擊按鈕, 
type="submit" 按鈕為提交按鈕, 
type="reset" 按鈕是重置按鈕
input:
`<input size="10" maxlength="10" id=”name”/>`
size: 表示輸入框可以展示字符的長度。maxlength: 表示輸入框可以展示字符的長度。

####文本框,密碼框.

<form>
姓名:
<input type="text" name="myName">


密碼:
<input type="password" name="pass">
</form>


![Paste_Image.png](http://upload-images.jianshu.io/upload_images/3666178-d824ac6d760b2b9d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
####數字輸入框:`<input type="number" step="1" min="0" max="100" value="1" id="age"/>`
####范圍輸入框:`<input type="range" step="1" min="0" max="100" value="1" id="age"/>`
####選項輸入框`<input type="checkbox" checked id="age"/>`選項一

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/3666178-3523202f2e2f4faa.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

`<input type="radio" checked /> `選項一

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/3666178-82185ec39ac6118b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
##5.pre標簽
HTML里的pre元素,可定義預格式化的文本。在pre元素中的文本會保留空格和換行符。文本顯現為[等寬字體].

<pre>body{
background:#fff;
font: 12px/24px 1.66;
}</pre>


![Paste_Image.png](http://upload-images.jianshu.io/upload_images/3666178-f8d1f77c19b82b55.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

##6.em與i標簽
`<i>`標簽:
        顯示斜體文本效果
        `<i>`標簽告訴瀏覽器將包含其中的文本以斜體字(italic)或者傾斜(oblique)字體顯示;

`<em>`標簽:
       ` <em>`標簽中的文本表示為強調的內容,對于所有瀏覽器的顯示效果來說,是把這段文字用斜體來顯示;
        當引入新的術語或在引用特定類型的術語或概念時作為固定樣式的時候,也可以考慮使用 `<em>` 標簽。

(說明:`<i>` 標簽一定要和結束標簽 `</i>` 結合起來使用;`<em>`標簽也要和結束標簽`</em>`結合使用。)
**-
通常所用的tag大概就是這些,希望大家可以好好掌握!!!

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/3666178-8da8d5c0eab9da57.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1 92
  • HTML標簽解釋大全 一、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,321評論 1 41
  • 0.B/S結構 瀏覽器服務器模式,web瀏覽器是客戶端最主要的應用軟件.將客戶端使用web進行統一,系統功能實現集...
    liusong007閱讀 1,089評論 0 1
  • HTML5 標簽comment 注釋標簽用于在源文檔中插入注釋。注釋內容不會被瀏覽器顯示。為代碼編寫注釋的好處是...
    才気莮孒閱讀 4,087評論 1 25
  • Swift 3.0
    okerivy閱讀 182評論 0 0