解鎖網頁魔法：零基礎HTML通關秘籍

在這里插入圖片描述

文章目錄

  • **解鎖網頁魔法：零基礎HTML通關秘籍**
  • HTML 基礎
    • 目標
  • HTML 結構
      • 認識 HTML 標簽
  • HTML 文件基本結構
      • 標簽層次結構
    • 快速生成代碼框架
  • HTML 常見標簽
    • 注釋標簽
      • 注釋的原則
    • 標題標簽: h1-h6
    • 段落標簽: p
    • 換行標簽：br
    • 綜合案例: 展示博客
    • 超鏈接標簽: a
    • 表格標簽
      • **基本使用**
      • **合并單元格**
    • 列表標簽
    • 表單標簽
      • form 標簽
      • input 標簽
      • label 標簽
      • select 標簽
      • textarea 標簽
    • 無語義標簽: div & span
  • 綜合案例:展示簡歷信息
  • 請填寫簡歷信息
      • 提示：
  • Emmet 快捷鍵
  • HTML 特殊字符
  • 小結

解鎖網頁魔法：零基礎HTML通關秘籍

HTML 基礎

目標

  • 認識 HTML 的基本結構
  • 學會使用常用的 HTML 標簽

HTML 結構

認識 HTML 標簽

HTML 代碼是由“標簽”構成的。

形如：

<body>hello</body>
  • 標簽名 (body) 放到 <> 中
  • 大部分標簽成對出現， 為開始標簽， 為結束標簽。
  • 少數標簽只有開始標簽，稱為“單標簽”。
  • 開始標簽和結束標簽之間，寫的是標簽的內容。(hello)
  • 開始標簽中可能會帶有“屬性”。id 屬性相當于給這個標簽設置了一個唯一的標識符(身份證號碼)。
<body id="myId">hello</body>

HTML 文件基本結構

<html><head><title>第一個頁面</title></head><body>hello world</body>
</html>
  • html 標簽是整個 html 文件的根標簽(最頂層標簽)
  • head 標簽中寫頁面的屬性
  • body 標簽中寫的是頁面上顯示的內容
  • title 標簽中寫的是頁面的標題。

標簽層次結構

  • 父子關系
  • 兄弟關系
<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 標簽, 就可以看到頁面結構細節.

  • 搜狗搜索

    在這里插入圖片描述

標簽之間的結構關系, 構成了一個 DOM 樹

DOM 是 Document Object Mode (文檔對象模型) 的縮寫.

在這里插入圖片描述

快速生成代碼框架

在 IDEA 中創建文件 xxx.html，直接輸入 !，按 tab 鍵, 此時能自動生成代碼的主體框架。

Document ```html Document ```

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

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

  •   <html lang="en"> 其中 lang 屬性表示當前頁面是一個 "英語頁面", 這里暫時不用管. (有些瀏覽器會根據此處的聲明提示是否進行自動翻譯).

  •   <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" 在設置可視區和設備寬度等寬, 并設置初始縮放為不縮放. (這個屬性對于移動端開發更重要一些).

HTML 常見標簽

注釋標簽

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

<!-- 我是注釋 -->

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

注釋的原則

  • 要和代碼邏輯一致。
  • 盡量使用中文。
  • 不要傳遞負能量。

標題標簽: h1-h6

有六個，從 h1 - h6. 數字越大，則字體越小。

<h1>he11o</h1>
<h2>he11o</h2>
<h3>he11o</h3>
<h4>he11o</h4>
<h5>he11o</h5>
<h6>he11o</h6>

段落標簽: p

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

例如以下文本：

CSS中的1px并不等于設備的1px

