Web前臺(tái)

*與用戶進(jìn)行交互，呈現(xiàn)視覺效果，收集用戶信息
*B/S結(jié)構(gòu)：瀏覽器（Chrome，F(xiàn)irefox），服務(wù)器

web前臺(tái)：html,css,javascript

HTML

-提供內(nèi)容
-通過標(biāo)簽/標(biāo)記來設(shè)置頁面上的內(nèi)容
-語法格式
單標(biāo)簽：由一個(gè)標(biāo)簽組成。例如<hr />
雙標(biāo)簽：由“開始標(biāo)簽”和“結(jié)束標(biāo)簽”兩部分構(gòu)成。例如<p></p>
-把標(biāo)簽按功能分類
1.文檔標(biāo)簽
2.圖像標(biāo)簽
3.表單標(biāo)簽
4.超鏈接標(biāo)簽

CSS

JavaScript

HTML應(yīng)用

注釋的使用
例：快捷鍵：Ctrl+/

語法

格式標(biāo)記

語法不分大小寫

換行；
<p>換段落標(biāo)記；
<center>讓標(biāo)記居中；
<li>列表項(xiàng)目標(biāo)簽每個(gè)列表使用一個(gè)<li>標(biāo)簽；
<ui>聲明無序號(hào)列表；

文檔標(biāo)記

<h>字體大小；
<b>字體變粗；
<i>斜體；
_{文字下標(biāo)字體標(biāo)記；
^{文字上標(biāo)字體標(biāo)記；
<strong>語義標(biāo)簽表示強(qiáng)調(diào)字體變粗；}}

超鏈接標(biāo)記

格式<a href= " " target="打開方式" name="頁面錨點(diǎn)名稱">鏈接文字或者圖片</a>
例：<a >化學(xué)</a>;
target屬性：定義超鏈接的打開方式
target+值（_seif,black,_parent,_top）
值：
1.默認(rèn)值，在當(dāng)前窗口中打開鏈接；
2.在一個(gè)新窗口中打開鏈接；
3.在父窗口中打開頁面（框架中使用較多）
4.在頂層窗口中打開文件（框架中使用較多）；
name錨點(diǎn)的含義是所謂的回到頂點(diǎn)的形式

圖像標(biāo)記

格式：<img src="路徑/文件名.圖片格式" width="屬性值" height="屬性值" border="" alt="屬性值">
alt:當(dāng)網(wǎng)頁上的圖片被加載完成后，鼠標(biāo)移動(dòng)到上面去，會(huì)顯示這個(gè)圖片指定的屬性文字。
如果圖像沒有下載或者加載失敗，會(huì)用文字來代替圖像顯示。
搜索引擎可以通過這個(gè)屬性的文字來抓取圖片。

注意：<img>為單標(biāo)記，不需要用</img>閉合。

在加載圖像文件的時(shí)候，文件的路徑或者文件名文件格式錯(cuò)誤，將無法加載圖片。

表單標(biāo)記

form；<input>;botton;<select>;<textarea>.

form標(biāo)記

<form action= "服務(wù)器端地址" name="表單名稱" method="post get">....</form>
例：<form action="#" method="post">...</form>

input（單標(biāo)簽）

放在form內(nèi)部，用來收集用戶輸入的。
例：創(chuàng)建各種用戶輸入框
<input type="text">
*單行文本框：
type="password"（表示一個(gè)密碼輸入域）
type="text"（表示一個(gè)文本輸入域）
*按鈕
type="submit"提交按鈕到服務(wù)器
type="reset"重置按鈕成默認(rèn)值
type="button"普通按鈕沒有數(shù)據(jù)提交功能
*單選框和復(fù)選框
單選框：
例：<input type="radio">男<input type="radio">女
成組才能組成單選
復(fù)選框：
<input type="checkbox">...<input type="checkbox">....<input type="checkbox">...<input type="checkbox">
*隱藏域：
<input type="hidden">為隱藏表單域
<input type="date">定義date控件
<input type="color">定義拾色器
<input type="e-mail">定義e-mail地址控件
*placeholder屬性：顯示灰色顯示，有輸入時(shí)消失，消除后再顯示。
*name屬性：只有設(shè)置name屬性的表單元素才能在提交表單時(shí)傳遞他們的值。
*value屬性：
對(duì)于button，reset，submit類型，指定義按鈕上的文本
對(duì)于text，password，hidden類型，指定義輸入字段初始（默認(rèn)）值
對(duì)于CheckBox，radio，image類型，指定義與input元素相關(guān)的值，當(dāng)提交表單時(shí)該值會(huì)發(fā)送到表單的action URL。
form標(biāo)記是括所有輸入的input的
required屬性：必須輸入項(xiàng)，表單提交時(shí)會(huì)自動(dòng)檢查
autofocus屬性：刷新頁面時(shí)自動(dòng)獲取焦點(diǎn)。
size屬性：設(shè)置控件的長(zhǎng)度。
maxlength屬性：輸入框中最大允許輸入的字符數(shù)。

botton標(biāo)記（雙標(biāo)簽）

定義一個(gè)按鈕
注意：清始終為<botton>元素規(guī)定type屬性。否則會(huì)默認(rèn)提交表單。botton標(biāo)記當(dāng)中可以放數(shù)據(jù)
例：<botton><img src="../test1.png"></botton>

select標(biāo)記

創(chuàng)建下拉列表
格式：<select name="" size="value">
<option value="value" >選項(xiàng)1</option>
<option value="value" >選項(xiàng)2</option>
<option value="value" >選項(xiàng)3</option>
</select>
*selected屬性：指定默認(rèn)的選項(xiàng)。

<textarea>標(biāo)記

多行文本框，能夠輸入多行文本的區(qū)域
格式：<textarea name="name" rows="value" cols="value" value="value">.....<texearea>
rows和cols屬性分別用來指定，現(xiàn)實(shí)的行數(shù)和列數(shù)，單位是字符個(gè)數(shù)。