HTML/CSS基礎(chǔ)知識(shí)總結(jié)

2018-09-03 10:28:51 來源：揚(yáng)州市新竹網(wǎng)絡(luò)科技有限公司

在WEB中，HTML和CSS的布局是比不可少的。其中不同標(biāo)簽和屬性的使用方法及作用與網(wǎng)站頁面緊密關(guān)聯(lián)。
Html頁面

<!doctype html><!-- xml xhtml 聲明 -->

<html>

<head>

<meta charset="UTF-8"> <!--設(shè)置為UTF-8字符集-->

<title>20180810</title> <!--網(wǎng)頁標(biāo)題-->

<!-- 在title內(nèi)部放入圖片 -->

<link rel="shortcut icon" type="image/x-icon" href="images/footlogo.png">

<!-- 鏈接外部css樣式表  外部樣式：為了共享 --> 

<link rel="stylesheet" href="css/style.css" type="text/css" >

<style type="text/css">

/* 內(nèi)部調(diào)用CSS樣式,只針對(duì)當(dāng)前頁面*/

/*tag標(biāo)簽名、id名(名字前面加 #) class名  屬性選擇器*/

/*標(biāo)記選擇器*/

body{} 

/*屬性選擇器*/

a[href="https://www.baidu.com/"]{color:red}

/*CSS選擇器*/

.top{ 

width:150px;

height:150px;

background-color:#00FFFF;

}

/*ID選擇器*/

#one{           

width:100px;

height:100px;

background: pink;

}

a{color:red}

/*派生選擇器 根據(jù)文檔上下文關(guān)系來定義樣式*/

        div a{color: #000;}

        #one a{}

</style>

</head>

<body><!-- 內(nèi)聯(lián)樣式 style="background: #F5F5DC;"-->

<img src="" alt="">

<div class="top">

<a href="https://www.baidu.com/">百度</a><!--a鏈接,鏈接到百度-->

</div>

<div id="one">

<a href="">新竹網(wǎng)絡(luò)</a>

</div>

<a href="http://www.xinz56.cn/">新竹網(wǎng)絡(luò)</a><!--鏈接到外部文件-->

</body>

</html>

總結(jié)：
html是一種描述網(wǎng)頁的語言我們稱之為超文本標(biāo)記語言；（它不是編程語言）；
在head內(nèi)部必須設(shè)置編碼,一般設(shè)置為uft-8，謹(jǐn)防在頁面顯示的時(shí)候出現(xiàn)亂碼情況
同時(shí)在head內(nèi)部可以設(shè)置鏈接外部的CSS樣式表和title標(biāo)題img標(biāo)題圖片
標(biāo)簽分為單標(biāo)簽：img meta link
雙標(biāo)簽/閉合標(biāo)簽: html head title body style div a
屬性選擇器
“.” 表示為CSS選擇器
“#” 表示為ID選擇器
“Body{}”表示為標(biāo)記選擇器（屬性選擇器）
內(nèi)部樣式：
寫在head內(nèi)部只針對(duì)當(dāng)前頁面
外部樣式：
外部樣式為了共享注釋 Hmtl中用
在CSS樣式style中 /*注釋*/

本站文章均為新竹網(wǎng)站建設(shè)摘自權(quán)威資料，書籍，或網(wǎng)絡(luò)原創(chuàng)文章，如有版權(quán)糾紛或者違規(guī)問題，請(qǐng)即刻聯(lián)系我們刪除，我們歡迎您分享，引用和轉(zhuǎn)載，我們謝絕直接復(fù)制和抄襲！感謝...

返回首頁上一篇：HTML5常用標(biāo)簽下一篇：沒有了