HTML基礎
HTML是什麼呢?
Hyper Text Markup Language(超文字標記語言),這些超文字包括:文字、圖片、音訊、視訊、動畫等。
HTML的編寫過程是遵循W3C聯盟標準來進行編寫的。
W3C聯盟是什麼呢
World Wide Web Consortium(全球資訊網聯盟)。
成立於1994年,Web技術領域最權威和具影響力的國際中立性技術標準機構。
W3C標準包括 結構化標準語言(XHTML 、XML) 表現標準語言(CSS) 行為標準(DOM、ECMAScript )
現在我們目前經常使用的是HTML5,他的優勢有一下幾點:
世界知名瀏覽器廠商對HTML5的支援 微軟 Google 蘋果 Opera Mozilla
市場的需求 跨平臺
HTML基本結構
HTML網頁基本結構如下:
<html> <head> <title>我的第一個網頁</title> </head> <body> 我的第一個網頁 </body> </html>
注意:< body>、</body>等成對的標籤,分別叫開放標籤和閉合標籤 單獨呈現的標籤(空元素),如 <hr/> ;意為用 / 來關閉空元素。
DOCTYPE宣告:告訴瀏覽器使用什麼規範,詳細的介紹我就不多說明了。你們可以百度一下。
<title>標籤:在<title>的內容表示為網頁名稱,例如京東網,淘寶網的頂部名稱。
標籤
<h1>…</h1> <h2>…</h2> <h3>…</h3> <h4>…</h4> <h5>…</h5> <h6>…</h6>
這些是標題標籤,h1最大,後面依次變小。
段落標籤:</p>
示例:
<h1>北京歡迎你</h1> <p>北京歡迎你,有夢想誰都了不起!</p> <p>有勇氣就會有奇蹟。</p>
換行標籤:<br/>
在段落中是不能換行的 除非你的文字到達了瀏覽器的邊緣,系統才會自動換行,但是有些文章有段落又不得不換行。這個時候有兩種方法。
第一 你重新在寫一個段落標籤,但是這樣又很麻煩,我們程式設計師是很懶的,所以第二給方法我們可以使用換行標籤。只有在段落中寫入<br/>即可換行。
水平線標籤:<hr/>
這個會讓瀏覽器上出現一條水平線,用於分割內容。
字型樣式標籤
加粗:<strong>…</strong> 會讓字型加粗
斜體:<em>…</em> 會讓字型略微傾斜
註釋和特殊符號
影象標籤
語法:
<img src="path"地址 alt="text"影象替代的文字 title="text"滑鼠懸停顯示文字 width="x" 影象寬度 height="y"影象高度 />
連結標籤
語法
超連結
頁面間連結 從一個頁面連結到另外一個頁面
錨鏈接 功能性連結
詳情: https://www.cnblogs.com/hanxuming/p/5949092.html
我就不多介紹了。
行內元素和塊元素
塊元素 無論內容多少,該元素獨佔一行(p、h1-h6…)
行內元素 內容撐開寬度,左右都是行內元素的可以排在一行(a、strong、em…)
列表
什麼是列表
列表就是資訊資源的一種展示形式。它可以使資訊結構化和條理化,並以列表的樣式顯示出來,以便瀏覽者能更快捷地獲得相應的資訊
列表的分類 無序列表 有序列表 定義列表
無序列表
<ul> <li>范冰冰演藏族女孩</li> <li>撞死兩個人後自拍</li> <li>詩隆甜蜜出遊</li> <li>一線城市樓市退燒</li> </ul>
無序列表的特性:沒有順序,每個<li>標籤獨佔一行(塊元素),預設<li>標籤項前面有個實心小圓點,一般用於無序型別的列表,如導航、側邊欄新聞、有規律的圖文組合模組等。
有序列表
<ol> <li>范冰冰演藏族女孩</li> <li>撞死兩個人後自拍</li> <li>詩隆甜蜜出遊</li> <li>一線城市樓市退燒</li> </ol>
有序列表的特性:
有順序,每個<li>標籤獨佔一行(塊元素), 預設<li>標籤項前面有順序標記, 一般用於排序型別的列表,如試卷、問卷選項等。
定義列表
<dl> 宣告定義列表 <dt>水果</dt>宣告列表選項 <dd>蘋果</dd> 定義列表內容 <dd>桃子</dd> <dd>李子</dd> </dl>
定義列表的特性:沒有順序,每個<dt>標籤、<dd>標籤獨佔一行(塊元素)
預設沒有標記,
一般用於一個標題下有一個或多個列表項的情況。
例如:
列表對比
表格
為什麼使用表格 簡單通用 結構穩定
基本結構 單元格 行 列
表格的基本語法
<table> 表格標籤 <tr>行標籤 <td>第1個單元格的內容</td> <td>第2個單元格的內容</td> 單元格標籤 …… </tr> <tr> <td>第1個單元格的內容</td> <td>第2個單元格的內容</td> …… </tr> </table>
表格的跨行和跨列
<table> <tr> <td colspan="n"//所跨的列數>單元格內容</td> </tr> <tr> <td>單元格內容</td> …… </tr> ...... </table>
<table > <tr> <td rowspan="n" 所跨的行數> </td> <td> </td> </tr> <tr> <td> </td> </tr> </table>
綜合演示:
…… <tr> <td colspan="3">學生成績</td> </tr> <tr> <td rowspan="2">張三</td> <td>語文</td> <td>98</td> </tr> ……
網頁上播放視訊和音訊的方法
如何實現在網頁上播放視訊和音訊?
第三方自主開發的播放器
Flash
HTML5媒體元素 :視訊元素 video。音訊元素 audio
視訊元素
語法:
<video src="視訊路徑" controls></video>
自動播放屬性
autoplay
<video autoplay> <source src="video/video.webm" type="video/webm"/> <source src="video/video.mp4" type="video/mp4"/> 你的瀏覽器不支援video元素 </video>
音訊元素
<audio src="音訊路徑" controls></video>
HTML5的結構元素
示例:
<header><h2>網頁頭部</h2> </header> <section><h2>網頁主體部分</h2></section> <footer><h2>網頁底部</h2></footer>
<iframe>內聯框架
語法:<iframe src="path" name="mainFrame" ></iframe>
可以設定src的屬性值為http://www.bdqn.cn,在這個頁面中也可以開啟一個線上的網頁
詳情 你們可以去看其他人的介紹