整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
CSS 是什么？
CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表。
屬性和屬性值用冒號隔開，以分號結(jié)尾。
CSS 四種引入方式：
1.行內(nèi)式
行內(nèi)式是在標(biāo)簽的style屬性中設(shè)定CSS樣式。
<div style="..."></div>2.嵌入式
嵌入式是將CSS樣式集中寫在網(wǎng)頁的<head>標(biāo)簽的<style></style>標(biāo)簽對中。
<head>
...
<style type="text/css">
...此處寫CSS樣式
</style>
</head>3.導(dǎo)入式
將一個(gè)獨(dú)立的.css文件引入HTML文件中，導(dǎo)入式使用@import 引入外部CSS文件，<style>標(biāo)記也是寫在<head>標(biāo)記中。
導(dǎo)入式會在整個(gè)網(wǎng)頁裝載完后再裝載CSS文件。
<head>
...
<style type="text/css">
@import "My.css"; 此處注意.css文件的路徑
</style>
</head>4.鏈接式
將一個(gè)獨(dú)立的.css文件引入到HTML文件中，使用<link>標(biāo)記寫在<head>標(biāo)記中。
鏈接式會以網(wǎng)頁文件主體裝載前裝載CSS文件。
<head>
...
<link href="My.css" rel="stylesheet" type="text/css">
</head>
樣式應(yīng)用順序：
.nick {
color: yellow !important;
}基本選擇器：
1.通用元素選擇器
* 表示應(yīng)用到所有的標(biāo)簽。
* {color: yellow}2.標(biāo)簽選擇器
匹配所有使用 div 標(biāo)簽的元素（可以匹配所有標(biāo)簽）
div {color: yellow}3.類選擇器
匹配所有class屬性中包含info的元素。
語法：.類名{樣式}（類名不能以數(shù)字開頭，類名要區(qū)分大小寫。）
.Mycolor {color: yellow}
<h3 class="Mycolor">nick</h3>4.ID選擇器
使用id屬性來調(diào)用樣式，在一個(gè)網(wǎng)頁中id的值都是唯一的（是W3C規(guī)范而不是規(guī)則，所以不會報(bào)錯(cuò)）。
語法：#ID名{樣式}（ID名不能以數(shù)字開頭）
#Mycolor {color: yellow}
<h3 id="Mycolor">Nick.</h3>組合選擇器：
1.多元素選擇器
同時(shí)匹配h3,h4標(biāo)簽，之間用逗號分隔。
h3,h4 {color: yellow;}
<h3>Nick</h3>
<h4>Jenny</h4>
2.后代元素選擇器
匹配所有div標(biāo)簽里嵌套的P標(biāo)簽，之間用空格分隔。
div p {color: yellow;}
<div>
<p>Nick</p>
<div>
<p>Nick</p>
</div>
</div>3.子元素選擇器
匹配所有div標(biāo)簽里嵌套的子P標(biāo)簽，之間用>分隔。
div > p {color: yellow;}
<div>
<p>Nick</p>
<p>Nick</p>
</div>4.毗鄰元素選擇器
匹配所有緊隨div標(biāo)簽之后的同級標(biāo)簽P，之間用+分隔（只能匹配一個(gè)）。
div + p {color: yellow;}
<div>Nick</div>
<p>Nick</p>屬性選擇器：
1.[title] & P[title]
設(shè)置所有具有title屬性的標(biāo)簽元素；
設(shè)置所有具有title屬性的P標(biāo)簽元素。
[title]
{
color: yellow;
}
p[title]
{
color: yellow;
}
<div title>Nick</div>
<p title>Nick</p>2.[title=Nick]
設(shè)置所有title屬性等于“Nick”的標(biāo)簽元素。
[title="Nick"]
{
color: yellow;
}
<p title="Nick">Nick</p>3.[title~=Nick]
設(shè)置所有title屬性具有多個(gè)空格分隔的值、其中一個(gè)值等于“Nick”的標(biāo)簽元素。
[title~="Nick"]
{
color: yellow;
}
<p title="Nick Jenny">Nick</p>
<p title="Jenny Nick">Nick</p>4.[title|=Nick]
設(shè)置所有title屬性具有多個(gè)連字號分隔（hyphen-separated）的值、其中一個(gè)值以"Nick"開頭的標(biāo)簽元素。
例：lang屬性："en"、"en-us"、"en-gb"等等
[title|="Nick"]
{
color: yellow;
}
<p title="Nick-Jenny">Nick</p>
5.[title^=Nick]
設(shè)置屬性值以指定值開頭的每個(gè)標(biāo)簽元素。
[title^="Nick"]
{
color: yellow;
}
<p title="NickJenny">Nick</p>6.[title$=Nick]
設(shè)置屬性值以指定值結(jié)尾的每個(gè)標(biāo)簽元素。
[title$="Nick"]
{
color: yellow;
}
<p title="JennyNick">Nick</p>7.[title*=Nick]
設(shè)置屬性值中包含指定值的每個(gè)元素
[title*="Nick"]
{
color: yellow;
}
<p title="SNickJenny">Nick</p>偽類選擇器：
1. link、hover、active、visited
a:link{color: black}
a:hover{color: yellow}
a:active{color: blue}
a:visited{color: red}
<a href="#">Nick</a>2. before、after
p {
color: yellow;
}
p:before{
content: "before...";
}
p:after{
content: "after...";
}
<p> Nick </p> 1. 顏色屬性：
color
transparent
opacity
2. 字體屬性:
font-style: 用于規(guī)定斜體文本
font-weight: 設(shè)置文本的粗細(xì)
font-size: 設(shè)置字體的大小
font-family：字體名稱
font：簡寫屬性
3. 文本屬性:
white-space: 設(shè)置元素中空白的處理方式
direction: 規(guī)定文本的方向
text-align: 文本的水平對齊方式
line-height: 文本行高
vertical-align: 文本所在行高的垂直對齊方式
text-indent: 文本縮進(jìn)
letter-spacing: 添加字母之間的空白
word-spacing: 添加每個(gè)單詞之間的空白
text-transform: 屬性控制文本的大小寫
text-overflow: 文本溢出樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
<style>
div {
width: 100px;
height: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧</div>
</body>
</html>text-decoration: 文本的裝飾
text-shadow：文本陰影
word-wrap：自動(dòng)換行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
width: 150px;
height: 160px;
background-color: #FFA500;
/*邊框陰影*/
box-shadow: 10px 10px 5px #888;
/*自動(dòng)換行*/
word-wrap: break-word;
}
h1 {
text-shadow: 5px 5px 5px #888;
}
</style>
</head>
<body>
<p>
When you are old and grey and full of sleep,And nodding by the fire, take down this book,And slowly read, and dream of the soft look
</p>
<h1>索寧</h1>
</body>
</html> a {
text-decoration: none;
/*去除a標(biāo)簽下劃線*/
}4. 背景屬性
background-color: 背景顏色
background-image 設(shè)置圖像為背景
background-position 設(shè)置背景圖像的位置坐標(biāo)
background-repeat 設(shè)置背景圖像不重復(fù)平鋪
background-attachment 背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)
background 簡寫
5. 列表屬性
list-style-type: 列表項(xiàng)標(biāo)志的類型
list-style-image：將圖象設(shè)置為列表項(xiàng)標(biāo)志
list-style-position：列表項(xiàng)標(biāo)志的位置
list-style：縮寫
1. 邊框
border-style：邊框樣式
border-color：邊框顏色
border-width：邊框?qū)挾?/strong>
border-radius：圓角
border: 簡寫
box-shadow：邊框陰影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border:2px solid;
border-radius:25px;
width: 140px;
}
</style>
</head>
<body>
<div>
點(diǎn)贊哦！dear.
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.radius1 {
display: inline-block;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 20px;
}
.radius2 {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
border-radius: 20px 35px;
}
.radius3 {
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
border-radius: 20px 35px 50px;
}
.radius4 {
display: inline-block;
width: 100px;
height: 100px;
background-color: green;
border-radius: 20px 35px 50px 60px;
}
</style>
</head>
<body>
<div>
<span class="radius1"></span>
<span class="radius2"></span>
<span class="radius3"></span>
<span class="radius4"></span>
</div>
</body>
</html>邊框?qū)崿F(xiàn)各種三角符號：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.triangle-one {
display: inline-block;
border-top: 50px red solid;
border-right: 50px green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-two {
display: inline-block;
border-top: 0 red solid;
border-right: 50px green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-stree {
display: inline-block;
border-top: 50px red solid;
border-right: 0 green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-four {
display: inline-block;
border-top: 50px red solid;
border-right: 0 green solid;
border-bottom: 0 yellow solid;
border-left: 50px blue solid;
}
.triangle-five {
display: inline-block;
border: 50px transparent solid;
border-top: 50px red solid;
}
.triangle-six {
display: inline-block;
border: 50px transparent solid;
border-bottom: 50px yellow solid;
}
.triangle-seven {
display: inline-block;
border: 50px transparent solid;
border-top: 60px red solid;
border-right: 0;
}
.triangle-eight {
display: inline-block;
border: 50px transparent solid;
border-left: 30px yellow solid;
border-bottom: 0;
}
</style>
</head>
<body>
<div class="triangle-one"></div>
<div class="triangle-two"></div>
<div class="triangle-stree"></div>
<div class="triangle-four"></div>
<div class="triangle-five"></div>
<div class="triangle-six"></div>
<div class="triangle-seven"></div>
<div class="triangle-eight"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back {
width: 1000px;
height: 1000px;
margin: 0 auto;
background-color: #ddd;
position: relative;
}
.back-in {
position: absolute;
width: 1020px;
height: 45px;
left: -20px;
top: 50px;
background-color: #2F4F4F;
}
.back-img {
border: 20px solid transparent;
border-top: 10px solid dimgrey;
border-right: 0;
display: inline-block;
position: absolute;
top: 95px;
left: -20px;
}
.back-font {
line-height: 9px;
margin-left: 30px;
color: white;
}
</style>
</head>
<body>
<div class="back">
<div class="back-in"><h3 class="back-font">妹子求關(guān)注 ^.^</h3></div>
<div class="back-img"></div>
</div>
</body>
</html>2.★ 盒子模型
一個(gè)標(biāo)準(zhǔn)的盒子模型：
padding:用于控制內(nèi)容與邊框之間的距離;
margin: 用于控制元素與元素之間的距離;
一個(gè)參數(shù)，應(yīng)用于四邊。
兩個(gè)參數(shù)，第一個(gè)用于上、下，第二個(gè)用于左、右。
三個(gè)參數(shù)，第一個(gè)用于上，第二個(gè)用于左、右，第三個(gè)用于下。
邊框在默認(rèn)情況下會定位于瀏覽器窗口的左上角，但是并沒有緊貼著瀏覽器的窗口的邊框，這是因?yàn)閎ody本身也是一個(gè)盒子，外層還有html，
在默認(rèn)情況下，body距離html會有若干像素的margin，所以body中的盒子不會緊貼瀏覽器窗口的邊框了。
解決方法：
body {
margin: 0;
}3.★ display
4. visibility
5.★ float 浮動(dòng)
讓一行顯示兩個(gè)塊級標(biāo)簽，會脫離文檔流
clear 清除浮動(dòng)：
6. clip 剪裁圖像
rect 剪裁定位元素：
7. overflow 設(shè)置當(dāng)對象的內(nèi)容超過其指定高度及寬度時(shí)如何顯示內(nèi)容
8.★ position 規(guī)定元素的定位類型
9. z-index 元素層疊順序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.z-index1 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
z-index: -1;
}
.z-index2 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 20px;
left: 20px;
z-index: 5;
}
</style>
</head>
<body>
<div class="z-index1"></div>
<div class="z-index2"></div>
</body>
</html>10. outline 邊框輪廓
11. zoom 縮放比例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.zoom1 {
zoom: 100%;
}
.zoom2 {
zoom: 150%;
}
.zoom3 {
zoom: 200%;
}
</style>
</head>
<body>
<div class="zoom1">Nick 100%</div>
<div class="zoom2">Nick 200%</div>
<div class="zoom3">Nick 300%</div>
</body>
</html>12. cursor 鼠標(biāo)的類型形狀
鼠標(biāo)放在以下單詞上，There will be a miracle：
url: 自定義光標(biāo)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
<style>
body {
cursor: url("mouse.png"), auto;
/*圖片地址：http://images.cnblogs.com/cnblogs_com/suoning/845162/o_mouse.png*/
}
</style>
</head>
<body>
<div><img src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" height="100%" width="100%"></div>
</body>
</html> Auto: 默認(rèn)
Default: 默認(rèn)
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
Crosshair
Pointer
Move
text
wait
help
not-allowed
13. transform、transition 動(dòng)畫效果
transform 轉(zhuǎn)換，變形
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nick</title>
<meta charset="utf-8" />
<style type="text/css">
div {
border: 1px solid black;
height: 30px;
width: 30px;
background-color: yellow;
/*transform-origin: 50px 50px;*/
transform-origin: left;
transform: rotate(50deg);
/*transform: skew(50deg,50deg);*/
/*transform: translate(50px,50px);*/
/*transform: scale(2);*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Transition 平滑過渡
#property 指定屬性對應(yīng)類型
1、color： 通過紅、綠、藍(lán)和透明度組件變換（每個(gè)數(shù)值單獨(dú)處理），如：background-color，border-color，color，outline-color等CSS屬性；
2、length：真實(shí)的數(shù)字，如：word-spacing，width，vertical- align，top，right，bottom，left，padding，outline-width，margin，min-width，min- height，max-width，max-height，line-height，height，border-width，border- spacing，background-position等屬性；
3、percentage：真實(shí)的數(shù)字，如：word-spacing，width，vertical- align，top，right，bottom，left，min-width，min- height，max-width，max-height，line-height，height，background-position等屬性；
4、integer 離散步驟（整個(gè)數(shù)字），在真實(shí)的數(shù)字空間，以及使用floor()轉(zhuǎn)換為整數(shù)時(shí)發(fā)生，如：outline-offset，z-index等屬性；
5、number真實(shí)的（浮點(diǎn)型）數(shù)值，如：zoom，opacity，font-weight等屬性；
6、transform list。
7、rectangle：通過x、 y、 width和height（轉(zhuǎn)為數(shù)值）變換，如：crop；
8、visibility：離散步驟，在0到1數(shù)字范圍之內(nèi)，0表示“隱藏”，1表示完全“顯示”,如：visibility；
9、shadow：作用于color、x、y、和blur（模糊）屬性，如：text-shadow；
10、gradient：通過每次停止時(shí)的位置和顏色進(jìn)行變化。它們必須有相同的類型（放射狀的或是線性的）和相同的停止數(shù)值以便執(zhí)行動(dòng)畫，如：background-image；
11、paint server (SVG)：只支持下面的情況：從gradient到gradient以及color到color，然后工作與上面類似；
12、space-separated list of above：如果列表有相同的項(xiàng)目數(shù)值，則列表每一項(xiàng)按照上面的規(guī)則進(jìn)行變化，否則無變化；
13、a shorthand property：如果縮寫的所有部分都可以實(shí)現(xiàn)動(dòng)畫，則會像所有單個(gè)屬性變化一樣變化。#支持執(zhí)行transition效果的屬性
Property Name Type
background-color as color
background-position as repeatable list of simple list of length, percentage, or calc
border-bottom-color as color
border-bottom-width as length
border-left-color as color
border-left-width as length
border-right-color as color
border-right-width as length
border-spacing as simple list of length
border-top-color as color
border-top-width as length
bottom as length, percentage, or calc
clip as rectangle
color as color
font-size as length
font-weight as font weight
height as length, percentage, or calc
left as length, percentage, or calc
letter-spacing as length
line-height as either number or length
margin-bottom as length
margin-left as length
margin-right as length
margin-top as length
max-height as length, percentage, or calc
max-width as length, percentage, or calc
min-height as length, percentage, or calc
min-width as length, percentage, or calc
opacity as number
outline-color as color
outline-width as length
padding-bottom as length
padding-left as length
padding-right as length
padding-top as length
right as length, percentage, or calc
text-indent as length, percentage, or calc
text-shadow as shadow list
top as length, percentage, or calc
vertical-align as length
visibility as visibility
width as length, percentage, or calc
word-spacing as length
z-index as integer鼠標(biāo)放在以下圖片上，There will be a miracle：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nick</title>
<meta charset="utf-8" />
<style type="text/css">
.img-see-2016-7-2 {
background-image: url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_sea.jpg");
background-size: 660px;
background-repeat: no-repeat;
height: 300px;
width: 600px;
transition-duration: 30s;
transition-timing-function: ease;
transition-property: background-size;
}
.img-see-2016-7-2:hover {
background-size: 2000px;
}
</style>
</head>
<body>
<div class="img-see-2016-7-2"></div>
</body>
</html>作者：suoning
原文鏈接：https://www.cnblogs.com/suoning/p/5625582.html
TML5是一種標(biāo)記語言，用于創(chuàng)建和呈現(xiàn)網(wǎng)頁內(nèi)容。與早期的HTML版本相比，HTML5具有許多新的功能和改進(jìn)，可以更好地支持動(dòng)態(tài)內(nèi)容、多媒體、圖形和互動(dòng)性。在本文中，我們將討論如何使用HTML5制作網(wǎng)頁，以及HTML5與舊版本HTML的區(qū)別。
首先，讓我們了解一下HTML5的一些主要功能和優(yōu)勢。HTML5具有以下特點(diǎn)：
1. 語義化標(biāo)簽：HTML5引入了一些新的語義化標(biāo)簽，例如、、、等。這些標(biāo)簽的使用可以增強(qiáng)網(wǎng)頁的結(jié)構(gòu)并提高搜索引擎的可讀性。
2. 多媒體支持：HTML5內(nèi)置了對多媒體的支持，例如和標(biāo)簽，可以在網(wǎng)頁上直接播放視頻和音頻文件，而無需使用第三方插件。
3. Canvas繪圖：HTML5引入了元素，允許開發(fā)者通過JavaScript在網(wǎng)頁上繪制圖形和動(dòng)畫。這對于創(chuàng)建復(fù)雜的圖表、可視化效果和游戲非常有用。
4. 本地存儲：HTML5提供了幾種本地存儲方法，例如localStorage和sessionStorage。這些方法可以在客戶端存儲數(shù)據(jù)，使得網(wǎng)頁可以更快地加載和響應(yīng)用戶的操作。
5. 表單增強(qiáng)：HTML5為表單提供了許多新的輸入類型和屬性，例如日期、時(shí)間、顏色、URL等。這些功能減少了對JavaScript的依賴，在客戶端驗(yàn)證和收集用戶輸入數(shù)據(jù)時(shí)更加方便。
現(xiàn)在，讓我們看看如何使用HTML5制作網(wǎng)頁的基本步驟。
步驟一：創(chuàng)建HTML文檔結(jié)構(gòu)HTML5的網(wǎng)頁結(jié)構(gòu)包括、和等標(biāo)簽。在標(biāo)簽中，可以設(shè)置網(wǎng)頁的語言屬性（）和字符編碼（）。在標(biāo)簽中，可以添加網(wǎng)頁的標(biāo)題（）和其他元數(shù)據(jù)（標(biāo)簽）。在標(biāo)簽中，可以編寫網(wǎng)頁的內(nèi)容。
步驟二：使用語義化標(biāo)簽為了增強(qiáng)網(wǎng)頁的結(jié)構(gòu)和可讀性，應(yīng)盡量使用語義化標(biāo)簽。例如，標(biāo)簽用于網(wǎng)頁的標(biāo)題和導(dǎo)航欄，標(biāo)簽用于網(wǎng)頁的導(dǎo)航鏈接，和標(biāo)簽用于劃分網(wǎng)頁的內(nèi)容部分。
步驟三：插入多媒體使用、和
等標(biāo)簽插入多媒體內(nèi)容。例如，使用標(biāo)簽可以插入視頻文件，并設(shè)置其屬性（例如src、width、height）來指定視頻的來源和尺寸。
步驟四：繪制圖形和動(dòng)畫使用標(biāo)簽和JavaScript繪制圖形和動(dòng)畫。通過在標(biāo)簽中指定寬度和高度，并調(diào)用JavaScript函數(shù)繪制圖形，可以在網(wǎng)頁上顯示自定義的圖形和動(dòng)畫效果。
步驟五：使用本地存儲使用localStorage和sessionStorage等方法，在客戶端存儲數(shù)據(jù)。通過調(diào)用JavaScript的API，可以將數(shù)據(jù)存儲在瀏覽器中，并在需要時(shí)讀取和更新數(shù)據(jù)。
步驟六：優(yōu)化網(wǎng)頁性能使用HTML5的新功能來優(yōu)化網(wǎng)頁性能。例如，使用新的表單輸入類型和屬性可以在客戶端驗(yàn)證和收集用戶輸入數(shù)據(jù)，減少對服務(wù)器的請求和響應(yīng)時(shí)間。
現(xiàn)在，讓我們來了解一下HTML5和HTML的區(qū)別。
HTML5是HTML的第五個(gè)版本，是對以前的HTML版本進(jìn)行的改進(jìn)和擴(kuò)展。與HTML4相比，HTML5具有許多新的功能和語義化標(biāo)簽，使開發(fā)者能夠創(chuàng)建更現(xiàn)代、豐富和交互性的網(wǎng)頁。
以下是HTML5和HTML的一些區(qū)別：
1. 標(biāo)簽語義化：HTML5引入了許多新的語義化標(biāo)簽，如、、、等。這些標(biāo)簽增強(qiáng)了網(wǎng)頁的結(jié)構(gòu)和可讀性，有助于搜索引擎優(yōu)化和可訪問性。
2. 多媒體支持：HTML5內(nèi)置了對多媒體的支持，如和標(biāo)簽，可以在網(wǎng)頁上直接播放視頻和音頻文件。而在HTML4中，需要使用第三方插件（如Flash）來實(shí)現(xiàn)相同的功能。
3. Canvas繪圖：HTML5引入了元素，允許在網(wǎng)頁上通過JavaScript繪制圖形和動(dòng)畫。而在HTML4中，圖形和動(dòng)畫的創(chuàng)建通常依賴于第三方插件或JavaScript庫。
4. 本地存儲：HTML5提供了localStorage和sessionStorage等方法，在客戶端存儲數(shù)據(jù)。這使得網(wǎng)頁可以更快地加載和響應(yīng)用戶的操作。相比之下，HTML4需要通過服務(wù)器來存儲和獲取數(shù)據(jù)。
5. 表單增強(qiáng)：HTML5為表單提供了新的輸入類型和屬性，如日期、時(shí)間、顏色、URL等。這減少了對JavaScript和服務(wù)器的依賴，提高了用戶體驗(yàn)。
總結(jié)起來，HTML5相對于HTML4具有更多的功能和改進(jìn)，使得開發(fā)者可以創(chuàng)建更現(xiàn)代、豐富和互動(dòng)性的網(wǎng)頁。它提供了語義化標(biāo)簽、多媒體支持、Canvas繪圖、本地存儲和表單增強(qiáng)等功能，為網(wǎng)頁開發(fā)提供了更多的選擇和可能性。
示：點(diǎn)擊上方"WEB網(wǎng)頁設(shè)計(jì)自學(xué)平臺"↑ 可以訂閱噢！
摘要 51RGB官方微信在學(xué)習(xí)CSS制作知識之前，我們必須需要認(rèn)識的HTML什么基礎(chǔ)知識。
一、必知HTML基礎(chǔ)-CSS教程系列
目錄
搞清瀏覽器作用
搞清什么是HTML
html作用
html我們涉及哪些基礎(chǔ)知識
常見html單詞及單詞功能作用有哪些
html結(jié)構(gòu)
html與CSS關(guān)系
瀏覽器主要作用是瀏覽網(wǎng)頁作用，在DIV+CSS制作開發(fā)時(shí)候仍然是瀏覽我們制作開發(fā)重構(gòu)網(wǎng)頁作用。瀏覽器可測試我們開發(fā)的CSS網(wǎng)頁兼容性、網(wǎng)頁效果、因開發(fā)疏忽導(dǎo)致錯(cuò)誤等作用。
在CSS測試（CSS工具）里常用瀏覽器包括IE6、IE7、IE8、火狐（FF）、谷歌（chrome）、蘋果Safari、Opera主流瀏覽器。至于傲游、360瀏覽器因?yàn)樗麄兪褂媚阆到y(tǒng)自帶的IE內(nèi)核，所以不必考慮，只要支持你瀏覽器版本即支持類似這2款瀏覽器
需要兼容瀏覽器有哪些？http://www.51rgb.com/css-tool/t86.shtml
html是hypertext markup language的縮寫，即超文本標(biāo)記語言。可以這樣理解，HTML文件是一定規(guī)則規(guī)律以html\htm等命名后綴名的文本文件。
HTML作用，通過一定html自身語法結(jié)構(gòu)（html結(jié)構(gòu)），顯示文字、圖片、動(dòng)畫（flash）、視頻或音頻音樂。而CSS則是配合html實(shí)現(xiàn)漂亮的各式各樣的頁面內(nèi)容。
4、html我們涉及哪些基礎(chǔ)知識
Html擴(kuò)展名、html源代碼、DOCTYPE、html結(jié)構(gòu)、head標(biāo)簽、charset
a、B(strong)：加粗
b、P：換行實(shí)例：<p>我是第一段內(nèi)容</p><p>我是第二段內(nèi)容</p>
c、Br：提行實(shí)例：我是第一排<br />我是第二排內(nèi)容
d、px：像素、長度寬度單位
實(shí)例：width:30px; 寬度30像素
e、ul、ol、li列表標(biāo)簽實(shí)例：
<ul>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
<ol>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ol>
f、div與span：都是html標(biāo)簽
實(shí)例：<div>我占一行</div><span>我多長占多長位置</span>
兩者區(qū)別：DIV占用1整排，而SPAN所占位置是內(nèi)容多少占用多長長度
g、img：圖片引用標(biāo)簽
<img src="/css-images/css-logo.gif" />圖片標(biāo)簽
h、dl dt dd：CSS的另類表格組合
實(shí)例：
<dl>
<dt>我是標(biāo)題</dt>
<dd>列表一</dd>
<dd>列表二</dd>
</dl>
j、title：標(biāo)題標(biāo)簽
實(shí)例：<title>標(biāo)題</title>
特點(diǎn)，在一個(gè)網(wǎng)頁內(nèi)只能使用一次（只能出現(xiàn)一次）
6、html結(jié)構(gòu) - TOP
這里Html結(jié)構(gòu)可用于每次新建制作網(wǎng)頁模板使用。
舊html結(jié)構(gòu)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIVCSS5標(biāo)題</title>
</head>
<body>
具體網(wǎng)頁呈現(xiàn)內(nèi)容
</body>
</html>
經(jīng)過CSS教程網(wǎng)的DIVCSS5優(yōu)化后的HTML結(jié)構(gòu)（可用于每次新建HTML模板）：
<!DOCTYPE html>
<html>
<title>標(biāo)題</title>
<meta name="keywords" content="關(guān)鍵字" />
<meta name="description" content="網(wǎng)頁描述" />
<link href="這里CSS文件引入地址" rel="stylesheet" type="text/css" />
內(nèi)容www.divcss5.com提供
搞清楚html與CSS關(guān)系很重要，也是認(rèn)識CSS基礎(chǔ)。html與CSS關(guān)系解釋：HTML內(nèi)放置顯示網(wǎng)頁要顯示的具體內(nèi)容（圖片、文字、動(dòng)畫等）而CSS是控制HTML內(nèi)這些具體內(nèi)容的怎么顯示、怎么排版、顏色、大小、寬度、高度、左右布局等顯示樣式。
以上7點(diǎn)是學(xué)習(xí)CSS的html基礎(chǔ)，可能還不完善，但是在以后運(yùn)用的時(shí)候DIVCSS5會給大家詳細(xì)、本簡單CSS教程分為15節(jié)，此節(jié)DIV CSS教程以文字內(nèi)容為主，以后會穿插更多實(shí)例和圖例、跟我做的內(nèi)容希望對大家能有幫助。
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
