[前端教程]01-第一章 HTML常用標(biāo)簽--輕松跟我學(xué)前端
時(shí)間：2023-07-25 00:36:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-07-25 00:36:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
[前端教程]01-第一章 HTML常用標(biāo)簽--輕松跟我學(xué)前端：
哈嘍，各位朋友們大家好。今天小編給大家?guī)?lái)的是我在學(xué)前端時(shí)自己做的筆記。這個(gè)是筆記的第一章，在學(xué)前端的朋友們可以拿去看看。接下來(lái)每天都會(huì)更新這樣的筆記。
在這里給新來(lái)的小伙伴們說(shuō)一下，我們這個(gè)系列兩到三天會(huì)有一次更新哦，更新會(huì)優(yōu)先發(fā)在群里
如果你想要第一時(shí)間知道獲取新的內(nèi)容，以及文章的目錄，可以加一下我們的交流群：417662152
這里面有我寫(xiě)過(guò)的一些不公開(kāi)的技術(shù)文章，不定期更新干貨，包括一份最適合2018年前端學(xué)習(xí)的教程資料
歡迎初學(xué)和進(jìn)階中的前端學(xué)者們加入，希望可以幫到你們。
----------------------正文開(kāi)始-------------------------
一、 HTML是什么? HTML5又是什么?
HTML是什么？HTML是目前最流行的網(wǎng)頁(yè)制作語(yǔ)言。HTML（Hypertext Markup Language）即 超文本標(biāo)記語(yǔ)言，是用于描述網(wǎng)頁(yè)文檔的一種標(biāo)記語(yǔ)言。網(wǎng)頁(yè)的本質(zhì)就是超級(jí)文本標(biāo)記 語(yǔ)言，通過(guò)結(jié)合使用其他的Web技術(shù)可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁(yè)。
HTML5是近十年來(lái)Web開(kāi)發(fā)標(biāo)準(zhǔn)最巨大的飛躍。和以前的版本不同，HTML 5并非僅僅用來(lái)表示 Web內(nèi)容，它的新使命是將Web帶入一個(gè)成熟的應(yīng)用平臺(tái)，在HTML 5平臺(tái)上，視頻， 音頻，圖像，動(dòng)畫(huà)，canvas/SVG 地圖技術(shù)，以及同電腦的交互都被標(biāo)準(zhǔn)化。
二、 了解html css javascript
(1)、HTML : “超”文本 標(biāo)記“語(yǔ)言” ，結(jié)構(gòu)（HyperText Markup Language）——網(wǎng)頁(yè)基礎(chǔ)，結(jié)構(gòu)
超文本:超級(jí)文本
標(biāo)記:<>
語(yǔ)言:溝通交流（打交道）的工具
雙標(biāo)簽：<html></html> <body></body>
單標(biāo)簽：<meta /> <img />
(2)、CSS:層疊樣式表（Cascading Style Sheets）——修飾、美化網(wǎng)頁(yè) (化妝師)
1.#box{
2. width : 200px;
3. height : 200px;
4. border:8px solid red;
5.
6.}
(3)、js：腳本語(yǔ)言 (Javascript)（行為）——增加動(dòng)態(tài)交互功能 (魔術(shù)師)
1.<div onclick=" this.style.width = '100px'; this.style.height = '500px'; "></div>
以上css、js不是讓大家馬上學(xué)習(xí)，而是讓大家了解，知道什么是css、js
三 常用標(biāo)簽
div ——————塊
img ——————圖片（單標(biāo)簽）
a ———————鏈接、下載、錨點(diǎn)
h1-h6—————-標(biāo)題
p ———————段落
span —————-區(qū)分樣式
ul——————–無(wú)序列表
ol——————–有序列表
li————————-列表項(xiàng)dl ——————-定義列表
dt ————————-定義列表標(biāo)題
dd ————————定義列表項(xiàng)i ———————定義斜體文字
strong————–強(qiáng)調(diào)（粗體）
em ——————強(qiáng)調(diào)（斜體）trong 標(biāo)簽和 em標(biāo)簽一樣，用于強(qiáng)調(diào)文本，但它強(qiáng)調(diào)的程度更強(qiáng)一些。
br ———-換行
hr——————定義水平線(xiàn)
四、img圖片標(biāo)簽詳解
<img src="文件路徑" alt="圖片名"/>
img屬性
src -定義圖片路徑
width -圖片寬度,如果只給了width 沒(méi)給height,height會(huì)自等比例縮放
height-圖片高度,如果只給了height 沒(méi)給width,width會(huì)自等比例縮放
alt -圖片名字 給百度搜索引擎抓取使用(SEO)
title -標(biāo)題給用戶(hù)提示信息（有利于用戶(hù)體驗(yàn)）
五、a標(biāo)簽
a標(biāo)簽功能： 鏈接 | 下載 | 錨點(diǎn)
鏈接: href='url' 中url是一個(gè)網(wǎng)頁(yè)地址
相對(duì) URL - 指向站點(diǎn)內(nèi)的某個(gè)文件（href=”./index.html”）
絕對(duì) URL - 指向另一個(gè)站點(diǎn)（比如 href=”百度一下，你就知道”）
下載：href=’url’中url鏈接地址一個(gè)軟件就會(huì)下載
錨點(diǎn)：href=’#ID名’ 錨點(diǎn)
target 鏈接打開(kāi)方式
_blank 新窗口（空白頁(yè)面）
_self 當(dāng)前窗口
<base target="_blank" /> 定義默認(rèn)網(wǎng)頁(yè)打開(kāi)方式
六、路徑
相對(duì)路徑 —相對(duì)于當(dāng)前 文檔位置出發(fā)（推薦使用）
絕對(duì)路徑—路徑名稱(chēng)不能出現(xiàn)中文
本地絕對(duì)路徑：從盤(pán)符出發(fā)
D:/a/b/c/d/6.jpg
網(wǎng)絡(luò)絕對(duì)路徑：從域名出發(fā)
https://www.baidu.com/img/bd_logo1.png注意=>需要跳到上一級(jí)要../ 如果要跳兩級(jí)../../
七、代碼seo方法：
SEO : 搜索引擎優(yōu)化
一、頁(yè)面標(biāo)簽語(yǔ)義化；
二、使用對(duì)SEO有利的標(biāo)簽： h1/h2/h3/strong/em……
三、提高頁(yè)面關(guān)鍵詞密度；
今天分享的筆記就到這里了哦，如果感覺(jué)喜歡的話(huà)，記得關(guān)注我
在線(xiàn)咨詢(xún)