一. html的基本文法
1.網頁基本結構
實作一個網頁需要用到的三個技術：
html - 決定網頁中有哪些東西（決定網頁中的内容）
Css - 負責網頁中的樣式和布局
Js - 負責網頁中内容的改變（javascript、jQuery、Nodejs、Vue、...）
2.html基本結構
html是一種超文本标記語言（類似markdown文法），是通過不同的标記（标簽）來給網頁提供不同的内容。
html标簽表示整個網頁
head标簽表示網頁頂部的部分
body标簽表示網頁顯示資料的内容部分
3.html基本文法
1）文法
雙标簽：<标簽名 屬性1=屬性值1 屬性2=屬性值2 ...>标簽内容</标簽名>
單标簽：<标簽名 屬性1=屬性值1 屬性2=屬性值2 ...> 或者 <标簽名 屬性1=屬性值1 屬性2=屬性值2 ... />
2）說明
标簽名 - 标簽名有哪些是固定的，哪些标簽是雙标簽哪些标簽是單标簽是但标簽也是固定的
屬性 - 哪些标簽有哪些屬性是固定的；多個屬性用空格隔開，屬性名和值用=連接配接，屬性值不管是什麼都必須在雙引号裡面
标簽内容 - 标簽内容可以是文字也可以是其他的一個或者多個标簽
<!--說明目前使用的html版本-->
<!DOCTYPE html>
<!--網頁内容結構-->
<html lang="en">
<head>
<!-- 設定網頁的編碼方式 -->
<meta charset="UTF-8">
<!-- 設定網頁标題 -->
<title>Title</title>
</head>
<body>
</body>
</html>
二. 常見的标簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常見标簽</title>
</head>
<body>
<!--===========文本相關标簽=================-->
<!-- 1.标題标簽：h1-h6 -->
1. 标題
<h1 id="top">标題1</h1>
<h2>标題2</h2>
<h3>标題3</h3>
<h4>标題4</h4>
<h5>标題5</h5>
<h6>标題6</h6>
<!-- 2.文字内容标簽 -->
<p>我是段落1</p>
<p>我是段落2</p>
<font>我是font1 我是font2 我是font3</font>
<span>我是span1 我是span2</span>
<!-- 3.換行和空格标簽和符号
html中的換行和空格都是無效的；
如果需要強制換行需要使用<br>标簽，空格需要使用空格符：
- 空一格像素
  - 空一個空格
-->
<!--===========圖檔标簽=================-->
<!--
img标簽：
src屬性 - 圖檔路徑(決定需要顯示的是哪張圖檔)
title屬性 - 圖檔名稱
alt屬性 - 圖檔加載失敗的時候顯示的提示資訊
-->
<!-- 顯示本地圖檔 -->
<img src="img/397377.jpg">
<!-- 顯示網絡圖檔 -->
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
<!--===========超連結=================-->
<!--
超連結标簽在點選後可以自動跳轉或者重新整理出一個新的頁面
a标簽：
1）标簽内容 - 決定的是可點選的部分
2）href屬性 - 決定點選後跳轉的目标位置
3）target屬性 - 決定是在目前視窗中加載新的頁面還是在新的視窗中加載新的頁面
_self：在目前視窗中加載（預設）
_blank：在新視窗中加載
-->
<!-- 1.文字超連結 -->
<a href=""></a>
<a href="./02-html基礎文法.html">基礎文法</a>
<a href="#top">回到頂部</a>
<!-- 2.圖檔超連結 -->
<a target="_blank" href="https://www.baidu.com/"><img src="img/397377.jpg"></a>
<!--===========清單标簽=================-->
<!--
1.無序清單：
ul标簽 - 表示整個清單
li标簽 - 表示清單中每個元素
2.有序清單：
ol标簽 -
li标簽 -
-->
<ul>
<li>Python資料分析和人工智能</li>
<li>前端開發</li>
<li>java分布式</li>
<li>UI/UE設計</li>
<li>測試</li>
</ul>
</body>
</html>
2.表單相關的标簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單相關标簽</title>
</head>
<body>
<!-- ===============1.input标簽================== -->
<!--
type屬性：
1）普通文本輸入框（text）
value屬性（重要） - 和輸入框中的顯示内容是雙向綁定的
placeholder屬性 - 輸入框的輸入提示資訊
maxlength屬性 - 限制輸入框中最多能輸入的字元的個數
2）密碼輸入框（password）
value屬性 - 和輸入框中的内容是雙向綁定的
placeholder屬性 - 輸入框的輸入提示資訊
maxlength屬性 - 限制輸入框中最多能輸入的字元的個數
3）單選按鈕（radio）
4）複選按鈕（checkbox）
5）普通按鈕
...
-->
<input type="text" value="張三" placeholder="請輸入使用者名" maxlength="10">
<input type="password">
<input type="radio" name="sex" id="s1"><label for="s1">男</label>
<input type="radio" name="sex" id="s2"><label for="s2">女</label>
<input type="radio" name="sex" id="s3"><label for="s3">不明</label>
<br>
<br>
<input type="checkbox" value="籃球" name="interest" id="i1"><label for="i1">籃球</label>
<input type="checkbox" value="乒乓球" name="interest" id="i2"><label for="i2">乒乓球</label>
<input type="checkbox" value="羽毛球" name="interest" id="i3"><label for="i3">羽毛球</label>
<br>
<input type="color">
<br>
<input type="file">
<br>
<input type="time">
<input type="date">
<br>
<input type="button" value="确定">
<!-- ===============2.textarea(多行文本域)================== -->
<!--
标簽内容 - 輸入框中的顯示内容
-->
<textarea cols="30" rows="10">沒有意見</textarea>
<!-- ===============3.下拉清單：select================== -->
<!--
select标簽 - 表示整個清單（擷取select的value就是在擷取目前選中的選項的value屬性）
option标簽 - 表示清單中的選項（标簽内容和value屬性都必須指派）
-->
<select name="" id="city">
<option value="成都市">成都市</option>
<option value="北京市">北京市</option>
<!-- 設定 上海市 對應的選項處于預設選中狀态 -->
<option value="上海市" selected="selected">上海市</option>
<option value="杭州市">杭州市</option>
<option value="深圳">深圳</option>
</select>
</body>
</html>
![用 Canvas 編織璀璨星空圖[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)