文章目錄
- 📕1. HTML基礎
- ??1.1 什么是HTML
- ??1.2 認識HTML標簽
- ??1.3 HTML文件基本結構
- ??1.4 標簽層次結構
- 📕2. HTML常見標簽
- ??2.1 標題標簽
- ??2.2 段落標簽
- ??2.3 換行標簽
- ??2.4 圖片標簽
- ??2.5 超鏈接標簽
- ??2.6 表格標簽
- 📕3. 表單標簽
- ??3.1 from 標簽
- ??3.2 input 標簽
- ??3.3 select 標簽
- ??3.4 無語義標簽
📕1. HTML基礎
??1.1 什么是HTML
HTML(Hyper Text Markup Language），超文本標記語言。
超?本 : ??本要強?，通過鏈接和交互式?式來組織和呈現信息的?本形式，不僅僅有?本，還可能包含圖?，?頻，或者?已經審閱過它的學者所加的評注、補充或腳注等等。
標記語? : 由標簽構成的語?。
HTML的標簽都是提前定義好的，使用不同的標簽，表示不同的內容。 類似于飛書，word等。
如果選中?本, 點擊標題1, 就會使?標題1的樣式來顯??本, 上述標題1就是?個"標簽"
比如下方代碼：
<h1>我是一級標簽</h1>
<h2>我是二級標簽</h2>
<h3>我是三級標簽</h3>
經過瀏覽器解析后的效果如下：
學習HTML 主要就是學習標簽。
??1.2 認識HTML標簽
HTML 代碼是由 “標簽” 構成的
例如：
<h1>我是一級題目</h1>
- 標簽名放到 < > 中
- ?部分標簽成對出現。h1為開始標簽，/h1為結束標簽
- 少數標簽只有開始標簽, 稱為 “單標簽”
- 開始標簽和結束標簽之間, 寫的是標簽的內容
- 開始標簽中可能會帶有 “屬性”，id 屬性相當于給這個標簽設置了?個唯?的標識符(?份證號碼)
<h2 id = "111">我是二級題目</h2>
??1.3 HTML文件基本結構
<html><head><title>第一個頁面</title></head><body>hello world!!!</body>
</html>
- html 標簽是整個 html ?件的根標簽(最頂層標簽)
- head 標簽中寫??的屬性
- body 標簽中寫的是??上顯?的內容
- title 標簽中寫的是??的標題
??1.4 標簽層次結構
標簽的層次結構一共有父子關系和兄弟關系兩種
<html><head><title>第一個頁面</title></head><body>hello world!!!</body>
</html>
- head 和 body 是 html 的?標簽(html 就是 head 和 body 的?標簽)
- title 是 head 的?標簽. head 是 title 的?標簽
- head 和 body 之間是兄弟關系
📕2. HTML常見標簽
??2.1 標題標簽
有六個, 從 h1 - h6. 數字越?, 則字體越?
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>
??2.2 段落標簽
在HTML中, 段落, 換?符, 空格都會失效, 如果需要分成段落, 需要使?專?的標簽
<p>這是一個段落</p>
- p 標簽描述的段落, 前?沒有縮進
- ?動根據瀏覽器寬度來決定排版
- html 內容?尾處的換?, 空格均?效
- 在 html 中?字之間輸?的多個空格只相當于?個空格
- html 中直接輸?換?不會真的換?, ?是相當于?個空格
??2.3 換行標簽
br 是 break 的縮寫， 表?換?。
<br/>這是一個br標簽
<br/>這是一個br標簽
<br/>這是一個br標簽
- br 是?個單標簽(不需要結束標簽)
- br 標簽不像 p 標簽那樣帶有?個很?的空隙
??2.4 圖片標簽
<img src="rose.jpg">
此時要把 rose.jpg 這個圖??件放到和 html 中的同級?錄中
找到統計目錄后鼠標右鍵找到paste，先復制一遍圖片的URL，點擊paste后使用command+v即可。
??2.5 超鏈接標簽
<a href="http://www.baidu.com">百度</a>
- href: 必須具備, 表?點擊后會跳轉到哪個??
- target: 打開?式. 默認是 _self. 如果是 _blank 則?新的標簽?打開
超鏈接的幾種形式：
1.外部鏈接: href 引?其他?站的地址
<a href="http://www.baidu.com">百度</a>
2.內部鏈接：?站內部??之間的鏈接. 寫相對路徑即可
<!-- 1.html -->
我是 1.html
<a href="2.html">點我跳轉到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">點我跳轉到 1.html</a>
3.空鏈接：使? # 在 href 中占位.
<a href="#">空鏈接</a>
??2.6 表格標簽
- table 標簽: 表?整個表格
- tr: 表?表格的??
- td: 表??個單元格
- thead: 表格的頭部區域
- tbody: 表格的主體區域
??注：table標簽包含tr，tr標簽包含td
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500"><tr><td>學號</td><td>姓名</td><td>年齡</td></tr><tr><td>230451426</td><td>朱續龍</td><td>20</td></tr><tr><td>230451424</td><td>李玖芳</td><td>20</td></tr></table>
- align 是表格相對于周圍元素的對??式. align=“center” (不是內部元素的對??式)
- border 表?邊框. 1 表?有邊框(數字越?, 邊框越粗), “” 表?沒邊框
- cellpadding: 內容距離邊框的距離, 默認 1 像素
- cellspacing: 單元格之間的距離. 默認為 2 像素
- width / height: 設置尺?
📕3. 表單標簽
表單是讓用戶輸?信息的重要途徑。分成兩個部分:
- 表單域: 包含表單元素的區域. 重點是 form 標簽.
- 表單控件: 輸?框, 提交按鈕等. 重點是 input 標簽.
??3.1 from 標簽
<form action="test.html">... [form 的內容]
</form>
描述了要把數據按照什么?式, 提交到哪個??中（關于from需要結合后端代碼進行理解）
??3.2 input 標簽
- type(必須有), 取值種類很多, button, checkbox, text, file, image, password, radio 等
- name: 給 input 起了個名字. 尤其是對于 單選按鈕, 具有相同的 name 才能多選?.
- value: input 中的默認值
- checked: 默認被選中. (?于單選按鈕和多選按鈕)
- 🌈 文本框
<input type="text">
- 🌈 密碼框
<input type="password">
- 🌈 單選框
性別：
<input type="radio" name="sex"> 男
<input type="radio" name="sex"> 女
??注意: 單選框之間必須具備相同的 name 屬性, 才能實現 多選? 效果
- 🌈 復選框
愛好：
<input type="checkbox">吃飯
<input type="checkbox">睡覺
<input type="checkbox">打豆豆
- 🌈 普通按鈕
<input type="button" value="我是一個按鈕">
點擊后并沒有反應，需要搭配js使用，后續介紹。
- 🌈 提交按鈕
<form><input type="text" name="username"><input type="submit" value="submit">
</form>
提交按鈕必須放在from標簽內，點擊后就會嘗試給服務器發請求。
??3.3 select 標簽
<select><option>北京</option><option>上海</option><option>深圳</option>
</select>
option中定義selected=“selected”表示默認被選中
??3.4 無語義標簽
div 標簽, division 的縮寫, 含義是分割
span 標簽, 含義是跨度
就是兩個盒?， ?于??布局。div 是獨占??的, 是?個?盒?，span 不獨占??, 是?個?盒?。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>我的第一個html界面</title>
</head>
<body><div><span>咬人貓</span><span>咬人貓</span><span>咬人貓</span></div><div><span>兔總裁</span><span>兔總裁</span><span>兔總裁</span></div><div><span>阿葉君</span><span>阿葉君</span><span>阿葉君</span></div>
</body>
</html>