在CSS中我們一般使用px作為單位，在桌面瀏覽器中css的1個像素往往都是對應著電腦屏幕的1個物理像素，這可能會造成我們的一個錯覺。那就是css中的像素就是設備的物理像素。但實際情況卻并非如此。css中的像素只是一個抽象的單位，在不同的設備或不同的環境中，css中的1px所代表的設備物理像素是不同的。在為桌面瀏覽器設計的網頁中，我們無需對這個詳細討論，但在移動設備上，必須弄明白這點。在早先的移動設備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個css像素確實是等于一個屏幕物理像素的。后來隨著技術的發展，移動設備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等于兩個物理像素的。其他品牌的移動設備也是這個道理。例如安卓設備根據屏幕像素密度可分為idpi、mdpi、hdpi、xhdpi等不同的等級，分辨率也是五花八門，安卓設備上的一個css像素相當于多少個屏幕物理像素，也因設備的不同而不同，沒有一個定論。

還有一個因素也會引起css中px的變化，那就是用戶縮放。例如，當用戶把頁面放大一倍，那么css中1px所代表的物理像素也會增加一倍；反之把頁面縮小一倍，css中1px所代表的物理像素也會減少一倍。關于這點，在文章后面的部分還會講到。

在移動端瀏覽器中以及某些桌面瀏覽器中，window對象有一個devicePixelRatio屬性，它的首方的定義為：設備物理像素和設備獨立像素的比例，也就是 devicePixelRatio = 物理像素 / 獨立像素。css中的px就可以看做是設備的獨立像素，所以通過devicePixelRatio，我們可以知道該設備上一個css像素代表多少個物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值為2，也就是說1個css像素相當于2個物理像素。但是要注意的是，devicePixelRatio在不同的瀏覽器中還存在些許的兼容性問題，所以我們現在還并不能完全信賴這個東西，具體的情況可以看下這篇文章。

展示結果：

在這里插入圖片描述

  • p標簽表示一個段落。

這是一個段落

通過 p標簽改進上述代碼，每個段落放到 p標簽中。

展示結果:

在這里插入圖片描述

注意:

  • p 標簽之間存在一個空隙
  • 當前的 p 標簽描述的段落,前面還沒有縮進.(未來 CSS 會學)
  • 自動根據瀏覽器寬度來決定排版.
  • html 內容首尾處的換行,空格均無效.
  • 在 html 中文字之間輸入的多個空格只相當于一個空格.
  • html 中直接輸入換行不會真的換行,而是相當于一個空格.

換行標簽：br

br是break的縮寫

? br 是一個單標簽(不需要結束標簽)

  • br 標簽不像 p 標簽那樣帶有一個很大的空隙。

  • 是規范寫法.不建議寫成

在css中我們一般使用px作為單位，
在桌面瀏覽器中css的1個像素往往都是對應著電腦屏幕的1個物理像素，這可能會造成我們的一個錯覺， 那就是css中的像素就是設備的物理像素。但實際情況卻并非如此，css中的像素只是一個抽象的單位，在不 同的設備或不同的環境中，css中的1px所代表的設備物理像素是不相同的。在為桌面瀏覽器設計的網頁中，我 們無需對這個準許性較，但在移動設備上，必須弄明白這點。在早先的移動設備中，屏幕像素密度都比較低， 如iphone3，它的分辨率為320x480，在iphone3上，一個css像素確實是等于一個屏幕物理像素的。后來隨 著技術的發展，移動設備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏， 分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍， 這時，一個css像素是等于兩個物理像素的。其他品牌的移動設備也是這個道理。例如安卓設備根據屏幕像素 密度可分為1dpi、mdpi、hdpi、xhdpi等不同的等級，分辨率也是五花八門，安卓設備上的一個css像素相 當于多少個屏幕物理像素，也因設備的不同而不同，沒有一個定論。

展示結果:

在這里插入圖片描述

綜合案例: 展示博客

案例的文本內容出自 https://www.cnblogs.com/yelongsan/p/7975580.html

預期效果:

在這里插入圖片描述

提示:

  • 給標題,作者,小標題部分加上合適的標題.
  • 給每個段落加上合適的段落.
  • 給需要換行的地方加上 br 標簽

格式化標簽

  • 加粗: strong 標簽和 b 標簽
  • 傾斜: em 標簽和 l 標簽
  • 刪除線: del 標簽和 s 標簽
  • 下劃線: ins 標簽和 u 標簽
