HTML和CSS基礎(chǔ)是什么

本篇文章為大家展示了HTML和CSS基礎(chǔ)是什么，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

10年積累的網(wǎng)站建設(shè)、成都網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶(hù)對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶(hù)得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有七星免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

一、簡(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è)面開(kāi)始標(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> <!-- 水平線(xiàn) -->沒(méi)有了聯(lián)絡(luò)  后來(lái)的生活  我都是聽(tīng)別人說(shuō)<br><!-- 換行標(biāo)簽 -->說(shuō)你怎么了  說(shuō)你怎么過(guò)  放不下的人是我<br>人多的時(shí)候  就待在角落  就怕別人問(wèn)起我<br></body></html> <!-- html頁(yè)面結(jié)束標(biāo)簽 -->

效果如下：

HTML和CSS基礎(chǔ)是什么

三、其他標(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ù)著我連抱怨都沒(méi)有<span style="color:#0000FF">電話(huà)開(kāi)始躲  從不對(duì)我說(shuō)</span>  不習(xí)慣一個(gè)人生活

HTML和CSS基礎(chǔ)是什么

2、a標(biāo)簽，超鏈接

href：指定要跳轉(zhuǎn)的地址

target：指定方式打開(kāi)新地址，默認(rèn)當(dāng)前頁(yè)面打開(kāi)，_blank在新頁(yè)面打開(kāi)

<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>離開(kāi)我以后  要我好好過(guò)  怕打擾想自由的我</span><span>都這個(gè)時(shí)候  你還在意著  別人是怎么怎么看我的</span><span>拼命解釋著  不是我的錯(cuò)  是你要走</span>

HTML和CSS基礎(chǔ)是什么

id選擇器，為一個(gè)樣式起個(gè)別名，通過(guò)id引用

<style type="text/css">#TS{background-color:#000000; <!-- 黑底 -->color:#FF00FF;            <!-- 粉字 -->}</style><span>離開(kāi)我以后  要我好好過(guò)  怕打擾想自由的我</span><span id="TS">都這個(gè)時(shí)候  你還在意著  別人是怎么怎么看我的</span><span>拼命解釋著  不是我的錯(cuò)  是你要走</span>

HTML和CSS基礎(chǔ)是什么

類(lèi)選擇器，為一個(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">離開(kāi)我以后  要我好好過(guò)  怕打擾想自由的我</span><span id="TS">都這個(gè)時(shí)候  你還在意著  別人是怎么怎么看我的</span><span>拼命解釋著  <span class="ST">不是我的錯(cuò)</span>  是你要走</span>

HTML和CSS基礎(chǔ)是什么

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">離開(kāi)我以后  要我好好過(guò)  怕打擾想自由的我</span><span id="TS">都這個(gè)時(shí)候  你還在意著  別人是怎么怎么看我的</span><span>拼命解釋著  <span class="ST">不是我的錯(cuò)</span>  是你要走</span>

HTML和CSS基礎(chǔ)是什么

上述內(nèi)容就是HTML和CSS基礎(chǔ)是什么，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站標(biāo)題：HTML和CSS基礎(chǔ)是什么
網(wǎng)頁(yè)URL：http://muchs.cn/article10/pihhdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司、移動(dòng)網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、ChatGPT、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

微信小程序開(kāi)發(fā)