當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

web前端入门学习 html5（1）

發布時間：2025/3/20 HTML 15 豆豆

生活随笔收集整理的這篇文章主要介紹了 web前端入门学习 html5（1）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

web前端入門基礎教程，最適合零基礎前端小白的視頻教程html5+css3

文章目錄

- html
- 瀏覽器內核
- web標注
- 語法規范
- html基本結構標簽
- web常用開發工具
- vscode基本使用
- 文檔類型聲明標簽DOCTYPE
- lang語言種類
- 字符集charset
- 標題標簽【h】
- 段落和換行標簽【p】段落標簽【br】換行標簽
- 文本格式化標簽
- div和span標簽布局標簽
- img圖像標簽
- 圖像屬性 src圖片路徑 alt替換文本 title提示文本 width圖像寬度 height圖像高度 border設置圖像邊框
- 圖像標簽屬性的注意點
- 目錄文件夾和根目錄 vscode打開目錄文件夾
- 文件的相對路徑和絕對路徑
- 超鏈接標簽 a標簽 href _self _blank 外部鏈接內部鏈接空鏈接 href="#" 下載鏈接圖片添加超鏈接
- 錨點鏈接
- 代碼注釋
- 特殊字符空格大于號小于號等 ?
- 表格的主要作用
- 表格基本語法表格標簽table 表格行標簽tr 表格單元格標簽td
- 表頭單元格標簽th
- 表格屬性 align border cellpadding cellspacing width height
- 表格標簽
- 表格結構標簽 thead tbody
- 合并單元格跨行合并和跨列合并
- - 合并單元格目標單元格：寫合并代碼的位置
  - 合并單元格的步驟
- 列表標簽（無序列表，有序列表，自定義列表）
- - 無序列表標簽`
    - `（Unordered list）列表項`
    - `
  - 有序列表標簽 `
  - ` Ordered list 只需理解
  - 自定義列表標簽 `` definition list 重點（大佬dl、帶頭dt、弟弟dd）
  - 三種列表標簽總結

html

瀏覽器內核

web標注

語法規范

html基本結構標簽

web常用開發工具

vscode基本使用

文檔類型聲明標簽DOCTYPE

lang語言種類

像谷歌瀏覽器如果檢測到網站跟本地語言不一樣，就會提示翻譯

字符集charset

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我利用vscode創建的第一個頁面</title> </head> <body>寫代碼是一件非常快樂的事情！ </body> </html>

標題標簽【h】

段落和換行標簽【p】段落標簽【br】換行標簽

文本格式化標簽

div和span標簽布局標簽

<!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><div>這是頭部</div><span>今日價格</span><span>今日價格</span><span>今日價格</span> </body> </html>

img圖像標簽

圖像屬性 src圖片路徑 alt替換文本 title提示文本 width圖像寬度 height圖像高度 border設置圖像邊框

圖像標簽屬性的注意點

目錄文件夾和根目錄 vscode打開目錄文件夾

文件的相對路徑和絕對路徑

超鏈接標簽 a標簽 href _self _blank 外部鏈接內部鏈接空鏈接 href="#" 下載鏈接圖片添加超鏈接

錨點鏈接

代碼注釋

特殊字符空格大于號小于號等 ?

表格的主要作用

表格基本語法表格標簽table 表格行標簽tr 表格單元格標簽td

<!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><tr><td>姓名</td> <td>年齡</td> <td>性別</td></tr><tr><td>姓名</td> <td>年齡</td> <td>性別</td></tr><tr><td>姓名</td> <td>年齡</td> <td>性別</td></tr></table> </body> </html>

表頭單元格標簽th

表格屬性 align border cellpadding cellspacing width height

align在vscode里顯示白色表示不推薦這樣寫，以后要可以在css里寫

<!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 align="center" border="20" cellpadding="20" cellspacing='20' width='1000' height='250'><tr><td>姓名</td> <td>性別</td> <td>年齡</td></tr><tr><td>劉德華</td> <td>男</td> <td>56</td></tr><tr><td>張學友</td> <td>男</td> <td>56</td></tr></table> </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 align="center" width='500' height='249' border="1" cellspacing="0"><tr><th>排名</th> <th>關鍵詞</th> <th>趨勢</th><th>進入搜索</th><th>最近七日</th><th>相關鏈接</th></tr><tr><td>1</td><td>鬼吹燈</td><td><img src='me.jpg'></td><td>345</td><td>123</td><td><a href="#">貼吧</a> <a href="#">頭條</a> <a href="#">微博</a></td></tr></table> </body> </html>

https://www.bilibili.com/video/BV1pE411q7FU?p=35

表格結構標簽 thead tbody

標簽可折疊，閱讀更方便

<!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 align="center" border="20" cellpadding="20" cellspacing='20' width='1000' height='250'><thead><tr><th>姓名</th> <th>性別</th> <th>年齡</th></tr></thead><tbody><tr><td>劉德華</td> <td>男</td> <td>56</td></tr><tr><td>張學友</td> <td>男</td> <td>56</td></tr></tbody></table> </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 align="center" border="20" cellpadding="20" cellspacing='20' width='1000' height='250'><thead><tr><th>姓名</th> <th>性別</th> <th>年齡</th></tr></thead><tbody><tr><td rowspan="2">劉德華&張學友</td> <td colspan="2">男 56</td> </tr><tr> <td>男</td> <td>56</td></tr></tbody></table> </body> </html>

如果是合并多行多列就同時加上colspan和rowspan?

列表標簽（無序列表，有序列表，自定義列表）

無序列表標簽<ul>（Unordered list）列表項<li>

https://www.bilibili.com/video/BV1pE411q7FU?p=38&spm_id_from=pageDriver

<!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><h4>你最喜歡吃的食物？</h4><ul><li>榴蓮</li><li>鯡魚</li><li>葡萄</li><li><p>123</p></li></ul> </body> </html>

有序列表標簽 <ol> Ordered list 只需理解

自定義列表標簽 <dl> definition list 重點（大佬dl、帶頭dt、弟弟dd）

<!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><h4>你最喜歡吃的食物？</h4><dl><dt>大哥</dt><dd>甄嬛</dd><dd>小燕子</dd><dd>五阿哥</dd><dt>小弟</dt><dd>甄嬛</dd><dd>小燕子</dd><dd>五阿哥</dd></dl> </body> </html>

三種列表標簽總結

用自定義列表：

用無序列表：

總結

以上是生活随笔為你收集整理的web前端入门学习 html5（1）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

入门
Web

上一篇： vscode html如何插入模板？（!
下一篇： flask那啥 pycharm专业版提供