<strong>strong 加粗</strong>
<b>b 加粗</b><em>傾斜</em>
<li>傾斜</i><del>刪除線</del><s>刪除線</s><ins>下劃線</ins>
<u>下劃線</u>

在這里插入圖片描述

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

圖片標簽: img

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

<img src="rose.jpg">

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

img 標簽的其他屬性

  • alt: 替換文本. 當文本不能正確顯示的時候, 會顯示一個替換的文字.
  • title: 提示文本. 鼠標放到圖片上, 就會有提示.
  • width/height: 控制寬度高度. 高度和寬度一般改一個就行, 另外一個會等比例縮放. 否則就會圖片失衡.
  • border: 邊框, 參數是寬度的像素. 但是一般使用 CSS 來設定.
<img src="rose.jpg" alt="鮮花" title="這是一朵鮮花" width="500px" height="800px" border="5px">

注意:

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

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

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

  3. 屬性使用 “鍵值對” 的格式來表示。

關于目錄結構:

對于一個復雜的網站,頁面資源很多,這種情況可以使用目錄把這些文件整理好.

  1. 相對路徑: 以 html 所在位置為基準,找到圖片的位置.

同級路徑: 直接寫文件名即可 (或者 ./)
下一級路徑: image/1.jpg
上一級路徑: ./image/1.jpg

  1. 絕對路徑: 一個完整的磁盤路徑,或者網絡路徑.例如

磁盤路徑 D:\rose.jpg
網絡路徑

https://images0.cnblogs.com/blog/130623/201407/300958470402077.png

代碼示例

  1. 使用相對路徑: 創建一個 image 目錄和 html 同級,并放入一個 rose2.jpg
<img src="image/rose2.jpg" alt="">
  1. 使用相對路徑2: 在 image 目錄中創建一個 html,并訪問上級目錄的 rose.jpg
<img src="../rose.jpg" alt="">
  1. 使用絕對路徑1: 最好使用 /,不要使用 \
<img src="D:/rose.jpg" alt="">
  1. 使用絕對路徑2: 使用網絡路徑
<img src="https://images0.cnblogs.com/blog/130623/201407/300958475557219.png"  alt="">

超鏈接標簽: a

href: 必須具備,表示點擊后會跳轉到哪個頁面.
target: 打開方式.默認是 .self.如果是 .blank 則用新的標簽頁打開.

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

鏈接的幾種形式:

外部鏈接: 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
  • 空鏈接：使用 # 在 href 中占位。
<a href="#">空鏈接</a>
  • 下載鏈接：href 對應的路徑是一個文件。(可以使用 zip 文件)
<a href="test.zip">下載文件</a>
  • 網頁元素鏈接：可以給圖片等任何元素添加鏈接(把元素放到 a 標簽中)
<a href="http://www.sogou.com"><img src="rose.jpg" alt=""></a>
  • 錨點鏈接：可以快速定位到頁面中的某個位置。
<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>

禁止 a 標簽跳轉: 或者

綜合案例: 展示博客2

預期效果: 在上個博客頁面的案例基礎上, 加上圖片和超鏈接
提示:
可以從頁面上右鍵圖片, 下載圖片到本地.
可以從頁面上右鍵鏈接, 復制鏈接, 粘貼到代碼中.

參考代碼:

