day-01(html)
本文件並非個人所寫，只是方便自己參考：
案例1-網站資訊展示
需求:
在頁面展示一些文字資訊,需要排版
技術分析:
html:超文字標籤語言
////////////////////
html:
作用:展示
超文字:超越了一般文字,描述文字的字型 顏色 圖片
標籤:標記
html書寫規則:
檔案的字尾名 .html(建議) 或者 .htm
標籤必須用 <> 引起來 已經定義好的標籤
屬性
格式: key="value"
建議屬性的值用引號引起來.
不區分大小寫
注意:
最好將所有的內容放在一個標籤中 <html></html>
有開始標籤和結束標籤的標籤稱之為圍堵標籤
沒有結束的標籤的稱之為空標籤 <br/>
開始標籤和結束標籤之間的內容稱之為標籤體.
<!--註釋內容--> html頁面中的註釋
標籤必須正常巢狀,
標籤最好關閉
檔案標籤:
html標籤:
聲明當前網頁為html頁面
子標籤:
<head></head>
<body></body>
head:用來存放當前頁面的重要資訊,一般不展示在html頁面上
常見的子標籤:
<title></title> 網頁的標題
body:
要展示的資料放在body中
標題標籤:
<hn></hn>
n取值 :1~6
h1最大 h6最小
自動換行 且留白 預設加粗
常用屬性:
align:對齊方式
left:左 right:右 center:居中
格式:
<h2 align="center"></h2>
//////
字型標籤:(瞭解)規定文字的字型、字型尺寸、字型顏色。
<font></font>
常用屬性:
face:字型
size:尺寸
color:顏色
顏色的取值:(RGB)
方式1: #xxxxxx x為16進位制
方式2: 英文單詞
段落標籤:
<p></p>
其他標籤:
<b></b> <strong></strong>加粗
<i></i> 斜體
水平線
<hr/>
換行
<br/>
//////////////////////////
案例1-步驟分析:
1.新建一個html頁面
2.標題標籤
3.新增一個水平線
4.4個段落
5.新增字型顏色 加粗 斜體
/////////////////////
案例2-圖片網頁展示
需求:
在一個頁面中展示多張圖片
技術分析:
<img/>
圖片標籤:★
<img/>
常用屬性:
★src:圖片的路徑
alt:替代文字
title:移上去顯示的文字
width:寬
height:高
大小的寫法:
畫素:123px
百分比:20%
路徑的寫法:
相對路徑:
./ 或者 什麼都不寫 當前目錄
../ 上一級目錄
絕對路徑:
帶協議的絕對路徑:
http://www.itheima.com
實現:
////////////////
案例3-列表頁面展示
需求:
將友情連線的頁面通過列表展示出來
技術分析:
列表標籤
列表標籤:
<ol></ol> 有序
<ul></ul> 無序
常用的標籤
<li></li> 列表項
超連結標記
<a></a>
常用屬性:
href:跳轉路徑
target:在那裡開啟
預設值:_self _blank(在空白頁面開啟)
////////////////////////
案例4-首頁資訊的展示
需求:
通過表格佈局將首頁資訊展示
技術分析:
表格表格
表格標籤★
<table></table>
常用的子標籤
<tr>:行
<tr></tr>
常用子標籤:
<td>:列
<th>:表頭單元格 預設居中加粗
注意:
一行必須只有有一個單元格或者一列
//////////////////
table 的常用屬性:
border:邊框 畫素值
width:
align:表格對齊方式
tr 的常用屬性:
align:內容對齊
td 的常用屬性:
align:內容對齊
colspan:跨列合併 值:合併的列數
rowspan:跨行合併
步驟分析:
1.常見一個8行1列的表格
2.在第一行 放logo
巢狀一個1行3列的表格
3.第2行 放選單
4.第3行 放圖片
5.第4行 熱門商品
巢狀一個2行7列的表格
6.第5行 放廣告圖片
7.第6行 最新商品
巢狀一個2行7列的表格
8.第7行 放一個圖片
9.第8行
兩個段落
///////////////////////
案例5-表單頁面
需求:
設計一個表單頁面,用來收集使用者的資料
技術分析:
表單標籤
表單標籤★★★
<form></form>
作用:
用來從瀏覽器端收集使用者的資訊.
步驟分析:
1.在頁面中間新增一個表格
2.10行3列表格
3.在表格中新增表單表單子標籤
/////////////////////////////////
案例6-後臺管理頁面(瞭解)
需求:
開發一個後臺管理頁面,通過frameset實現
技術分析:
frameset:框架集
frame:具體實現
frameset:框架集(瞭解)
常用屬性:
cols:垂直切割
例如: cols="40%,60%"
例如: cols="40%,*,10%"
rows:水平切割
常見的子標籤:
frame
注意:
最好和body不要共存
frame:具體實現
常用屬性:
src:展示的頁面的url
//////////////
補充:
轉義字元:
三部分構成 &實體;
掌握的轉義字元:
> > //great then
< <
& &
空格
//////////////////////
meta
元資訊
<meta charset="UTF-8">指定瀏覽器用什麼編碼開啟此頁面
//////////////////////////////////
/////////////////////////////////////////////
上午回顧:
html
檔案標籤:
<html>
<head>
<title></title>
</head>
<body></body>
</html>
排版標籤:
p
br
hr
字型
font
h1~h6
b
strong
i
圖片★
<img src="圖片路徑" alt="替代文字" width="" height=""/>
超連結★
<a href="跳轉路徑" target="_blank">xxxx</a>
列表
<ol></ol>
<ul></ul>
列表項
<li></li>
表格標籤★★
<table border="" width="" align="">
<tr>
<td></td>
</tr>
</table>
td中的重要屬性:
colspan:列合併
rowspan:行合併
表單標籤★★★
form
常用屬性:
action:提交路徑
method:提交方式 get和post
常見的子標籤:
input
select
textarea
input標籤:
10中type
text
password
radio
checkbox
file
submit
reset
button
hidden
image
若想將內容傳送到伺服器,必須有name屬性 username=tom
select標籤:
<select name="">
<option value="提交到伺服器的值">展示內容</option>
</select>
textarea:文字域
格式:
<textarea cols="" rows="" name=""></textarea>
框架(瞭解)
frameset:定義框架集
常用屬性:
cols:
rows:
常見的子標籤:
frame
frame:具體展示
常用屬性:
src:展示網頁的url
name:給當前的frame起個名稱