1、Html
——超文本標記語言 HyperText Markup Language
概念：一個頁面（網頁）就是一篇檔案，用于定義檔案的內容結構（標題、圖片、文字、段落等）。
1.1 html檔案格式：.html 或 .htm
一個完整的檔案由 index（檔案名）.（分隔符）html（ 擴展名）組成。
1.2 Html基本模板書寫：內容在body里面進行編輯；
<!DOCTYPE html>
<html lang="en">
<head>
<!--檔案頭，對當前頁面的描述-->
<meta charset="UTF-8">
<!--指示頁面，使用字符編碼集UTF-8決議頁面-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--既可以做標簽也可以做屬性-->
<title>Document</title>
</head>
<body>
<!--檔案體，網頁中所有可視內容全部放置在body中-->
</body>
<!DOCTYPE html>：定義檔案型別，讓瀏覽器用標準模式去決議（如不用就會使用怪異模式）。
↓
document-檔案，type-型別
1.3 Html注釋格式：<!-- -->
Html注釋作用：用于描述代碼功能 （瀏覽器決議時會進行忽略，開發者和維護人員可看）。
1.4 Html元素：是html檔案的重要組成部分，一個html檔案由大量元素組成
例：<h1>（開始標記）基礎練習（元素內容）</h1>（結束標記）
拓展：操作h1-h6
h元素的數字越小，在頁面上顯示效果字越大
h元素的數字越大，在頁面上顯示效果字越小
a元素：
<a href="https://bbs.csdn.net/topics/www.baidu.com" target="_self">立即加入</a>
<!-- 用戶體驗
target頁面打開方式
_self當前視窗打開新頁面
_blank新建一個視窗打開
-->
<a href="https://bbs.csdn.net/topics/page2.html" target="_blank">page2</a>
<a href="https://bbs.csdn.net/topics/page3.html" target="_self">page3</a>
<!--錨點鏈接
操作步驟
1、添加a標簽
2、添加跳轉鏈接
3、給跳轉標簽添加id屬性值
4、a標簽添加href的值
跳轉標簽添加添加id屬性值,前面加# -->
<a href="https://bbs.csdn.net/topics/#maodian"></a>
<div id="maodian"></div>
<!--功能鏈接:mailto:郵箱地址、tel:電話號碼-->
<a href="mailto:[email protected]">給我發送郵件</a>
<a href="https://bbs.csdn.net/topics/tel:xxx xxxx xxxx">給我打電話</a>
a為標簽名、元素名、標記名，這是一個超鏈接，href：屬性名，＂www.baidu.com＂為屬性值； href=https://bbs.csdn.net/topics/＂www.baidu.com＂為屬性：表示為元素添加額外的資訊，用戶點擊后可跳轉； 立即加入：為元素內容，要在頁面上顯示的內容 。
標記名、屬性、元素內容共同決定了一個元素的顯示內容和行為。
空元素:沒有元素內容、也沒有結束標記。也稱之為自閉合元素；
空元素的書寫方式：
<標記名屬性> or <標記名屬性/>
<img src="https://bbs.csdn.net/topics/圖片URL位置" alt="圖片替代文字">
src：提取圖片位置，圖片URL位置；
alt：圖片替代文字，當圖片URL位置不正確的時候，顯示文字。
參考文本：
q標簽： 小段參考；適用場景：名人名言； 自帶樣式：“ ”。
blockquote標簽：大段參考；適用場景：參考整個文章或段落；自帶樣式：左側縮進2字符。
cite元素： 參考參考文獻；自帶樣式：斜體；既能當元素又能當屬性，屬性：表示參考源的地址。
（注：如果段落用cite，如果加強一段中的某幾個字用i。）
abbr元素： 對縮寫詞的參考；適用場景：縮寫詞或專業術語；自帶樣式：下劃線虛線。
強調文本：
strong標簽-重要文本、b標簽-突出顯示。
——加粗文本(普通瀏覽器無區別，閱讀瀏覽器strong標簽會加重讀音)
em標簽-強調的文本、i標簽-區別對待的文本。
——斜體(普通瀏覽器無區別，閱讀瀏覽器em標簽會加重讀音)
無語意元素：
div： 表示頁面中的一塊區域，適用場景：劃磁區域；
span： 僅用于給一小段文本添加樣式；
br： 空元素，換行；
空白折疊：一個空格、回車或多個空格、回車都會合并為一個空格、回車；↓
pre元素： 預格式化元素，會復制html代碼到頁面當中展示（保留文字在源代碼中的格式）。
hr元素： 分割線。
物體字符：
書寫格式：&npsp；“&”開始 ，“；”結束。在頁面上實作特殊字符的。
1.5 元素的層次結構：一個元素的內容中可以包含其他元素，形成嵌套的層次結構，兩個元素間不能相互嵌套；
若A元素直接包含B：則A為B的父元素，B為A的子元素
若兩個元素有同一個父元素：它們互為兄弟元素
若A直接或間接包含B：A是B的祖先元素，B是A的后代元素
1.6 HTML語意化；
語意化結構元素（好處：使結構更清晰，易分辨1.更好實作CEO（搜索引擎優化）2.可被特殊設備讀取）
header： 用于表示頁面或某個區域的頭部；
nav： 用于表示導航欄；
aside： 用于表示跟周圍主題相關的附加資訊；（如果是廣告放在離body結束標簽最近的位置）
article： 用于表示文章或其他可獨立頁面存在的內容；
section：用于表示一個整體的一部分主題；
footer： 用于表示頁面或某個區域的腳注；
1.7 絕對路徑和相對路徑；
絕對路徑：協議 : // 域名 / 目錄
——訪問站外資源時；（http://www.baidu.com/xxx）
——訪問站內資源時，如以上傳到服務器，用絕對路徑參考時可省略協議和域名。(/xxx)
相對路徑：. / 路徑
——只能用于訪問站內資源.（./xxx、../xxx、../../xxx）
——同級目錄參考相對路徑，可以省略 ". / "
uj5u.com熱心網友回復：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/21982.html
標籤：HTML(CSS)