010_HTML5
目錄
初識HTML
什麼是HTML
HTML發展史
HTML5的優點
W3C標準
常見IDE
IDEA開發HTML
IDEA建立HTML文件，並用瀏覽器打開
配置瀏覽器
HTML基礎
HTML基本結構
HTML註釋
<!-- HTML註釋 -->
網頁基本信息
- DOCTYPE聲明
- title標籤
- meta標籤
<!-- DOCTYPE：告訴瀏覽器，要使用什麼規範 -->
<!DOCTYPE html>
<html lang="en">
<!-- head標籤表明網頁頭部 -->
<head>
<!-- meta描述性標籤，用來描述網站的一些信息 -->
<!-- meta通常用來作SEO（搜索引擎優化） -->
<meta charset="UTF-8">
<meta name="keywords" content="網站關鍵詞描述">
<meta name="description" content="網站描述">
<!-- title網頁標題 -->
<title>個人第一個頁面</title>
</head>
<!-- body標籤表明網頁主體 -->
<body>
Hello World!
</body>
</html>
網頁基本標籤
- 標題標籤
- 段落標籤
- 換行標籤
- 水平線標籤
- 字體樣式標籤
- 註釋和特殊符號
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本標籤</title>
</head>
<body>
<!-- 標題標籤 -->
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
<!-- 段落標籤 -->
<h1>沁園春·雪</h1>
<p>北國風光，千里冰封，萬里雪飄。</p>
<p>望長城內外，唯餘莽莽；大河上下，頓失滔滔。</p>
<p>山舞銀蛇，原馳蠟象，欲與天公試比高。</p>
<p>須晴日，看紅裝素裹，分外妖嬈。</p>
<p>江山如此多嬌，引無數英雄競折腰。</p>
<p>惜秦皇漢武，略輸文采；唐宗宋祖，稍遜風騷。</p>
<p>一代天驕，成吉思汗，只識彎弓射大雕。</p>
<p>俱往矣，數風流人物，還看今朝。</p>
<!-- 水平線標籤 -->
<hr/>
<!-- 換行標籤 -->
<h1>沁園春·長沙</h1>
獨立寒秋，湘江北去，橘子洲頭。<br/>
看萬山紅遍，層林盡染；漫江碧透，百舸爭流。<br/>
鷹擊長空，魚翔淺底，萬類霜天競自由。<br/>
悵寥廓，問蒼茫大地，誰主沉浮？<br/>
攜來百侶曾遊。憶往昔崢嶸歲月稠。<br/>
恰同窗少年，風華正茂；書生意氣，揮斥方遒。<br/>
指點江山，激揚文字，糞土當年萬戶侯。<br/>
曾記否，到中流擊水，浪遏飛舟？<br/>
<!-- 字體樣式標籤 -->
<p>粗體 <strong>樣本 hello</strong></p>
<p>斜體 <em>樣本 hello</em></p>
<!-- 特殊符號 -->
空 格<br/>
空 格<br/>
大於<br/>
><br/>
小於<br/>
<<br/>
版權符號<br/>
©版權全部<br/>
</body>
</html>
圖像標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖像標籤</title>
</head>
<body>
<!--
src：圖像地址（必填）
相對地址（推薦使用），絕對地址
../ 上一級目錄
alt：圖像名稱（必填）
-->
<img src="../resources/image/1.jpg" alt="圖片名稱" title="懸停文字" width="1024" height="577">
<img src="../resources/image/2.jpg" alt="圖片名稱" title="懸停文字" width="1024" height="577">
</body>
</html>
連接標籤
- 文本超連接
- 圖像超連接
- 頁面間連接：從一個頁面連接到另外一個頁面
- 錨連接
- 頁面間連接+錨連接：從一個頁面連接到另外一個頁面的錨點
- 功能性連接
- 郵件連接
- QQ連接：使用QQ推廣網站的推廣工具
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>連接標籤</title>
</head>
<body>
<p><a name="top" href="#bottom">直達底部</a></p>
<!--
a標籤
href：必填，表示要跳轉到哪一個頁面
target：表示窗口在哪裏打開
_blank 在新標籤打開
_self 默認，在本頁打開
-->
<a href="1.個人第一個網頁.html" target="">默認跳轉</a><br>
<a href="1.個人第一個網頁.html" target="_self">本頁跳轉</a><br>
<a href="https://www.baidu.com" target="_blank">新標籤跳轉</a><br>
<a href="1.個人第一個網頁.html">
<img src="../resources/image/1.jpg" alt="圖片名稱" title="懸停文字" width="1024" height="577">
</a>
<p><a>
<img src="../resources/image/1.jpg" alt="圖片名稱" title="懸停文字" width="1024" height="577">
</a></p>
<p><a>
<img src="../resources/image/1.jpg" alt="圖片名稱" title="懸停文字" width="1024" height="577">
</a></p>
<p><a>
<img src="../resources/image/1.jpg" alt="圖片名稱" title="懸停文字" width="1024" height="577">
</a></p>
<!--
錨連接：
1.須要一個錨標記，使用name
2.跳轉到標記
-->
<p><a name="bottom" href="#top">回到頂部</a></p>
<!-- 頁面間連接+錨連接：從一個頁面連接到另外一個頁面的錨點 -->
<p><a href="2.基本標籤.html/#bottom" target="_blank">跳轉到基本標籤頁面底部</a></p>
<!--
功能性連接：
郵件連接：mailto
QQ連接
-->
<p><a href="mailto:wl3pb@163.com">點擊給我發郵件</a></p>
<p>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=962307062&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:962307062:53" alt="在線諮詢" title="在線諮詢"/></a>
</p>
</body>
</html>
塊元素和行內元素
列表標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表標籤</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>java</li>
<li>python</li>
<li>javascript</li>
</ol>
<hr/>
<!--無序列表-->
<ul>
<li>java</li>
<li>python</li>
<li>javascript</li>
</ul>
<hr/>
<!--自定義列表
dl:標籤
dt:列表名稱
dd:列表內容
-->
<dl>
<dt>編程語言</dt>
<dd>java</dd>
<dd>python</dd>
<dd>javascript</dd>
<dt>武功祕籍</dt>
<dd>九陽神功</dd>
<dd>九陰真經</dd>
<dd>降龍十八掌</dd>
</dl>
</body>
</html>
表格標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格標籤</title>
</head>
<body>
<!--表格標籤table
行 tr
列 td
-->
<table border="1px">
<tr>
<!--colspan 跨列-->
<td colspan="4">1-1</td>
</tr>
<tr>
<!--rowspan 跨行-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
媒體元素：音頻和視頻
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒體元素</title>
</head>
<body>
<!--視頻和音頻
src 資源路徑
controls 控制條
autoplay 自動播放
-->
<video src="../resources/video/1.mp4" controls autoplay></video>
<audio src="../resources/audio/1.mp3" controls autoplay></audio>
</body>
</html>
頁面結構分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>頁面結構</title>
</head>
<body>
<header>
<h1>頁面頭部</h1>
</header>
<section>
<h1>頁面主體</h1>
</section>
<footer>
<h1>頁面腳部</h1>
</footer>
</body>
</html>
iframe內聯框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe內聯框架</title>
</head>
<body>
<!--iframe內聯框架
src 地址
w-h 寬度高度
name 標識名
-->
<iframe src="https://www.baidu.com" frameborder="1" width="800px" height="500px"></iframe>
<!--點擊顯示跳轉頁面嵌入到標識名iframe-->
<iframe src="" name="hello" frameborder="1" width="800px" height="500px"></iframe>
<a href="3.圖像標籤.html" target="hello">點擊顯示跳轉頁面嵌入到標識名iframe</a>
</body>
</html>
表單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單</title>
</head>
<body>
<h1>註冊</h1>
<!--表單form
action 表單提交的位置，能夠是網站，也能夠是一個請求處理地址
method post，get提交方式
get方式提交：能夠在url中看到咱們提交的信息，不安全，高效
post方式提交：能夠傳輸大文件，比較安全，但能夠在Network查看，能夠處理爲不能查看
-->
<form action="1.個人第一個網頁.html" method="post">
<p><input type="text" name="username"></p>
<p><input type="password" name="pwd"></p>
<p>
<input type="submit"></input>
<input type="reset">
</p>
</form>
</body>
</html>
表單元素
- checked 單選框和多選框選中
- selected 下拉框選中
- readonly 只讀
- disabled 禁用
- hidden 隱藏
<!--單選框 radio
value 值
name 表示組
-->
<p>
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!--多選框 checkbox
value 值
name 表示組
-->
<p>
<input type="checkbox" value="1" name="number"/>一
<input type="checkbox" value="2" name="number"/>二
<input type="checkbox" value="3" name="number"/>三
</p>
<!--文本域 textarea
cols 列
rows 行
-->
<p>反饋
<textarea name="fankui" cols="20" rows="10">文本內容</textarea>
</p>
<!--文本域 textarea
cols 列
rows 行
-->
<p>文件域
<input type="file" name="files"/>
</p>
<p>數字
<input type="number" name="num" max="100" min="10" step="5"/>
</p>
<p>滑塊
<input type="range" name="voice" max="100" min="0" step="2"/>
</p>
<p>搜索框，有叉號，能夠刪除
<input type="search" name="search"/>
</p>
<!--label標籤，加強鼠標可用性，點擊文件，文本框獲取焦點-->
<p>
<label for="mark">你點我試試</label>
<input type="search" name="search" id="mark"/>
</p>
表單的初級驗證
總結
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
