1. 程式人生 > >HTML學習總結—

HTML學習總結—

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一個標題</h1>
    <p>我的第一個段落。</p>
</body>
</html>
  • <!DOCTYPE html> 宣告為 HTML5 文件
  • <html> 元素是 HTML 頁面的根元素
  • <head> 元素包含了文件的元(meta)資料,如 <meta charset="utf-8"> 定義網頁編碼格式為 utf-8
  • <title> 元素描述了文件的標題
  • <body> 元素包含了可見的頁面內容
  • <h1> 元素定義一個大標題
  • <p> 元素定義一個段落
  • HTML 不是一種程式語言,而是一種標記語言
  • "HTML 標籤" 和 "HTML 元素" 通常都是描述同樣的意思.
  • <!DOCTYPE>宣告有助於瀏覽器中正確顯示網頁。

    網路上有很多不同的檔案,如果能夠正確宣告HTML的版本,瀏覽器就能正確顯示網頁內容。

    doctype 宣告是不區分大小寫的

  • HTML 標題(Heading)是通過<h1> - <h6> 標籤來定義的.

  • HTML 段落是通過標籤 <p> 來定義的.

  • HTML 連結是通過標籤 <a> 來定義的.

  • HTML 影象是通過標籤 <img> 來定義的.以上均是HTML元素的意思。<br/>換行的意思.HTML 提示:使用小寫標籤

  • HTML 元素可以設定屬性,  屬性一般描述於開始標籤
    ,  屬性總是以名稱/值對的形式出現.通用屬性:class,ID,style,title。
  • <h1> 定義最大的標題。 <h6> 定義最小的標題。請確保將 HTML 標題 標籤只用於標題。不要僅僅是為了生成粗體大號的文字而使用標題。<hr>元素可用於分隔內容。
  • <!-- 這是一個註釋 -->
  • HTML 使用標籤 <b>("bold") 與 <i>("italic") 對輸出的文字進行格式, 如:粗體 or 斜體
  • <a> 超連結可以是一個字,一個詞,或者一組詞,也可以是一幅影象,您可以點選這些內容來跳轉到新的文件或者當前文件中的某個部分。
  • <head> 元素包含了所有的頭部標籤元素。在 <head>元素中你可以插入指令碼(scripts), 樣式檔案(CSS),及各種meta資訊。可以新增在頭部區域的元素標籤為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.。

  • <title> 在 HTML/XHTML 文件中是必須的。定義了瀏覽器工具欄的標題

  • <base> 標籤描述了基本的連結地址/連結目標,該標籤作為HTML文件中所有的連結標籤的預設連結:<base> 是基於的意思,比如<base href="http://www.lanrentuku.com">那麼就是說,網頁中所有的路徑都相對 http://www.lanrentuku.com的根目錄的,一個單獨的網頁中就可以寫<img src="images/xx.jpg">,這樣圖片也能顯示,但是你跟本找不到圖片夾,因為都在http://www.lanrentuku.com下.

  • <link> 標籤定義了文件與外部資源之間的關係。<link> 標籤通常用於連結到樣式表:<link rel="stylesheet" type="text/css" href="mystyle.css">。rel:規定當前文件與被連結文件之間的關係。type:規定被連結文件的 MIME 型別。href:規定被連結文件的位置。

  • <style> 標籤定義了HTML文件的樣式檔案引用地址.在<style> 元素中你也可以直接新增樣式來渲染 HTML 文件:

    <style type="text/css">
    body {background-color:yellow}
    p {color:blue}
    </style>
  • <meta> 標籤提供了元資料.元資料也不顯示在頁面上,但會被瀏覽器解析。META 元素通常用於指定網頁的描述,關鍵詞,檔案的最後修改時間,作者,和其他元資料。

  • <script>標籤用於載入指令碼檔案,如: JavaScript。

  • CSS (Cascading Style Sheets) 用於渲染HTML元素標籤的樣式.CSS 是在 HTML 4 開始使用的,是為了更好的渲染HTML元素而引入的.

  • CSS 可以通過以下方式新增到HTML中:

  • 內聯樣式- 在HTML元素中使用"style" 屬性
  • <body style="background-color:yellow;">
    <h2 style="background-color:red;">這是一個標題</h2>
    <p style="background-color:green;">這是一個段落。</p>
    </body>
  • 內部樣式表 -在HTML文件頭部 <head> 區域使用<style> 元素 來包含CSS
  • <head>
    <style type="text/css">
    body {background-color:yellow;}
    p {color:blue;}
    </style>
    </head>

     

  • 最好的方式是通過外部引用CSS檔案.當樣式需要被應用到很多頁面的時候,外部樣式表將是理想的選擇。使用外部樣式表,你就可以通過更改一個檔案來改變整個站點的外觀。

  • 外部引用 - 使用外部 CSS 檔案

  • <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
    

    CSS修飾標籤的樣式,有 "內聯" 和 "外引" 兩種方式。

    對於大部分標籤,以上兩種方法均可,且修改父級標籤,子級標籤特性也會改變。但某些標籤確無法通過修改父級標籤來改變子級標籤特性,如a標籤,修改其顏色特性,必須直接修改 a 標籤的特性才可。

  • 定義影象的語法是:<img src="url" alt="some_text" width="304" height="228" >alt 屬性用來為影象定義一串預備的可替換的文字。在瀏覽器無法載入影象時,替換文字屬性告訴讀者她們失去的資訊。此時,瀏覽器將顯示這個替代性的文字而不是影象。

  • HTML 支援有序、無序和定義列表:<ol>,<ul>,<li>

  • <ul><li>Coffee</li><li>Tea</li> <li>Milk</li></ul>,每一列代表每一行,自動換行。自定義列表以 <dl> 標籤開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。

  • HTML 可以通過 <div> 和 <span>將元素組合起來。

    大多數 HTML 元素被定義為塊級元素內聯元素

    塊級元素在瀏覽器顯示時,通常會以新行來開始(和結束)。<h1>, <p>, <ul>, <table>

  • 內聯元素在顯示時通常不會以新行開始。 <b>, <td>, <a>, <img>

  • <p>我的母親有 <span style="color:blue;font-weight:bold">藍色</span> 的眼睛</p>

  • <div style="color:#0000FF">

    • <h3>這是一個在 div 元素中的標題。</h3>

    • <p>這是一個在 div 元素中的文字。</p>

  • </div>

  • HTML 佈局 - 使用<div> 元素

  • HTML 表單用於收集不同型別的使用者輸入。
  • 通過使用框架,你可以在同一個瀏覽器視窗中顯示不止一個頁面。

    <iframe src="demo_iframe.htm" width="200" height="200"></iframe>,在原本頁面中顯示demo_iframe.htm頁面。

  • <iframe src="demo_iframe.htm" name="iframe_a"></iframe>

  • <p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

  • iframe可以顯示一個目標連結的頁面

  • <script> 標籤用於定義客戶端指令碼,比如 JavaScript。<script> 元素既可包含指令碼語句,也可通過 src 屬性指向外部指令碼檔案。<script> document.write("Hello World!")</script>, 指令碼可寫響應函式。