-
web時代
web時代.png
-
網頁的組成：
- HTML：網頁的內容和結構
- CSS：網頁的樣式（美化網頁最重要的一塊）
- JavaScript：網頁的交互效果。比如：對用戶鼠標事件做出響應
-
HTML的基本樣式：
<!--根標簽-->
<html>
<!--頭部-->
<head>
<!--標題標簽-->
<title>明哥的HTML標題</title>
<!--設置編碼-->
<meta charset="UTF-8">
</head>
<!--主要內容-->
<body>
<div>MG的空間</div>
</body>
</html>
-
常見標簽
<h>標題標簽</h> 1~6
<hr> 線條
<!--input標簽-->
<input placeholder="我是占位文字"> 輸入框
<input value="我是默認文字">
<input type="date"> 選擇日期
<input type="file">選擇文件
<input type="color">選擇顏色
<input type="radio">單選
<input type="checkbox">復選框
---------------------------------------------------------------------------------
<!--段落標簽--> 新聞詳情頁
<p>我是段落</p>
---------------------------------------------------------------------------------
<!--頭像標簽--> 圖片
<!--
絕對路徑和相對路徑：
相對路徑：資源在當前的項目中 ./ ../ ././
絕對路徑：資源從服務器那邊獲取 網絡：http:// https:// ftp:// file:///
-->
<img src="圖片路徑" alt="給用戶一個提示">
---------------------------------------------------------------------------------
<!--換行標簽--> 換行
<br>
---------------------------------------------------------------------------------
<!--容器標簽--> 容器
<div></div>
<span></span>
---------------------------------------------------------------------------------
<!--表格標簽--> 表格
<table>
<tr>
<td>
---------------------------------------------------------------------------------
<!--列表標簽--> 列表
** ul、** uo、** li **
<!--列表標簽-->
<ul>
<li>有序列表</li>
<li>有序列表</li>
</ul>
<!--列表標簽-->
<ol type='排序的類型'>
<li>有序列表</li>
<li>有序列表</li>
</ol>
---------------------------------------------------------------------------------
<!--超鏈接標簽--> #跳轉到當前界面
<a href="#">我是超鏈接</a>
<a target="" >百度一下，你就知道</a>
<!--
target:
_top：回到頂部
_self：當前界面跳轉
_blank：空白界面
parent：父窗口面跳轉
-->
---------------------------------------------------------------------------------
HTML5新增標簽
- HTML5新增了27個標簽，廢棄了16個標簽元素，主要包括**結構性標簽、級塊性標簽。行內語義標簽、交互標簽**
-
結構性標簽
- 負責Web上下文結構的定義，確保HTML文檔，包括：
-
article：文章主題內容（一盤博客、一篇論壇帖子、一段用戶評論、插件）
-
header：標記頭部區域內容
-
footer：標記尾部區域內容
-
section：區域章節描述
-
nav：菜單導航，鏈接導航
-
- 負責Web上下文結構的定義，確保HTML文檔，包括：
進度條.png
-
行內語義性標簽
- 完成Web頁面具體內容的引用和表達，豐富展示內容，包括：
-
meter：特定范圍內的數值，如工資，數量，百分比
-
time：時間值
-
progress：進度條，可用max，min，step進行控制，完成對進度的表示和監聽
-
video：視頻元素，用于視頻播放，支持緩沖預載和多種視頻媒體格式
-
audio：音頻元素，用于音頻播放，支持緩沖預載和多種音頻媒體格式
-
- 完成Web頁面具體內容的引用和表達，豐富展示內容，包括：
音視頻的使用.png
