html基本結(jié)構(gòu)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><!-- 字符編碼格式 -->
<title>網(wǎng)頁標題</title>
</head>
<body>
內(nèi)容
</body>
</html>
標簽和屬性凯正，并使用樣式代替:
| 標簽 | 描述 |
|---|---|
| <center> | 定義居中的內(nèi)容 |
| <font>和<basefont> | 定義HTML字體 |
| <s><strike> | 定義刪除線文本 |
| <u> | 定義下劃線文本 |
| 屬性 | 描述 |
|---|---|
| align | 定義文本的對齊方式 |
| bgcolor | 定義背景顏色 |
| color | 定義文本顏色 |
對齊方式的align有：
<h1 align="left">靠左
<h1 align="center">居中
<h1 align="right">靠右
<h1 align="absbottom">靠下
<h1 align="absmiddle">水平居中
<h1 align="bottom">低部
<h1 align="top">頂部
HTML格式化
HTML可以定義很多供格式化輸出的元素染苛，比如粗體和斜體字。
文本格式化標簽：
| 標簽 | 描述 |
|---|---|
| <b> | 定義粗體文字 |
| <big> | 定義大號字 |
| <em> | 定義著重文字 |
| <i> | 定義斜體文字 |
| <small> | 定義小號字 |
| <strong> | 定義加重語氣 |
| <sub > | 定義下標字 |
| <sup > | 定義上標字 |
| <ins> | 定義插入字 |
| <del> | 定義刪除字 |
| <s> | 使用<del>代替 |
| <strike> | 使用<del>代替 |
| <u> | 使用樣式 （style）代替 |
HTML鏈接：
- HTML鏈接是通過
<a></a>標簽進行定義的往踢，并且在href屬性中指定鏈接的地址慰技。 - 實列：
<html>
<body>
<a >w3school是一個非常好的學習Web技術(shù)的網(wǎng)站椭盏。</a>
</body>
</html>
HTML圖像
- HTML圖像是通過
<img src="資源路徑">標簽進行定義的，圖像的名稱和尺寸是以屬性的形式提供的吻商。
如果是本地的話掏颊，后面加上圖片的絕對路徑或者相對路徑。
如果圖片源來自網(wǎng)上艾帐，那必須使用絕對路徑乌叶。
示例：排列圖片
- 本例演示如何在文字中排列圖像:
<html>
<body>
<h2>未設置對齊方式的圖像：</h2>
<p>圖像 <img src ="/i/eg_cute.gif"> 在文本中</p>
<h2>已設置對齊方式的圖像：</h2>
<p>圖像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
<p>圖像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>
<p>圖像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>
<p>請注意，bottom 對齊方式是默認的對齊方式柒爸。</p>
</body>
</html>
示例：浮動圖像
- 本例演示如何使圖片浮動至段落的左邊或右邊准浴。
<html>
<body>
<p>
<img src ="/i/eg_cute.gif" align ="left">
帶有圖像的一個段落。圖像的 align 屬性設置為 "left"捎稚。圖像將浮動到文本的左側(cè)乐横。
</p>
<p>
<img src ="/i/eg_cute.gif" align ="right">
帶有圖像的一個段落。圖像的 align 屬性設置為 "right"今野。圖像將浮動到文本的右側(cè)葡公。
</p>
</body>
</html>
示例：調(diào)整圖片尺寸
- 本例演示如何將圖片調(diào)整到不同的尺寸:
<html>
<body>
<img src="/i/eg_mouse.jpg" width="50" height="50">
<br />
<img src="/i/eg_mouse.jpg" width="100" height="100">
<br />
<img src="/i/eg_mouse.jpg" width="200" height="200">
<p>通過改變 img 標簽的 "height" 和 "width" 屬性的值，您可以放大或縮小圖像条霜。</p>
</body>
</html>
示例：制作圖像鏈接
- 本例演示如何將圖像作為一個鏈接使用:
<html>
<body>
<p>
您也可以把圖像作為鏈接來使用：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>
</body>
</html>
初識div
認識div在排版中的作用
語法：<div>…</div>
給div命名催什，使邏輯更加清晰
我們把一些標簽放進<div>里，劃分出一個獨立的邏輯部分蛔外。為了使邏輯更加清晰蛆楞，我們可以為這一個獨立的邏輯部分設置一個名稱溯乒，用id屬性來為<div>提供唯一的名稱，這個就像我們每個人都有一個身份證號豹爹，這個身份證號是唯一標識我們的身份的裆悄，也是必須唯一的。
如下兩圖進行比較臂聋，如果設計師把兩個圖給你光稼，哪個圖你看上去能更快的理解呢？是不是右邊的那幅圖呢孩等。
語法：<div id="版塊名稱">…</div>
table標簽艾君，認識網(wǎng)頁上的表格
table標簽 ＝ 我們平時看到到表格
有時候我們需要在網(wǎng)頁上展示一些數(shù)據(jù)，如某公司想在網(wǎng)頁上展示公司的庫存清單肄方。如下表：
想在網(wǎng)頁上展示上述表格效果可以使用以下代碼：
創(chuàng)建表格的四個元素：
table冰垄、tbody、tr权她、th虹茶、td<tbody>…</tbody>：當表格內(nèi)容非常多時，表格會下載一點顯示一點隅要，但如果加上<tbody>標簽后蝴罪，這個表格就要等表格內(nèi)容全部下載完才會顯示。<tr>…</tr>：表格的一行步清，所以有幾對tr 表格就有幾行要门。<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>廓啊，說明一行中就有幾列欢搜。<th>…</th>：表格的頭部的一個單元格，表格表頭崖瞭。表格中列的個數(shù)狂巢，取決于一行中數(shù)據(jù)單元格的個數(shù)。
上述代碼在瀏覽器中顯示的默認的樣式為：
總結(jié)：
1.table表格在沒有添加css樣式之前书聚，在瀏覽器中顯示是沒有表格線的
2.表頭唧领，也就是th標簽中的文本默認為粗體并且居中顯示
用css樣式，為表格加入邊框
Table 表格在沒有添加 css 樣式之前雌续，是沒有邊框的斩个。這樣不便于我們后期合并單元格知識點的講解，所以在這一節(jié)中我們?yōu)楸砀裉砑右恍邮窖倍牛瑸樗砑舆吙颉?br> 代碼中加入：
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
上述代碼是用 css 樣式代碼受啥，為th，td單元格添加粗細為一個像素的黑色邊框。
結(jié)果窗口顯示出結(jié)果樣式：
表格應用和布局
-
內(nèi)容目標
- 會使用表格的基本結(jié)構(gòu)實現(xiàn)簡單表格
- 會使用表格相關(guān)標簽實現(xiàn)跨行滚局、跨列的復雜表格
- 會使用表格相關(guān)設置進行美化修飾
表格的基本結(jié)構(gòu):
<html>
<head></head>
<body>
<table bordercolor="#000000" cellspacing="0" cellpadding="30" border="1">
<tr>
<td>姓名</td>
<td>性別</td>
<td>專業(yè)</td>
</tr>
<tr>
<td>貝貝</td>
<td>男</td>
<td>計算機</td>
</tr>
<tr>
<td>晶晶</td>
<td>女</td>
<td>計算機</td>
</tr>
</table>
</body>
</html>
說明：bordercolor="顏色或者十六進制顏色代碼"：設置邊框的顏色居暖；cellspacing="0"：設置單元格之間的間隔；cellpadding="30"：設置單元格邊框和內(nèi)容之間的間隔藤肢；border="1"：設置邊框的寬度太闺。
效果圖：
跨行跨列的表格：
- 示列
<TABLE border="1">
<TR>
<TD>手機充值、IP卡 </TD>
<TD colspan="2">辦公設備嘁圈、文具</TD>
</TR>
<TR>
<TD rowspan="2">各種卡的總匯</TD>
<TD>鉛筆</TD>
<TD>彩筆</TD>
</TR>
<TR>
<TD>打印</TD>
<TD>刻錄</TD>
</TR>
</TABLE>
如圖所示：
rowspan:表示跨行省骂；colspan:表示跨列；<TD colspan="2">辦公設備最住、文具</TD>:跨了2行钞澳，<TD rowspan="2">各種卡的總匯</TD>:跨了2列詳細PPT教程：表格應用和布局——html02
跑馬燈marquee:
<MARQUEE scrolldelay ="100" direction="up" >
滾動文字或圖像
</MARQUEE>
說明：
scrolldelay：表示滾動延遲時間，默認值為90涨缚。
direction：表示滾動的方向轧粟，默認為從右向左 up：是從上向下。
end
由于時間問題來不及總結(jié)以下是關(guān)于HTML的資料：
HTML+CSS入門篇
用CSS進行網(wǎng)頁布局
導航條菜單的制作
css - 收藏集 - 掘金
用CSS進行網(wǎng)頁布局 學習筆記
常見 CSS 布局方式
css文集—貓奴
148個資源讓你成為CSS專家
