20200222 HTML重點筆記【2】

2020.02.23更新——
爲了完美適應CSS3,可能得重學一遍HTML5 !
——————————————————————————————————

重要鏈接——HTML 速查列表

HTML 樣式- CSS

CSS (Cascading Style Sheets) 用於渲染HTML元素標籤的樣式!

  1. 本例演示如何使用添加到 head部分的樣式信息對 HTML 進行格式化。
    打開
  2. 如何使用 style 屬性製作一個沒有下劃線的鏈接:打開
  3. 鏈接到一個外部樣式表
<!DOCTYPE html>
<html>
	
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
<h1>我使用了外部樣式文件來格式化文本 </h1>
<p>我也是!</p>
</body>

</html>

顯示結果————
Alt
4. CSS 可以通過以下方式添加到HTML中:
①內聯樣式- 在HTML元素中使用"style" 屬性
學習這個鏈接
②內部樣式表 -在HTML文檔頭部head區域使用style元素來包含CSS
③外部引用 - 使用外部 CSS 文件【the BEST way!】

HTML 圖像

先轉兩個實例:
①本例演示如何在網頁中顯示圖像——打開
②如何將其他文件夾或服務器的圖片顯示到網頁中——打開

  1. 圖像標籤img & 源屬性src
    ①img是空標籤,它只包含屬性,並且沒有閉合標籤。
    ②要在頁面上顯示圖像,你需要使用源屬性(src)。src 指 “source”。源屬性的值是圖像的 URL 地址。
    定義圖像的語法——(URL 指存儲圖像的位置)
<img src="url" alt="some_text">

url例子:如果名爲 “pulpit.jpg” 的圖像位於 www.runoob.com 的 images 目錄中,那麼其 URL 爲 http://www.runoob.com/images/pulpit.jpg

alt: alt屬性用來爲圖像定義一串預備的可替換的文本,由用戶自己定,例如

<img src="boat.gif" alt="Big Boat">

alt的作用是——在瀏覽器無法載入圖像時,替換文本屬性告訴讀者她們失去的信息。此時,瀏覽器將顯示這個替代性的文本而不是圖像。爲頁面上的圖像都加上替換文本屬性是個好習慣,這樣有助於更好的顯示信息,並且對於那些使用純文本瀏覽器的人來說是非常有用的。

  1. height(高度)與 width(寬度)屬性用於設置圖像的高度與寬度
    默認單位爲像素。
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

提示:
指定圖像的高度和寬度是一個很好的習慣。如果圖像指定了高度寬度,頁面加載時就會保留指定的尺寸。如果沒有指定圖片的大小,加載頁面時有可能會破壞HTML頁面的整體佈局。

  1. 創建圖像映射 (map,area)
    本例顯示如何創建帶有可供點擊區域的圖像地圖。其中的每個區域都是一個超級鏈接。
    Alt

HTML 腳本

JavaScript 使 HTML 頁面具有更強的動態和交互性。
script標籤用於定義客戶端腳本,比如 JavaScript。
script元素既可包含腳本語句,也可通過 src 屬性指向外部腳本文件。
JavaScript 最常用於圖片操作、表單驗證以及內容動態更新。

noscript 標籤提供無法使用腳本時的替代內容,比方在瀏覽器禁用腳本時,或瀏覽器不支持客戶端腳本時。注意:只有在瀏覽器不支持腳本或者禁用腳本時,纔會顯示 noscript 元素中的內容!

<noscript>抱歉,你的瀏覽器不支持 JavaScript!</noscript>

HTML 統一資源定位器(URL)

Uniform Resource Locators !是一個網頁地址。
URL可以由字母組成,如"runoob.com",或互聯網協議(IP)地址: 192.68.20.50。大多數人進入網站使用網站域名來訪問,因爲 名字比數字更容易記住。
在這裏插入圖片描述

其它(回菜鳥教程速查即可)

以下的直接扒菜鳥教程review,難度低但很文科:

表格table

列表(有序、無序和定義列表)

區塊&內聯元素 (區分:是否以新行來展示)

div 和 span

網頁佈局

HTML 佈局 - 有用的提示
Tip: 使用 CSS 最大的好處是,如果把 CSS 代碼存放到外部樣式表中,那麼站點會更易於維護。通過編輯單一的文件,就可以改變所有頁面的佈局。如需學習更多有關 CSS 的知識,請訪問我們的CSS 教程。
Tip: 由於創建高級的佈局非常耗時,使用模板是一個快速的選項。通過搜索引擎可以找到很多免費的網站模板(您可以使用這些預先構建好的網站佈局,並優化它們)。

HTML 表單和輸入(密碼什麼的;輸入;選擇題)

HTML框架 - 在一個網頁中嵌套一小塊另一個網頁

字符實體(不能直接打“<”時怎麼辦)

HTML 總結

HTML 是一種在 Web 上使用的通用標記語言。HTML 允許你格式化文本,添加圖片,創建鏈接、輸入表單、框架和表格等等,並可將之存爲文本文件,瀏覽器即可讀取和顯示。HTML 的關鍵是標籤,其作用是指示將出現的內容。
Alt
知識拓展——
Alt
或者從 ISP(因特網服務提供商) 租用服務器。

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