HTML CSS Javascript 的關係
HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓用戶瀏覽的信息,可以包含文字、圖片、視頻等。
CSS樣式是表現。就像網頁的外衣。比如,標題字體、顏色變化,或爲標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之爲表現。
JavaScript是用來實現網頁上的動態效果。如:鼠標滑過彈出下拉菜單。或鼠標滑過表格的背景顏色改變。還有焦點新聞(新聞圖片)的輪換。
HTML 標籤語法
1. 標籤由英文尖括號<和>括起來,如<html>就是一個標籤。
2. html中的標籤一般都是成對出現的,分開始標籤和結束標籤。結束標籤比開始標籤多了一個/。
如:
(1) <p></p>
(2) <div></div>
(3) <span></span>
3. 標籤與標籤之間是可以嵌套的,但先後順序必須保持一致,如:<div>裏嵌套<p>,那麼</p>必須放在</div>的前面。如下圖所示。
4. HTML標籤不區分大小寫,<h1>和<H1>是一樣的,但建議小寫,因爲大部分程序員都以小寫爲準。
HTML標籤
<p> 標籤
如果想在網頁上顯示文章,就需要<p>標籤,把文章的段落放到<p>標籤中。
語法:
<p>段落文本</p>
<hx> 標籤
使用<hx>標籤來製作文章的標題。
標題標籤一共有6個,h1、h2、h3、h4、h5、h6分別爲一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。並且依據重要性遞減。<h1>是最高的等級。
語法:
<h1>段落文本</h1>
<strong> 和 <em>標籤
在一段話中特別強調某幾個文字,這時候就可以用到<em>或<strong>標籤。
但兩者在強調的語氣上有區別:<em> 表示強調,<strong> 表示更強烈的強調。並且在瀏覽器中<em> 默認用斜體表示,<strong> 用粗體表示。
語法:
<em>段落文本</em>
<strong>段落文本</strong>
<q> 標籤
使用q標籤可以在html中添加一段引用,如作家的話、詩句等。
1. 注意要引用的文本不用加雙引號,瀏覽器會對q標籤自動添加雙引號。
語法:
段落文本<q>引用文本</q>段落文本
<blockquote> 標籤
blockquote的作用也是引用別人的文本。但它是對長文本的引用,如在文章中引入大段某知名作家的文字,這時需要這個標籤。
1. 瀏覽器對<blockquote>標籤的解析是縮進樣式,而不是添加引號
語法:
<blockquote>引用段落</blockquote>
<br /> 標籤
需要加回車換行的地方加入<br />,<br />標籤作用相當於word文檔中的回車。
1. 瀏覽器會忽略HTML中的回車和空格,如果需要換行,就要用到<br />標籤。
2. 如果需要加空格,則需要用 來替換空格。
語法:
引用段落<br />
<hr /> 標籤
在信息展示時,有時會需要加一些用於分隔的橫線,這樣會使文章看起來整齊些.
1. <hr />標籤和<br />標籤一樣也是一個空標籤,所以只有一個開始標籤,沒有結束標籤。
2. <hr />標籤的在瀏覽器中的默認樣式線條比較粗,顏色爲灰色。可以通過css來改變水平線的樣式。
語法:
<p>文本段落</p>
<hr />
<address> 標籤
一般網頁中會有一些網站的聯繫地址信息需要在網頁中展示出來,這些聯繫地址信息如公司的地址就可以<address>標籤。也可以定義一個地址(比如電子郵件地址)、簽名或者文檔的作者身份。
1. <address>標籤中的內容會在瀏覽器中顯示爲斜體。
語法:
<address>地址信息或聯繫人信息</address>
<code>和<pre> 標籤
在介紹語言技術的網站中,避免不了在網頁中顯示一些計算機專業的編程代碼,當代碼爲一行代碼時,你就可以使用<code>標籤了,如下面例子:
<code>var i=i+300;</code>
1. 如果是多行代碼,可以使用<pre>標籤。
2. <pre> 標籤的主要作用:預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。
語法:
<code>一行計算機代碼</code>
<pre>多行計算機代碼</pre>
<ul> 和 <li>標籤
利用<ul>和<li>可以生成沒有順序的列表。
語法:
<ul>
<li>精彩少年</li>
<li>美麗突然出現</li>
<li>觸動心靈的旋律</li>
</ul>
<ol> 和 <li>標籤
利用<ol>和<li>可以生成有順序的列表。
語法:
<ol>
<li>前端開發面試心法 </li>
<li>JavaScript全攻略</li>
</ul>
<div> 標籤
在網頁製作過程過中,可以把一些獨立的邏輯部分劃分出來,放在一個<div>標籤中,這個<div>標籤的作用就相當於一個容器。
1. div和span類似,都沒有特殊的語義。
2. div可以用來排版。
3. div屬於塊級元素。
4. 可以用id來爲div分組命名
語法:
<div id=’xxx’>
…
</div>
<caption> 標籤
可以使用caption標籤來爲表格添加標題:
語法:
<table>
<caption>標題文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>
<a> 標籤
使用<a>標籤可實現超鏈接,它在網頁製作中可以說是無處不在,只要有鏈接的地方,就會有這個標籤。
語法:
<a href="目標網址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>
1. title屬性的作用:鼠標滑過鏈接文字時會顯示這個屬性的文本內容。這個屬性在實際網頁開發中作用很大,主要方便搜索引擎瞭解鏈接地址的內容(語義化更友好)
2. <a>標籤在默認情況下,鏈接的網頁是在當前瀏覽器窗口中打開,如果需要在新的瀏覽器窗口中打開,則需要用到target選項。
<a href="目標網址" target="_blank">click here!</a>
3. a標籤還有一個作用是可以鏈接Email地址,使用mailto能讓訪問者便捷向網站管理者發送電子郵件。
<img> 標籤
使用<img>標籤可以在網頁中插入圖片。
語法:
<img src="圖片地址" alt="下載失敗時的替換文本" title = "提示文本">
1、src:標識圖像的位置;
2、alt:指定圖像的描述性文本,當圖像不可見時(下載不成功時),可看到該屬性指定的文本;
3、title:提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本);
4、圖像可以是GIF,PNG,JPEG格式的圖像文件。
HTML表單
表單可以把瀏覽者輸入的數據傳送到服務器端,這樣服務器端程序就可以處理表單傳過來的數據。
語法:
<form method="傳送方式" action=”URL">
</form>
1.<form> :<form>標籤是成對出現的,以<form>開始,以</form>結束。
2.action :瀏覽者輸入的數據被傳送到的地方,比如一個PHP頁面(save.php)。
3.method : 數據傳送的方式(get/post)。
4. 所有表單控件(文本框、文本域、按鈕、單選框、複選框等)都必須放在 <form></form> 標籤之間
5. get請求會把表單提供的參數放到URL中,而post請求會把參數放到http請求體中
文本、密碼輸入框
當用戶要在表單中鍵入字母、數字等內容時,就會用到文本輸入框。文本框也可以轉化爲密碼輸入框。
語法:
<form>
<input type="text/password" name="名稱" value="文本" />
</form>
1、type:
當type="text"時,輸入框爲文本輸入框;
當type="password"時, 輸入框爲密碼輸入框。
2、name:爲文本框命名,以備後臺程序ASP 、PHP使用。
3、value:爲文本輸入框設置默認值。(一般起到提示作用)
文本域 多行文本輸入
當用戶需要在表單中輸入大段文字時,需要用到文本輸入域。
語法:
<textarea rows="行數" cols="列數">
文本
</textarea>
1、<textarea>標籤是成對出現的,以<textarea>開始,以</textarea>結束。
2、cols :多行輸入域的列數。
3、rows :多行輸入域的行數。
4、在<textarea></textarea>標籤之間可以輸入默認值。
單選框、複選框
在使用表單設計調查表時,爲了減少用戶的操作,使用選擇框是一個好主意,html中有兩種選擇框,即單選框和複選框,兩者的區別是單選框中的選項用戶只能選擇一項,而複選框中用戶可以任意選擇多項,甚至全選
語法:
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
1、type:
當 type="radio" 時,控件爲單選框
當 type="checkbox" 時,控件爲複選框
2、value:提交數據到服務器的值(後臺程序PHP使用)
3、name:爲控件命名,以備後臺程序 ASP、PHP 使用
4、checked:當設置 checked="checked" 時,該選項被默認選中
下拉列表框
下拉列表在網頁中也常會用到,它可以有效的節省網頁空間。既可以單選、又可以多選
下拉列表也可以進行多選操作,在<select>標籤中設置multiple="multiple"屬性,就可以實現多選功能
提交按鈕
在表單中有兩種按鈕可以使用,分別爲:提交按鈕、重置。這一小節講解提交按鈕:當用戶需要提交表單信息到服務器時,需要用到提交按鈕。
語法:
<input type="submit" value="提交">
1, type:只有當type值設置爲submit時,按鈕纔有提交作用
2, value:按鈕上顯示的文字
重置按鈕
當用戶需要重置表單信息到初始時的狀態時,比如用戶輸入“用戶名”後,發現書寫有誤,可以使用重置按鈕使輸入框恢復到初始狀態。只需要把type設置爲"reset"就可以。
語法:
<input type=”reset" value=”重置">
1, type:只有當type值設置爲reset時,按鈕才有重置作用
2, value:按鈕上顯示的文字
form表單中的label標籤
label標籤不會向用戶呈現任何特殊效果,它的作用是爲鼠標用戶改進了可用性。如果你在 label 標籤內點擊文本,就會觸發此控件。
語法:
<label for="控件id名稱"> </label>
HTML5
更簡化的語法:
- <!doctype html>
- <html lang=“zh-CN”>
- <meta charset=“utf-8”>
- 不區分大小寫 HTML = HtMl
- checked=“checked” à checked
- <html><head><body>可以省略
。。。
廢除的標籤
- 能用css替代的標籤:basefont, font, center…
- Frame相關的標籤,只支持iframe: frameset, frame, noframes
- 只有部分瀏覽器支持的標籤:applet, bgsound…
- 其他廢除的標籤:rb, dir, listing, xmp…
廢除了一些和樣式相關的屬性
HTML5 新增標籤
- <section></section> 表示頁面中的一個內容區塊,不用作排版
- <article></article> 表示與上下文不相干的獨立內容,比如說文章
- <aside></aside> 表示與文章相關的輔助信息,如文章後面的推薦閱讀
- <header></header> 頁眉
- <footer></footer> 頁腳
- <nav></nav> 導航欄
- <figure></figure> 標籤規定獨立的流內容(圖像、圖表、照片、代碼等等)。figure 元素的內容應該與主內容相關,但如果被刪除,則不應對文檔流產生影響。
- <figcaption></figcaption> 標籤定義 figure 的標題(caption)。"figcaption" 元素應該被置於 "figure" 元素的第一個或最後一個子元素的位置。
- <video></video> 視頻標籤
- <audio></audio> 音頻標籤
- <embed /> 嵌入標籤,可以是視頻、音頻、flash等多媒體內容
- <mark></mark> 替換文本的背景色來標記文本
- <progress max=“100” value=“85”></progress> 進度條
- <canvas></canvas> 繪圖,替代flash
- <details><summary>always show</summary>something can be hidden</details>
- <datalist></datalist>
HTML5 新增屬性
- <html manifest=“xxx.manifest”>
- <meta charset=“utf-8”>
- <link rel=‘icon’ href=“URL” type=image/gif sizes=“16x16”> //目前幾乎沒有主流瀏覽器支持 sizes 屬性。
- <script defer src=“*.js”></script>
- <script async src=“*.js”></script>
- <a media=“tv” href=“www.baidu.com” hreflang=“zh” ref=“external”>baidu</a>
- <ol start=”50” reversed></ol>
- <style scoped></style>
- <iframe seamless srcdoc=“<h1>hello</h1>” sandbox src=www.baidu.com> </iframe>
HTML5 新增全局屬性
- data-*
- Hidden
- Tabindex
- spellcheck=”true”
- contenteditable=“true”