詳解HTML

1.HTML?結構

1.1認識HTML標簽

?1.2標簽層次結構

1.3快速生成代碼框架

2.HTML常見標簽

2.1注釋標簽

2.2標題標簽：h1-h6?

2.3段落標簽：p

2.4換行標簽：br

2.5格式化標簽?

2.6圖片標簽：img?

2.7超鏈接標簽

2.8表格標簽

合并單元格

2.9列表標簽

2.10表單標簽

form?標簽

input?標簽

2.11label標簽

2.12select標簽

2.13textarea標簽

2.14無語義標簽：div&span

代碼示例：

3.綜合案例：展示簡歷信息

1.HTML?結構

1.1認識HTML標簽

HTML?代碼是由 "標簽" 構成的.

形如:??

<body>hello</body>

? 標簽名 (body) 放到 <?>?中

??大部分標簽成對出現. ?<body>?為開始標簽, ?</body>?為結束標簽.

??少數標簽只有開始標簽, 稱為 "單標簽".

??開始標簽和結束標簽之間, 寫的是標簽的內容.?

??開始標簽中可能會帶有 "屬性".?id?屬性相當于給這個標簽設置了一個唯一的標識符(身份證號碼).

<body id="myId">hello</body>

?1.2標簽層次結構

<html><head><title>第一個頁面</title></head><body>hello world</body>
</html>

其中:

???head 和 body 是 html?的子標簽(html 就是?head?和?body?的父標簽)

???title?是 head?的子標簽.?head?是 title?的父標簽.

???head?和 body?之間是兄弟關系.

可以使用 chrome?的開發者工具查看頁面的結構.

F12 或者右鍵審查元素, 開啟開發者工具, 切換到?Elements?標簽, 就可以看到頁面結構細節.

1.3快速生成代碼框架

?在VScode中創建文件xxx.html，直接輸入！，按tab或者回車，此時能自動生成代碼的主體框架

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

細節解釋: (了解即可, 不必深究)

??<!DOCTYPE?html>??稱為 DTD?(文檔類型定義), 描述當前的文件是一個?HTML5?的文件.

??<html?lang="en">??其中 lang?屬性表示當前頁面是一個 "英語頁面".(language = english)?有些瀏覽器會根據此處的聲明提示是否進行自動翻譯.

??<meta?charset="UTF-8">??描述頁面的字符編碼方式. 沒有這一行可能會導致中文亂碼.

??<meta?name="viewport" content="width=device-width, initial-scale=1.0">

??name="viewport"??其中 viewport?指的是設備的屏幕上能用來顯示我們的網頁的那一塊區域.

??content="width=device-width, initial-scale=1.0" 在設置可視區和設備寬度等寬, 并?設置初始縮放為不縮放. (這個屬性對于移動端開發更重要一些).

2.HTML常見標簽

2.1注釋標簽

注釋不會顯示在界面上.?目的是提高代碼的可讀性.

<!-- 我是注釋 -->

ctrl?+ / 快捷鍵可以快速進行注釋/取消注釋

注釋的原則：要和代碼一致、盡量使用中文、不要傳遞負能量（有些讀者可見）

2.2標題標簽：h1-h6?

標題標簽有六個，從h1-h6,數字越大則字體越小

2.3段落標簽：p

把一段比較長的文本粘貼到 html?中, 會發現并沒有分成段落.

例如以下文本:

蔡徐坤（KUN），1998年8月2日出生于浙江省溫州市，戶籍湖南省吉首市?[114]，中國內地男歌手、演員、原創音樂制作人?[1]、MV導演?[83]。

2012年8月，蔡徐坤參演的偶像劇《童話二分之一》播出，由此開始步入大眾視線。2018年1月，參加競演類綜藝節目《偶像練習生》并以總票數第一正式出道，成為限定男團NINE PERCENT隊長?[2]；8月，發行首張EP《1》，獲2018亞洲新歌榜年度盛典最受歡迎潛力男歌手獎?[3]；

在body中復制該段文本，運行結果為：

并沒有分成段落

<p>這是一個段落</p>

?通過 p 標簽改進上述代碼, 每個段落放到 p 標簽中.

注意：

當前的 p 標簽描述的段落, 前面還沒有縮進. （CSS）

自動根據瀏覽器寬度來決定排版.

html?內容首尾處的換行, 空格均無效

在 html?中文字之間輸入的多個空格只相當于一個空格.

html?中直接輸入換行不會真的換行, 而是相當于一個空格.

2.4換行標簽：br

? ?br?是 break?的縮寫. 表示換行.?是一個單標簽(不需要結束標簽)

???br?標簽不像 p 標簽那樣帶有一個很大的空隙.、??<br/>?是規范寫法. 不建議寫成 ?<br>

2.5格式化標簽?

??加粗:?strong?標簽和 b 標簽

??傾斜:?em?標簽和 i 標簽

??刪除線:?del?標簽和 s 標簽

??下劃線:?ins?標簽和 u 標簽

使用CSS也可以完成類似的效果，實際開發中以CSS為主

2.6圖片標簽：img?

img?標簽必須帶有 src?屬性. 表示圖片的路徑.

