1. 程式人生 > 實用技巧 >HTML基礎

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" 所跨的行數>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</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,在這個頁面中也可以開啟一個線上的網頁

詳情 你們可以去看其他人的介紹