七分钟学会 HTML 网页制作
生活随笔
收集整理的這篇文章主要介紹了
七分钟学会 HTML 网页制作
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
什么是HTML
點(diǎn)擊打開(kāi)視頻講解更加詳細(xì)
- Hyper Text Markup Language（超文本標(biāo)記語(yǔ)言）
- 標(biāo)簽控制排版
- 體積小，方便傳輸
編寫(xiě)HTLML
推薦使用：VS Code
<!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>末晨曦吖</title> </head> <body><div id="app"><h1>我的第一個(gè)標(biāo)題</h1><p>我的第一個(gè)段落。</p></div> </body> <style scoped>body{padding: 0;margin: 0;} </style> </html>HTML文件結(jié)構(gòu)
<!DOCTYPE html> <html lang="en"> <head><title>末晨曦吖</title> </head> <body></body> </html>- 起始行 <!DOCTYPE html> 告訴瀏覽器這是一個(gè)HTML文檔
- 開(kāi)始標(biāo)簽 <html>
- 結(jié)束標(biāo)簽 </html>
html根標(biāo)簽，標(biāo)簽都是成對(duì)出現(xiàn)的，標(biāo)簽中可以嵌套文本或其他標(biāo)簽
- <head>中定義文檔的描述信息
- <title> 定義title，它會(huì)顯示在瀏覽器上
HTML常用標(biāo)簽
標(biāo)題標(biāo)簽
<h1>這是標(biāo)題 1</h1> <h2>這是標(biāo)題 2</h2> <h3>這是標(biāo)題 3</h3> <h4>這是標(biāo)題 4</h4> <h5>這是標(biāo)題 5</h5> <h6>這是標(biāo)題 6</h6>效果：
段落標(biāo)簽
<p>這是一個(gè)段落。</p> <p>這是一個(gè)段落。</p> <p>這是一個(gè)段落。</p>效果：
文本樣式標(biāo)簽
<b>加粗文本</b><br><br> <i>斜體文本</i><br><br> <code>電腦自動(dòng)輸出</code><br><br> 這是 <sub> 下標(biāo)</sub> 和 <sup> 上標(biāo)</sup><br><br> <del>我是帶刪除線的文本</del>效果：
列表標(biāo)簽
無(wú)序列表
<ul><li>列表項(xiàng)</li><li>列表項(xiàng)</li><li>列表項(xiàng)</li> </ul>效果：
有序列表
<ol><li>列表項(xiàng)</li><li>列表項(xiàng)</li><li>列表項(xiàng)</li> </ol><ol start="50"><li>列表項(xiàng)</li><li>列表項(xiàng)</li><li>列表項(xiàng)</li> </ol>效果：
超鏈接標(biāo)簽
<a href="https://www.bilibili.com/" target="_blank">跳轉(zhuǎn)到 B 站</a>效果：
多媒體標(biāo)簽
圖片標(biāo)簽
<img src="./smiley.gif">視頻標(biāo)簽
<video src="./video .mp4" controls></video>音頻標(biāo)簽
<audio src="./audio .mp3" controls></audio>div標(biāo)簽
塊級(jí)元素，并沒(méi)具體的實(shí)際意義，主要作用是調(diào)整布局樣式；
<div><h1>我的第一個(gè)標(biāo)題</h1><p>我的第一個(gè)段落。</p> </div>布局標(biāo)簽
| <nav> | 導(dǎo)航欄 |
| <aside> | 側(cè)邊欄 |
| <main> | 內(nèi)容區(qū)域 |
| <footer> | 底部信息 |
| <article> | 文章詳情 |
| <section> | 頁(yè)面分區(qū) |
更多資料參考
菜鳥(niǎo)教程
w3cschool
若對(duì)您有幫助，請(qǐng)點(diǎn)擊跳轉(zhuǎn)到B站一鍵三連哦！感謝支持！
總結(jié)
以上是生活随笔為你收集整理的七分钟学会 HTML 网页制作的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： VS2017中英文切换设置
- 下一篇： 【京东电商网站主界面仿写——HTML第一