<h1>meta name="viewport" content="width=device-width,initial-scale=1.0" 解釋</h1>
<h3>蒂其之死</h3>
<p>簡單來說 meta name="viewport" content="width=device-width,initial-scale=1.0" 
解釋
</p>
<p>content屬性值 : <br>width:可視區域的寬度，值可為數字或關鍵詞device-width<br>height:同width<br>intial-scale:頁面首次被顯示是可視區域的縮放級別，取值1.0則頁面按實際尺寸顯示，無任何縮放
<br>maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別，<br>maximum-scale用戶可將頁面放大的程序，1.0將禁止用戶放大到實際尺寸之上。<br>user-scalable:是否可對頁面進行縮放，no 禁止縮放<br>
</p>
<p>復雜的說：<br>移動前端開發之viewport的深入理解<br>在移動設備上進行網頁的重構或開發，首先得搞明白的就是移動設備上的viewport了，只有明白了
viewport的概念以及弄清楚了跟viewport有關的meta標簽的使用，才能更好地讓我們的網頁適配或響應各
種不同分辨率的移動設備。<br>
</p>
<h2>一、viewport的概念 表格標簽 
基本使用 
</h2>
<p>通俗的講，移動設備上的viewport就是設備的屏幕上能用來顯示我們的網頁的那一塊區域，在具體一
點，就是瀏覽器上(也可能是一個app中的webview)用來顯示網頁的那部分區域，但viewport又不局限于瀏
覽器可視區域的大小，它可能比瀏覽器的可視區域要大，也可能比瀏覽器的可視區域要小。在默認情況下，一
般來講，移動設備上的viewport都是要大于瀏覽器可視區域的，這是因為考慮到移動設備的分辨率相對于桌
面電腦來說都比較小，所以為了能在移動設備上正常顯示那些傳統的為桌面瀏覽器設計的網站，移動設備上的
瀏覽器都會把自己默認的viewport設為980px或1024px（也可能是其它值，這個是由設備自己決定的），但
帶來的后果就是瀏覽器會出現橫向滾動條，因為瀏覽器可視區域的寬度是比這個默認的viewport的寬度要小
的。下圖列出了一些設備上瀏覽器的默認viewport的寬度。
</p>
<img src="1.png" alt="">
<h2>二、css中的1px并不等于設備的1px
</h2>
<p>在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個像素往往都是對應著電腦屏幕的1個物理像
素，這可能會造成我們的一個錯覺，那就是css中的像素就是設備的物理像素。但實際情況卻并非如此，css
中的像素只是一個抽象的單位，在不同的設備或不同的環境中，css中的1px所代表的設備物理像素是不同
的。在為桌面瀏覽器設計的網頁中，我們無需對這個津津計較，但在移動設備上，必須弄明白這點。在早先的
移動設備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個css像素確
實是等于一個屏幕物理像素的。后來隨著技術的發展，移動設備的屏幕像素密度越來越高，從iphone4開始，
蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著
同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等于兩個物理像素的。其他品牌的移動設備也是
這個道理。例如安卓設備根據屏幕像素密度可分為ldpi、mdpi、hdpi、xhdpi等不同的等級，分辨率也是五
花八門，安卓設備上的一個css像素相當于多少個屏幕物理像素，也因設備的不同而不同，沒有一個定論。
</p>
<p>還有一個因素也會引起css中px的變化，那就是用戶縮放。例如，當用戶把頁面放大一倍，那么css中
1px所代表的物理像素也會增加一倍；反之把頁面縮小一倍，css中1px所代表的物理像素也會減少一倍。關于
這點，在文章后面的部分還會講到。
</p>
<p>在移動端瀏覽器中以及某些桌面瀏覽器中，window對象有一個devicePixelRatio屬性，它的官方的
定義為：設備物理像素和設備獨立像素的比例，也就是 devicePixelRatio = 物理像素 /獨立像素。css中的px就可以看做是設備的獨立像素，所以通過devicePixelRatio，我們可以知道該
設備上一個css像素代表多少個物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值為2，
也就是說1個css像素相當于2個物理像素。但是要注意的是，devicePixelRatio在不同的瀏覽器中還存在
些許的兼容性問題，所以我們現在還并不能完全信賴這個東西，具體的情況可以看下<a 
href="http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html">這篇
文章</a>。
</p>
<img src="2.png" alt="">

表格標簽

基本使用

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: 設置尺寸.

注意, 這幾個屬性, vscode 都提示不出來.

<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>

合并單元格

跨行合并: rowspan=“n”
跨列合并: colspan=“n”

步驟

  1. 先確定跨行還是跨列
  2. 找好目標單元格(跨列合并, 左側是目標單元格; 跨行合并, 上方是目標單元格)
  3. 刪除的多余的單元格
