HTML5
- 1.初識HTML
- 2.網頁基本标簽
1.初識HTML
- HyperTextMarkupLanguage（超文本标記語言）
- < body >、< /body>等成對的标簽，分别叫做開放标簽和閉合标簽，
- 單獨呈現的标簽（空元素），如< hr/ >;意為用/來關閉空元素。
- html注釋：< !–注釋内容–>
<!--DOCTYPE：告訴浏覽器使用什麼規範（預設是html）-->
<!DOCTYPE html>
<!--語言 zh中文 en英文-->
<html lang="zh">
<!--head标簽代表網頁頭部-->
<head>
<!-- meta 描述性标簽，表示用來描述網站的一些資訊-->
<!-- 一般用來做SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="hyx的java學習">
<meta name="description" content="一起來學習java">
<!--網站标題-->
<title>Title</title>
</head>
<!--body代表主體-->
<body>
Hello World！
</body>
</html>
2.網頁基本标簽
- 标題标簽
- 段落标簽
- 換行标簽
- 水準線标簽
- 字型樣式标簽
- 注釋和特殊符号
<!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>
<!--段落标簽-->
<p>p換行1</p>
<p>p換行2</p>
<hr/><!--水準線标簽-->
換行1 <br/><!--換行标簽-->
換行2 <br/>
<!--換行标簽比較緊湊，段落标簽有明顯段間距-->
<!--粗體 斜體-->
<h1>字型樣式标簽</h1>
粗體：<strong>I love you </strong><br/>
斜體：<em>I love you </em><br/>
<!--特殊符号-->
空格：1 2 3 4<br/>
空格：1 2 3 4<br/>
大于号><br/>
小于号&rt;<br/>
版權符号©<br/>
<!--特殊符号記憶：&開頭;結尾，隻要在idea中&敲出後就有提示-->
</body>
</html>
- 圖像标簽
- 連結标簽
href： 必填，表示要跳轉到那個頁面
target：表示視窗在那裡打開
_blank：在新标簽中打開
_self： 在自己的網頁中打開
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖像和連結标簽</title>
</head>
<body>
<!--src:資源位址
相對位址，絕對位址
../上級位址
alt：在圖檔加載失敗的時候，就會用文字代替
title:滑鼠懸停在圖檔上時，所顯示的名字
width height 圖檔的高和寬-->
<img src="../xxx.jpg" alt="oops!圖像不見了" title="123">
<br/>
<!--href：跳轉頁面的位址
a标簽内文字：即顯示的文字
可以把圖檔放在a标簽内，點選圖檔跳轉網頁
target:表示在哪打開新網頁_self:目前标簽打開 _blank:新的頁面中打開-->
<a href="https://www.baidu.com" target="_blank" title="123">你xxxx不會百度嗎</a>
<br/>
<a href="https://www.baidu.com"><img src="../xxx.jpg" alt="oops!圖像不見了"></a>
<!--錨連結
1.需要一個标記錨
2.跳轉到标記
#頁面内跳轉-->
<a name="top"></a>
<a href="#top">回到頂部</a>
<br/>
<!--也可以在網址後添加#号跳到對應網站的對應位置-->
<a href="https://www.baidu.com#down">百度底部</a> <br/>
<!--功能性連結
郵箱連結：mailto
qq連結
-->
<a href="mailto:xxxxxxqq.com">點選聯系我</a>
<a target="_blank"
href="http://wpa.qq.com/msgrd?v=xxx&uin=&site=qq&menu=yes"/>
<a target="_blank"
href="http://wpa.qq.com/msgrd?v=xxx&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="點選這裡加我領取小電影"
title="點選這裡加我領取小電影"/>
</body>
</html>
行内元素和塊元素
- 塊元素
- 無論内容多少，該元素獨占一行
- 行内元素：内容撐開寬度，左右都是行内元素的可以排在一行
![HTML5 之Geolocation API (地理位置應用程式接口)[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)