Web學習筆記 HTML(二)

本文參考：W3school

HTML 塊

HTML元素大概分爲兩類：

一類是塊級元素，塊級元素在瀏覽器顯示時，會在其前後都加上一行，常見的有<div>,<h1>, <p>, <ul>, <table>
另一類是內聯元素，內聯元素在顯示時前後不會加一行，常見的有<b>, <td>, <a>, <img>

塊級元素—div

HTML <div>是一個很重要的(如果有css的話)塊級元素，它是用於組合其他HTML元素的容器
<div> 元素的另一個常見的用途是文檔佈局。它取代了使用表格定義佈局的老式方法。

內聯元素—span

HTML <span>是內聯元素，可用作文本的容器
當與css一同使用時， <span>用於爲文本設置樣式等

HTML 類

在HTML中用class代表類，<p class=“cities”>代表該p屬於cities類
將不同的HTML部分劃分爲不同的類，方便我們對不同的類設置CSS樣式
前面講到的div可以和類結合起來使用，如<div class=“cities”>此時可以指定css給div中所有元素，如圖將兩個div劃分爲同一類並指定css樣式
將span和class結合使用，如<span class=“red”>，上面已經講到了爲所有class名相同的元素指定css，這裏就講一種只爲某種元素的class指定css方法

HTML 佈局

網頁也可以像雜誌、報紙等一樣佈局

HTML 佈局—div

div因其定位容易，常用於佈局工具
對div元素id定位需用#+id值

HTML 佈局—HTML5

後續在HTML5學習筆記裏再講

HTML 響應式web設計