<table align="center" border="10" cellpadding="20" cellspacing="0" width="500" height="500">
<tr>

        <td>姓名</td><td>性別</td><td>年齡</td>
</tr>
<tr><td>張三</td><td colspan="2">男</td>
</tr>
<tr><td>李四</td><td>女</td><td>11</td></tr>
</table>

列表標簽

主要使用來布局的. 整齊好看.

  • 無序列表[重要] u1 1i…
  • 有序列表[用的不多] o1 1i
  • 自定義列表[重要] d1 (總標簽) dt (小標題) dd (圍繞標題來說明) 上面有個小標題, 下面有幾個圍繞著標題來展開的.

自定義列表(參考小米官網下方)

注意

  • 元素之間是并列關系

  • ui/ol 中只能放 li 不能放其他標簽, dl 中只能放 dt 和 dd

  • li 中可以放其他標簽.

  • 列表帶有自己的樣式, 可以使用 CSS 來修改. (例如前面的小圓點都會去掉)

    <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>

在這里插入圖片描述

表單標簽

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

分成兩個部分：

  • 表單域：包含表單元素的區域。重點是 form 標簽。
  • 表單控件：輸入框，提交按鈕等。重點是 input 標簽。

form 標簽

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

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

關于 form 需要結合服務器 & 網絡編程來進一步理解。后面再詳細研究。

input 標簽

各種輸入控件，單行文本框，按鈕，單選框，復選框。

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

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

  • value: input 中的默認值。

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

  • maxlength: 設定最大長度.

  1. 文本框
<input type="text">
  1. 密碼框
<input type="password">
  1. 單選框
性別：
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女

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

  1. 復選框
愛好：
<input type="checkbox"> 吃飯 <input type="checkbox"> 睡覺 <input type="checkbox">
打游戲
  1. 普通按鈕
<input type="button" value="我是個按鈕">

當前點擊了沒有反應. 需要搭配 JS 使用(后面會重點研究).

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

提交按鈕必須放到 form 標簽內. 點擊后就會嘗試給服務器發送

在這里插入圖片描述

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

請空按鈕必須放在 form 中. 點擊后會將 form 內所有的用戶輸入內容重置.

  1. 選擇文件
<input type="file">

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

在這里插入圖片描述

label 標簽

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

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

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

select 標簽

下拉菜單

option 中定義 selected=“selected” 表示默認選中.

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

注意! 可以給的第一個選項, 作為默認選項

<select>
<option>--請選擇年份--</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
</select>

textarea 標簽

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

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

rows 和 cols 也都不會直接使用,都是用 css 來改的。

無語義標簽: 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>

綜合案例:展示簡歷信息

<h1>某某某</h1>
<!-- 基本信息 -->
<div><h2>基本信息</h2><img src="image/profile.jpg"><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>

在這里插入圖片描述

請填寫簡歷信息

在這里插入圖片描述

提示：

  • 使用表格進行整體布局
  • 使用各種 input 標簽 + textarea 實現頁面中的輸入控件
  • input 標簽搭配合適的 label 提升用戶體驗。
  • 針對下拉框這種選項較多的，使用 Emmet 快捷鍵提高輸入效率。
  • 圖標圖片可以去 https://www.iconfont.cn/ 找
