html的語法圈暗，有三個基本結(jié)構(gòu)：
<html>
<head>
<!--定義了頭部信息-->
</head>
<body>
<!--內(nèi)容主體-->
這是我們的第一個網(wǎng)頁
</body>
</html>
head標簽包含的內(nèi)容
-
title標簽
title標簽是設(shè)置網(wǎng)頁的標題的，其設(shè)置方式為：
<title>這是網(wǎng)頁的標題</title>
<html>
<head>
<title>這是網(wǎng)頁的標題</title>
</head>
<body>
這是我們的第一個網(wǎng)頁
</body>
</html>
- meta標簽
前面我們遇到了html在瀏覽器中顯示亂碼帆喇，要解決亂碼問題，可以通過meta標簽來實現(xiàn)。其代碼為：<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 如果我們使用utf-8亂碼臂外，那么我們就用gb2312
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>這是網(wǎng)頁的標題</title>
</head>
<body>
這是我們的第一個網(wǎng)頁
</body>
</html>
body部分
- body標簽，是對正文內(nèi)容進行處理的喇颁，正文的樣式主要是設(shè)置其顏色
<html>
<head>
<title>設(shè)置網(wǎng)頁的顏色</title>
</head>
<body bgcolor="red">
內(nèi)容暫時不管
</body>
</html>
以上設(shè)置了背景顏色為紅色bgcolor="red"漏健，如果我們要設(shè)置其他顏色，同理也可以進行設(shè)置橘霎。當然蔫浆，如果我們要設(shè)置青色，要設(shè)置24度灰姐叁，又該怎么辦瓦盛？
其實現(xiàn)方式可以使用RGB顏色編碼來實現(xiàn)各種顏色, <body bgcolor="#228800"> 這是16進制顏色編碼
我們也可以使用圖片做背景，那么首先得有一張圖片七蜘。然后這張的位置是對應(yīng)了網(wǎng)頁的位置谭溉。其實現(xiàn)代碼為：<body backgroud="圖片的路徑">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>這是網(wǎng)頁的標題</title>
</head>
<body background="./linux.jpg">
這是實現(xiàn)用圖片做網(wǎng)頁的背景
</body>
</html>
對正文文字進行處理
- Hn標簽，它是對文字大小進行設(shè)置的橡卤，我們有<H1>到<H6>總6個設(shè)置文字大小的標簽
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>設(shè)置文字大小</title>
</head>
<body>
<h1>春曉</h1>
<h2>春眠不覺曉</h2>
<h3>處處聞啼鳥</h3>
<h4>夜來風雨聲</h4>
<h5>花落知多少</h5>
<h6>作者：千里</h6>
<h7>2018-7-9</h7>
</body>
</html>
- font標簽扮念，對字體進行設(shè)置，包括改變顏色碧库，它有顏色屬性
<font color="red">柜与，但其不僅僅只有顏色屬性，也可以設(shè)置大小size="5"嵌灰。甚至還有設(shè)置字體face屬性弄匕，例如：face="黑體"
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>設(shè)置文字的font標簽</title>
</head>
<body>
<font color="red" face="黑體">春曉</font>
<font color="blue" face="隸書" size="8">春眠不覺曉</font>
處處蚊子咬
</body>
</html>
注：size屬性是可以使用size="8"，8個像素單位沽瞭。也可以使用size="+8"表示在基準上增加8個像素迁匠。也可以使用size="-8"在基準上減小8個像素。
- 實現(xiàn)換行的br標簽，可以實現(xiàn)換行操作城丧。br標簽比較特殊延曙，有三種實現(xiàn)方式：
<br>或<br />或<br>內(nèi)容</br這三種方式都可以，當然我們一般建議是在兩行之間使用<br />標簽
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>設(shè)置文字的font和br標簽</title>
</head>
<body>
<font color="red" face="黑體">春曉</font> <br /> <!--在兩行之間使用換行標簽-->
<font color="blue" face="隸書" size="8">春眠不覺曉</font>
處處蚊子咬
</body>
</html>
- hr標簽亡哄，HR標簽是劃一道杠枝缔。這道杠可以弄成很胖的，其屬性為：
size="值"蚊惯，還有一個寬度width屬性愿卸，還有一個對齊方式，align="值"截型，其值有：left(左)趴荸，right(右)，middle(中)-->center菠劝，也有顏色屬性：color
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>設(shè)置hr標簽</title>
</head>
<body>
<font color="red" face="黑體">春曉</font> <br />
<hr size="50">
<font color="blue" face="隸書" size="8">春眠不覺曉</font>
<hr width="300" align="center">
處處蚊子咬
</body>
</html>
- p標簽赊舶，該標簽是段落標簽。我們可以針對一塊內(nèi)容進行屬性設(shè)置赶诊。在段落中笼平，我們可以進行對齊的處理，其屬性為：align
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>設(shè)置段落標簽</title>
</head>
<body>
<p>
標題：html從入門到放棄
</p>
<p align="middle">
內(nèi)容：html是一門優(yōu)秀的語言舔痪，通過學習html語言可以讓人精神氣爽寓调，氣若吐蘭。學習三天后锄码，可以讓腰不酸夺英，腿不疼，頭不抽筋了滋捶。整個人就像步入了仙境一般痛悯。
</p>
</body>
</html>
- 特殊字符，我們知道段落一般有一個特征是需要空兩格重窟。在HTML中是無法識別普通空格的载萌，需要進行特殊處理。使用
來表示一個空格巡扇。 - 另外還有一個叫做
©表示版權(quán)信息扭仁。還有如：>表示大于號，<表示小于號厅翔。
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>設(shè)置特殊符號標簽</title>
</head>
<body>
<p align="center">
標題：html從入門到放棄
</p>
<p align="left"><!--設(shè)置左對齊-->
內(nèi)容：html是一門優(yōu)秀的語言乖坠，通過學習html語言可以讓人精神氣爽，氣若吐蘭刀闷。學習三天后熊泵，可以讓腰不酸仰迁，腿不疼，頭不抽筋了顽分。整個人就像步入了仙境一般轩勘。
</p>
<hr><!--最底部一道杠之后，添加右對齊的版權(quán)信息-->
<p align="right">
© 求索教育 2016-2026
</p>
</body>
</html>
-
B標簽怯邪，加粗操作。
一般標題需要進行加粗操作花墩，這時候我們可以使用B標簽來實現(xiàn)悬秉。而且我們也可以實現(xiàn)標簽的疊加操作，來實現(xiàn)功能的疊加
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>加粗和標簽疊加操作</title>
</head>
<body>
<p align="center">
<b>標題：html從入門到放棄</b> <!--在p標簽里面使用了b標簽-->
</p>
<p align="left"><!--設(shè)置左對齊-->
內(nèi)容：html是一門優(yōu)秀的語言冰蘑，通過學習html語言可以讓人精神氣爽和泌，氣若吐蘭。學習三天后祠肥，可以讓腰不酸武氓，腿不疼，頭不抽筋了仇箱。整個人就像步入了仙境一般县恕。
</p>
<hr><!--最底部一道杠之后，添加右對齊的版權(quán)信息-->
<p align="right">
© 求索教育 2016-2026
</p>
</body>
</html>
- img圖片標簽
我們可以在網(wǎng)頁上顯示圖片信息剂桥，在這里圖片是給出對應(yīng)的鏈接的忠烛。對應(yīng)的就有源地址src屬性，為：<img src="路徑" >权逗。在圖片處理中美尸，我們還可以有一些其他屬性
- 大小設(shè)置，即高度（height="值"）與寬度（width="值"）斟薇，而且可以百分比方式設(shè)置师坎。
- 還可以鼠標移動到圖片上，會顯示圖片的文字堪滨，就是加入
alt="內(nèi)容" - 還可以有對齊方式的屬性胯陋，align
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>圖片操作</title>
</head>
<body>
這是圖片之前的內(nèi)容
<img src="./img/002.gif"> <!--圖片是一個整體，不能夠加文字所以可以沒有結(jié)束標簽-->
<img src="./linux.jpg" height="50%" width="50%" alt="linux進階指南" align="right">
這是圖片之后的內(nèi)容
</body>
</html>
- 內(nèi)容編號
我們可以對網(wǎng)頁內(nèi)容椿猎，使用有序序號和無序序號兩種惶岭。
-
有序序號標簽：ol ，有序序號的處理方式犯眠。使用ol對內(nèi)容進行有序標注的同時還需要使用<li>標簽進行配合
有序編號可以修改其序號表示形式按灶，用type屬性，用其對應(yīng)的序號第1個筐咧。例如： 1 a A i I
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>內(nèi)容編號</title>
</head>
<body>
<ol type="a">
<li>標題要突出</li>
<li>要有自己的觀點</li>
<li>正文要有創(chuàng)意</li>
<li>故事要新穎</li>
<li>結(jié)尾要有寓意</li>
</ol>
</body>
</html>
-
無序序號<ul>鸯旁，有些要求顯示為無序序號噪矛，這時候可以使用ul標簽來實現(xiàn)
它也有幾種表現(xiàn)形式，type值有：disc（實心圓）铺罢、square（方塊）艇挨、circle（空圈）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>內(nèi)容編號</title>
</head>
<body>
<ul type="square">
<li>標題要突出</li>
<li>要有自己的觀點</li>
<li>正文要有創(chuàng)意</li>
<li>故事要新穎</li>
<li>結(jié)尾要有寓意</li>
</ol>
</body>
</html>
- pre標簽，即預(yù)文本設(shè)置韭赘。將圖片和文字合在一起進行展示
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>內(nèi)容編號</title>
</head>
<body>
<pre>
<img src="./img/002.gif" align="left">
標題要突出
要有自己的觀點
正文要有創(chuàng)意
故事要新穎
結(jié)尾要有寓意
</pre>
</body>
</html>
- marquee實現(xiàn)跑馬燈效果
- 不僅文字可以實現(xiàn)跑馬燈效果缩滨，圖片也可以實現(xiàn)跑馬燈效果，HR標簽也可以
- direction="right" |"left"|"up"|"down"屬性可以調(diào)整跑馬燈的運行方向
- 如果是要設(shè)置跑馬燈的高度與寬度泉瞻，可以使用height和width屬性進行設(shè)置
- 還可以設(shè)置跑馬燈的行為脉漏，使用behavior屬性，可以設(shè)置循環(huán)滾動（scroll）袖牙、往返撞擊（alternate）侧巨、只滾動一次（slide）等行為
- 可以將滾動的區(qū)域設(shè)置背景顏色，其屬性為：bgcolor="顏色"
- 還可以設(shè)置延時滾動效果鞭达，scrolldelay="1000"司忱，其單位為毫秒
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>跑馬燈效果</title>
</head>
<body>
<marquee diretion="right">驗證出現(xiàn)的方向，從左往右</marquee>
<marquee behavior="slide">只會運行一次就停止</marquee>
<marquee bgcolor="blue">跑馬燈區(qū)域背景顏色</marquee>
<marquee scrolldelay="500">設(shè)置運行延時效果</marquee>
<marquee behavior="alternate" direction="up" height="200" bgcolor="yellow">
歡迎來到html課堂畴蹭，在這個課堂你會學習到放棄是什么滋味
</marquee>
<marquee scrolldelay="1000" bgcolor="yellow">
<hr width="300" size="15" color="red">
</marquee>
</body>
</html>
-
A標簽坦仍，為HTML中最重要的標簽之一，這個是超鏈接標簽撮胧。
href表示超鏈接去向位置桨踪，是一個目標網(wǎng)址，也可以是一個本地網(wǎng)頁
href還可以實現(xiàn)對郵箱的超鏈接芹啥，其實現(xiàn)代碼為：
<a href="mailto:myemail@qq.com">打開窗口是新窗口還是原有窗口锻离，其實現(xiàn)代碼為：
<a target="值">主要有兩個值：_self和_blank
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>超鏈接的設(shè)置</title>
</head>
<body>
<p align="center"><b>HTML入門教程</b></p>
<a >1.HTML之HEAD標簽</a> <!--跳轉(zhuǎn)到了百度首頁-->
<a href="./body.html">2.HTML之BODY標簽</a>
<a href="mailto:service@qiusuoedu.com">求索教育服務(wù)郵箱</a>
<a target="_self">當前窗口打開百度</a><br />
<a target="_blank">新頁面打開百度</a>
</body>
</html>
-
表格，如何在HTML中實現(xiàn)表格
要在HTML中實現(xiàn)表格墓怀，首先要有table標簽來告訴HTML這是一個表格汽纠。然后表格中存在行<tr>，每個行中又有若干個單元格是：<td>
即：表格中存在多行傀履，那么就有多個<tr>標簽組虱朵。每一行又有若干個單元格，即<td>標簽組
<html>
<head>
<title>表格的制作</title>
</head>
<body>
這是表格前面的內(nèi)容<br>
<!--以下代碼實現(xiàn)表格的制作-->
<table>
<tr> <!--這是第一行-->
<td>第1行第1格</td> <!--第1個單元格-->
<td>第1行第2格</td> <!--第2個單元格-->
</tr>
<tr> <!--這是第二行-->
<td>第2行第1格</td>
<td>第2行第2格</td>
</tr>
<tr> <!--這是第三行-->
<td>第3行第1格</td>
<td>第3行第2格</td>
</tr>
</table>
這是表格后面的內(nèi)容<br>
</body>
</html>
- 我們會發(fā)現(xiàn)以上制作出來的表格钓账，沒有邊框碴犬，看起來并不習慣。其實只需要在<table>標簽中加入border屬性即可梆暮。對應(yīng)的代碼為：
<table border="1">服协，即實現(xiàn)了1個像素的邊框。 - 我們設(shè)置了邊框的大小啦粹，還可以設(shè)置邊框的顏色偿荷。其實現(xiàn)代碼為：
<table border="1" bordercolor="red"> - 可以對表格設(shè)置背景顏色窘游，代碼為：
<table bgcolor="yellow">，可以設(shè)置背景顏色跳纳，那也可以設(shè)置背景圖片：<table background="圖片地址"> - 我們知道忍饰，表格有標題行（第一行）與眾不同。我可以設(shè)置第一行的背景顏色寺庄，這該如何設(shè)置艾蓝？
- 表格可以設(shè)置背景顏色，行也可以設(shè)置背景顏色斗塘，單元格可以嗎饶深？
- 我們第一行的與眾不同，還包含內(nèi)容居中對齊逛拱。如何實現(xiàn)居中對齊？代碼為：
<tr align="center"> - 如果我們設(shè)置
<table align="center">台猴，這時候是哪種居中朽合？ - 表格還有兩個屬性：cellpadding和cellspacing，cellpadding是內(nèi)容與單元格邊框的邊距饱狂。cellspacing是單元格與單元格之間的邊框曹步。
單元格的合并：
- 在表格中，有時候我們期望進行單元格的合并休讳。合并的方式為：第1個單元格占2個列寬（colspan="2"）第2個單元格對應(yīng)的就沒有了讲婚。
- 如果是合并兩行內(nèi)容，則對應(yīng)的是第1個單元格占2個行寬（rowspan="2"）俊柔，第2行的單元格對應(yīng)的就沒有了筹麸。
<html>
<head>
<title>表格的制作</title>
</head>
<body>
這是表格前面的內(nèi)容<br>
<!--以下代碼實現(xiàn)表格的制作-->
<table>
<tr> <!--這是第一行-->
<td>第1行第1格</td> <!--第1個單元格-->
<td>第1行第2格</td> <!--第2個單元格-->
</tr>
<tr> <!--這是第二行-->
<td colspan="2">第2行第1格</td> <!--colspan表示列寬-->
<!--第2格沒有了-->
</tr>
</table>
這是表格后面的內(nèi)容<br>
</body>
</html>
-
frame標簽，它由frameset和frame兩個標簽組成
我們可以把網(wǎng)頁區(qū)域分成若干個部分（frame）雏婶，全部是frameset物赶。我們使用frameset的核心目的是對網(wǎng)頁進行分塊，不是對它的body部分進行切割留晚。
frame的處理：
- 我們需要加入框架的分塊方式酵紫，是橫向分塊還是縱向分塊。如果是橫向分塊就用rows="20%,30%,50%"错维，當然我們的分塊最終必然是100%奖地，所以我們也可以這么寫：
<frameset rows="20%,30%,*"> - 如果我們需要縱向分塊，則使用cols="30%,40%,*"赋焕，來實現(xiàn)縱向分塊参歹。
<html>
<head>
<title>使用frame進行布局</title>
</head>
<frameset rows="20%,30%,50%">
<frame></frame> <!--第1個框架-->
<frame></frame> <!--第2個框架-->
<frame></frame> <!--第3個框架-->
</frameset>
</html>
- 如果我想實現(xiàn)品字型布局，該如何設(shè)計宏邮？
<html>
<head>
<title>使用frame進行布局</title>
</head>
<frameset rows="30%,*"> <!--橫向分成了兩塊-->
<frame></frame>
<frameset cols="50%,*"> <!--第2塊是一個框架集泽示，又要分成兩塊-->
<frame></frame>
<frame></frame>
</frameset>
</frameset>
</html>
- 以上的框架是可以調(diào)整大小的缸血，如果我們要設(shè)置其不可以調(diào)整大小，在<frame>標簽中使用noresize屬性械筛。這個屬性比較特別捎泻，我們可以有值也可以沒有值。其實現(xiàn)方式是：
<frame cols="50,*" noresize="noresize">或``<frame cols="50,*" noresize>`都可以埋哟。 - 如果我們要求不顯示框架的邊框笆豁，我們可以設(shè)置屬性
<frameset border=0>
實現(xiàn)框架中的內(nèi)容：
- 我們需要專門的設(shè)計一個網(wǎng)頁用來存放內(nèi)容，然后通過框架加載過去即可赤赊。
<html>
<head>
<title>使用frame進行布局</title>
</head>
<frameset rows="30%,*"> <!--橫向分成了兩塊-->
<frame src="./a.html"></frame> <!--引入了a.html的內(nèi)容-->
<frame name="right" src="http://www.baidu.com"></frame> <!--給其命名闯狱，讓這個區(qū)域有名字-->
</frameset>
</html>
- 接下來我們只需要設(shè)計a.html的內(nèi)容即可。這兩個網(wǎng)頁按正常網(wǎng)頁來設(shè)計即可抛计。
<html>
<body>
<!--a.html的內(nèi)容主要是超鏈接哄孤，但是需要跳轉(zhuǎn)到叫做right的區(qū)域-->
<a target="right">騰訊新聞網(wǎng)</a><br>
<a target="right">網(wǎng)易新聞網(wǎng)</a><br>
<a target="right">新浪新聞</a><br>
<a target="right">鳳凰資訊</a><br>
</body>
</html>
