整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML即超文本標(biāo)記語言，是目前應(yīng)用最為廣泛的語言之一，是組成一個(gè)網(wǎng)頁的主要語言。在現(xiàn)今這個(gè)HTML5華麗麗地占領(lǐng)了整個(gè)互聯(lián)網(wǎng)的時(shí)候，如果想要通過網(wǎng)頁抓住瀏覽者的眼球光靠因循守舊是不行的，程序猿們需要掌握一些必須知道的HTML常用代碼，因?yàn)橹挥惺煜ふ莆樟顺Ｓ玫腍TML代碼，程序猿們?cè)诰帉懢W(wǎng)頁的時(shí)候才可以做到流暢美觀，用細(xì)膩的思維和創(chuàng)意的細(xì)節(jié)效果打動(dòng)并留住網(wǎng)頁瀏覽者。
html+css代碼
文本設(shè)置
1、font-size: 字號(hào)參數(shù)
2、font-style: 字體格式
3、font-weight: 字體粗細(xì)
4、顏色屬性
color: 參數(shù)
注意使用網(wǎng)頁安全色
超鏈接設(shè)置
text-decoration: 參數(shù)
主要用途是改變?yōu)g覽器顯示文字鏈接時(shí)的下劃線。
參數(shù)取值范圍：
underline：為文字加下劃線
overline：為文字加上劃線
line-through：為文字加刪除線
blink：使文字閃爍
none：不顯示上述任何效果
背景
1、背景顏色
background-color: 參數(shù)
2、背景圖片
background-image: url(URL)
URL就是背景圖片的存放路徑，none表示無。
3、背景圖片重復(fù)
background-repeat: 參數(shù)
參數(shù)取值范圍 ：
no-repeat：不重復(fù)平鋪背景圖片
repeat-x：使圖片只在水平方向上平鋪
repeat-y：使圖片只在垂直方向上平鋪
如果不指定背景圖片重復(fù)屬性，瀏覽器默認(rèn)的是背景圖片向水平、垂直兩個(gè)方向上平鋪。
4、背景圖片固定
背景圖片固定控制背景圖片是否隨網(wǎng)頁的滾動(dòng)而滾動(dòng)。如果不設(shè)置背景圖片固定屬性，瀏覽器默認(rèn)背景圖片隨網(wǎng)頁的滾動(dòng)而滾動(dòng)。為了避免過于花哨的背景圖片在滾動(dòng)時(shí)轉(zhuǎn)移瀏覽者的注意力，一般都設(shè)為固定
background-attachment: 參數(shù)
參數(shù)取值范圍：
fixed：網(wǎng)頁滾動(dòng)時(shí)，背景圖片相對(duì)于瀏覽器的窗口而言，固定不動(dòng)
scroll：網(wǎng)頁滾動(dòng)時(shí)，背景圖片相對(duì)于瀏覽器的窗口而言，一起滾動(dòng)
區(qū)塊
1、單詞間距
word-spacing: 間隔距離
2、字母間距
letter-spacing: 字母間距
3、文本對(duì)齊
text-align: 參數(shù)
參數(shù)的取值：
left：左對(duì)齊
right：右對(duì)齊
center：居中對(duì)齊
justify：相對(duì)左右對(duì)齊
4、垂直對(duì)齊
vertical-align: 參數(shù)
top：頂對(duì)齊
bottom：底對(duì)齊
text-top：相對(duì)文本頂對(duì)齊
text-bottom：相對(duì)文本底對(duì)齊
baseline：基準(zhǔn)線對(duì)齊
middle：中心對(duì)齊
sub：以下標(biāo)的形式顯示
super：以上標(biāo)的形式顯示
5、文本縮進(jìn)
text-indent: 縮進(jìn)距離
12px相當(dāng)于一個(gè)文字距離
6、空格
white-space: 參數(shù)
normal 正常
pre 保留
nowrap 不換行
7、顯示樣式
display: 參數(shù)
參數(shù)取值范圍：
block：塊級(jí)元素，在對(duì)象前后都換行
inline：在對(duì)象前后都不換行
list-item：在對(duì)象前后都換行，增加了項(xiàng)目符號(hào)
none：無顯示
方框
1、height 高度
2、width 寬度
3、padding 內(nèi)邊距
4、margin 外邊距
5、float（浮動(dòng)）：可以讓塊級(jí)元素在一行中排列，例如橫向菜單。
6、clear 清除浮動(dòng)
邊框
1、樣式
border style 參數(shù)
邊框樣式的參數(shù)：
none：無邊框
dotted：邊框?yàn)辄c(diǎn)線
dashed：邊框?yàn)殚L短線
solid：邊框?yàn)閷?shí)線
double：邊框?yàn)殡p線
2、寬度
border width 參數(shù)
3、顏色
border color 參數(shù)
列表
list-style-type 列表樣式
不同瀏覽器的列表符可能不相同，可能會(huì)影響到網(wǎng)頁，所以網(wǎng)頁中的列表大多都是由背景圖片顯示。
控制用戶界面的樣式
鼠標(biāo)
cursor：鼠標(biāo)形狀參數(shù)
CSS鼠標(biāo)形狀參數(shù)表：
鼠標(biāo)形狀：CSS代碼
style="cursor:hand" 手形
style="cursor:crosshair" 十字形
style="cursor:text" 文本形
style="cursor:wait" 沙漏形
style="cursor:move" 十字箭頭形：
style="cursor:help" 問號(hào)形
style="cursor:e-resize" 右箭頭形
style="cursor:n-resize" 上箭頭形
style="cursor:nw-resize" 左上箭頭形
style="cursor:w-resize" 左箭頭形
style="cursor:s-resize" 下箭頭形
style="cursor:se-resize" 右下箭頭形
style="cursor:sw-resize" 左下箭頭形
HTML常用代碼之：結(jié)構(gòu)性定義
文件類型<HTML></HTML> （放在檔案的開頭與結(jié)尾）
文件主題<TITLE></TITLE> （必須放在「文頭」區(qū)塊內(nèi)）
文頭<HEAD></HEAD> （描述性資料，像是「主題」）
文體<BODY></BODY> （文件本體）
標(biāo)題<H?></H?> （從1到6，有六層選擇）
標(biāo)題的對(duì)齊 <H?ALIGN=LEFT|CENTER|RIGHT></H?>
區(qū)分<DIV></DIV>
區(qū)分的對(duì)齊 <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
引文區(qū)塊<BLOCKQUOTE></BLOCKQUOTE> （通常會(huì)內(nèi)縮）
強(qiáng)調(diào)<EM></EM> （通常會(huì)以斜體顯示）
特別強(qiáng)調(diào)<STRONG></STRONG> （通常會(huì)以加粗顯示）
引文<CITE></CITE> （通常會(huì)以斜體顯示）
碼<CODE></CODE> （顯示原始碼之用）
樣本<SAMP></SAMP>
鍵盤輸入<KBD></KBD>
變數(shù)<VAR></VAR>
定義<DFN></DFN> （有些瀏覽器不提供）
地址 <ADDRESS></ADDRESS>
大字<BIG></BIG>
小字<SMALL></SMALL>
與外觀相關(guān)的標(biāo)簽（作者自訂的表現(xiàn)方式）
加粗<B></B>
斜體<I></I>
底線<U></U> （尚有些瀏覽器不提供）
刪除線<S></S> （尚有些瀏覽器不提供）
下標(biāo)<SUB></SUB>
上標(biāo)<SUP></SUP>
打字機(jī)體<TT></TT> （用單空格字型顯示）
預(yù)定格式<PRE></PRE> （保留文件中空格的大小）
預(yù)定格式的寬度<PRE WIDTH=?></PRE>（以字元計(jì)算）
向中看齊<CENTER></CENTER> （文字與圖片都可以）
閃耀<BLINK></BLINK> （有史以來最被嘲弄的標(biāo)簽）
字體大小 <FONTSIZE=?></FONT>（從1到7）
改變字體大小 <FONTSIZE=+|-?></FONT>
基本字體大小 <BASEFONTSIZE=?> （從1到7; 內(nèi)定為3）
字體顏色 <FONTCOLOR="#$$"></FONT>（$$為顏色代碼）
HTML常用代碼之：修改頁面的實(shí)用性HTML代碼
貼圖：<img src="圖片地址">
加入連接：<a href="所要連接的相關(guān)地址">寫上你想寫的字</a>
在新窗口打開連接：<a href="相關(guān)地址" target="_blank">寫上要寫的字</a>
移動(dòng)字體(走馬燈)：<marquee>寫上你想寫的字</marquee>
字體加粗：<b>寫上你想寫的字</b>
字體斜體：<i>寫上你想寫的字</i>
字體下劃線: <u>寫上你想寫的字</u>
字體刪除線: <s>寫上你想寫的字</s>
字體加大: <big>寫上你想寫的字</big>
字體控制大小：<h1>寫上你想寫的字</h1> (其中字體大小可從h1-h5,h1最大，h5最小)
更改字體顏色：<font color="#value">寫上你想寫的字</font>(其中value值在000000與ffffff(16位進(jìn)制)之間
消除連接的下劃線：<a href="相關(guān)地址" style="text-decoration:none">寫上你想寫的字</a>
貼音樂：<embed src="音樂地址" width="寬度" height="高度" autostart=false>
貼flash: <embed src="flash地址" width="寬度" height="高度">
貼影視文件：<img dynsrc="文件地址" width="寬度" height="高度" start=mouseover>
換行：<br>
段落：<p>段落</p>
原始文字樣式：<pre>正文</pre>
換帖子背景：<body background="背景圖片地址">
固定帖子背景不隨滾動(dòng)條滾動(dòng)：<body background="背景圖片地址" body bgproperties=fixed>
定制帖子背景顏色：<body bgcolor="#value">(value值見10)
帖子背景音樂：<bgsound="背景音樂地址" loop=infinite>
貼網(wǎng)頁：<iframe. src="相關(guān)地址" width="寬度" height="高度"></iframe>
HTML常用代碼之：常常會(huì)遇到的問題
點(diǎn)擊關(guān)閉窗口
<a href="javascript.:top.window.close();">點(diǎn)擊關(guān)閉窗口</a>！
請(qǐng)問如何去掉主頁右面的滾動(dòng)條？
<body scroll="no">
<body style="overflow-y:hidden">
如何做到讓一個(gè)網(wǎng)頁自動(dòng)關(guān)閉.
<html>
<head>
<OBJECT id=closes type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="Close">
</object>
</head>
<body >
這個(gè)窗口會(huì)在10秒過后自動(dòng)關(guān)閉,而且不會(huì)出現(xiàn)提示. </body>
如何在不刷新頁面的情況下刷新css?
<style>
button{ color:#000000;}
</style>
<button nclick=document.styleSheets[0].rules[0].style.color=‘‘‘‘red‘‘‘‘>點(diǎn)擊按鈕直接修改style標(biāo)簽里button選擇符使按鈕改為 紅色</button>
請(qǐng)問如何讓網(wǎng)頁自動(dòng)刷新？
在head部記入<META. HTTP-EQUIV="Refresh" c>其中20為20秒后自動(dòng)刷新，你可以更改為任意值。
如何讓頁面自動(dòng)刷新？
方法一，用refresh
HTML 代碼片段如下:
<head>
<meta. http-equiv="refresh" c>
</head>
5表示刷新時(shí)間
[Ctrl+A 全部選擇 提示:你可先修改部分代碼，再按運(yùn)行]
方法二，使用setTimeout控制
<img src=/logo.gif>
<script>
function rl(){
document.location.reload()
}
setTimeout(rl,2000)
</SCRIPT>
如何讓超鏈接沒有下劃線
在源代碼中的<HEAD>…</HEAD>之間輸入如下代碼：
<style. type="text/css"> <!--
a { text-decoration: none}
--> </style>
請(qǐng)問如何去掉IE的上下滾動(dòng)條？
<body style=‘‘‘‘overflow:scroll;overflow-y:hidden‘‘‘‘>
</body>
怎樣才能把RealPlayer文件在網(wǎng)頁做一個(gè)試聽連接？
<embed height=25 src=51js.rm type=audio/x-pn-realaudio-plugin width=50 autostart="false" c>
如何用html實(shí)現(xiàn)瀏覽器上后退按鈕的功能？
<a href="java script.:history.go(-1)">點(diǎn)擊后退</a>
或者
<script> history.back() </SCRIPT>
HTML常用代碼之：你不一定知道的技巧
ncontextmenu="window.event.returnValue=false" 將徹底屏蔽鼠標(biāo)右鍵
<table borderncontextmenu=return(false)><td>no</table> 可用于Table
<body nselectstart="return false"> 取消選取、防止復(fù)制
onpaste="return false" 不準(zhǔn)粘貼
oncopy="return false;" ncut="return false;" 防止復(fù)制
<link rel="Shortcut Icon"href="favicon.ico"> IE地址欄前換成自己的圖標(biāo)
<link rel="Bookmark"href="favicon.ico"> 可以在收藏夾中顯示出你的圖標(biāo)
<inputstyle="ime-mode:disabled"> 關(guān)閉輸入法
永遠(yuǎn)都會(huì)帶著框架
<script. language="JavaScript"><!--
if (window == top)top.location.href = "frames.htm"; //frames.htm為框架網(wǎng)頁
// --></script>
防止被人frame.
<SCRIPT. LANGUAGE=JAVASCRIPT><!--
if (top.location != self.location)top.location=self.location;
// --></SCRIPT>
網(wǎng)頁將不能被另存為
<noscript><iframe.src=*.html></iframe></noscript>
查看網(wǎng)頁源代碼
<input type=button value=查看網(wǎng)頁源代碼
onclick="window.location = "view-source:"+"http://www.w3cschool.cn"">
刪除時(shí)確認(rèn)
<a href="javascript：if(confirm("確實(shí)要?jiǎng)h除嗎?"))location="boos.asp? &areyou=刪除&page=1"">刪除</a>
屏蔽功能鍵Shift,Alt,Ctrl
<script>
function look(){
if(event.shiftKey)
alert("禁止按Shift鍵!");//可以換成ALT CTRL
}
document.onkeydown=look;
</script>
網(wǎng)頁不會(huì)被緩存
<META. HTTP-EQUIV="pragma" CONTENT="no-cache">
<META. HTTP-EQUIV="Cache-Control"CONTENT="no-cache, must-revalidate">
<META. HTTP-EQUIV="expires"CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
或者<META. HTTP-EQUIV="expires"CONTENT="0">
怎樣讓表單沒有凹凸感？
<input type=text style="border:1 solid #000000">
<input type=text style="border-left:none;border-right:none; border -top:none; border-bottom: 1 solid#000000"></textarea>
不要滾動(dòng)條?
讓豎條沒有:
<body style="overflow:scroll;overflow-y:hidden">
</body>
讓橫條沒有:
<body style="overflow:scroll;overflow-x:hidden">
</body>
兩個(gè)都去掉？更簡單了
<body scroll="no">
</body>
怎樣去掉圖片鏈接點(diǎn)擊后，圖片周圍的虛線？
<a href="#"nFocus="this.blur()"><img src="logo.jpg"border=0></a>
電子郵件處理提交表單
<form. name="form1"method="post" action="mailt****@***.com"enctype="text/plain">
<input type=submit>
</form>
在打開的子窗口刷新父窗口的代碼里如何寫？
window.opener.location.reload()
如何設(shè)定打開頁面的大小
<body nload="top.resizeTo(300,200);">
打開頁面的位置<bodynload="top.moveBy(300,200);">
在頁面中如何加入不是滿鋪的背景圖片,拉動(dòng)頁面時(shí)背景圖不動(dòng)
<STYLE>
body
{background-image:url(logo.gif); background-repeat:no-repeat;
background-position:center;background-attachment: fixed}
</STYLE>
檢查一段字符串是否全由數(shù)字組成
<script. language="Javascript"><!--
function checkNum(str){return str.match(//D/)==null}
alert(checkNum("1232142141"))
alert(checkNum("123214214a1"))
// --></script>
獲得一個(gè)窗口的大小
document.body.clientWidth; document.body.clientHeight
怎么判斷是否是字符
if (/[^/x00-/xff]/g.test(s)) alert("含有漢字");
else alert("全是字符");
TEXTAREA自適應(yīng)文字行數(shù)的多少
<textarea rows=1 name=s1 cols=27npropertychange="this.style.posHeight=this.scrollHeight">
</textarea>
日期減去天數(shù)等于第二個(gè)日期
<script. language=Javascript>
function cc(dd,dadd)
{
//可以加上錯(cuò)誤處理
var a = new Date(dd)
a = a.valueOf()
a = a - dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + "年" + (a.getMonth() +1) + "月" + a.getDate() + "日")
} cc("12/23/2002",2)
</script>
選擇了哪一個(gè)Radio
<HTML><script. language="vbscript">
function checkme()
for each ob in radio1
if ob.checked then window.alert ob.value
next
end function
</script><BODY>
<INPUT name="radio1" type="radio"value="style" checked>Style.
<INPUT name="radio1" type="radio"value="barcode">Barcode
<INPUT type="button" value="check"nclick="checkme()">
</BODY></HTML>
Html和CSS的關(guān)系
學(xué)習(xí)web前端開發(fā)基礎(chǔ)技術(shù)需要掌握：HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術(shù)都是用來實(shí)現(xiàn)什么的：
1. HTML是網(wǎng)頁內(nèi)容的載體。內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
2. CSS樣式是表現(xiàn)。就像網(wǎng)頁的外衣。比如，標(biāo)題字體、顏色變化，或?yàn)闃?biāo)題加入背景圖片、邊框等。所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)。
3. JavaScript是用來實(shí)現(xiàn)網(wǎng)頁上的特效效果。如：鼠標(biāo)滑過彈出下拉菜單。或鼠標(biāo)滑過表格的背景顏色改變。還有焦點(diǎn)新聞（新聞圖片）的輪換。可以這么理解，有動(dòng)畫的，有交互的一般都是用JavaScript來實(shí)現(xiàn)的。
1， HTML標(biāo)簽不區(qū)分大小寫，<h1>和<H1>是一樣的，但建議小寫，因?yàn)榇蟛糠殖绦騿T都以小寫為準(zhǔn)。
一個(gè)HTML文件是有自己固定的結(jié)構(gòu)的。
<html>
<head>...</head>
<body>...</body>
</html>
代碼講解：
1. <html></html>稱為根標(biāo)簽，所有的網(wǎng)頁標(biāo)簽都在<html></html>中。
2. <head> 標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標(biāo)簽，頭部標(biāo)簽在下一小節(jié)中會(huì)有詳細(xì)介紹。
3. 在<body>和</body>標(biāo)簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容，如<h1>、<p>、<a>、<img>等網(wǎng)頁內(nèi)容標(biāo)簽，在這里的標(biāo)簽中的內(nèi)容會(huì)在瀏覽器中顯示出來。
1，下面這些標(biāo)簽可用在 head 部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
2，代碼注釋不僅方便程序員自己回憶起以前代碼的用途，還可以幫助其他程序員很快的讀懂你的程序的功能，方便多人合作開發(fā)網(wǎng)頁代碼。
語法：
<!--注釋文字 -->
3，CSS注釋代碼
就像在Html的注釋一樣，在CSS中也有注釋語句：用/*注釋語句*/來標(biāo)明（Html中使用<!--注釋語句-->)
1，語義化：說的通俗點(diǎn)就是：明白每個(gè)標(biāo)簽的用途（在什么情況下我可以使用這個(gè)標(biāo)簽才合理）比如，網(wǎng)頁上的文章的標(biāo)題就得用標(biāo)題標(biāo)簽，網(wǎng)頁上的各個(gè)欄目的欄目名稱也可以使用標(biāo)題標(biāo)簽。
2，語義化的作用
1）. 更容易被搜索引擎收錄。
2）. 更容易讓屏幕閱讀器讀出網(wǎng)頁內(nèi)容。
二，認(rèn)識(shí)標(biāo)簽（第一部分）
如果想在網(wǎng)頁上顯示文章，這時(shí)就需要<p>標(biāo)簽了，把文章的段落放到<p>標(biāo)簽中。
語法：
<p>段落文本</p>
<hx>標(biāo)簽來制作文章的標(biāo)題。
標(biāo)題標(biāo)簽一共有6個(gè)，h1、h2、h3、h4、h5、h6分別為一級(jí)標(biāo)題、二級(jí)標(biāo)題、三級(jí)標(biāo)題、四級(jí)標(biāo)題、五級(jí)標(biāo)題、六級(jí)標(biāo)題。并且依據(jù)重要性遞減。<h1>是最高的等級(jí)。
語法：
<hx>標(biāo)題文本</hx> (x為1-6)
文章的標(biāo)題前面已經(jīng)說過了，可以使用標(biāo)題標(biāo)簽，另外網(wǎng)頁上的各個(gè)欄目的標(biāo)題也可使用它們
有了段落又有了標(biāo)題，現(xiàn)在如果想在一段話中特別強(qiáng)調(diào)某幾個(gè)文字，這時(shí)候就可以用到<em>或<strong>標(biāo)簽。
但兩者在強(qiáng)調(diào)的語氣上有區(qū)別:<em> 表示強(qiáng)調(diào)，<strong> 表示更強(qiáng)烈的強(qiáng)調(diào)。并且在瀏覽器中<em> 默認(rèn)用斜體表示，<strong> 用粗體表示。兩個(gè)標(biāo)簽相比，目前國內(nèi)前端程序員更喜歡使用<strong>表示強(qiáng)調(diào)
<em>、<strong>、<span>的區(qū)別：
1. <em>和<strong>標(biāo)簽是為了強(qiáng)調(diào)一段話中的關(guān)鍵字時(shí)使用，它們的語義是強(qiáng)調(diào)。
2. <span>標(biāo)簽是沒有語義的，它的作用就是為了設(shè)置單獨(dú)的樣式用的，把一段話圈起來，然后用css設(shè)置樣式。
q標(biāo)簽，短文本引用
比如在你的網(wǎng)頁的文章里想引用某個(gè)作家的一句詩，這樣會(huì)使你的文章更加出彩，那么<q>標(biāo)簽是你所需要的。
語法：
<q>引用文本</q>
1，注意要引用的文本不用加雙引號(hào)，瀏覽器會(huì)對(duì)q標(biāo)簽自動(dòng)添加雙引號(hào)。
2，注意這里用<q>標(biāo)簽的真正關(guān)鍵點(diǎn)不是它的默認(rèn)樣式雙引號(hào)（如果這樣我們不如自己在鍵盤上輸入雙引號(hào)就行了），而是它的語義：引用別人的話
blockquote標(biāo)簽，長文本引用
<blockquote>的作用也是引用別人的文本。但它是對(duì)長文本的引用
<q>標(biāo)簽是對(duì)簡短文本的引用，比如說引用一句話就用到<q>標(biāo)簽。
語法:
<blockquote>引用文本</blockquote>
瀏覽器對(duì)<blockquote>標(biāo)簽的解析是縮進(jìn)樣式
換行標(biāo)簽<br/>
<br/>標(biāo)簽作用相當(dāng)于word文檔中的回車。
分割線標(biāo)簽<hr/>
<hr/>標(biāo)簽和<br/>標(biāo)簽一樣也是一個(gè)空標(biāo)簽，所以只有一個(gè)開始標(biāo)簽，沒有結(jié)束標(biāo)簽。
<hr/>標(biāo)簽的在瀏覽器中的默認(rèn)樣式線條比較粗，顏色為灰色，可能有些人覺得這種樣式不美觀，沒有關(guān)系，這些外在樣式在我們以后學(xué)習(xí)了css樣式表之后，都可以對(duì)其修改。
html特殊字符
空格： (;分號(hào)必不可少)
address標(biāo)簽，為網(wǎng)頁加入地址信息
語法：
<address>地址信息</address>
如：
<address>北京市西城區(qū)德外大街10號(hào)</address>
在瀏覽器上顯示的樣式為斜體，如果不喜歡斜體，當(dāng)然可以，可以在后面的課程中使用css樣式來修改它<address>標(biāo)簽的默認(rèn)樣式
在介紹語言技術(shù)的網(wǎng)站中，必免不了在網(wǎng)頁中顯示一些計(jì)算機(jī)專業(yè)的編程代碼，當(dāng)代碼為一行代碼時(shí)，你就可以使用<code>標(biāo)簽了，如下面例子：
<code>var i=i+300;</code>
語法：
<code>代碼語言</code>
注意：在文章中一般如果要插入多行代碼時(shí)不能使用<code>標(biāo)簽，如果是多行代碼，可以使用<pre>標(biāo)簽。
<pre> 標(biāo)簽的主要作用:預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符。如果用以前的方法，回車需要輸入<br>簽，空格需要輸入 。
注意：<pre> 標(biāo)簽不只是為顯示計(jì)算機(jī)的源代碼時(shí)用的，在你需要在網(wǎng)頁中預(yù)顯示格式時(shí)都可以使用它，只是<pre>標(biāo)簽的一個(gè)常見應(yīng)用就是用來展示計(jì)算機(jī)的源代碼。
三，認(rèn)識(shí)標(biāo)簽（第二部分）
1，無序列表
ul-li是沒有前后順序的信息列表。
語法：
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>
舉例：
<ul>
<li>精彩少年</li>
<li>美麗突然出現(xiàn)</li>
<li>觸動(dòng)心靈的旋律</li>
</ul>
ul-li在網(wǎng)頁中顯示的默認(rèn)樣式一般為：每項(xiàng)li前都自帶一個(gè)圓點(diǎn)
2,有序列表
語法：
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>
舉例：
下面是一個(gè)熱點(diǎn)課程下載排行榜：
<ol>
<li>前端開發(fā)面試心法 </li>
<li>零基礎(chǔ)學(xué)習(xí)html</li>
<li>JavaScript全攻略</li>
</ol>
<ol>在網(wǎng)頁中顯示的默認(rèn)樣式一般為：每項(xiàng)<li>前都自帶一個(gè)序號(hào)，序號(hào)默認(rèn)從1開
<div>容器標(biāo)簽
在網(wǎng)頁制作過程過中，可以把一些獨(dú)立的邏輯部分劃分出來，放在一個(gè)<div>標(biāo)簽中，這個(gè)<div>標(biāo)簽的作用就相當(dāng)于一個(gè)容器。
語法：
<div>…</div>
確定邏輯部分：
什么是邏輯部分？它是頁面上相互關(guān)聯(lián)的一組元素。如網(wǎng)頁中的獨(dú)立的欄目版塊，就是一個(gè)典型的邏輯部分。如下圖所示：圖中用紅色邊框標(biāo)出的部分就是一個(gè)邏輯部分，就可以使用<div>標(biāo)簽作為容器
注釋：<div> 是一個(gè)塊級(jí)元素，也就是說，瀏覽器通常會(huì)在 div 元素前后放置一個(gè)換行符。
創(chuàng)建表格的五個(gè)元素：
table、tbody、tr、th、td
1、<table>…</table>：整個(gè)表格以<table>標(biāo)記開始、</table>標(biāo)記結(jié)束。
2、<tbody>…</tbody>：當(dāng)表格內(nèi)容非常多時(shí)，表格會(huì)下載一點(diǎn)顯示一點(diǎn)，但如果加上<tbody>標(biāo)簽后，這個(gè)表格就要等表格內(nèi)容全部下載完才會(huì)顯示。如右側(cè)代碼編輯器中的代碼。（這個(gè)標(biāo)簽基本上不怎么用了）
3、<tr>…</tr>：表格的一行，所以有幾對(duì)tr 表格就有幾行。
4、<td>…</td>：表格的一個(gè)單元格，一行中包含幾對(duì)<td>...<td/>，說明一行中就有幾列。
5、<th>…</th>：表格的頭部的一個(gè)單元格，表格表頭。
6、表格中列的個(gè)數(shù)，取決于一行中數(shù)據(jù)單元格的個(gè)數(shù)。
表格還是需要添加一些標(biāo)簽進(jìn)行優(yōu)化，可以添加標(biāo)題和摘要
<table summary="本表格記錄2012年到2013年庫存記錄，記錄包括U盤和耳機(jī)庫存量">
<caption>2012年到2013年庫存記錄</caption>
1，使用<a>標(biāo)簽，鏈接到別一個(gè)頁面
使用<a>標(biāo)簽可實(shí)現(xiàn)超鏈接，它在網(wǎng)頁制作中可以說是無處不在，只要有鏈接的地方，就會(huì)有這個(gè)標(biāo)簽。
語法：
<a href=”目標(biāo)網(wǎng)址”>鏈接顯示的文本</a>
例如：
<a >click here!</a>
上面例子作用是單擊click here!文字，網(wǎng)頁鏈接到http://www.imooc.com這個(gè)網(wǎng)頁。
認(rèn)識(shí)<img>標(biāo)簽，為網(wǎng)頁插入圖片
在網(wǎng)頁的制作中為使網(wǎng)頁炫麗美觀，肯定是缺少不了圖片，可以使用<img>標(biāo)簽來插入圖片。
語法：
<img src="圖片地址" alt="下載失敗時(shí)的替換文本" title = "提示文本">
舉例：
<img src = "myimage.gif" alt = "My Image" title = "My Image" />
講解：
1、src：標(biāo)識(shí)圖像的位置；
2、alt：指定圖像的描述性文本，當(dāng)圖像不可見時(shí)（下載不成功時(shí)），可看到該屬性指定的文本；
3、title：提供在圖像可見時(shí)對(duì)圖像的描述(鼠標(biāo)滑過圖片時(shí)顯示的文本)；
4、圖像可以是GIF，PNG，JPEG格式的圖像文件。
四，表單標(biāo)簽（與用戶進(jìn)行交互）
表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過來的數(shù)據(jù)。
語法：
<form method="傳送方式" action="服務(wù)器文件">
講解：
1.<form> ：<form>標(biāo)簽是成對(duì)出現(xiàn)的，以<form>開始，以</form>結(jié)束。
2.action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個(gè)PHP頁面(save.php)。
3.method ： 數(shù)據(jù)傳送的方式（get/post）。
<input>輸入框
文本輸入框、密碼輸入框
當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會(huì)用到文本輸入框。文本框也可以轉(zhuǎn)化為密碼輸入框。
語法：
<form>
<input type="text/password" name="名稱" value="文本" />
</form>
1、type：
當(dāng)type="text"時(shí)，輸入框?yàn)槲谋据斎肟?
當(dāng)type="password"時(shí), 輸入框?yàn)槊艽a輸入框。
2、name：為文本框命名，以備后臺(tái)程序ASP 、PHP使用。
3、value：為文本輸入框設(shè)置默認(rèn)值。(一般起到提示作用)
文本域，支持多行文本輸入
當(dāng)用戶需要在表單中輸入大段文字時(shí)，需要用到文本輸入域。
語法：
<textarea rows="行數(shù)" cols="列數(shù)">文本</textarea>
1、<textarea>標(biāo)簽是成對(duì)出現(xiàn)的，以<textarea>開始，以</textarea>結(jié)束。
2、cols ：多行輸入域的列數(shù)。
3、rows ：多行輸入域的行數(shù)。
單選框，復(fù)選框
語法：
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
1、type:
當(dāng)type="radio"時(shí)，控件為單選框
當(dāng)type="checkbox"時(shí)，控件為復(fù)選框
2、value：提交數(shù)據(jù)到服務(wù)器的值（后臺(tái)程序PHP使用）
3、name：為控件命名，以備后臺(tái)程序ASP、PHP使用
4、checked：當(dāng)設(shè)置checked="checked"時(shí)，該選項(xiàng)被默認(rèn)選中
注意：同一組的單選按鈕，name取值一定要一致，這樣同一組的單選按鈕才可以起到單選的作用。
下拉列表框，節(jié)省空間
下拉列表在網(wǎng)頁中也常會(huì)用到，它可以有效的節(jié)省網(wǎng)頁空間。既可以單選、又可以多選。
語法：<option value="提交值">選項(xiàng)</option>
提交值是向服務(wù)器提交的值，選項(xiàng)是顯示的值。
<form action="save.php" method="post" >
<label>愛好:</label>
<select>
<option value="看書">看書</option>
<option value="旅游" selected="selected">旅游</option>
<option value="運(yùn)動(dòng)">運(yùn)動(dòng)</option>
<option value="購物">購物</option>
</select>
</form>
使用下拉列表框進(jìn)行多選
下拉列表也可以進(jìn)行多選操作，在<select>標(biāo)簽中設(shè)置multiple="multiple"屬性，
就可以實(shí)現(xiàn)多選功能，進(jìn)行多選時(shí)按下Ctrl鍵同時(shí)進(jìn)行單擊，可以選擇多個(gè)選項(xiàng)。
如下代碼：
<form action="save.php" method="post" >
<label>愛好:</label>
<select multiple="multiple">
<option value="看書">看書</option>
<option value="旅游">旅游</option>
<option value="運(yùn)動(dòng)">運(yùn)動(dòng)</option>
<option value="購物">購物</option>
</select>
</form>
在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置。
1，提交按鈕：當(dāng)用戶需要提交表單信息到服務(wù)器時(shí)，需要用到提交按鈕。
語法：
<input type="submit" value="提交">
type：只有當(dāng)type值設(shè)置為submit時(shí)，按鈕才有提交作用
value：按鈕上顯示的文字
2，重置按鈕，重置表單信息
當(dāng)用戶需要重置表單信息到初始時(shí)的狀態(tài)時(shí)，比如用戶輸入“用戶名”后，發(fā)現(xiàn)書寫有誤，可以使用重置按鈕使輸入框恢復(fù)到初始狀態(tài)。只需要把type設(shè)置為"reset"就可以。
語法：
<input type="reset" value="重置">
type：只有當(dāng)type值設(shè)置為reset時(shí)，按鈕才有重置作用
value：按鈕上顯示的文字
五，css樣式
認(rèn)識(shí)css樣式
CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式，如文字大小、顏色、字體加粗等。
如下列代碼：
p{
font-size:12px;
color:red;
font-weight:bold;
}
使用CSS樣式的一個(gè)好處是通過定義某個(gè)樣式，可以讓不同網(wǎng)頁位置的文字有著統(tǒng)一的字體、字號(hào)或者顏色等。
CSS代碼語法
css 樣式由選擇符和聲明組成，而聲明又由屬性和值組成
選擇符{屬性:值}
p{color:red;}
選擇符：又稱選擇器，指明網(wǎng)頁中要應(yīng)用樣式規(guī)則的元素，如本例中是網(wǎng)頁中所有的段（p）的文字將變成藍(lán)色，而其他的元素（如ol）不會(huì)受到影響。
聲明：在英文大括號(hào)“｛｝”中的的就是聲明，屬性和值之間用英文冒號(hào)“：”分隔。當(dāng)有多條聲明時(shí)，中間可以英文分號(hào)“;”分隔，如下所示：
p{font-size:12px;color:red;}
從CSS 樣式代碼插入的形式來看基本可以分為以下3種：
內(nèi)聯(lián)式、嵌入式和外部式三種
1,內(nèi)聯(lián)式css樣式
就是把css代碼直接寫在現(xiàn)有的HTML標(biāo)簽中，如下面代碼：
<p style="color:red">這里文字是紅色。</p>
css樣式代碼要寫在style=""雙引號(hào)中，如果有多條css樣式代碼設(shè)置可以寫在一起，中間用分號(hào)隔開。如下代碼：
<p style="color:red;font-size:12px">這里文字是紅色。</p>
2,嵌入式css樣式，
就是可以把css樣式代碼寫在<style type="text/css"></style>標(biāo)簽之間。如下面代碼實(shí)現(xiàn)把三個(gè)<span>標(biāo)簽中的文字設(shè)置為紅色：
<style type="text/css">
span{
color:red;
}
</style>
嵌入式css樣式必須寫在<style></style>之間，并且一般情況下嵌入式css樣式寫在<head></head>之間。
3,外部式css樣式
寫在單獨(dú)的一個(gè)文件中
外部式css樣式(也可稱為外聯(lián)式)就是把css代碼寫一個(gè)單獨(dú)的外部文件中，這個(gè)css樣式文件以“.css”為擴(kuò)展名，在<head>內(nèi)（不是在<style>標(biāo)簽內(nèi)）使用<link>標(biāo)簽將css樣式文件鏈接到HTML文件內(nèi)，如下面代碼：
<link href="base.css" rel="stylesheet" type="text/css" />
1、css樣式文件名稱以有意義的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定寫法不可修改。
3、<link>標(biāo)簽位置一般寫在<head>標(biāo)簽之內(nèi)。
六，CSS選擇器
每一條css樣式定義由兩部分組成，形式如下：
選擇器{
樣式;
}
在{}之前的部分就是“選擇器”，“選擇器”指明了{(lán)}中的“樣式”的作用對(duì)象，也就是“樣式”作用于網(wǎng)頁中的哪些元素
標(biāo)簽選擇器其實(shí)就是html代碼中的標(biāo)簽。如右側(cè)代碼編輯器中的<html>、<body>、<h1>、<p>、<img>。例如下面代碼：
p{font-size:12px;line-height:1.6em;}
上面的css樣式代碼的作用：為p標(biāo)簽設(shè)置12px字號(hào)，行間距設(shè)置1.6em的樣式。
類選擇器在css樣式編碼中是最常用到的，如右側(cè)代碼編輯器中的代碼:可以實(shí)現(xiàn)為“膽小如鼠”、“勇氣”字體設(shè)置為紅色。
語法：
.類選器名稱{css樣式代碼;}
注意：
1、英文圓點(diǎn)開頭
2、其中類選器名稱可以任意起名（但不要起中文噢）
使用方法：
第一步：使用合適的標(biāo)簽把要修飾的內(nèi)容標(biāo)記起來，如下：
<span>膽小如鼠</span>
第二步：使用class="類選擇器名稱"為標(biāo)簽設(shè)置一個(gè)類，如下：
<span class="stress">膽小如鼠</span>
第三步：設(shè)置類選器css樣式，如下：
.stress{color:red;}/*類前面要加入一個(gè)英文圓點(diǎn)*/
在很多方面，ID選擇器都類似于類選擇符，但也有一些重要的區(qū)別：
1、為標(biāo)簽設(shè)置id="ID名稱"，而不是class="類名稱"。
2、ID選擇符的前面是井號(hào)（#）號(hào)，而不是英文圓點(diǎn)（.）。
相同點(diǎn)：可以應(yīng)用于任何元素
不同點(diǎn)：
1、ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個(gè)HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。
下面代碼是正確的：
<p>三年級(jí)時(shí)，我還是一個(gè)<span class="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯(cuò)了老師會(huì)批評(píng)我。就一直沒有這個(gè)<span class="stress">勇氣</span>來回答老師提出的問題。</p>
而下面代碼是錯(cuò)誤的：
<p>三年級(jí)時(shí)，我還是一個(gè)<span id="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯(cuò)了老師會(huì)批評(píng)我。就一直沒有這個(gè)<span id="stress">勇氣</span>來回答老師提出的問題。</p>
2、可以使用類選擇器詞列表方法為一個(gè)元素同時(shí)設(shè)置多個(gè)樣式。我們可以為一個(gè)元素同時(shí)設(shè)多個(gè)樣式，但只可以用類選擇器的方法實(shí)現(xiàn)，ID選擇器是不可以的（不能使用 ID 詞列表）。
下面的代碼是正確的(完整代碼見右側(cè)代碼編輯器)
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span class="stress bigsize">三年級(jí)</span>下學(xué)期時(shí)，我們班上了一節(jié)公開課...</p>
上面代碼的作用是為“三年級(jí)”三個(gè)文字設(shè)置文本顏色為紅色并且字號(hào)為25px
下面的代碼是不正確的(完整代碼見右側(cè)代碼編輯器)
#stressid{
color:red;
}
#bigsizeid{
font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年級(jí)</span>下學(xué)期時(shí)，我們班上了一節(jié)公開課...</p>
上面代碼不可以實(shí)現(xiàn)為“三年級(jí)”三個(gè)文字設(shè)置文本顏色為紅色并且字號(hào)為25px的作用。
還有一個(gè)比較有用的選擇器子選擇器，即大于符號(hào)(>),用于選擇指定標(biāo)簽元素的子元素。如下面的代碼：
.food>li{border:1px solid red;}
這行代碼會(huì)使class名為food下的子元素li加入紅色實(shí)線邊框。
包含選擇器，即加入空格,用于選擇指定標(biāo)簽元素下的后輩元素。如右側(cè)代碼編輯器中的代碼：
.first span{color:red;}
請(qǐng)注意這個(gè)選擇器與子選擇器的區(qū)別
1，子選擇器（child selector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一代后代
2，后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進(jìn)行選擇，而子選擇器是通過“>”進(jìn)行選擇。
總結(jié)：>作用于元素的第一代后代，空格作用于元素的所有后代。
通用選擇器是功能最強(qiáng)大的選擇器，它使用一個(gè)（*）號(hào)指定，它的作用是匹配html中任意標(biāo)簽元素，如下使用下面代碼使用html中任意標(biāo)簽元素字體顏色全部設(shè)置為紅色：
* {color:red;}
更有趣的是偽類選擇符，為什么叫做偽類選擇符，它允許給html不存在的標(biāo)簽設(shè)置樣式，比如說我們給html中一個(gè)標(biāo)簽元素的鼠標(biāo)滑過的狀態(tài)來設(shè)置字體顏色：
a:hover{color:red;}
這行代碼會(huì)使被<a></a>標(biāo)簽包裹的文字內(nèi)容中的“膽小如鼠”字體顏色在鼠標(biāo)滑過時(shí)變?yōu)榧t色。
當(dāng)你想為html中多個(gè)標(biāo)簽元素設(shè)置同一個(gè)樣式時(shí)，可以使用分組選擇符（，），如下代碼為右側(cè)代碼編輯器中的h1、span標(biāo)簽同時(shí)設(shè)置字體顏色為紅色：
h1,span{color:red;}
它相當(dāng)于下面兩行代碼：
h1{color:red;}
span{color:red;}
七，CSS的繼承、層疊和特殊性。
CSS的某些樣式是具有繼承性的，那么什么是繼承呢？繼承是一種規(guī)則，它允許樣式不僅應(yīng)用于某個(gè)特定html標(biāo)簽元素，而且應(yīng)用于其后代。比如下面代碼：如某種顏色應(yīng)用于p標(biāo)簽，這個(gè)顏色設(shè)置不僅應(yīng)用p標(biāo)簽，還應(yīng)用于p標(biāo)簽中的所有子元素文本，這里子元素為span標(biāo)簽。
但注意有一些css樣式是不具有繼承性的。如border:1px solid red;
根據(jù)權(quán)值來判斷使用哪個(gè)css樣式
瀏覽器是根據(jù)權(quán)值來判斷使用哪種css樣式的，權(quán)值高的就使用哪種css樣式。
下面是權(quán)值的規(guī)則：
標(biāo)簽的權(quán)值為1，類選擇符的權(quán)值為10，ID選擇符的權(quán)值最高為100。例如下面的代碼：
p{color:red;} /*權(quán)值為1*/
p span{color:green;} /*權(quán)值為1+1=2*/
.warning{color:white;} /*權(quán)值為10*/
p span.warning{color:purple;} /*權(quán)值為1+1+10=12*/
#footer .note p{color:yellow;} /*權(quán)值為100+10+1=111*/
注意：還有一個(gè)權(quán)值比較特殊--繼承也有權(quán)值但很低，有的文獻(xiàn)提出它只有0.1，所以可以理解為繼承的權(quán)值最低
我們來思考一個(gè)問題：如果在html文件中對(duì)于同一個(gè)元素可以有多個(gè)css樣式存在并且這多個(gè)css樣式具有相同權(quán)重值怎么辦？好，這一小節(jié)中的層疊幫你解決這個(gè)問題。
層疊就是在html文件中對(duì)于同一個(gè)元素可以有多個(gè)css樣式存在，當(dāng)有相同權(quán)重的樣式存在時(shí)，會(huì)根據(jù)這些css樣式的前后順序來決定，處于最后面的css樣式會(huì)被應(yīng)用。
如下面代碼:
p{color:red;}
p{color:green;}
<p class="first">三年級(jí)時(shí)，我還是一個(gè)<span>膽小如鼠</span>的小女孩。</p>
最后 p 中的文本會(huì)設(shè)置為green，這個(gè)層疊很好理解，理解為后面的樣式會(huì)覆蓋前面的樣式。
所以前面的css樣式優(yōu)先級(jí)就不難理解了：
內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部）> 嵌入樣式表（當(dāng)前文件中）> 外部樣式表（外部文件中）。
重要性
我們?cè)谧鼍W(wǎng)頁代碼的時(shí)，有些特殊的情況需要為某些樣式設(shè)置具有最高權(quán)值，怎么辦？這時(shí)候我們可以使用!important來解決。
如下代碼：
p{color:red!important;}
p{color:green;}
<p class="first">三年級(jí)時(shí)，我還是一個(gè)<span>膽小如鼠</span>的小女孩。</p>
這時(shí) p 段落中的文本會(huì)顯示的red紅色。
注意：!important要寫在分號(hào)的前面
八，CSS格式化排版
文字排版
1，文字排版--字體
我們可以使用css樣式為網(wǎng)頁中的文字設(shè)置字體、字號(hào)、顏色等樣式屬性。下面我們來看一個(gè)例子，下面代碼實(shí)現(xiàn)：為網(wǎng)頁中的文字設(shè)置字體為宋體。
body{font-family:"宋體";}
這里注意不要設(shè)置不常用的字體，因?yàn)槿绻脩舯镜仉娔X上如果沒有安裝你設(shè)置的字體，就會(huì)顯示瀏覽器默認(rèn)的字體。（因?yàn)橛脩羰欠窨梢钥吹侥阍O(shè)置的字體樣式取決于用戶本地電腦上是否安裝你設(shè)置的字體。）
2，文字排版--字號(hào)、顏色
可以使用下面代碼設(shè)置網(wǎng)頁中文字的字號(hào)為12像素，并把字體顏色設(shè)置為#666(灰色)：
body{font-size:12px;color:#666}
3，文字排版--粗體
我們還可以使用css樣式來改變文字的樣式：粗體、斜體、下劃線、刪除線，可以使用下面代碼實(shí)現(xiàn)設(shè)置文字以粗體樣式顯示出來。
p span{font-weight:bold;}
4，文字排版--斜體
以下代碼可以實(shí)現(xiàn)文字以斜體樣式在瀏覽器中顯示：
p a{font-style:italic;}
<p>三年級(jí)時(shí)，我還是一個(gè)<a>膽小如鼠</a>的小女孩。</p>
5，文字排版--下劃線
有些情況下想為文字設(shè)置為下劃線樣式，這樣可以在視覺上強(qiáng)調(diào)文字，可以使用下面代碼來實(shí)現(xiàn)：
p a{text-decoration:underline;}
<p>三年級(jí)時(shí)，我還是一個(gè)<a>膽小如鼠</a>的小女孩。</p>
刪除線，在電商網(wǎng)站上經(jīng)常見。
p a{text-decoration:line-through;}
段落排版
1，段落排版--縮進(jìn)
中文文字中的段前習(xí)慣空兩個(gè)文字的空白，這個(gè)特殊的樣式可以用下面代碼來實(shí)現(xiàn)：
p{text-indent:2em;}
注意：2em的意思就是文字的2倍大小。
2，段落排版--行間距
這一小節(jié)我們來學(xué)習(xí)一下另一個(gè)在段落排版中起重要作用的行間距屬性（line-height），如下代碼實(shí)現(xiàn)設(shè)置段落行間距為1.5倍。
p{line-height:1.5em;}
3，段落排版--字間距、字母間距
文字間隔、字母間隔設(shè)置：
如果想在網(wǎng)頁排版中設(shè)置文字間隔或者字母間隔就可以使用 letter-spacing來實(shí)現(xiàn)，如下面代碼：
h1{
letter-spacing:50px;
}
...
<h1>了不起的蓋茨比</h1>
注意：這個(gè)樣式使用在英文單詞時(shí)，是設(shè)置字母與字母之間的間距。
單詞間距設(shè)置：
如果我想設(shè)置英文單詞之間的間距呢？可以使用word-spacing來實(shí)現(xiàn)。如下代碼：
h1{
word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>
九，CSS盒模型
元素分類
在講解CSS布局之前，我們需要提前知道一些知識(shí)，在CSS中，html中的標(biāo)簽元素大體被分為三種不同的類型：塊狀元素、內(nèi)聯(lián)元素和內(nèi)聯(lián)塊狀元素。
常用的塊狀元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的內(nèi)聯(lián)元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的內(nèi)聯(lián)塊狀元素有：
<img>、<input>
元素分類--塊級(jí)元素
什么是塊級(jí)元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是塊級(jí)元素。設(shè)置display:block就是將元素顯示為塊級(jí)元素。如下代碼就是將行內(nèi)元素a轉(zhuǎn)換為塊狀元素，從頁使用a元素具有塊狀元素特點(diǎn)。
a{display:block;}
塊級(jí)元素特點(diǎn)：
1、每個(gè)塊級(jí)元素都從新的一行開始，并且其后的元素也另起一行。（真霸道，一個(gè)塊級(jí)元素獨(dú)占一行）
2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
3、元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設(shè)定一個(gè)寬度。
元素分類--行內(nèi)元素
在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的行內(nèi)元素（inline）元素。當(dāng)然塊狀元素也可以通過代碼display:inline將元素設(shè)置為行內(nèi)元素。
行內(nèi)元素特點(diǎn)：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高及頂部和底部邊距不可設(shè)置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
元素分類--內(nèi)聯(lián)塊狀元素
內(nèi)聯(lián)塊狀元素（inline-block）就是同時(shí)具備內(nèi)聯(lián)元素、塊狀元素的特點(diǎn)，代碼display:inline-block就是將元素設(shè)置為內(nèi)聯(lián)塊狀元素。(css2.1新增)，<img>、<input>標(biāo)簽就是這種內(nèi)聯(lián)塊狀標(biāo)簽。
inline-block元素特點(diǎn)：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
盒模型--邊框（一）
盒子模型的邊框就是圍繞著內(nèi)容及補(bǔ)白的線，這條線你可以設(shè)置它的粗細(xì)、樣式和顏色(邊框三個(gè)屬性)。
如下面代碼為div來設(shè)置邊框粗細(xì)為2px、樣式為實(shí)心的、顏色為紅色的邊框：
div{
border:2px solid red;
}
上面是border代碼的縮寫形式，可以分開寫：
div{
border-width:2px;
border-style:solid;
border-color:red;
}
1、border-style（邊框樣式）常見樣式有：
dashed（虛線）| dotted（點(diǎn)線）| solid（實(shí)線）。
2、border-color（邊框顏色）中的顏色可設(shè)置為十六進(jìn)制顏色，如:
border-color:#888;//前面的井號(hào)不要忘掉。
盒模型--邊框（二）
現(xiàn)在有一個(gè)問題，如果有想為p標(biāo)簽單獨(dú)設(shè)置下邊框，而其它三邊都不設(shè)置邊框樣式怎么辦呢？css樣式中允許只為一個(gè)方向的邊框設(shè)置樣式：
div{border-bottom:1px solid red;}
同樣可以使用下面代碼實(shí)現(xiàn)其它三邊上、右、左邊框的設(shè)置：
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
盒模型--邊界
元素與其它元素之間的距離可以使用邊界（margin）來設(shè)置。邊界也是可分為上、右、下、左。如下代碼：
div{margin:20px 10px 15px 30px;}
也可以分開寫：
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
如果上下左右的邊界都為10px;可以這么寫：
div{ margin:10px;}
如果上下邊界一樣為10px，左右一樣為20px，可以這么寫：
div{ margin:10px 20px;}
總結(jié)一下：padding和margin的區(qū)別，padding在邊框里，margin在邊框外。
盒模型--填充
元素內(nèi)容與邊框之間是可以設(shè)置距離的，稱之為填充。填充也可分為上、右、下、左。如下代碼：
div{padding:20px 10px15px 30px;}
順序一定不要搞混。可以分開寫上面代碼：
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
如果上、右、下、左的填充都為10px;可以這么寫
div{padding:10px;}
如果上下填充一樣為10px，左右一樣為20px，可以這么寫：
div{padding:10px 20px;}
盒模型代碼簡寫
還記得在講盒模型時(shí)外邊距(margin)、內(nèi)邊距(padding)和邊框(border)設(shè)置上下左右四個(gè)方向的邊距是按照順時(shí)針方向設(shè)置的：上右下左。具體應(yīng)用在margin和padding的例子如下：
margin:10px 15px 12px 14px;/*上設(shè)置為10px、右設(shè)置為15px、下設(shè)置為12px、左設(shè)置為14px*/
通常有下面三種縮寫方法:
1、如果top、right、bottom、left的值相同，如下面代碼：
margin:10px 10px 10px 10px;
可縮寫為：
margin:10px;
2、如果top和bottom值相同、left和 right的值相同，如下面代碼：
margin:10px 20px 10px 20px;
可縮寫為：
margin:10px 20px;
3、如果left和right的值相同，如下面代碼：
margin:10px 20px 30px 20px;
可縮寫為：
margin:10px 20px 30px;
注意：padding、border的縮寫方法和margin是一致的。
顏色值縮寫
關(guān)于顏色的css樣式也是可以縮寫的，當(dāng)你設(shè)置的顏色是16進(jìn)制的色彩值時(shí)，如果每兩位的值相同，可以縮寫一半。
例子1：
p{color:#000000;}
可以縮寫為：
p{color: #000;}
例子2：
p{color: #336699;}
可以縮寫為：
p{color: #369;}
十，CSS布局模型
css布局模型
清楚了CSS 盒模型的基本概念、 盒模型類型， 我們就可以深入探討網(wǎng)頁布局的基本模型了。布局模型與盒模型一樣都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基礎(chǔ)之上，又不同于我們常說的 CSS 布局樣式或 CSS 布局模板。如果說布局模型是本，那么 CSS 布局模板就是末了，是外在的表現(xiàn)形式。
CSS包含3種基本的布局模型，用英文概括為：Flow、Layer 和 Float。
在網(wǎng)頁中，元素有三種布局模型：
1、流動(dòng)模型（Flow）
2、浮動(dòng)模型 (Float)
3、層模型（Layer）
流動(dòng)模型（一）
流動(dòng)（Flow）：自上而下。
先來說一說流動(dòng)模型，流動(dòng)（Flow）是默認(rèn)的網(wǎng)頁布局模式。也就是說網(wǎng)頁在默認(rèn)狀態(tài)下的 HTML 網(wǎng)頁元素都是根據(jù)流動(dòng)模型來分布網(wǎng)頁內(nèi)容的。
流動(dòng)布局模型具有2個(gè)比較典型的特征：
第一點(diǎn)，塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因?yàn)樵谀J(rèn)狀態(tài)下，塊狀元素的寬度都為100%。實(shí)際上，塊狀元素都會(huì)以行的形式占據(jù)位置。如右側(cè)代碼編輯器中三個(gè)塊狀元素標(biāo)簽(div，h1，p)寬度顯示為100%。
第二點(diǎn)，在流動(dòng)模型下，內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示。（內(nèi)聯(lián)元素可不像塊狀元素這么霸道獨(dú)占一行）
右側(cè)代碼編輯器中內(nèi)聯(lián)元素標(biāo)簽a、span、em、strong都是內(nèi)聯(lián)元素。
塊狀元素這么霸道都是獨(dú)占一行，如果現(xiàn)在我們想讓兩個(gè)塊狀元素并排顯示，怎么辦呢？不要著急，設(shè)置元素浮動(dòng)就可以實(shí)現(xiàn)這一愿望。任何元素在默認(rèn)情況下是不能浮動(dòng)的，但可以用CSS定義為浮動(dòng)，如div、p、table、img等元素都可以被定義為浮動(dòng)。如下代碼可以實(shí)現(xiàn)兩個(gè)div元素一行顯示。
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>
注意：設(shè)置浮動(dòng)的同時(shí)一定要先設(shè)置塊狀元素的寬度，且需要浮動(dòng)的幾個(gè)元素寬度加起來一定要小于容器元素的寬度。
什么是層布局模型？層布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣，每個(gè)圖層能夠精確定位操作，但在網(wǎng)頁設(shè)計(jì)領(lǐng)域，由于網(wǎng)頁大小的活動(dòng)性，層布局沒能受到熱捧。但是在網(wǎng)頁上局部使用層布局還是有其方便之處的。下面我們來學(xué)習(xí)一下html中的層布局。
如何讓html元素在網(wǎng)頁中精確定位，就像圖像軟件PhotoShop中的圖層一樣可以對(duì)每個(gè)圖層能夠精確定位操作。CSS定義了一組定位（positioning）屬性來支持層布局模型。
層模型有三種形式：
1、絕對(duì)定位(position: absolute)
2、相對(duì)定位(position: relative)
3、固定定位(position: fixed)
1，層模型--絕對(duì)定位（相對(duì)于父類）
如果想為元素設(shè)置層模型中的絕對(duì)定位，需要設(shè)置position:absolute(表示絕對(duì)定位)，這條語句的作用將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位。如果不存在這樣的包含塊，則相對(duì)于body元素，即相對(duì)于瀏覽器窗口。
如下面代碼可以實(shí)現(xiàn)div元素相對(duì)于瀏覽器窗口向右移動(dòng)100px，向下移動(dòng)50px。
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>
2，層模型--相對(duì)定位（相對(duì)于以前）
如果想為元素設(shè)置層模型中的相對(duì)定位，需要設(shè)置position:relative（表示相對(duì)定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對(duì)定位完成的過程是首先按static(float)方式生成一個(gè)元素(并且元素像層一樣浮動(dòng)了起來)，然后相對(duì)于以前的位置移動(dòng)，移動(dòng)的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動(dòng)。
如下代碼實(shí)現(xiàn)相對(duì)于以前位置向下移動(dòng)50px，向右移動(dòng)100px;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div>
3，層模型--固定定位（相對(duì)于網(wǎng)頁窗口）
固定住某一坐標(biāo)。
fixed：表示固定定位，與absolute定位類型類似，但它的相對(duì)移動(dòng)的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身。由于視圖本身是固定的，它不會(huì)隨瀏覽器窗口的滾動(dòng)條滾動(dòng)而變化，除非你在屏幕中移動(dòng)瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會(huì)始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置，不會(huì)受文檔流動(dòng)影響，這與background-attachment:fixed?屬性功能相同。以下代碼可以實(shí)現(xiàn)相對(duì)于瀏覽器視圖向右移動(dòng)100px，向下移動(dòng)50px。并且拖動(dòng)滾動(dòng)條時(shí)位置固定不變。
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
小伙伴們學(xué)習(xí)了12-6小節(jié)的相對(duì)定位的方法：使用position:absolute可以實(shí)現(xiàn)被設(shè)置元素相對(duì)于瀏覽器（body）設(shè)置定位以后，大家有沒有想過可不可以相對(duì)于其它元素進(jìn)行定位呢？答案是肯定的，當(dāng)然可以。使用position:relative來幫忙，但是必須遵守下面規(guī)范：
1、參照定位的元素必須是相對(duì)定位元素的前輩元素：
<div id="box1"><!--參照定位的元素-->
<div id="box2">相對(duì)參照元素進(jìn)行定位</div><!--相對(duì)定位元素-->
</div>
從上面代碼可以看出box1是box2的父元素（父元素當(dāng)然也是前輩元素了）。
2、參照定位的元素必須加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進(jìn)行偏移定位了。
#box2{
position:absolute;
top:20px;
left:30px;
}
這樣box2就可以相對(duì)于父元素box1定位了（這里注意參照物就可以不是瀏覽器了，而可以自由設(shè)置了）。
編程小石頭，為分享干貨而生！據(jù)說，每個(gè)年輕上進(jìn)，顏值又高的互聯(lián)網(wǎng)人都關(guān)注了編程小石頭。
之前在介紹css盒子模型的時(shí)候，大概講過邊框border，邊框border是其中一個(gè)重要組成部分。本篇將具體介紹邊框的屬性， border 屬性允許您指定元素邊框的樣式、寬度、顏色及圓角。
border-style 邊框樣式有以下值：
border-style 屬性可以設(shè)置一到四個(gè)值（用于上邊框、右邊框、下邊框和左邊框）。其中3D樣式效果取決與邊框顏色 border-color 值。
如下實(shí)例：
border-width 屬性指定四個(gè)邊框的寬度。可以將寬度設(shè)置為特定大小（以 px、pt、cm、em 等），或者使用以下三個(gè)預(yù)定義值之一：thin、medium 或 thick。
如下示例：
給不同邊框設(shè)置寬度：
border-color 屬性用于設(shè)置四個(gè)邊框的顏色，通過以下方式設(shè)置顏色：
注意：如果未邊框?qū)挾葹?時(shí)，即使設(shè)置了邊框顏色也不會(huì)顯示。
如下示例：
也可分別給每個(gè)邊框設(shè)置不同顏色：
還可以按照上、右、下、左的順序分別設(shè)置邊框樣式、寬度或顏色。如下示例：
以上寫法等同于以下簡寫法，不同之處就是上面的寫法對(duì)元素邊框樣式更精細(xì)控制：
p {
height:100px;
/*邊框樣式*/
border-style: dotted solid dotted solid;
/*邊框?qū)挾?/
border-width: 2px 5px 10px 20px;
/*邊框顏色*/
border-color: red rgb(0,255,0) #ff00ff orange;
}只使用一個(gè)border: style、width、color；設(shè)置邊框樣式。
如下示例：
這種寫法，缺點(diǎn)就是四個(gè)邊使用相同的樣式、寬度、顏色，所以當(dāng)要制作特殊的效果時(shí)候，就需要使用以上非簡寫方法。
border-radius 允許你設(shè)置元素的四個(gè)角的圓角大小。語法如下：
border-radius: 左上 右上 右下 左下；這4個(gè)值定義了一個(gè)半徑長度，分別表示水平和垂直方向的半徑
你可以設(shè)置一個(gè)值，也可以設(shè)置二個(gè)或三個(gè)。和之前學(xué)習(xí)padding、margin類似，沒有設(shè)置的那個(gè)值會(huì)以它的對(duì)角的值為準(zhǔn)。比如以下示例：
以上都是圓形的角，水平和垂直方向半徑相同，如果水平和垂直方向半徑不一樣，不就是橢圓了嗎？
創(chuàng)建橢圓角，語法如下：
border-radius: 水平方向（左上 右上 右下 左下）/ 垂直方向（左上 右上 右下 左下）；可以用斜杠設(shè)置第二組值。這時(shí)，第一組值表示水平半徑，第二組值表示垂直半徑。第二組值也可以同時(shí)設(shè)置1到4個(gè)值，應(yīng)用規(guī)則與第一組值相同。
如下示例：
現(xiàn)在你會(huì)看到，如上圖出現(xiàn)不規(guī)則邊框，是不是很有意思，現(xiàn)在動(dòng)手試試吧，探索其中的樂趣。
利用border 制作小三角，非常實(shí)用，當(dāng)把寬度和高度設(shè)置為0，看到如下代碼：
border-width: 40px;
border-color: #F00 #0F0 #00F #0FF;
border-style: solid;
width: 0px;
height: 0px;此時(shí)我們只需要將左邊、下邊、右邊的 border 顏色設(shè)置為透明就是我們要的三角形了,如下代碼實(shí)現(xiàn)倒三角圖形：
border-color: #F00 transparent transparent transparent;效果：
如果要其它方向的三角，同理設(shè)置不同方向的顏色為透明就可以了。
一般使用此方法用來制作氣泡效果，非常實(shí)用，你不妨試試。
1、邊框 border 樣式、寬度、顏色。
2、邊框簡寫方法及按方向分別設(shè)置。
3、邊框圓角分以圓形半徑和橢圓半徑的角。
4、邊框應(yīng)用實(shí)例，制作三角形。
邊框在網(wǎng)頁中的應(yīng)用非常廣泛，比如按鈕樣式，氣泡效果，三角形等等。
感謝關(guān)注，祝學(xué)習(xí)愉快。
上篇：前端入門——css顏色和背景
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
