web前端入门学习 html5（1）
生活随笔
收集整理的這篇文章主要介紹了
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, 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 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
有序列表標簽 <ol> Ordered list 只需理解
自定義列表標簽 <dl> definition list 重點 （大佬dl、帶頭dt、弟弟dd）
三種列表標簽總結
用自定義列表：
用無序列表：
總結
以上是生活随笔為你收集整理的web前端入门学习 html5（1）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vscode html如何插入模板？（!
- 下一篇： flask那啥 pycharm专业版提供