HTML
基本結構
<!-- 1、文檔類型聲明 -->
<!DOCTYPE html>
<!-- 2、HTML根標記 -->
<html>
<!-- 包含兩對子元素-->
<head>
<title>網頁標題</title>
<meta charset="utf-8"/>
</head>
<body text="red" bgcolor="yellow">
<p>我的第一個html頁面</p>
</body>
</html>
文本
特殊文本的實現
-
頁面的空格以及一些特殊字符需要通過轉義字符的方式體現
表示一個空格<表示 <>表示 >©表示©
-
文本樣式相關標記
<b></b>: 加粗<i></i>: 斜體<u></u>: 下劃線<s></s>: 刪除線<sup></sup>: 上標<sub></sub>: 下標
-
標題元素
- 語法：
<h1>一級標題</h1><h2>二級標題</h2><h3>三級標題</h3><h4>四級標題</h4><h5>五級標題</h5><h6>六級標題</h6>
<h1>一級標題</h1> <h2>二級標題</h2> <h3>三級標題</h3> <h4>四級標題</h4> <h5>五級標題</h5> <h6>六級標題</h6>- 屬性： align
- 設置文本水平對齊方式
- 取值：left / center / right
- 語法：
-
段落元素
- 語法：
- 屬性：align : left / center / right
<!-- 段落標籤 -->
<p>the first paragraph</p>
<p align="right">the second paragraph</p>
- 換行元素
<br>
- 分割線元素
- 作用：在頁面中表現爲一條直線
- 語法：
<hr> - 屬性:
- size
- 尺寸，px爲單位
- width
- 寬度，px爲單位
- align
- 水平對齊方式
- color
- 顏色
- size
- 預格式化
- 作用：保留源文檔中的回車和空格的作用
<pre></pre>
- 分區元素
- 塊分區元素
- 語法：
<div></div> - 作用：佈局
- 語法：
- 行內分區元素
- 語法：
<span></span> - 作用：設置同一行文字的不同樣式
- 語法：
- 塊分區元素
- 行內元素 與 塊級元素
- 安裝元素的表現形式來分爲行內元素和塊級元素
- 行內元素
- 在一行內允許顯示多個元素，稱爲“行內元素”
- span ，i，b，u，sub，sup
- 作用：包裹文本，處理文本的表現形式
- 塊級元素
- 每個元素獨佔一行顯示的。稱爲“塊級元素”
- div，p，h1~h6
- 作用：佈局
- 行內元素
- 注意：
- p標籤不能嵌套其他塊元素
- 行內元素中最好不要嵌套塊級元素
- 圖形和連接
-
URL
- 目錄結構：
- 目錄：保存文件的文件夾名稱
- 什麼是URL
- URL（Uniform Resource Location）,統一資源定位符
- 識別資源存放的位置
- URL在WEB中的表現形式：
- 絕對路徑
- 特點：從文件的最高級目錄處開始查找資源文件所經過的路徑，就是絕對路徑
- 完整的絕對路徑分四部分：
- 使用場合，當要訪問互聯網上的資源時使用
- 協議名
- 域名（主機名，IP地址）
- 目錄路徑
- 文件名
- 相對路徑
- 場合：使用本機文件時
- 從當前文件位置起查找指定文件的位置
- 根相對路徑
- 路徑形式是以 / 作爲開始的
- / ：表示的是服務器的根路徑
- 絕對路徑
-
圖像
- 圖像格式
- *.gph
- *.gif(動圖)
- *.png
- 圖像的語法
- 標記：
<img> - 屬性：
- src：指定要顯示圖像的URL
- width：圖像的寬度
- height：圖像的高度
- title：鼠標懸停時要顯示的文本（提示）
- 標記：
- 圖像格式
-
超鏈接
- 語法
- 標記：
<a>內容</a> - 屬性：
- href:要連接的HTML頁面的URL
- _target:指定新連接的打開形式
- 取值：
- _blank: 在新標籤頁面中打開網頁
- _self: 在自身標籤頁面中打開新網頁（默認值）
- 標記：
- 語法
-
連接的四種表現形式
- 點擊操作時，完成資源下載操作（連接的資源爲zip/rar時自動下載）
- 電子郵件連接
<a href="mailto:[email protected]">聯繫我們</a>- 必須在計算機中安裝並配置好至少一個郵件客戶端的信息
- 返回頁面頂部的空連接
<a href="#">返回頂部</a>
- 執行JavaScript代碼片段
<a href="javascript:JS腳本代碼">執行JS</a>
- 錨點
-