HTML/CSS基礎知識總結

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

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

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

<html>

<head>

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

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

<!-- 在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樣式,只針對當前頁面*/

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

/*標記選擇器*/

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ù)文檔上下文關系來定義樣式*/

        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)絡</a>

</div>

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

</body>

</html>

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

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

返回首頁上一篇：HTML5常用標簽下一篇：沒有了