您好,登錄后才能下訂單哦!
本篇文章為大家展示了HTML和CSS基礎(chǔ)是什么,內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。
一、簡(jiǎn)介
HTML指的是超文本標(biāo)記語(yǔ)言,使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè),標(biāo)簽是由尖括號(hào)和關(guān)鍵詞組成,并且是成對(duì)出現(xiàn),例如<html></html>。
二、一個(gè)完整的html網(wǎng)頁(yè)
<!DOCTYPE html> <!-- 有助于瀏覽器中正確顯示網(wǎng)頁(yè) --><html> <!-- html頁(yè)面開始標(biāo)簽 --><head><meta charset="UTF-8"> <!-- UTF-8編碼 --><title>周杰倫</title> <!-- 標(biāo)簽頁(yè)顯示的內(nèi)容 --></head><body><img src="1.jpg"> <!-- 插入一張圖片 --><h2>《說(shuō)好不哭》</h2><h4>詞:方文山 曲:周杰倫</h4><h4>演唱:周杰倫/五月天阿信<h4><!-- h2-h6不同大小字體 --><hr> <!-- 水平線 -->沒有了聯(lián)絡(luò) 后來(lái)的生活 我都是聽別人說(shuō)<br><!-- 換行標(biāo)簽 -->說(shuō)你怎么了 說(shuō)你怎么過(guò) 放不下的人是我<br>人多的時(shí)候 就待在角落 就怕別人問起我<br></body></html> <!-- html頁(yè)面結(jié)束標(biāo)簽 -->
效果如下:
三、其他標(biāo)簽介紹
1、div和span標(biāo)簽
div是一個(gè)塊級(jí)元素,它包含的元素會(huì)自動(dòng)換行。
span是行內(nèi)元素,在它的前后不會(huì)換行
<div style="color:#0000FF">你們?cè)趺戳?nbsp; 你低著頭</div> 護(hù)著我連抱怨都沒有<span style="color:#0000FF">電話開始躲 從不對(duì)我說(shuō)</span> 不習(xí)慣一個(gè)人生活
2、a標(biāo)簽,超鏈接
href:指定要跳轉(zhuǎn)的地址
target:指定方式打開新地址,默認(rèn)當(dāng)前頁(yè)面打開,_blank在新頁(yè)面打開
<a href="https://www.baidu.com" target="_blank">百度一下</a>
3、<img>標(biāo)簽,插入圖片
./:本級(jí)目錄
../:父級(jí)目錄
也可以直接添加網(wǎng)絡(luò)上的一張圖片
<img src="./1.jpg"> <!-- 插入一張圖片 --><img src="../1.jpg"> <!-- 插入一張圖片 --><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590819401582&di=55b578406cd4b1649ab0ec90d49e5b98&imgtype=0&src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0829%2Fb871e1addf5f8e96f3b390ece2b2da0d.jpg"><!-- 插入一張圖片 -->
四、CSS樣式, 用于渲染HTML元素標(biāo)簽的樣式
1、內(nèi)聯(lián)樣式
span,將所有span標(biāo)簽內(nèi)的文字都統(tǒng)一樣式
<style type="text/css">span{background-color:#000000; <!-- 黑底 -->color:#00FF00;<!-- 綠字 -->}</style><span>離開我以后 要我好好過(guò) 怕打擾想自由的我</span><span>都這個(gè)時(shí)候 你還在意著 別人是怎么怎么看我的</span><span>拼命解釋著 不是我的錯(cuò) 是你要走</span>
id選擇器,為一個(gè)樣式起個(gè)別名,通過(guò)id引用
<style type="text/css">#TS{background-color:#000000; <!-- 黑底 -->color:#FF00FF; <!-- 粉字 -->}</style><span>離開我以后 要我好好過(guò) 怕打擾想自由的我</span><span id="TS">都這個(gè)時(shí)候 你還在意著 別人是怎么怎么看我的</span><span>拼命解釋著 不是我的錯(cuò) 是你要走</span>
類選擇器,為一個(gè)樣式起個(gè)別名,通過(guò)class引用
<style type="text/css">#TS{background-color:#000000;<!-- 黑底 -->color:#FF00FF;<!-- 綠字 -->}.ST{background-color:#000000;<!-- 黑底 -->color:#00FFFF; <!-- 藍(lán)字 -->}</style><span id="TS">離開我以后 要我好好過(guò) 怕打擾想自由的我</span><span id="TS">都這個(gè)時(shí)候 你還在意著 別人是怎么怎么看我的</span><span>拼命解釋著 <span class="ST">不是我的錯(cuò)</span> 是你要走</span>
2、外引樣式
新建一個(gè)aiyou.css文件,內(nèi)容為
#TS{background-color:#000000;color:#FF00FF;}.ST{background-color:#000000;color:#00FFFF;}
在html源碼中引用
<link rel="stylesheet" type="text/css" href="aiyou.css"><span id="TS">離開我以后 要我好好過(guò) 怕打擾想自由的我</span><span id="TS">都這個(gè)時(shí)候 你還在意著 別人是怎么怎么看我的</span><span>拼命解釋著 <span class="ST">不是我的錯(cuò)</span> 是你要走</span>
上述內(nèi)容就是HTML和CSS基礎(chǔ)是什么,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。