文章目錄:
-
1. 準(zhǔn)備開(kāi)發(fā)環(huán)境
- 1.1 vs Code基本使用
-
2.HTML文本標(biāo)簽
- 2.1 標(biāo)簽語(yǔ)法
- 2.2 HTML基本骨架
- 2.3 標(biāo)簽的關(guān)系
- 2.4 注釋
- 2.5 標(biāo)題標(biāo)簽
- 2.6 段落標(biāo)簽
- 2.7 換行與水平線(xiàn)標(biāo)簽
- 2.8 文本格式化標(biāo)簽
1. 準(zhǔn)備開(kāi)發(fā)環(huán)境
VSCode與谷歌瀏覽器離線(xiàn)版,安裝包評(píng)論區(qū)自提.
VSCode默認(rèn)安裝位置:C:\Users\hp\AppData\Local\Programs\Microsoft VS Code
1.1 vs Code基本使用
- 打開(kāi)文件夾
- 任意文件夾→拖拽至vs Code空白位置即可安裝插件
- 安裝插件
- 左邊欄選擇擴(kuò)展→搜索插件→安裝→重啟Vs Code·
- 安裝兩種插件名
- 漢化菜單插件:Chinese
- 打開(kāi)網(wǎng)頁(yè)插件: open in browser
2.HTML文本標(biāo)簽
HTML超文本標(biāo)記語(yǔ)言一―HyperText Markup Language。
- 超文本是什么? 鏈接
- 標(biāo)記是什么? 標(biāo)記也叫標(biāo)簽，帶尖括號(hào)的文本
2.1 標(biāo)簽語(yǔ)法
- 標(biāo)簽成對(duì)出現(xiàn)，中間包裹內(nèi)容<>
- 里面放英文字母(標(biāo)簽名)
- 結(jié)束標(biāo)簽比開(kāi)始標(biāo)簽多/
例子:加粗文字(雙標(biāo)簽,要包裹內(nèi)容所以是雙標(biāo)簽)
<strong>加粗的文字</strong>
加粗的文字
例子:水平線(xiàn)(單標(biāo)簽,不需要包裹內(nèi)容所以是單標(biāo)簽)
<hr>
2.2 HTML基本骨架
HTML基本骨架是網(wǎng)頁(yè)模板.
<html>
<head>
<title>網(wǎng)頁(yè)標(biāo)題</title>
</head>
<body>
網(wǎng)頁(yè)主體
</body>
</html>
- html:整個(gè)網(wǎng)頁(yè)
- head:網(wǎng)頁(yè)頭部，存放給瀏覽器看的代碼，例如CSS
- body:網(wǎng)頁(yè)主體，存放給用戶(hù)看的代碼，例如圖片、文字
- title:網(wǎng)頁(yè)標(biāo)題
vs code 快速生成骨架:
在HTML文件(.html)中，!(英文)配合Enter / Tab鍵
2.3 標(biāo)簽的關(guān)系
作用:明確代碼的書(shū)寫(xiě)位置
標(biāo)簽的兩種關(guān)系:
- 父子關(guān)系(嵌套關(guān)系)
- 兄弟關(guān)系（并列關(guān)系)
上面的圖片和文字是兄弟關(guān)系,他們與整個(gè)大方框是父子關(guān)系
2.4 注釋
注釋就是對(duì)代碼的解釋和說(shuō)明，其目的是讓人們能夠更加輕松地了解代碼。注釋是編寫(xiě)程序時(shí)，寫(xiě)程序的人給一個(gè)語(yǔ)句、程序段、函數(shù)等的解釋或提示，能提高程序代碼的可讀性。
在編寫(xiě)HTML代碼時(shí)，我們經(jīng)常要在一些關(guān)鍵代碼旁做一下注釋?zhuān)@樣做的好處很多，比如:方便理解、方便查找或方便項(xiàng)目組里的其它程序員了解你的代碼，而且可以方便以后你對(duì)自己代碼進(jìn)行修改。學(xué)習(xí)和工作中，關(guān)鍵代碼都要加注釋
<!--..-->注釋標(biāo)簽用來(lái)在源文檔中插入注釋?zhuān)⑨尣粫?huì)在瀏覽器中顯示。
<!--注釋標(biāo)簽用來(lái)在源文檔中插入注釋?zhuān)⑨尣粫?huì)在瀏覽器中顯示。-->
2.5 標(biāo)題標(biāo)簽
一般用在新聞標(biāo)題、文章標(biāo)題、網(wǎng)頁(yè)區(qū)域名稱(chēng)、產(chǎn)品名稱(chēng)等等。
標(biāo)簽名: h1 ~h6（雙標(biāo)簽)
- 顯示特點(diǎn):
- 文字加粗
- 字號(hào)逐漸減小
- 獨(dú)占一行（換行)
<html>
<head>
<title>
凡界每日一報(bào)
</title>
</head>
<body>
<h1>
一級(jí)標(biāo)題
</h1>
<h2>
二級(jí)標(biāo)題
</h2>
<h3>
三級(jí)標(biāo)題
</h3>
</body>
</html>
經(jīng)驗(yàn)分享:
- h1標(biāo)簽在一個(gè)網(wǎng)頁(yè)中只能用一次，用來(lái)放新聞標(biāo)題或網(wǎng)頁(yè)的logo.
- h2~ h6沒(méi)有使用次數(shù)的限制
2.6 段落標(biāo)簽
顯示效果:
標(biāo)簽名:p（雙標(biāo)簽)
- 顯示特點(diǎn):獨(dú)占一行
- 段落之間存在間隙
<html>
<body>
<p>
這里寫(xiě)段落
</p>
</body>
</html>
2.7 換行與水平線(xiàn)標(biāo)簽
都是單標(biāo)簽,因?yàn)椴恍枰鼉?nèi)容
換行: <br>(單標(biāo)簽)
水平線(xiàn): <hr>(單標(biāo)簽)
注意:
代碼中敲回車(chē),瀏覽器顯示是不會(huì)換行的文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-822556.html
2.8 文本格式化標(biāo)簽
作用:為文本添加特殊格式，以突出重點(diǎn)。常見(jiàn)的文本格式:加粗、傾斜、下劃線(xiàn)、刪除線(xiàn)等。
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-822556.html
到了這里，關(guān)于【前端web入門(mén)第一天】01 開(kāi)發(fā)環(huán)境、HTML基本語(yǔ)法文本標(biāo)簽的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開(kāi)發(fā)技術(shù)9（HTML5、CSS3、JavaScript ）——喵喵畫(huà)網(wǎng)頁(yè)](https://imgs.yssmx.com/Uploads/2024/02/777294-1.png)
![[HTML]Web前端開(kāi)發(fā)技術(shù)12（HTML5、CSS3、JavaScript ）——喵喵畫(huà)網(wǎng)頁(yè)](https://imgs.yssmx.com/Uploads/2024/02/793019-1.png)
![[HTML]Web前端開(kāi)發(fā)技術(shù)13（HTML5、CSS3、JavaScript ）橫向二級(jí)導(dǎo)航菜單 Web頁(yè)面設(shè)計(jì)實(shí)例——喵喵畫(huà)網(wǎng)頁(yè)](https://imgs.yssmx.com/Uploads/2024/02/797403-1.png)
