武漢疫情最新消息今天佛山百度快照優(yōu)化排名
文章目錄
- HTML結(jié)構(gòu)
- 快速生成代碼框架
- HTML常見標(biāo)簽
- 表格標(biāo)簽
- 編寫簡歷信息
- 填寫簡歷信息
- Emmet 快捷鍵
-
HTML 特殊字符
一、HTML結(jié)構(gòu)
1.認(rèn)識HTML標(biāo)簽
HTML 代碼是由 "標(biāo)簽" 構(gòu)成的.
形如:
<body>hello</body>
- 標(biāo)簽名 (body) 放到 < > 中
- 大部分標(biāo)簽成對出現(xiàn). <body> 為開始標(biāo)簽, </body> 為結(jié)束標(biāo)簽.
- 少數(shù)標(biāo)簽只有開始標(biāo)簽, 稱為 "單標(biāo)簽".
- 開始標(biāo)簽和結(jié)束標(biāo)簽之間, 寫的是標(biāo)簽的內(nèi)容. (hello)
- 開始標(biāo)簽中可能會帶有 "屬性". id 屬性相當(dāng)于給這個標(biāo)簽設(shè)置了一個唯一的標(biāo)識符(身份證號碼). <body id="myId">hello</body>
2.HTML 文件基本結(jié)構(gòu)
<html><head><title>第一個頁面</title></head><body>hello world</body>
</html>
- html 標(biāo)簽是整個 html 文件的根標(biāo)簽(最頂層標(biāo)簽)
- head 標(biāo)簽中寫頁面的屬性.
- body 標(biāo)簽中寫的是頁面上顯示的內(nèi)容
- title 標(biāo)簽中寫的是頁面的標(biāo)題.
3.標(biāo)簽層次結(jié)構(gòu)
- 父子關(guān)系
- 兄弟關(guān)系
<html><head><title>第一個頁面</title></head><body>hello world</body>
</html>
- head 和 body 是 html 的子標(biāo)簽(html 就是 head 和 body 的父標(biāo)簽)
- title 是 head 的子標(biāo)簽. head 是 title 的父標(biāo)簽.
- head 和 body 之間是兄弟關(guān)系.
標(biāo)簽之間的結(jié)構(gòu)關(guān)系, 構(gòu)成了一個 DOM 樹 (DOM 是 Document Object Mode (文檔對象模型) 的縮寫. )。
二、快速生成代碼框架
在vscode中利用!+回車鍵就可以生成代碼主體框架。
<!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 (文檔類型定義), 描述當(dāng)前的文件是一個 HTML5 的文件.
- <html lang="en"> 其中 lang 屬性表示當(dāng)前頁面是一個 "英語頁面". 這里暫時不用管. (有些瀏覽器會根據(jù)此處的聲明提示是否進(jìn)行自動翻譯).
- <meta charset="UTF-8"> 描述頁面的字符編碼方式. 沒有這一行可能會導(dǎo)致中文亂碼.
- <meta name="viewport" content="width=device-width, initial-scale=1.0"> name="viewport" 其中 viewport 指的是設(shè)備的屏幕上能用來顯示我們的網(wǎng)頁的那一塊區(qū) 域. content="width=device-width, initial-scale=1.0" 在設(shè)置可視區(qū)和設(shè)備寬度等寬, 并設(shè)置初始縮放為不縮放. (這個屬性對于移動端開發(fā)更重要一些).
三、HTML 常見標(biāo)簽
1.注釋標(biāo)簽
注釋不會顯示在界面上. 目的是提高代碼的可讀性.
<!-- 我是注釋 -->
ctrl + / 快捷鍵可以快速進(jìn)行注釋/取消注釋.
頁面不進(jìn)行展示，但是可以通過F12來查看注釋！
注釋的原則
- 要和代碼邏輯一致.
- 盡量使用中文.
- 不要傳遞負(fù)能量.
2.標(biāo)題標(biāo)簽: h1-h6
有六個, 從 h1 - h6. 數(shù)字越大, 則字體越小.
<!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><h1>hello</h1><h2>hello</h2><h3>hello</h3><h4>hello</h4><h5>hello</h5><h6>hello</h6>
</body>
</html>
3.段落標(biāo)簽:p
把一段比較長的文本粘貼到 html 中, 會發(fā)現(xiàn)并沒有分成段落.
這時候我們可以用到段落標(biāo)簽來進(jìn)行分段處理。
p 標(biāo)簽表示一個段落.<p>這是一個段落</p>
通過 p 標(biāo)簽改進(jìn)上述代碼, 每個段落放到 p 標(biāo)簽中.
<!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><p>css中的1px并不等于設(shè)備的1px</p><p>在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個像素往往都是對應(yīng)著電腦屏幕的1個物理像素，這可能會造成我們的一個錯覺，那就是css中的像素就是設(shè)備的物理像素。但實際情況卻并非如此，css中的像素只是一個抽象的單位，在不同的設(shè)備或不同的環(huán)境中，css中的1px所代表的設(shè)備物理像素是不同的。在為桌面瀏覽器設(shè)計的網(wǎng)頁中，我們無需對這個津津計較，但在移動設(shè)備上，必須弄明白這點(diǎn)。在早先的移動設(shè)備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個css像素確實是等于一個屏幕物理像素的。后來隨著技術(shù)的發(fā)展，移動設(shè)備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等于兩個物理像素的。其他品牌的移動設(shè)備也是這個道理。例如安卓設(shè)備根據(jù)屏幕像素密度可分為ldpi、mdpi、hdpi、xhdpi等不同的等級，分辨率也是五花八門，安卓設(shè)備上的一個css像素相當(dāng)于多少個屏幕物理像素，也因設(shè)備的不同而不同，沒有一個定論。</p><p>還有一個因素也會引起css中px的變化，那就是用戶縮放。例如，當(dāng)用戶把頁面放大一倍，那么css中1px所代表的物理像素也會增加一倍；反之把頁面縮小一倍，css中1px所代表的物理像素也會減少一倍。關(guān)于這點(diǎn)，在文章后面的部分還會講到。 </p><p>在移動端瀏覽器中以及某些桌面瀏覽器中，window對象有一個devicePixelRatio屬性，它的官方的定義為：設(shè)備物理像素和設(shè)備獨(dú)立像素的比例，也就是 devicePixelRatio = 物理像素 /獨(dú)立像素。css中的px就可以看做是設(shè)備的獨(dú)立像素，所以通過devicePixelRatio，我們可以知道該設(shè)備上一個css像素代表多少個物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值為2，也就是說1個css像素相當(dāng)于2個物理像素。但是要注意的是，devicePixelRatio在不同的瀏覽器中還存在些許的兼容性問題，所以我們現(xiàn)在還并不能完全信賴這個東西，具體的情況可以看下這篇文章。</p>
</body>
</html>注意:
- p 標(biāo)簽之間存在一個空隙
- 當(dāng)前的 p 標(biāo)簽描述的段落, 前面還沒有縮進(jìn). (未來 CSS 會學(xué))
- 自動根據(jù)瀏覽器寬度來決定排版.
- html 內(nèi)容首尾處的換行, 空格均無效.
- 在 html 中文字之間輸入的多個空格只相當(dāng)于一個空格.
- html 中直接輸入換行不會真的換行, 而是相當(dāng)于一個空格.
4.換行標(biāo)簽:br
- br 是一個單標(biāo)簽(不需要結(jié)束標(biāo)簽)
- br 標(biāo)簽不像 p 標(biāo)簽?zāi)菢訋в幸粋€很大的空隙.
- <br/> 是規(guī)范寫法. 不建議寫成 <br>
<!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><p>在css中我們一般使用px作為單位，<br>在桌面瀏覽器中css的1個像素往往都是對應(yīng)著電腦屏幕的1個物理像素，這可能會造成我們的一個錯覺，那就是css中的像素就是設(shè)備的物理像素。但實際情況卻并非如此，css中的像素只是一個抽象的單位，在不同的設(shè)備或不同的環(huán)境中，css中的1px所代表的設(shè)備物理像素是不同的。在為桌面瀏覽器設(shè)計的網(wǎng)頁中，我們無需對這個津津計較，但在移動設(shè)備上，必須弄明白這點(diǎn)。在早先的移動設(shè)備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個css像素確實是等于一個屏幕物理像素的。后來隨著技術(shù)的發(fā)展，移動設(shè)備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等于兩個物理像素的。其他品牌的移動設(shè)備也是這個道理。例如安卓設(shè)備根據(jù)屏幕像素密度可分為ldpi、mdpi、hdpi、xhdpi等不同的等級，分辨率也是五花八門，安卓設(shè)備上的一個css像素相當(dāng)于多少個屏幕物理像素，也因設(shè)備的不同而不同，沒有一個定論。</p>
</body>
</html>
5.格式化標(biāo)簽
- 加粗: strong 標(biāo)簽 和 b 標(biāo)簽
- 傾斜: em 標(biāo)簽 和 i 標(biāo)簽
- 刪除線: del 標(biāo)簽 和 s 標(biāo)簽
- 下劃線: ins 標(biāo)簽 和 u 標(biāo)簽
<!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><strong>strong 加粗處理</strong><b>b 加粗處理</b><em>em 傾斜</em><del>del 刪除線</del><s>s 刪除線</s><ins>ins 下劃線</ins><u>u 下劃線</u>
</body>
</html>
6.圖片標(biāo)簽: img
img 標(biāo)簽必須帶有 src 屬性. 表示圖片的路徑
<img src = "rose.jpg" >
此時要把 rose.jpg 這個圖片文件放到和 html 中的同級目錄中.
img 標(biāo)簽的其他屬性????????
- alt: 替換文本. 當(dāng)文本不能正確顯示的時候, 會顯示一個替換的文字.
- title: 提示文本. 鼠標(biāo)放到圖片上, 就會有提示.
- width/height: 控制寬度高度. 高度和寬度一般改一個就行, 另外一個會等比例縮放. 否則就會圖片失衡.
- border: 邊框, 參數(shù)是寬度的像素. 但是一般使用 CSS 來設(shè)定.
<img src = "rose.jpg" alt = " 鮮花 " title = " 這是一朵鮮花 " width = "500px" height = "800px"border = "5px" >
注意:1. 屬性可以有多個, 不能寫到標(biāo)簽之前2. 屬性之間用空格分割, 可以是多個空格, 也可以是換行.3. 屬性之間不分先后順序4. 屬性使用 "鍵值對" 的格式來表示.
關(guān)于目錄結(jié)構(gòu):對于一個復(fù)雜的網(wǎng)站, 頁面資源很多, 這種情況可以使用目錄把這些文件整理好.
- 1) 相對路徑: 以 html 所在位置為基準(zhǔn), 找到圖片的位置.
同級路徑: 直接寫文件名即可 (或者 ./)下一級路徑: image/1.jpg上一級路徑: ../image/1.jpg
- 2) 絕對路徑: 一個完整的磁盤路徑, 或者網(wǎng)絡(luò)路徑. 例如
磁盤路徑 D:\rose.jpg網(wǎng)絡(luò)路徑 https://images0.cnblogs.com/blog/130623/201407/300958470402077.png
1) 使用相對路徑: 創(chuàng)建一個 image 目錄和 html 同級, 并放入一個 rose2.jpg
<img src = "image/rose2.jpg" alt = "" >
2) 使用相對路徑2: 在 image 目錄中創(chuàng)建一個 html, 并訪問上級目錄的 rose.jpg
<img src = "../rose.jpg" alt = "" >
3) 使用絕對路徑1: 最好使用 / , 不要使用 \
<img src = "D:/rose.jpg" alt = "" >
4) 使用絕對路徑2: 使用網(wǎng)絡(luò)路徑
<img src = "https://images0.cnblogs.com/blog/130623/201407/300958475557219.png"alt = "" >
<!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><img src="https://images0.cnblogs.com/blog/130623/201407/300958475557219.png"alt="">
</body>
</html>
7.超鏈接標(biāo)簽: a
- href: 必須具備, 表示點(diǎn)擊后會跳轉(zhuǎn)到哪個頁面.
- target: 打開方式. 默認(rèn)是 _self. 如果是 _blank 則用新的標(biāo)簽頁打開.
<!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><a href="https://www.baidu.com">百度一下</a>
</body>
</html>當(dāng)我們點(diǎn)擊時可以發(fā)現(xiàn)在當(dāng)前窗口中加載出百度頁面！
鏈接的幾種形式 :
外部鏈接: href 引用其他網(wǎng)站的地址 ( <a href = "http://www.baidu.com" > 百度 </a>)內(nèi)部鏈接: 網(wǎng)站內(nèi)部頁面之間的鏈接. 寫相對路徑即可
在一個目錄中, 先創(chuàng)建一個 1.html, 再創(chuàng)建一個 2.html
<!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><!-- 1.html -->我是 1.html<a href="2.html">點(diǎn)我跳轉(zhuǎn)到 2.html</a>
</body></html> 空鏈接: 使用 # 在 href 中占位.
<a href = "#" > 空鏈接 </a>
下載鏈接: href 對應(yīng)的路徑是一個文件. (可以使用 zip 文件)
<a href = "test.zip" > 下載文件 </a>
網(wǎng)頁元素鏈接: 可以給圖片等任何元素添加鏈接(把元素放到 a 標(biāo)簽中)
<a href = "http://www.sogou.com" ><img src = "rose.jpg" alt = "" ></a>
錨點(diǎn)鏈接: 可以快速定位到頁面中的某個位置.
<!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><a href="#one">第一集</a><a href="#two">第二集</a><a href="#three">第三集</a><p id="one">第一集劇情 <br>第一集劇情 <br>...</p><p id="two">第二集劇情 <br>第二集劇情 <br>...</p><p id="three">第三集劇情 <br>第三集劇情 <br>...</p>
</body></html> 注意:禁止 a 標(biāo)簽跳轉(zhuǎn): <a href="javascript:void(0);"> 或者 <a href="javascript:;">
四、表格標(biāo)簽
table 標(biāo)簽: 表示整個表格tr: 表示表格的一行td: 表示一個單元格th: 表示表頭單元格. 會居中加粗thead: 表格的頭部區(qū)域(注意和 th 區(qū)分, 范圍是比 th 要大的)tbody: 表格得到主體區(qū)域.table 包含 tr , tr 包含 td 或者 th.
表格標(biāo)簽有一些屬性, 可以用于設(shè)置大小邊框等. 但是一般使用 CSS 方式來設(shè)置.
以下這些屬性都要放到 table 標(biāo)簽中.
- align 是表格相對于周圍元素的對齊方式. align="center" (不是內(nèi)部元素的對齊方式)
- border 表示邊框. 1 表示有邊框(數(shù)字越大, 邊框越粗), "" 表示沒邊框.
- cellpadding: 內(nèi)容距離邊框的距離, 默認(rèn) 1 像素
- cellspacing: 單元格之間的距離. 默認(rèn)為 2 像素
- width / height: 設(shè)置尺寸.
<!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>
1.合并單元格
- 跨行合并: rowspan="n"
- 跨列合并: colspan="n"
<!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 rowspan="2">男</td><td>10</td></tr><tr><td>李四</td><td>女</td><td>11</td></tr></table>
</body></html>
2.列表標(biāo)簽
- 無序列表[重要] ul li
- 有序列表[用的不多] ol li
- 自定義列表[重要] dl (總標(biāo)簽) dt (小標(biāo)題) dd (圍繞標(biāo)題來說明) 上面有個小標(biāo)題, 下面有幾個圍繞著標(biāo)題來展開的.
注意
- 元素之間是并列關(guān)系
- ul/ol 中只能放 li 不能放其他標(biāo)簽, dl 中只能放 dt 和 dd
- li 中可以放其他標(biāo)簽.
- 列表帶有自己的樣式, 可以使用 CSS 來修改. (例如前面的小圓點(diǎn)都會去掉)
<!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><h3>無序列表</h3><ul><li>咬人貓</li><li>兔總裁</li><li>阿葉君</li></ul><h3>有序列表</h3><ol><li>咬人貓</li><li>兔總裁</li><li>阿葉君</li></ol><h3>自定義列表</h3><dl><dt>我的老婆們</dt><dd>咬人貓</dd><dd>兔總裁</dd><dd>阿葉君</dd></dl>
</body></html>
3.表單標(biāo)簽
表單是讓用戶輸入信息的重要途徑.
分成兩個部分:
- 表單域: 包含表單元素的區(qū)域. 重點(diǎn)是 form 標(biāo)簽.
- 表單控件: 輸入框, 提交按鈕等. 重點(diǎn)是 input 標(biāo)簽.
1.form 標(biāo)簽
<form action = "test.html" >? ... [form 的內(nèi)容 ]</form>
描述了要把數(shù)據(jù)按照什么方式, 提交到哪個頁面中. 需要結(jié)合 服務(wù)器 & 網(wǎng)絡(luò)編程
2.input 標(biāo)簽
各種輸入控件, 單行文本框, 按鈕, 單選框, 復(fù)選框.
- type(必須有), 取值種類很多多, button, checkbox, text, file, image, password, radio 等.
- name: 給 input 起了個名字. 尤其是對于 單選按鈕, 具有相同的 name 才能多選一.
- value: input 中的默認(rèn)值.
- checked: 默認(rèn)被選中. (用于單選按鈕和多選按鈕)
- maxlength: 設(shè)定最大長度.
文本框
<input type = "text" >
密碼框
<input type = "password" >
單選框
性別 :<input type = "radio" name = "sex" > 男<input type = "radio" name = "sex" checked = "checked" > 女
注意: 單選框之間必須具備相同的 name 屬性, 才能實現(xiàn) 多選一 效果.
復(fù)選框
愛好 :<input type = "checkbox" > 吃飯 <input type = "checkbox" > 睡覺 <input type = "checkbox" >打游戲
普通按鈕
<input type = "button" value = " 我是個按鈕 " >
當(dāng)前點(diǎn)擊了沒有反應(yīng). 需要搭配 JS 使用。
<input type = "button" value = " 我是個按鈕 " onclick = "alert('hello')" >
提交按鈕
<form action = "test.html" ><input type = "text" name = "username" ><input type = "submit" value = " 提交 " ></form>
提交按鈕必須放到 form 標(biāo)簽內(nèi). 點(diǎn)擊后就會嘗試給服務(wù)器發(fā)送
清空按鈕
<form action = "test.html" ><input type = "text" name = "username" ><input type = "submit" value = " 提交 " ><input type = "reset" value = " 清空 " ></form>
清空按鈕必須放在 form 中. 點(diǎn)擊后會將 form 內(nèi)所有的用戶輸入內(nèi)容重置.
選擇文件
<input type = "file" >
點(diǎn)擊選擇文件, 會彈出對話框, 選擇文件.
label 標(biāo)簽
?
搭配 input 使用. 點(diǎn)擊 label 也能選中對應(yīng)的單選/復(fù)選框, 能夠提升用戶體驗.for 屬性: 指定當(dāng)前 label 和哪個相同 id 的 input 標(biāo)簽對應(yīng). (此時點(diǎn)擊才是有用的)<label for = "male" > 男 </label> <input id = "male" type = "radio" name = "sex" >
select 標(biāo)簽
下拉菜單
option 中定義 selected="selected" 表示默認(rèn)選中.<select><option> 北京 </option><option selected = "selected" > 上海 </option></select>
注意： 可以給的第一個選項, 作為默認(rèn)選項
<!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><select><option>--請選擇年份--</option><option>1991</option><option>1992</option><option>1993</option><option>1994</option><option>1995</option></select>
</body></html>
textarea 標(biāo)簽
<textarea rows = "3" cols = "50" ></textarea>
文本域中的內(nèi)容, 就是默認(rèn)內(nèi)容, 注意, 空格也會有影響.
rows 和 cols 也都不會直接使用, 都是用 css 來改的.
無語義標(biāo)簽: div & span
- div 標(biāo)簽, division 的縮寫, 含義是 分割
- span 標(biāo)簽, 含義是跨度
- 就是兩個盒子. 用于網(wǎng)頁布局
- div 是獨(dú)占一行的, 是一個大盒子.
- span 不獨(dú)占一行, 是一個小盒子.
<!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><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>
五、編寫簡歷信息
<!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><h1>xxx</h1><!-- 基本信息 --><div><h2>基本信息</h2><img src="https://5b0988e595225.cdn.sohucs.com/images/20200223/bd7ed12b66144da2bea669a4a7d9b673.jpeg"width="200"height="200"><p><span>求職意見:</span>C++ 開發(fā)工程師</p><p><span>聯(lián)系電話:</span>xxxxxxxxxxx</p><p><span>郵箱:</span>xxxxxxxxxx@qq.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>2002 - 2008 xxx幼兒園 幼兒園</li><li>2009 - 2016 xxx小學(xué) 小學(xué)</li><li>2016 - 2018 xxx中學(xué) 初中</li><li>2018 - 2021 xxx中學(xué) 高中</li><li>2021 - 2025 xxx大學(xué) 計算機(jī)專業(yè) 本科</li></ol></div><!-- 專業(yè)技能 --><div><h2>專業(yè)技能</h2><ul><li>C++11 基礎(chǔ)語法扎實，已經(jīng)刷了 800 道 算法 題；</li><li>常見數(shù)據(jù)結(jié)構(gòu)都可以獨(dú)立實現(xiàn)并熟練應(yīng)用；</li><li>熟知計算機(jī)網(wǎng)絡(luò)理論，并且可以獨(dú)立排查常見問題；</li><li>掌握 Web 開發(fā)能力，并且獨(dú)立開發(fā)了學(xué)校的留言墻功能。</li></ul></div><!-- 項目 --><div><h2>我的項目</h2><ol><li><h3>留言墻</h3><p>開發(fā)時間:2021年9月 到 2022年12月</p><p>功能介紹：<ul><li>支持留言發(fā)布</li><li>支持匿名留言</li></ul></p></li><li><h3>學(xué)習(xí)小助手</h3><p>開發(fā)時間:2021年9月 到 2022年12月</p><p>功能介紹：<ul><li>支持錯題檢索</li><li>支持同學(xué)探討</li></ul></p></li></ol></div><!-- 其他信息 --><div><h2>個人評價</h2><p>在校期間，學(xué)習(xí)成績優(yōu)良，多次獲得獎學(xué)金。</p></div></body></html>
六、填寫簡歷信息
<!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 width="500px" cellspacing="0"><thead><h3>請?zhí)顚懞啔v信息</h3></thead><tbody><tr><td><label for="name">姓名</label></td><td><input type="text" ,id="name"></td></tr><tr><td>性別</td><td><input type="radio" name="sex" id="male" checked="checked"><!-- img 要放到 label 內(nèi)部, 保證點(diǎn)擊圖標(biāo)也能選中單選框 --><!-- 還需要把 width 加上, 否則圖片太大了 --><label for="male"><img src="./image/男.png" alt="" width="20px">男</label><input type="radio" name="sex" id="female"><label for="female"><img src="./image/女.png" alt="" width="20px">女</label></td></tr><tr><td>出生日期</td><tr><select><option>--請選擇年份--</option><option>1998</option><option>1999</option><option>2000</option><option>2001</option></select><td><select><option>--請選擇月份--</option><option value="">1</option><option value="">2</option><option value="">3</option><option value="">4</option><option value="">5</option><option value="">6</option><option value="">7</option><option value="">8</option><option value="">9</option><option value="">10</option><option value="">11</option><option value="">12</option></select><select><option>--請選擇日期--</option><option value="">1</option><option value="">2</option><option value="">3</option><option value="">4</option><option value="">5</option><option value="">6</option><option value="">7</option><option value="">8</option><option value="">9</option><option value="">10</option><option value="">11</option><option value="">12</option><option value="">13</option><option value="">14</option><option value="">15</option><option value="">16</option><option value="">17</option><option value="">18</option><option value="">19</option><option value="">20</option><option value="">21</option><option value="">22</option><option value="">23</option><option value="">24</option><option value="">25</option><option value="">26</option><option value="">27</option><option value="">28</option><option value="">29</option><option value="">30</option><option value="">31</option></select></td></tr><tr><td>就讀學(xué)校</td><td><input type="text"></td></tr><tr><td>應(yīng)聘崗位</td><td><input type="checkbox" id="frontend"><label for="frontend">前端開發(fā)</label><input type="checkbox" id="backend"><label for="backend">后端開發(fā)</label><input type="checkbox" id="qa"><label for="qa">測試開發(fā)</label><input type="checkbox" id="op"><label for="op">運(yùn)維開發(fā)</label></td></tr><tr><td>掌握的技能</td><td><textarea name="" id="" cols="30" rows="10"></textarea></td></tr><tr><td>項目經(jīng)歷</td><td><textarea name="" id="" cols="30" rows="10"></textarea></td></tr><tr><td><input type="checkbox" id="lisence"><label for="lisence">我已仔細(xì)閱讀過公司的招聘要求</label></td></tr><tr><td><a href="#">查看我的狀態(tài)</a></td></tr><tr><td><h3>請應(yīng)聘者確認(rèn): </h3><ul><li>以上信息真實有效</li><li>能夠盡早去公司實習(xí)</li><li>能接受公司的加班文化</li></ul></td></tr></tbody></table>
</body></html>
七、Emmet 快捷鍵
快速輸入標(biāo)簽
input[tab]
快速輸入多個標(biāo)簽
div*3[tab]
標(biāo)簽帶id
div#sex[tab]
標(biāo)簽帶類名
div.sex[tab]
標(biāo)簽帶子元素
ul>li*3[tab]
標(biāo)簽帶兄弟元素
span+span
標(biāo)簽帶內(nèi)容
div{hello}
標(biāo)簽帶內(nèi)容(帶編號)
div{$.hello}
八、HTML 特殊字符
有些特殊的字符在 html 文件中是不能直接表示的, 例如:空格: ?;小于號: <;大于號: >;按位與: &;html 標(biāo)簽就是用 < > 表示的. 因此內(nèi)容里如果存在 < > , 就會發(fā)生混淆.