前端 --- HTML
生活随笔
收集整理的這篇文章主要介紹了
前端 --- HTML
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 1. HTML 結構
- 1.1 HTML 文件基本結構
- 1.2 VsCode 中 使用 HTML 的快捷鍵
- 2. HTML 常見標簽
- 2.1 注釋標簽
- 2.2 標題標簽
- 2.3 段落標簽
- 2.4 換行標簽
- 2.5 格式化標簽
- 2.6 圖片標簽
- 2.7 超鏈接標簽
- 2.8 表格標簽
- 2.9 列表標簽
- 2.10 表單標簽
- form 標簽
- input 標簽
- ① 文本框
- ② 密碼框
- ③ 單選框
- ④ 復選框
- ⑤ 普通按鈕
- ⑥ 提交按鈕
- ⑦ 清空按鈕
- ⑧ 選擇文件
- 2.11 label 標簽
- 2.12 select 標簽
- 2.13 textarea 標簽
- 2.14 無語義標簽: div & span
- 2.15 HTML 中特殊字符
- 3. 綜合案例
- 一個簡易的個人簡歷
- 一個簡易的簡歷信息填寫
1. HTML 結構
1.1 HTML 文件基本結構
<html><head><title>第一個html程序</title></head><body>hello world!</body> </html>- html 標簽是整個 html 文件的根標簽(最頂層標簽)
- head 標簽中寫頁面的屬性.
- body 標簽中寫的是頁面上顯示的內容
- title 標簽中寫的是頁面的標題
- head 和 body 是 html 的子標簽(html 就是 head 和 body 的父標簽)
- title 是 head 的子標簽. head 是 title 的父標簽.
- head 和 body 之間是兄弟關系.
標簽之間的結構關系, 構成了一個 DOM 樹
D: Document 文檔 O: Object 對象 M: Model 模型
1.2 VsCode 中 使用 HTML 的快捷鍵
使用 ! + TAB 快速生成代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><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 屬性表示當前頁面是一個 “英語頁面”. 這里暫時不用管. (有些瀏覽器會根據此處的聲明提示是否進行自動翻譯).
- <meta charset="UTF-8"> 描述頁面的字符編碼方式. 沒有這一行可能會導致中文亂碼.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- name="viewport" 其中 viewport 指的是設備的屏幕上能用來顯示我們的網頁的那一塊區(qū)域.
- content="width=device-width, initial-scale=1.0" 在設置可視區(qū)和設備寬度等寬, 并設置初始縮放為不縮放. (這個屬性對于移動端開發(fā)更重要一些).
2. HTML 常見標簽
2.1 注釋標簽
<!-- 注釋 -->2.2 標題標簽
有六個,從 h1 ~ h6,數字越大,則字體越小
<h1>一級標題</h1><h2>二級標題</h2><h3>三級標題</h3><h4>四級標題</h4><h5>五級標題</h5><h6>六級標題</h6>2.3 段落標簽
p標簽表示一個段落
<p>第一段</p><p>第二段</p><p>第三段</p>2.4 換行標簽
br 是一個單標簽,不需要結束標志.<br/>是規(guī)范寫法.
<p>第一段 Lorem ipsum dolor sit amet consectetur adipisicing elit. <br/>Velit delectus sint vero minus architecto, tempora in <br/>us voluptatibus quaerat nobis, veniam ea optio.</p>2.5 格式化標簽
| 加粗 | <strong>…</strong> <b>…</b> |
| 傾斜 | <em>…</em> <i>…</i> |
| 刪除線 | <del>…</del> <s>…</s> |
| 下劃線 | <ins>…</ins> <u>…</u> |
2.6 圖片標簽
img 標簽 必須帶有 src 屬性, 表示圖片的路徑
img 標簽的其他屬性
- alt: 替換文本. 當圖片不能正確顯示的時候, 會顯示一個替換的文字.
- title: 提示文本. 鼠標放到圖片上, 就會有提示.
- width/height: 控制寬度高度. 高度和寬度一般改一個就行, 另外一個會等比例縮放. 否則就會圖片失衡.
- border: 邊框, 參數是寬度的像素. 但是一般使用 CSS 來設定.
2.7 超鏈接標簽
a 標簽的屬性
- href: 必須具備, 表示點擊后會跳轉到哪個頁面.
- target: 打開方式. 默認是 _self. 如果是 _blank 則用新的標簽頁打開.
2.8 表格標簽
| table 標簽 | 表示整個表格 |
| tr | 表示表格的一行 |
| td | 表示一個單元格 |
| th | 表示表頭單元格. 會居中加粗 |
| thead | 表格的頭部區(qū)域(注意和 th 區(qū)分, 范圍是比 th 要大的) |
| tbody | 表格得到主體區(qū)域. |
這些屬性都要放到 table 標簽中.
- align 是表格相對于周圍元素的對齊方式. align=“center” (不是內部元素的對齊方式)
- border 表示邊框. 1 表示有邊框(數字越大, 邊框越粗), “” 表示沒邊框.
- cellpadding: 內容距離邊框的距離, 默認 1 像素
- cellspacing: 單元格之間的距離. 默認為 2 像素
- width / height: 設置尺寸.
合并單元格
- 跨行合并: rowspan="n"
- 跨列合并: colspan="n"
2.9 列表標簽
| 無序列表[重要] | ul li , . |
| 有序列表[用的不多] | ol li |
| 自定義列表[重要] | dl (總標簽) dt (小標題) dd (圍繞標題來說明) |
2.10 表單標簽
分成兩個部分:
- 表單域: 包含表單元素的區(qū)域. 重點是 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: 設定最大長度.
① 文本框
<form action=""><input type="text"></form>② 密碼框
<form action=""><input type="password"></form>③ 單選框
注: 這里name屬性相同,才能實現多選一
<form action=""><input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女</form>④ 復選框
<form action=""><input type="checkbox"> 吃飯<input type="checkbox">睡覺<input type="checkbox">打豆豆</form>⑤ 普通按鈕
<form action=""><input type="button" value="這是一個按鈕" onclick="alert('hello')"></form>⑥ 提交按鈕
<form action="http://www.baidu.com"><input type="submit" value="提交"></form>⑦ 清空按鈕
<form action="http://www.baidu.com"><input type="text"><input type="submit" value="提交"><input type="reset" value="清空"></form>⑧ 選擇文件
<form action=""><input type="file"></form>2.11 label 標簽
搭配 input 使用. 點擊 label 也能選中對應的單選/復選框, 能夠提升用戶體驗.
- for 屬性: 指定當前 label 和哪個相同 id 的 input 標簽對應. (此時點擊才是有用的)
2.12 select 標簽
下拉菜單
- option 中定義 selected="selected"表示默認選中
2.13 textarea 標簽
<textarea rows="3" cols="50"></textarea>2.14 無語義標簽: div & span
div 標簽, division 的縮寫, 含義是 分割
span 標簽, 含義是跨度
就是兩個盒子. 用于網頁布局
- div 是獨占一行的, 是一個大盒子.
- span 不獨占一行, 是一個小盒子.
2.15 HTML 中特殊字符
空格:
小于號: <
大于號: >
按位與: &
3. 綜合案例
一個簡易的個人簡歷
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><h1>姓名某某某</h1><h2>基本信息</h2><img src="1.jpg" width="500" height="300"><p>求職意向: Java 開發(fā)工程師</p><p>聯(lián)系電話: 157-2324-4444</p><p>郵箱: 12321312@qq.com</p><a href= "https://gitee.com/Wangzzzzzzzzzz/dashboard/projects">我的 gitee</a><br/><a href= "https://blog.csdn.net/wwzzzzzzzzzzzzz?spm=1000.2115.3001.5343">我的 博客</a><h2>教育背景</h2><ol><li>2006 ~ 2007 中國幼兒園</li><li>2007 ~ 2013 中國小學</li><li>2013 ~ 2016 中國初中</li><li>2016 ~ 2019 中國高中</li><li>2019 ~ 2023 中國大學</li></ol><h2>專業(yè)技能</h2><ul><li>熟練掌握 Java 語法</li><li>熟練掌握數據結構,例如鏈表,二叉樹,哈希表登</li><li>熟練掌握操作系統(tǒng)原理,熟悉多線程編程,理解多線程安全問題</li><li>熟練掌握網絡原理,熟悉網絡編程,熟悉 TCP/IP 協(xié)議棧的基本原理</li><li>熟練掌握 MySQL 數據庫,熟悉 SQL 語言,能夠進行簡單的增刪改查操作,理解索引與事務的底層原理</li></ul><h2>我的項目</h2><ol><li><h3>留言墻</h3><p>開發(fā)時間: 2022年4月10日</p><p>功能介紹: <ul><li>支持留言發(fā)布</li><li>支持匿名留言</li></ul></p></li><li><h3>學習小助手</h3><p>開放時間: 2022年5月1日</p><p>功能介紹:<ul><li>支持錯題檢索</li><li>支持同學探討</li></ul></p></li></ol><h2>個人評價</h2><p>在學校期間,學習優(yōu)良</p> </body> </html>一個簡易的簡歷信息填寫
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head> <body><table><form action=""><h1>請?zhí)顚懞啔v信息</h1><tr><td>姓名</td><td><input type="text"></td></tr><tr><td>性別</td><td><input id="male" type="radio" name="sex" checked="checked"><label for="male"><img src="male.png" width="15" height="15">男</label><input id="female" type="radio" name="sex"><label for="female"><img src="female.png" width="15" height="15">女</label></td></tr><tr><td>出生日期</td><td><select><option>--請選擇年份--</option><option>2000</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option><option>2005</option><option>2006</option><option>2007</option><option>2008</option><option>2009</option></select><select><option>--請選擇月份--</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option></select><select><option>--請選擇日期--</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option></select></td></tr><tr><td>就讀學校</td><td><input type="text"></td></tr><tr><td>應聘崗位</td><td><input type="checkbox" id="1"><label for="1">前端開發(fā)</label><input type="checkbox" id="2"><label for="2">后端開發(fā)</label><input type="checkbox" id="3"><label for="3">測試開發(fā)</label><input type="checkbox" id="4"><label for="4">運維開發(fā)</label></td></tr><tr><td>掌握的技能</td><td><textarea rows="3" cols="30"></textarea></td></tr><tr><td>項目經歷</td><td><textarea rows="3" cols="30"></textarea></td></tr><tr><td></td><td><input type="radio" id="10"><label for="10">我已仔細閱讀過公司的招聘要求</label></td></tr><tr><td></td><td><a href="http://www.baidu.com">查看我的狀態(tài)</a></td></tr><tr><td></td><td><h3>請應聘者確認</h3><ul><li>以上信息真實有效</li><li>能夠盡早去公司實習</li><li>能接受公司的加班文化</li></ul></td></tr><tr><td></td><td><input type="submit" value="提交"><input type="reset" value="清空"></td></tr></form></table> </body> </html>總結
以上是生活随笔為你收集整理的前端 --- HTML的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 瑞星升级提示网络连接失败网络配置后重试(
- 下一篇： 万能注册机下载|万能注册机中文版2016