<table width="500px" cellspacing="0"><thead><h3>請填寫簡歷信息</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 內部, 保證點擊圖標也能選中單選框 --><!-- 還需要把 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><td><select><option>--請選擇年份--</option><option>1998</option><option>1999</option><option>2000</option><option>2001</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></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>就讀學校</td><td><input type="text"></td></tr><tr><td>應聘崗位</td><td><input type="checkbox" id="frontend"><label for="frontend">前端開發</label><input type="checkbox" id="backend"><label for="backend">后端開發</label><input type="checkbox" id="qa"><label for="qa">測試開發</label><input type="checkbox" id="op"><label for="op">運維開發</label></td></tr><tr><td>掌握的技能</td><td><textarea name="" id="" cols="30" rows="10"></textarea></td></tr><tr><td>項目經歷</td><td><textarea name="" id="" cols="30" rows="10"></textarea></td> Emmet 快捷鍵 
快速輸入標簽
快速輸入多個標簽
標簽帶id
標簽帶類名
標簽帶子元素</tr><tr><td></td><td><input type="checkbox" id="lisence"><label for="lisence">我已仔細閱讀過公司的招聘要求</label></td></tr><tr><td></td><td><a href="#">查看我的狀態</a></td></tr><tr><td></td><td><h3>請應聘者確認: </h3><ul><li>以上信息真實有效</li><li>能夠盡早去公司實習</li><li>能接受公司的加班文化</li></ul></td></tr></tbody>
</table>

Emmet 快捷鍵

  • 快速輸入標簽
input[tab]

  • 快速輸入多個標簽

    div*3[tab]

  • 標簽帶id

div#sex[tab]
  • 標簽帶類名
div.sex[tab]
  • 標簽帶子元素
ul>li*3[tab]
  • 標簽帶兄弟元素
span+span
  • 標簽帶內容
div(hello)
  • 標簽帶內容(帶編號)
div($.hello)

除此之外還有很多,大家可以在使用中自己積累.

HTML 特殊字符

有些特殊的字符在 html 文件中是不能直接表示的。例如:

空格:

&nbsp;

小于號:

&lt;

大于號:

&gt;

按位與:

&amp;

html 標簽就是用 < > 表示的. 因此內容里如果存在 < > , 就會發生混淆.

參考內容:

https://www.jb51.net/onlineread/htmlchar.htm

參考文獻

MDN HTML 介紹

MDN HTML 文檔

小結

HTML 只是描述了頁面的骨架結構.

使用 CSS 可以針對頁面進行進一步美化.

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/917285.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/917285.shtml
英文地址，請注明出處：http://en.pswp.cn/news/917285.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

類似 Pixso 但更側重「網頁 / 軟件界面設計」「前后端可視化開發」的工具

類似 Pixso 但更側重「網頁 / 軟件界面設計」「前后端可視化開發」的工具

從 GoView 的 Demo 功能來看&#xff0c;它主要聚焦于數據可視化大屏的低代碼搭建&#xff0c;更側重數據圖表配置和頁面布局&#xff0c;沒有類似 Pixso 的在線 UI 設計&#xff08;如矢量繪圖、組件樣式精細化設計&#xff09;功能&#xff0c;其核心是通過預設組件快速構建數…
閱讀更多...
MySQL--組從復制的詳解及功能演練

MySQL--組從復制的詳解及功能演練

2.MySQL的組從復制 2.1 配置mastesr [rootmysqlaa ~]# vim /etc/my.cnf [mysqld] server-id10 datadir/data/mysql socket/data/mysql/mysql.sock default_authentication_pluginmysql_native_password log-binmysql-bin[rootmysqlaa ~]# /etc/init.d/mysqld restart# 進入數據…
閱讀更多...
JavaScript將String轉為base64 筆記250802

JavaScript將String轉為base64 筆記250802

JavaScript將String轉為base64 筆記250802 在 JavaScript 中將字符串轉換為 Base64 編碼有多種方法&#xff0c;每種方法都有其適用場景。下面我將全面介紹這些方法&#xff0c;包括處理 ASCII 字符、Unicode 字符以及性能優化方案。 基礎方法&#xff1a;btoa() 基本用法&a…
閱讀更多...
Unity3D數學第四篇：射線與碰撞檢測（交互基礎篇）

Unity3D數學第四篇：射線與碰撞檢測（交互基礎篇）

Unity3D數學第一篇&#xff1a;向量與點、線、面&#xff08;基礎篇&#xff09; Unity3D數學第二篇&#xff1a;旋轉與歐拉角、四元數&#xff08;核心變換篇&#xff09; Unity3D數學第三篇&#xff1a;坐標系與變換矩陣&#xff08;空間轉換篇&#xff09; Unity3D數學第…
閱讀更多...
數據處理和統計分析——09 數據分組

