HTML 介绍及标签
HTML
htyper text markup language 即超文本標記語言
超文本: 就是指頁面內可以包含圖片、鏈接,甚至音樂、程序等非文字元素。
標記語言: 標記(標簽)構成的語言.
標簽
標簽是由一對尖括號包裹的單詞構成 例如: <html></html>;所有標簽中的單詞不可以數字開頭,標簽不區分大小寫,標簽可以嵌套但是不能交叉嵌套。
標簽可以擁有屬性,屬性通常以鍵值對出現,屬性名字必須全部小寫,屬性值必須以 " 或 ' 包裹,如:
<!DOCTYPE html> 標簽
現在瀏覽器對 html 頁面的模式有兩種:
BackCompat:怪異模式,瀏覽器使用自己的怪異模式解析渲染頁面。
CSS1Compat:標準模式,瀏覽器使用W3C的標準解析渲染頁面。
加上 <!DOCTYPE html> 標簽后,瀏覽器使用新的渲染方式,強烈建議啟用。可以使用 window.top.document.compatMode 查看瀏覽器的渲染方式,例如:
head 標簽
<meta>
meta 有兩個屬性,name 和 http-equiv 。
name 屬性主要用于描述網頁,與之對應的屬性值為content,content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的,如:
http-equiv 屬性主要向瀏覽器傳回一些有用的信息,以幫助正確和精確地顯示網頁內容
<meta http-equiv="Refresh" content="2;URL=https://www.klvchen.com"> //注意后面有分號,意思是在2秒數后跳到后面的網址上<meta http-equiv="content-Type" charset=UTF8"> // 網址的編碼為 UTF8<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /> //模擬使用 IE7 標準的文檔模式非meta標簽
<title>klvchen - 博客園</title> // 瀏覽器標題欄或狀態欄上展示標題 <link rel="icon" href="http://www.jd.com/favicon.ico"> // 瀏覽器標題欄或狀態欄上展示標題旁的小圖標 <link rel="stylesheet" href="css.css"> // 頁面調用的 css 文件 <script src="hello.js"></script> // 頁面調用的 js 文件body 標簽
標簽分為塊級標簽和內聯標簽
塊級標簽的特點:
內聯標簽的特點:
塊級標簽:
1.<p> : 標簽定義段落
<p>標簽定義段落</p> <p>標簽定義段落</p>2.<h1> to <h6> : 定義 HTML 標題
<h1>標題1</h1> <h2>標題2</h2> <h3>標題3</h3> <h4>標題4</h4> <h5>標題5</h5> <h6>標題6</h6>3.<ol> : 定義有序列表
<ol><li>Coffee</li><li>Tea</li><li>Milk</li> </ol>4.<ul> : 定義無序列表
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>5.<div> : 標簽定義 HTML 文檔中的一個分隔區塊或者一個區域部分
<div style="color:#0000FF"><h3>這是一個在 div 元素中的標題。</h3><p>這是一個在 div 元素中的文本。</p> </div>6.<hr> : 定義水平線
<hr>內聯標簽:
1.<a> : 定義超文本鏈接
<a href="http://www.klvchen.com">訪問klvchen!</a>2.<img> : 定義圖像
<img src="1.png" alt="Smiley face" width="42" height="42">3. <sub> : 定義下標文本。<sup>定義上標文本。
<p>這個文本包含 <sub>下標</sub>文本。</p> <p>這個文本包含 <sup>上標</sup> 文本。</p>4. <textarea> : 定義多行的文本輸入控件。
<textarea rows="10" cols="30"> 我是一個文本框。 </textarea>5. <span> : 用于對文檔中的行內元素進行組合。
<p>我的貓有 <span style="color:blue">藍色</span> 的眼睛。</p>6. <b> : 定義文本粗體
<b>字體加粗</b>7. <em> : 定義斜體
<em>斜體</em>8. <del> : 定義被刪除文本
<del>刪除文本</del>9. <select> : 下拉選標簽
出生地:<select># 出生地<select multiple size="2"> # 可以多選,默認顯示兩個選項<option>廣東</option><option>廣西</option><option>海南</option> </select> 出生地:<select><optgroup label="廣東省"><option>廣州</option><option>深圳</option></optgroup><optgroup label="浙江省"><option>杭州</option><option>溫州</option></optgroup> </select>9. <label> : 為 input 元素定義標注
label 元素不會向用戶呈現任何特殊效果。不過,它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本,就會觸發此控件。就是說,當用戶選擇該標簽時,瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。
<label for="ckb">男</label> <input id="ckb" type="checkbox">特殊標簽:
< -- 小于號 < > -- 大于號 > " -- 雙引號 " © -- 版權(copyright) ® -- 注冊商標轉載于:https://www.cnblogs.com/klvchen/p/10143343.html
總結
以上是生活随笔為你收集整理的HTML 介绍及标签的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 关于前端与微信交互账号绑定的问题
- 下一篇: oj教程--贪心