響應式web設計(Responsive Web Design）：

RWD 能夠以可變尺寸傳遞網頁
RWD 對於平板和移動設備是必需的
簡單來說，RWD就是讓網頁內容隨網頁大小變化而變化

RWD—float

在加float之後發現顯示出來的網頁會隨網頁大小變化
css float：float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。若向左浮動，則會直到它碰到邊框爲止

RWD—Bootstrap

需要引入Bootstrap中的css，div以及class需要按Bootstrap中的命名，有點麻煩
效果

HTML 框架

使用框架可以在同一個瀏覽器窗口中不止顯示一個頁面
每份HTML文檔稱爲一個框架，並且每個框架都獨立於其他的框架。

框架的缺點

開發人員必須同時跟蹤更多的HTML文檔
很難打印整張頁面

框架結構標籤<frameset>

frameset定義如何將窗口分割爲框架
每個 frameset 定義了一系列行或列
rows/columns 的值規定了每行或每列佔據屏幕的面積
示例

框架標籤<frame>

frame 標籤定義了放置在每個框架中的 HTML 文檔。
通常在frame中src屬性中指定html鏈接
示例

注意

使用框架時，需要爲不支持框架的瀏覽器添加 <noframes> 標籤。
不能將<body></body> 標籤與<frameset></frameset> 標籤同時使用，文字只能嵌套在<body>中，<body>只能嵌套在<noframes>中
防止用戶拖動邊框，在frame中加noresize=“noresize” 如 <frame src="/example/html/frame_a.html" noresize="noresize" />

更多示例

行列混合框架

不可拖動邊框

導航框架

HTML 內聯框架

內聯框架用於在網頁中顯示網頁，效果如圖

代碼如下，有興趣的可以試試

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>

<iframe src="https://blog.csdn.net/Late_whale/article/details/104944097" height="360px" width="50%"></iframe>

<p>一些老的瀏覽器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可見的。</p>


</body>
</html>

iframe

基本使用

<iframe src="URL"></iframe>

設置內聯網頁的寬度和高度，單位可以是像素值也可以是百分比

<iframe src="URL" width="200" height="200"></iframe>

設置邊框不可見：將屬性frameborder值設爲0

<iframe src="URL" frameborder="0"></iframe>

將鏈接在內聯框架中顯示，鏈接的 target 屬性必須引用 iframe 的 name 屬性

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>

<iframe src="https://blog.csdn.net/Late_whale/article/details/104944097" height="360px" width="50%"
frameborder="0" name="iframe_a"></iframe>

<p><a href="http://www.baidu.com" target="iframe_a">百度一下</a></p>

</body>
</html>

HTML 背景

這裏所說的背景是整個網頁(body)的背景
body有兩個配置背景的標籤，背景可以是顏色或圖像

bgcolor

背景顏色屬性將背景設置爲某種顏色。屬性值可以是十六進制數、RGB 值或顏色名。

<!--將背景設爲黑色-->
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

background

背景屬性將背景設置爲圖像。屬性值爲圖像的URL。如果圖像尺寸小於瀏覽器窗口，那麼圖像將在整個瀏覽器窗口進行復制。

<!--如果圖片和網頁不在同一個文件夾需要在前面給出其路徑-->
<body background="1.png">
<body background="2.gif">

HTML 腳本

script

<script> 標籤用於定義客戶端腳本，比如 JavaScript。
script 元素既可包含腳本語句，也可通過 src 屬性指向外部腳本文件。
必需的 type 屬性規定腳本的 MIME 類型。

利用JavaScript輸出簡單的hello world

<html>
<body>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script> 
</body>
</html>

noscript

<noscript> 標籤提供無法使用腳本時的替代內容，比方在瀏覽器禁用腳本時，或瀏覽器不支持客戶端腳本時。
noscript 元素可包含普通 HTML 頁面的 body 元素中能夠找到的所有元素。
只有在瀏覽器不支持腳本或者禁用腳本時，纔會顯示 noscript 元素中的內容：

示例

<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

HTML 頭部

head

<head> 元素是所有頭部元素的容器。
<head> 內的元素可包含腳本，指示瀏覽器在何處可以找到樣式表，提供元信息，等等。
以下標籤都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

title

title標籤用於定義文檔的標題。
title 元素在所有 HTML/XHTML 文檔中都是必需的。
title 元素的作用：
- 定義瀏覽器工具欄中的標題
- 提供頁面被添加到收藏夾時顯示的標題
- 顯示在搜索引擎結果中的頁面標題

style

style標籤用於爲 HTML 文檔定義樣式信息。

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

link

link標籤定義文檔與外部資源之間的關係。

link常用於連接樣式表(css)

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

meta

meta標籤提供關於 HTML 文檔的元數據。
元數據不會顯示在頁面上，但是對於機器是可讀的。
meta常用於規定頁面的描述、關鍵詞、文檔的作者、最後修改時間以及其他元數據
有些瀏覽器會根據meta的name、content屬性(兩者用於描述網頁)來索引網頁

HTML 字符實體

在HTML中有些字符已經被預留來供HTML使用
在HTML中不能使用大於’>'小於’<‘，會被當做標籤
如果需要正確使用HTML預留字符就需要使用到HTML字符實體

常用字符實體

效果	描述	實體名稱	實體編號
	空格
<	小於號	<	<
>	大於號	>	>
&	和號	&	&
"	引號	"	"
’	撇號	' (IE不支持)	'
￠	分（cent）	¢	¢
£	鎊（pound）	£	£
¥	元（yen）	¥	¥
€	歐元（euro）	€	€
§	小節	§	§
©	版權（copyright）	©	©
®	註冊商標	®	®
™	商標	™	™
×	乘號	×	×
÷	除號	÷	÷

更多實體符號

HTML URL

URL（Uniform Resource Locator）統一資源定位器，也稱爲網址
URL 可以是域名，也可以是ip地址

URL的語法規則：scheme://host.domain:port/path/filename

scheme - 定義因特網服務的類型。最常見的類型是 http
host - 定義域主機（http 的默認主機是 www）
domain - 定義因特網域名，比如 baidu.com
:port - 定義主機上的端口號（http 的默認端口號是 80）
path - 定義服務器上的路徑（如果省略，則文檔必須位於網站的根目錄中）
filename - 定義文檔/資源的名稱

HTML URL字符編碼

URL 編碼會將字符轉化爲可通過因特網傳輸的格式
web瀏覽器通過URL從web服務器請求界面，URL只能用ASCII碼來通過因特網進行發送，而URL常常會含有除ASCII碼之外的字符，所以需要轉化
URL編碼使用%加兩位十六進制數來替換非ASCII碼
URL使用+來代替空格

查看更多URL編碼 URL編碼

HTML 顏色

顏色是由紅色、綠色、藍色混合而成

顏色值

顏色由一個十六進制符號來定義，這個符號由紅色、綠色、藍色的值組成（RGB）
每種顏色最小值爲0(十六進制：#00)，最大值255(十六進制：#FF)
部分顏色效果及其值

顏色名

大多數的瀏覽器都支持顏色名集合。

常見顏色名顏色值效果

HTML 表單

HTML表單用於蒐集不同類型的用戶輸入

form

form標籤用於定義HTML表單
HTML表單包含表單元素，表單元素指的是不同類型的 input 元素、複選框、單選按鈕、提交按鈕等

input元素

input元素是最重要的表單元素
input元素有很多類型(後續講解)

<input type=“text”>

text類型的input元素，常用於文本輸入的單行輸入

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

<input type=“radio”>

radio類型的input元素，用於在有限數量中選擇一個

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

<input type=“submit”>

submit類型的input元素，用於定義提交表單的按鈕

<input type="submit" value="Submit">

action屬性

action屬性用於定義提交表單時執行的動作

將用戶輸入提交(需要點擊submit按鈕)到action_page.php進行處理的代碼如下

<form action="action_page.php">

method屬性

method屬性規定提交表單時所用的http方法(get/post)

採用get方法

<form action="action_page.php" method="GET">

採用post方法

<form action="action_page.php" method="POST">

get方法

不指定action時，默認使用的方法是get
get方法適用於被動提交表單
get方法安全性較低，數據在地址欄是可見的
get方法適合少量數據的提交

post方法

安全性較高，數據在地址欄中是不可見的
post方法適用於正在更新數據時使用

name屬性

如果需要輸入的數據能正確地被提交，則需爲每個字段設置一個name屬性

<input type="text" name="lastname" value="Mouse">

此時服務器接受到的信息爲lastname=Mouse

fieldset

fieldset標籤用於組合表單中的相關信息
legend標籤用於爲fieldset定義標題

HTML 表單元素

input元素

上面已經講解過了，這裏就不在累述

select元素

select元素用於定義下拉列表

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

option元素定義下來列表中的選項，通常列表中的首項默認選中，也可以通過selectd屬性來定義選中項

<option value="fiat" selected>Fiat</option>

textarea元素

textarea元素定義多行輸入字段（文本域）

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

button元素

button元素定義可點擊的按鈕

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

HTML 輸入類型

輸入類型：text

<input type=“text”> 定義供文本輸入的單行輸入字段

輸入類型：password

<input type=“password”> 定義密碼字段

輸入類型：submit

<input type=“submit”> 定義提交表單數據至表單處理程序的按鈕

輸入類型：radio

<input type=“radio”> 定義單選按鈕

輸入類型：checkbox

<input type=“checkbox”> 定義複選框

輸入類型：button

<input type=“button”> 定義按鈕

HTML input屬性

value 屬性

value屬性規定輸入字段的初始值

<input type="text" name="firstname" value="John">

readonly 屬性

readonly 屬性規定輸入字段爲只讀（不能修改)

<input type="text" name="firstname" value="John" readonly>

disabled 屬性

disabled 屬性規定輸入字段是禁用的被禁用的元素是不可用和不可點擊的,不會被提交。

<input type="text" name="firstname" value="John" disabled>

size 屬性

size 屬性規定輸入字段的尺寸（以字符計）

<input type="text" name="firstname" value="John" size="40">

maxlength 屬性

maxlength 屬性規定輸入字段允許的最大長度

最多隻能輸入10字符

<input type="text" name="firstname" maxlength="10">

HTML 多媒體

在web中多媒體指的是音效、音樂、視頻和動畫

多媒體格式

多媒體元素存儲在媒體文件中
通常通過查看媒體文件擴展名來確定媒體文件的類型，如圖片一般是.jpg或.png，視頻一般爲.avi或.wmv

HTML 對象

object 元素

<object>的作用是支持 HTML 助手
<object>用於加載HTML 助手

HTML 助手

HTML助手也稱爲插件、輔助應用程序
輔助應用程序是可由瀏覽器啓動的程序
輔助應用程序可用於播放音頻和視頻等多媒體元素

HTML 音頻

在HTML中播放音頻的方法有很多，這裏簡單介紹幾種

<object>

object可用於播放多媒體，用法如下


<object height="100" width="100" data="音頻url"></object>

缺陷：

如果瀏覽器不支持該文件格式，沒有插件的話就無法播放該音頻。
如果用戶的計算機未安裝插件，無法播放音頻。

最簡單的播放音頻方法

使用雅虎播放器來幫助我們播放音頻，它支持很多格式

<a href="音頻url">需要顯示的文字</a>
<!--下面這句JavaScript必須加-->
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>

注意：

雅虎播放器會每個多媒體元素提供一個播放按鈕
當點擊該按鈕時，會彈出完整播放器

使用超鏈接

如果網頁使用指向多媒體文件的超鏈接，則大多數瀏覽器會使用“輔助程序”來播放該文件

<a href="url">Play the sound</a>

內聯聲音

網頁中含有聲音的稱爲內聯聲音
最好不要使用內聯聲音，讓用戶需要的自己點擊播放

HTML 視頻

HTML 視頻大多和HTML 音頻一樣

<object>

object可用於播放多媒體，用法如下


<object height="100" width="100" data="視頻url"></object>

缺陷：

如果瀏覽器不支持該文件格式，沒有插件的話就無法播放該視頻。
如果用戶的計算機未安裝插件，無法播放視頻。

雅虎播放器

使用雅虎播放器來幫助我們播放視頻，它支持很多格式

<a href="視頻url">需要顯示的文字</a>
<!--下面這句JavaScript必須加-->
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>

注意：

雅虎播放器會每個多媒體元素提供一個播放按鈕
當點擊該按鈕時，會彈出完整播放器