數據處理和統計分析——09 數據分組

1 聚合 1.1 簡介 在SQL中我們經常使用GROUP BY將某個字段&#xff0c;按不同的取值進行分組&#xff0c;在Pandas中也有groupby()函數&#xff1b;分組之后&#xff0c;每組都會有至少1條數據&#xff0c;將這些數據進一步處理返回單個值的過程就是聚合&#xff0c;比如分組之后…
閱讀更多...
【數據結構與算法】數據結構初階：排序內容加餐（一）——快速排序：三路劃分、自省排序

【數據結構與算法】數據結構初階：排序內容加餐（一）——快速排序：三路劃分、自省排序

&#x1f525;個人主頁&#xff1a;艾莉絲努力練劍 ?專欄傳送門&#xff1a;《C語言》、《數據結構與算法》、C語言刷題12天IO強訓、LeetCode代碼強化刷題 &#x1f349;學習方向&#xff1a;C/C方向 ??人生格言&#xff1a;為天地立心&#xff0c;為生民立命&#xff0c;為…
閱讀更多...
MySqL（加餐）

MySqL（加餐）

范式第一范式數據庫表的每一列都是不可分割的原子數據項&#xff0c;而不能是集合&#xff0c;數組&#xff0c;對象等非原子數據。在關系型數據庫的設計中&#xff0c;滿足第一范式是對關系模式的基本要求。不滿足第一范式的數據庫就不能被稱為關系數據庫。第一范式實際上只要…
閱讀更多...
【redis】基于工業界技術分享的內容總結

【redis】基于工業界技術分享的內容總結

Redis 實踐指南與核心概念 一、Java 中常用的 Redis 使用場景與實踐 緩存&#xff08;Caching&#xff09; 場景&#xff1a;熱點數據、頻繁訪問的數據&#xff0c;如商品詳情、用戶信息。通過緩存減少數據庫壓力&#xff0c;提高系統響應速度。 工業界實踐&#xff1a; 淘寶…
閱讀更多...
服務端之nestJS常用異常類及封裝自定義響應模塊

服務端之nestJS常用異常類及封裝自定義響應模塊

MENU前言常用異常類&#xff08;由nestjs/common提供&#xff09;示例自定義異常&#xff08;可選&#xff09;自定義響應模塊前言 在NestJS中&#xff0c;nestjs/common提供了大量的內置異常類&#xff0c;主要用于在控制器、服務等層拋出特定的HTTP錯誤響應。 常用異常類&…
閱讀更多...
數據鏈路層、NAT、代理服務、內網穿透

數據鏈路層、NAT、代理服務、內網穿透

目錄 一. 以太網 以太網幀格式 二. MAC地址 三. MTU 四. ARP協議 五. NAT NAPT 六. 代理服務器 正向代理 反向代理 七. 內網穿透 八. 內網打洞 一. 以太網 ? "以太網" 不是一種具體的網絡, 而是一種技術標準; 既包含了數據鏈路層的內 容, 也包含了一些物理層…
閱讀更多...
Rust在CentOS 6上的移植

Rust在CentOS 6上的移植

Rust已不支持Cent OS 6 rhel是Redhat 發布的Red Hat Enterprise Linux的簡稱&#xff0c;使用rhel源代碼編譯的CentOS&#xff0c;最新的版本是CentOS 7&#xff0c;于2024年停止支持。而更古老的CentOS 6&#xff0c;則在2020年就已經結束了。 而面對如此老舊的系統&#xf…
閱讀更多...
C++音視頻開發：基礎面試題

C++音視頻開發：基礎面試題

音視頻領域技術門檻高&#xff0c;學習資料稀缺&#xff0c;體系化書籍和開發工具有限&#xff0c;新手入門困難。音視頻開發涉及眾多任務&#xff1a;音頻&#xff08;采集、編解碼、降噪等&#xff09;、視頻&#xff08;采集、編解碼、圖像處理&#xff09;、實時傳輸&#…
閱讀更多...
C++刷題 - 7.27

