Web開發(fā)分成前端(HTML+CSS+JS)+后臺(tái)(Java/PHP/.net/JS)
1. 前端基本概念
- 網(wǎng)頁 == 頁面
- 網(wǎng)站(知乎、豆瓣西壮、簡書、淘寶叫惊、天貓款青、京東、百度霍狰、hao123)
網(wǎng)站好比一本書抡草，網(wǎng)頁就是書當(dāng)中的一頁。
2. 工作基本內(nèi)容
- 開發(fā)：用代碼編寫網(wǎng)頁
- 發(fā)布：把網(wǎng)頁放到網(wǎng)站(服務(wù)器 == 特殊的計(jì)算機(jī))
3. 理解概念
- 服務(wù)器：提供計(jì)算服務(wù)的計(jì)算機(jī)（提供網(wǎng)站訪問功能的計(jì)算機(jī)）蔗坯。
- 客戶端：連接到服務(wù)器康震，代理服務(wù)器提供功能的軟件(QQ客戶端、微信)宾濒。
- 瀏覽器：訪問網(wǎng)站的顯示網(wǎng)頁的客戶端腿短。
瀏覽器軟件：
谷歌：Chrome
火狐：FireFox
微軟：IE6~IE11、Edge
4. 前端開發(fā)語言
編寫網(wǎng)頁使用的語言
|語言|作用|類比|
|:-|
|HTML|結(jié)構(gòu)|毛坯房|
|CSS |表示|裝修 |
|JS |行為|家電器|
5. HTML (Hyper Text Markup Language 超文本標(biāo)簽語言)
5.1 背景
- 標(biāo)準(zhǔn)版本：HTML4.01 HTML5
- 標(biāo)準(zhǔn)制定者：W3C
5.2 簡介
- 超文本 --> 普通文本(由文字構(gòu)成的文件)/超文本(圖片绘梦、視頻橘忱、音頻、超鏈接卸奉、游戲钝诚、軟件)
- 標(biāo)簽語言 --> 由標(biāo)簽/標(biāo)記構(gòu)成語言
5.3 標(biāo)簽語法
- 標(biāo)簽的基本寫法：
以<開始，>結(jié)束榄棵，中間書寫英文關(guān)鍵字敲长。
成對(duì)標(biāo)簽(雙標(biāo)簽)：開始標(biāo)簽與結(jié)束標(biāo)簽構(gòu)成郎嫁，結(jié)束標(biāo)簽比開始標(biāo)簽多一個(gè)/。 - 標(biāo)簽功能：
在頁面上是不顯示的祈噪，指示瀏覽器如何顯示標(biāo)簽里面的內(nèi)容。 - 舉例：
<html></html>
5.2 頁面基本套路
<html>
<head>
<title>你好</title>
</head>
<body>
Hello World
</body>
</html>
注意事項(xiàng)：
- 標(biāo)簽可以嵌套尚辑，但是只能包含嵌套辑鲤，不能交叉嵌套。
- 關(guān)鍵字可以全部小寫(
<html>)杠茬，也可以全部大寫(<HTML>)月褥，也可以大小混合(<hTMl>)，但是通常使用全部小寫瓢喉。 -
html/head/body三個(gè)標(biāo)簽是可以省略的宁赤，通常，這三個(gè)標(biāo)簽必須寫栓票。
6 HTML標(biāo)簽
標(biāo)題標(biāo)簽
h1~h6
效果：字體加粗决左，上下有空白行。從h1到h6字體從大變小走贪。
注意：在HTML如果使用沒有定義的標(biāo)簽佛猛，標(biāo)簽會(huì)被忽略掉。段落標(biāo)簽
p
效果：文字在同一個(gè)段落中坠狡，上下有空白行继找。
注意：如果沒有p標(biāo)簽，所有的文字默認(rèn)在同一個(gè)段落中逃沿。水平分割線
hr
效果：增加一條水平線
注意：hr是單標(biāo)簽無序列表
ul(unorder list)li(list item)
ul效果：單獨(dú)產(chǎn)生一個(gè)段落婴渡。
li效果：在每個(gè)項(xiàng)目文字前加上了一個(gè)項(xiàng)目符號(hào)(小黑點(diǎn))，并且每個(gè)項(xiàng)目前增加空白凯亮。有序列表
ol(order list)li(list item)
ul效果：單獨(dú)產(chǎn)生一個(gè)段落边臼。
li效果：在每個(gè)項(xiàng)目文字前加上了一個(gè)項(xiàng)目符號(hào)(序號(hào))，并且每個(gè)項(xiàng)目前增加空白触幼。
注意：
-
li不要單獨(dú)使用硼瓣，需要與ul/ol成套使用。 - 列表項(xiàng)目文本要放在
li標(biāo)簽內(nèi)部置谦，不要在其他位置放置文本堂鲤。
- 列表的嵌套：只需要把列表寫在對(duì)應(yīng)的li內(nèi)部即可。
無序列表嵌套時(shí)媒峡，項(xiàng)目符號(hào)會(huì)發(fā)生改變瘟栖，從實(shí)心圓(disc)變成空心圓(circle)，最后變成實(shí)心方塊(square)谅阿。
在window下默認(rèn)擴(kuò)展名是隱藏的半哟，需要把擴(kuò)展名顯示出來酬滤。
Win7下：組織->文件夾與搜索選項(xiàng)->查看，在高級(jí)設(shè)置中寓涨，去掉[隱藏已知文件類型的擴(kuò)展名]勾選盯串，點(diǎn)擊確定。win10可參考點(diǎn)擊這里
- 字符實(shí)體/轉(zhuǎn)移字符：顯示頁面中特殊符號(hào)戒良。
|符號(hào)|字符實(shí)體|含義|
|:-|
|<|& lt;| less than|
|>|& gt|greater than|
|半角空格|& nbsp;|||
- 在標(biāo)簽中文本多個(gè)連續(xù)的半角空格只顯示一個(gè)体捏，全角空格不受影響。
如何在段落中增加多個(gè)連續(xù)空格糯崎？
- 使用全角空格
- 使用字符實(shí)體
在標(biāo)簽中文本有多個(gè)連續(xù)回車換行顯示一個(gè)半角空格
如何在段落中增加回車几缭？
使用單標(biāo)簽<br/>加粗標(biāo)簽
b(bold)
效果：字體加粗下劃線標(biāo)簽
u(underline)
效果：字體下劃線斜體標(biāo)簽
i(italic)
效果：字體斜體文本預(yù)處理
pre
效果：可以顯示標(biāo)簽中文本中的多個(gè)連續(xù)半角空格和回車換行
小結(jié)
結(jié)構(gòu)標(biāo)簽：html、head沃呢、body年栓、title
-
head標(biāo)簽主要給瀏覽器提供信息 -
body標(biāo)簽主要負(fù)責(zé)在頁面中顯示內(nèi)容
文本標(biāo)簽
- 標(biāo)題
h1~h6 - 段落
p - 文本預(yù)處理
pre - 水平線
hr - 回車
br - 無序列表
ulli - 有序列表
olli - 定義列表
dldtdd - 字體標(biāo)簽
font
color字體顏色
size字體大小(1~7)
face字體 - 加粗
b斜體i下劃線u
屬性
- 語法：
<關(guān)鍵字 屬性名="屬性值"></關(guān)鍵字>
<關(guān)鍵字 屬性名="屬性值" />
Sublime Text 快捷鍵
|快捷鍵|作用|
|:-|
|Alt+F3| 全選正當(dāng)中當(dāng)前選中的字段|
|Ctrl+Shift+g| 給當(dāng)前選中的字段添加標(biāo)簽|
- 編碼
- GBK/GB2312~ANCI -- 國家標(biāo)準(zhǔn)
- UTF-8 -- 國際標(biāo)準(zhǔn)
所有頁面統(tǒng)一使用UTF-8編碼
指定當(dāng)前頁面的編碼方式：<meta charset="UTF-8">
問題：
- 如何使用記事本修改文件的編碼方式？
- 如何使用SublimeText修改文件的編碼方式薄霜？
- 頁面出現(xiàn)亂碼某抓，如何修改瀏覽器顯示頁面的編碼方式？
多媒體標(biāo)簽
- 圖像/圖片標(biāo)簽
img
屬性
src="圖片路徑"
alt="圖片說明"
title="圖片標(biāo)題"
- 路徑：找到文件
- 絕對(duì)路徑：從盤符開始直到文件名的路徑黄锤。
- 相對(duì)路徑：從當(dāng)前文件出發(fā)找到相應(yīng)的文件名的路徑搪缨。
當(dāng)前路徑：./
上一層路徑：../
上上一層：../../
上上上一層：../../../
依此類推
路徑中的斜線與反斜線
-
/通用的路徑分隔符。適用于Windows / Linux / Mac -
\\Windows專用的路徑分隔符
注釋
- 語法：
<!-- 注釋內(nèi)容 -->
瀏覽器不作解釋與顯示處理
- 作用：
- 代碼說明
- 使部分代碼不被解釋或者執(zhí)行
SublimeText 添加與取消注釋快捷鍵：
Ctrl+/
超鏈接標(biāo)簽a
- 屬性
href="將要跳轉(zhuǎn)到的網(wǎng)頁路徑"
target="_self/_blank"
說明：
_blank：在新的頁面中打開要跳轉(zhuǎn)的網(wǎng)頁_self：在當(dāng)前頁面中打開要跳轉(zhuǎn)的頁面文本超鏈接
<a href="網(wǎng)頁路徑">說明文字</a>
超鏈接默認(rèn)效果：說明文字自帶下劃線，初始顏色為藍(lán)色，點(diǎn)擊時(shí)顏色為紅色懂傀，點(diǎn)擊之后為紫色。跳轉(zhuǎn)到頁面的開始部分痹届。
- 圖片超鏈接
<a href="網(wǎng)頁路徑">
< img src="圖片路徑" />
</a>
- 錨效果：跳轉(zhuǎn)到頁面指定位置
回到頂部
<a href="#">回到頂部</a>
跳轉(zhuǎn)到頁面指定位置
- 指定跳轉(zhuǎn)的位置。
- 添加超鏈接打月。
例如：書簽
- 郵件超鏈接
<a href="mailto:zhangsan@qq.com">我的郵箱</a>
表格table
- 表格默認(rèn)效果：無邊框队腐、整體左對(duì)齊、文字左對(duì)齊
-
table表格標(biāo)簽
屬性
border 邊框?qū)挾? width 表格寬度
height 表格高度
align="left/center/right" 表格整體水平(橫向)對(duì)齊
bordercolor 邊框顏色(非標(biāo)準(zhǔn)屬性)
cellpadding 單元格邊框與內(nèi)容之間的間距
cellspacing 單元格與單元格邊框間距
-
tr行標(biāo)簽
align="left/center/right"行內(nèi)文本水平(橫向)對(duì)齊 -
td單元格標(biāo)簽
align="left/center/right"單元格內(nèi)文本水平(橫向)對(duì)齊 -
th表頭單元格標(biāo)簽
默認(rèn)效果：文本加粗居中
單元格合并
- 跨列合并
colspan - 跨行合并
rowspan
合并單元格的屬性寫在左上角的
td里面奏篙，并刪除多余的td
表格區(qū)域
-
tbody：表格主區(qū)域(如果表格沒有指定區(qū)域柴淘，默認(rèn)所有的tr/td都屬于tbody，并且會(huì)自動(dòng)添加tbody標(biāo)簽) -
thead：表格頭部區(qū)域 -
tfoot：表格底部區(qū)域
tbody秘通、thead为严、tfoot編碼的順序不會(huì)影響表格頁面顯示的順序，即肺稀，thead永遠(yuǎn)顯示在表格的開頭第股，tfoot永遠(yuǎn)顯示在表格的底部，tbody顯示在thead與tfoot中間话原。
caption表標(biāo)題標(biāo)簽
注意：除了
caption夕吻，表格內(nèi)部的內(nèi)容诲锹，必須寫在td標(biāo)簽內(nèi)部，否則涉馅，顯示到表格外部归园。
表單
- 作用
- 收集數(shù)據(jù)
- 向服務(wù)器提交數(shù)據(jù)
- 表單標(biāo)簽
form - 表單元素標(biāo)簽
- 輸入框(默認(rèn)為文本框)
input - 按鈕
button
如何使文本框變成密碼框？給
input標(biāo)簽加上type="password"屬性
如何使單選框/單選按鈕實(shí)現(xiàn)單選功能稚矿？給同一組的單選框添加同名的name屬性
- 提交按鈕的實(shí)現(xiàn)方式：
-
button添加屬性type="submit" <input type="submit"/>
- 重置按鈕的實(shí)現(xiàn)方式：
-
button添加按鈕type="reset" <input type="reset"/>
- 普通按鈕的實(shí)現(xiàn)方式：
-
button添加按鈕type="button" <input type="button"/>
- 圖片按鈕的實(shí)現(xiàn)方式：
<button>< img src="圖片路徑" /></button><input type="image" src="圖片路徑"/>
初始值
- 單選框初始值設(shè)置：添加屬性
checked="checked" - 復(fù)選框初始值設(shè)置：添加屬性
checked="checked" - 文本框初始值設(shè)置：添加屬性
value="任意文字" - 下拉列表初始值設(shè)置：在對(duì)應(yīng)的
option標(biāo)簽添加屬性selected="selected" - 文本域初始值設(shè)置：在
textarea標(biāo)簽內(nèi)添加任意文字
在HTML5中給文本框和文本域提供了占位符屬性
placeholder蔓倍，提示用戶需要填寫的內(nèi)容。當(dāng)用戶填入內(nèi)容時(shí)盐捷，提示信息消失，如果輸入框內(nèi)容為空的時(shí)候默勾，提示信息會(huì)顯示碉渡。
