HTML:超文本標記語言
介紹HTML基本標記
1：頭部標記（head）----- 頭部的內容不會再頁面上顯示
在頭部元素中，一般需要包括標題<title>，基本信息(文檔樣式，表定義，腳本)和元信息<meta>
語法：
以<head> 開始標記，以</head> 結束標記
實例1：
<html>
<head>
文檔頭部信息
</head>
<body>
文檔正文信息
</body>
</html>
2：標題標記（title）
作用：
一般是說明頁面的用途，顯示在瀏覽器的標題欄中；
語法： ：
以<title>開始，以</title>結束；
實例2：
<html>
<head>
<title>標題信息</title>
</head>
</html>
3：元信息標記（meta）
meta元素提供的信息不顯示在頁面中，一般用來定義頁面信息的說明，關鍵字，刷新等；
meta標記不需要設置結束標記；
在一個HTML頁面中可以有多個meta元素；
meta元素的屬性有name和http-equiv，其中name屬性主要用於描述網頁，以便於搜索引擎查找，分類；
設置頁面關鍵字
在搜索引擎中，檢索信息都是通過輸入關鍵字來實現的；
關鍵字是整個網站登錄過程中最基本也是最重要的一步，是進行網頁優化的基礎；
具體語法：<meta name="keywords" content="輸入具體的關鍵字">
設置頁面說明
設置頁面說明也是為了便於搜索引擎的查找，它用來詳細說明網頁的內容；
語法：<meta name="description" content="設置頁面說明">
編碼格式：
<meta charset="UTF-8">
3.3：定義編譯工具
指定開發工具
語法：<meta name="generator" content="FronPage">
設置作者信息
語法：<meta name="author" content="小希">
設置網頁文字及語言
語法：<meta http-equiv="content-type" content="2.html" charset="utf-8">
http-equiv：用於傳遞HTTP通信協議的標頭；
content：具體屬性信息；
charset：設置網頁的內碼語系；
設置網頁的跳轉
自動刷新功能是將http-equiv屬性值設置為refresh;
更新時間和刷新后的鏈接地址由content屬性設置，默認跳轉時間以秒為單位；
語法：<meta http-equiv="refresh" content="20;URL=跳轉地址">
4:網頁主體標記（body）
主體主要包括要在瀏覽器中顯示處理的所有信息，在網頁的主體標記中有很多的屬性設置，包括網頁的背景設置，文字屬性設置和鏈接設置等；
網頁背景顏色（bgcolor）
語法：
<body bgcolor="背景顏色">
<body bgcolor="yellow">
<body bgcolor="#FF99FF">
網頁背景顏色（background）
可以將圖片設置為背景，還可以設置背景顏色圖片的平鋪方式，顯示方式；
參數：no-repeat(不重復)
background: yellow url("img/100.png") no-repeat;
語法：<body background="images/1.jpg">
注：指定的路徑可以是絕對路徑也可以是相對路徑；
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 400px;
height: 500px;
background: yellow url("img/100.png") no-repeat center center;
}
#bg{
width: 500px;
height: 600px;
background: red url("img/1.jpg") center top no-repeat;
}
</style>
</head>
<body>
<div id="box" >html study css</div>
<div id="bg"></div>
</body>
</html>
邊框(
border
)：
border 邊框
border-width 邊框寬度
border-style 邊框樣式
border-color 邊框顏色
邊框樣式：
solid 實線
dashed 虛線
dotted 點線（IE6不兼容）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>邊框</title>
<style>
#bg{
width: 400px;
height: 400px;
border: 1px fuchsia dotted;
}
#box{
width: 0px;
height: 0px;
border-top: solid red 100px;
border-right: solid green 100px;
border-bottom: solid yellow 100px;
border-left: solid fuchsia 100px;
}
</style>
</head>
<body>
<div id="bg">邊框</div>
<div id="box">邊框2</div>
</body>
</html>
padding 內邊距
padding-top 上邊內邊距
padding-right 右邊內邊距
padding-bottom 下邊內邊距
padding-left 左邊內邊距
padding: top right bottom left;
注意：內邊距相當於給一個盒子加了填充厚度會影響盒子大小
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>內邊距</title>
<!--如果給一個盒子加完內邊距，不想讓盒子的大小發生改變，我們需要在寬度和高度上減掉響應的像素-->
<style>
#box {
width: 400px;
height: 280px;
border: 10px red solid;
padding-top: 20px;
}
</style>
</head>
<body>
<div id="box">邊框2</div>
</body>
</html>
margin外邊距
外邊距的問題：
1、上下外邊距會疊壓；
2、父子級包含的時候子級的margin-top會傳遞給父級；（內邊距替代外邊距）
外邊距復合：margin: top right bottom left;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>外邊距</title>
<style>
#box1{
width: 100px;
height: 100px;
background: yellow;
/*頁面左右居中*/
margin-left: auto;
margin-right: auto;
}
#box2{
width: 200px;
height: 200px;
background: red;
padding-top: 100px;
/*頁面左右居中*/
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<!--需求：box1頂部距box2，100px,使用內邊距;-->
<body>
<div id="box2">
<div id="box1">外邊距1</div>
</div>
</body>
</html>
設置文字顏色（text）
語法：
<body text="文字顏色">
<body background="images/1.jpg" text="#9966CC">
鏈接文字屬性
語法：
<body link="#993300">
需要注意一下標簽屬性：
1：定義居中文本
<center>
</center>
2：<a>標簽可定義錨
包括href和name屬性
<a> 標簽的 href 屬性用於指定超鏈接目標的 URL；
實例：
<body background="images/1.jpg" text="#9966CC" link="#993300">
<center>
<a href="https://www.baidu.com/index.html">連接文字</a>
</center>
</body>
設置正在訪問的文字顏色
語法：<body alink="#0066FF">
設置訪問后的文字的顏色
語法：<body vlink="#0066FF">
邊距margin
設置頁面與瀏覽器之間的距離，包括上邊距和左邊距，邊距的值以像素為單位；
topmargin：上邊距離
leftmargin：左邊距離
語法：
<body topmargin="100" leftmargin="100">
<p>設置頁面的長邊距</p>
<p>設置頁面的左邊距</p>
</body>
5:頁面注釋標記<!-- -->
語法：<!--注釋的內容-->