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