C++刷題 - 7.27

貪心算法的詳細邏輯這個問題的最優解可以用 貪心算法 在 O(N) 時間 內解決。它的核心思想是&#xff1a;每次操作盡可能覆蓋最長的連續非零區間&#xff0c;并通過數學分析發現&#xff1a;最小操作次數等于所有“上升臺階”的高度差之和。1. 直觀理解假設 steps [1, 2, 3, 2,…
閱讀更多...
音頻3A處理簡介之AGC（自動增益控制）

音頻3A處理簡介之AGC（自動增益控制）

在音頻通話和視頻會議中&#xff0c;音頻自動增益控制AGC模塊的主要作用&#xff1a;? 穩定音頻信號的輸出電平。無論麥克風采集信號的強弱&#xff08;如用戶離麥克風遠近程度不同&#xff09;&#xff0c;盡可能保證音頻采集模塊的輸出音量保持相對一致&#xff0c;不會偏大…
閱讀更多...
web前端打包apk包

web前端打包apk包

我用的是HBuilder工具,可視化更便捷&#xff0c;目前我這操作的apk包是不需要上架的&#xff0c;所以跟實際需要上架的可能還有些出入 首先先新建個項目&#xff0c;選擇5App模式 把目前需要打包的內容上傳到服務器&#xff0c;我們以嵌套的形式進行打包&#xff0c;找到index.…
閱讀更多...
Ansible提權sudo后執行報錯

Ansible提權sudo后執行報錯

1.問題 配置了sudo提權信息后&#xff0c;執行ansible-play報錯&#xff0c;報錯信息如下&#xff1a;2.原因 sudo沒有執行**/bin/sh的權限&#xff0c;而ansible腳本中依賴/bin/sh**&#xff0c;所以報錯了&#xff1a; 查看日志sudo tail -f /var/log/secure3.解決方式 修改*…
閱讀更多...
.NET報表控件ActiveReports發布v19.0——正式兼容 .NET 9

.NET報表控件ActiveReports發布v19.0——正式兼容 .NET 9

ActiveReports 是一款專注于 .NET 和 .NET Core 平臺的報表控件。通過拖拽式報表設計器&#xff0c;可以快速地設計 Excel表格、Word文檔、圖表、數據過濾、數據鉆取、精準套打等類型報表&#xff0c;全面滿足 WinForm、ASP.NET、ASP.NET MVC、WPF 平臺中各種報表的開發需要。同…
閱讀更多...
SCI論文選詞煉句

SCI論文選詞煉句

標準句子不能啰嗦&#xff1b;詞不能有問題&#xff0c;得是SCI中經常出現的&#xff0c;符合上下文的。SCI論文中常出現的摸棱兩可的詞單詞涵義例子Architecture指 整體系統設計方案&#xff0c;如網絡層次結構、模塊組合、激活函數選擇等深度學習模型架構Structure更泛泛&…
閱讀更多...
Qt deleteLater 延遲刪除原理

Qt deleteLater 延遲刪除原理

deleteLater 調用 事件發送 void QObject::deleteLater() {QCoreApplication::postEvent(this, new QDeferredDeleteEvent()); }首先該對象繼承QObject調用deleteLater&#xff0c; 內部會發送刪除事件QCoreApplication::postEvent(this, new QDeferredDeleteEvent()) 到事件循…
閱讀更多...
TypeScript SDK 升級：通過 Upload Relay 賦能更多應用

TypeScript SDK 升級：通過 Upload Relay 賦能更多應用

自 3 月主網上線以來&#xff0c;Walrus 開發者社區持續展現出強勁的發展勢頭&#xff1a; 當前 Walrus 已存儲超 758 TB 數據&#xff0c;為數百個項目提供支持。在 2025 年 6 月舉辦的 Sui Overflow 黑客松上&#xff0c;Walrus 成為最受歡迎的數據層。該賽事共收到 599 個項…
閱讀更多...
最新文章

Copyright @ 2022~2023