<img src="kun.jpg">

此時要把 kun.jpg?這個圖片文件放到和 html?中的同級目錄中.

img?標簽的其他屬性

??alt: 替換文本. 當文本不能正確顯示的時候, 會顯示一個替換的文字.?

??title: 提示文本.?鼠標放到圖片上, 就會有提示.

??width/height: 控制寬度高度. 高度和寬度一般改一個就行, 另外一個會等比例縮放. 否則圖片會失衡

? border: 邊框, 參數是寬度的像素. 但是一般使用 CSS?來設定.

注意:

1. 屬性可以有多個, 不能寫到標簽之前

2. 屬性之間用空格分割, 可以是多個空格, 也可以是換行

3. 屬性之間不分先后順序

4. 屬性使用 "鍵值對"?的格式來表示.

2.7超鏈接標簽

? ?href: 必須具備, 表示點擊后會跳轉到哪個頁面

???target: 打開方式. 默認是 _self. 如果是 _blank?則用新的標簽頁打開.

鏈接的幾種形式:

外部連接：href引用其他網站的地址

<a href="http://www.baidu.com">百度</a>

內部鏈接: ?網站內部頁面之間的鏈接. 寫相對路徑即可.

例如在一個目錄中創建1.html和2.html

<!-- 1.html -->
我是 1.html
<a href="2.html">點我跳轉到 2.html</a><!-- 2.html -->
我是 2.html
<a href="1.html">點我跳轉到 1.html</a>

??空鏈接: ?使用 # 在 href?中占位.

<a href="#">空鏈接</a>

?下載鏈接: ?href?對應的路徑是一個文件. (可以使用 zip?文件)

<a href="test.zip">下載文件</a>

?網頁元素鏈接: 可以給圖片等任何元素添加鏈接(把元素放到 a 標簽中)

<a href="http://www.sogou.com"> <img src="kun.jpg" alt="">
</a>

錨點鏈接: 可以快速定位到頁面中的某個位置.

<a href="#one">第一集</a>
<a href="#two">第二集</a>
<p id="one">第一集劇情 <br>第一集劇情 <br>
</p>
<p id="two">第二集劇情 <br> 第二集劇情 <br>
</p>

2.8表格標簽

? ?table?標簽: 表示整個表格? ? ??tr: 表示表格的一行

???td: 表示一個單元格? ???th: 表示表頭單元格. 會居中加粗

???thead: 表格的頭部區域(注意和 th?區分, 范圍是比 th?要大的)

???tbody: 表格得到主體區域.

table?包含 tr?, tr?包含 td?或者 th.

表格標簽有一些屬性, 可以用于設置大小邊框等. 但是一般使用 CSS?方式來設置.

這些屬性都要放到 table?標簽中.

???align?是表格相對于周圍元素的對齊方式. ?align="center"??(不是內部元素的對齊方式)?

???border?表示邊框.?1 表示有邊框(數字越大, 邊框越粗),?""表示沒邊框.

???cellpadding:?內容距離邊框的距離, 默認 1 像素

???cellspacing: 單元格之間的距離. 默認為 2 像素

???width?/?height: 設置尺寸.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500"><tr><td>姓名</td> <td>性別</td> <td>年齡</td></tr><tr><td>張三</td> <td>男</td><td>10</td></tr><tr><td>李四</td> <td>女</td><td>11</td></tr></table>
</body>
</html>

合并單元格

跨行合并：rowspan="n"

跨列合并：colspan="n"

步驟：

1. 先確定跨行還是跨列

2. 找好目標單元格(跨列合并, 左側是目標單元格; 跨行合并, 上方是目標單元格)

3. 刪除的多余的單元格

2.9列表標簽

??無序列表[重要] ??ul??li?,?.

??有序列表[用的不多] ?ol??li

??自定義列表[重要] ?dl?(總標簽) ?dt?(小標題)??dd?(圍繞標題來說明) 上面有個小標題, 下面有幾個圍繞?著標題來展開的.

注意：

元素之間是并列關系、ul/ol?中只能放 li 不能放其他標簽,?dl?中只能放 dt 和 dd、li中可以放其他標簽、列表帶有自己的樣式可以使用CSS來修改

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表標簽</title>
</head>
<body><h2>無序列表</h2><ul><li>iKun</li><li>IKUN</li><li>Ikun</li></ul><h2>有序列表</h2><ol><li>iKun</li><li>IKUN</li><li>Ikun</li></ol><h2>自定義列表</h2><dl><dt>粉絲團</dt><dd>iKun</dd><dd>IKUN</dd><dd>Ikun</dd></dl>
</body>
</html>

2.10表單標簽

表單是讓用戶輸入信息的重要途徑.

分成兩個部分:

表單域：包含表單元素的區域，重點是form標簽

表單控件：輸入框、提交按鈕等、重點是input標簽

form?標簽

<form action="test.html"> ... [form 的內容]
</form>

描述了要把數據按照什么方式, 提交到哪個頁面中.

input?標簽

各種輸入控件, 單行文本框, 按鈕, 單選框, 復選框.

? ?type(必須有), 取值種類很多多,?button,?checkbox, text, file,?image,?password,?radio?等.?

???name: 給 input?起了個名字. 尤其是對于單選按鈕, 具有相同的 name?才能多選一.

???value:?input?中的默認值.

? ?checked: 默認被選中. (用于單選按鈕和多選按鈕)

???maxlength: 設定最大長度.

1）文本框

<input type="text">

2）密碼框

<input type="password">

3）單選框

性別：
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女

注意：單選框之間必須具備相同的name屬性，才可以實現單選效果

4）復選框

愛好<br/>
<input type="checkbox">吃飯
<input type="checkbox">睡覺
<input type="checkbox">玩游戲

5）普通按鈕

<input type="button" value="我是個按鈕">

當前點擊了沒有反應，需要搭配JS使用

<input type="button" value="我是個按鈕" onclick="alert('hello')">

6）提交按鈕

<form action="test.html"><input type="text" name="username"><input type="submit" value="提交"> 
</form>

7）清空按鈕


<form action="test.html"><input type="text" name="username"><input type="submit" value="提交"><input type="reset" value="清空">
</form>

8）選擇文件

<input type="file">

點擊選擇文件，會彈出對話框，選擇文件

2.11label標簽

搭配 input?使用. 點擊 label?也能選中對應的單選/復選框, 能夠提升用戶體驗.

for?屬性: 指定當前 label?和哪個相同 id?的 input?標簽對應.?(此時點擊才是有用的)

<label for="male">男</label> 
<input id="male" type="radio" name="sex">

2.12select標簽

下拉菜單，option中定義selected="selected"表示默認選中

<select><option>北京</option><option selected="selected">上海</option>
</select>

注意：可以使用給的第一個選項作為默認選項

2.13textarea標簽

<textarea rows="3" cols="50"></textarea>

文本域中的內容就是默認內容，注意，空格也會有影響

rows和cols也都不會直接使用，都是用CSS來改的?

2.14無語義標簽：div&span

div?標簽,?division?的縮寫, 含義是分割

span?標簽, 含義是跨度?

就是兩個盒子. 用于網頁布局

???div?是獨占一行的, ?是一個大盒子.?

? ?span不獨占一行，是一個小盒子

    <div><span>黑子</span><span>黑子</span><span>黑子</span></div><div><span>白子</span><span>白子</span><span>白子</span></div><div><span>純路人</span><span>純路人</span><span>純路人</span></div>

代碼示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Romised</title>
</head>
<body>坤哥的性別：<br/><input type="radio" name="sex">男<input type="radio" name="sex" checked="checked">女<br/>坤哥的愛好<br/><input id="eat" type="checkbox"><label for="eat">吃飯</label><input id="sleep" type="checkbox"><label for="sleep">睡覺</label><input id="play" type="checkbox"><label for="play">玩游戲</label><br/><input type="button" value="我是一個按鈕"><form action="html02.html"><input type="text" name="username"><input type="submit" value="提交"> <input type="reset" value="重置"><br/><input type="file"><br/></form><select><option>IKUN</option><option>黑子</option><option>真愛粉</option></select><br/><textarea rows="3" cols="20">在此處輸入鯤哥的簡介</textarea><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>

3.綜合案例：展示簡歷信息

?代碼實現：

<h1>坤坤</h1>
<!-- 基本信息 -->
<div><h2>基本信息</h2><img src="D:/kun.jpg" height="200px"><p><span>求職意向： </span>Java 開發工程師</p> <p><span>聯系電話： </span>XXX-XXX-XXXX</p>  <p><span>郵箱： </span>xxx@foxmail.com</p><p><a href="https://github.com">我的github</a></p><p><a href="https://csdn.com">我的博客</a></p> </div>
<div><h2>教育背景</h2><ol><li>1990 - 1996 幼兒園 幼兒園</li> <li>1996 - 2002 翻斗小學 小學</li><li>2002 - 2005 翻斗中學 初中</li><li>2005 - 2008 翻斗中學 高中</li><li>2008 - 2012 翻斗大學 計算機專業 本科</li> </ol>
</div><!-- 專業技能 -->
<div><h2>專業技能</h2><ul><li>Java 基礎語法扎實，已經刷了 800 道 Leetcode 題； </li><li>常見數據結構都可以獨立實現并熟練應用； </li><li>熟知計算機網絡理論，并且可以獨立排查常見問題； </li><li>掌握 Web 開發能力，并且獨立開發了學校的留言墻功能。 </li></ul>
</div><!-- 項目 -->
<div>
<h2>我的項目</h2>
<ol><li><h3>留言墻</h3><p>開發時間： 2008年9月 到 2008年12月</p><p>功能介紹：<ul><li>支持留言發布</li><li>支持匿名留言</li></ul></p></li><li><h3>學習小助手</h3><p>開發時間： 2008年9月 到 2008年12月</p><p>功能介紹：<ul><li>支持錯題檢索</li> <li>支持同學探討</li></ul></p></li></ol></div><!-- 其他信息 --><div><h2>個人評價</h2><p>在校期間，學習成績優良，多次獲得獎學金。 </p> </div>