Web前端

• Web前端基礎(chǔ)
• • HTML
  • • 編程中命名規(guī)范
    • 網(wǎng)頁(yè)的基本結(jié)構(gòu)：
    • 網(wǎng)頁(yè)運(yùn)行的原理：
    • HTML常見標(biāo)簽
    • • 標(biāo)題標(biāo)簽
      • 段落標(biāo)簽
      • 水平線標(biāo)簽
      • 有序列表標(biāo)簽
      • 無(wú)序列表標(biāo)簽
      • 描述標(biāo)簽
      • 表格標(biāo)簽
      • 表單
      • • form表單中常用的表單元素
      • div分區(qū)標(biāo)簽
      • span范圍標(biāo)簽
      • a超級(jí)鏈接標(biāo)簽
    • HTML4和HTML5的區(qū)別
    • 頁(yè)面錯(cuò)誤調(diào)試的幾種常見手段

Web前端基礎(chǔ)

HTML：是一種編程語(yǔ)言，意思為“擴(kuò)展標(biāo)記語(yǔ)言”，可以簡(jiǎn)單的理解為一個(gè)“毛坯房子”

CSS：是層疊樣式表，是一種技術(shù)，其主要目的是為了幫助美化HTML頁(yè)面的，可以簡(jiǎn)單的理解為“裝修過(guò)的房子”

JS：是一種編程語(yǔ)言，起作用是幫助美化國(guó)的頁(yè)面使得其更加只能，更加人性化，可以簡(jiǎn)單的理解為“智能家居房”

Jquery: 是js封裝后的一個(gè)組件，可以用更加簡(jiǎn)潔的代碼使得頁(yè)面更加美化更加智能更加人性化通用性更強(qiáng)，可以簡(jiǎn)單的理解為“微型智能家居助手”

HBUlider:是基于eclipse用java開發(fā)一款軟件，所以在運(yùn)行的時(shí)候要有java的環(huán)境，（但是pycharm安裝的時(shí)候默認(rèn)是打上勾（自動(dòng)安裝且配置了環(huán)境變量）的所以就避免了）

HTML

HTML：超級(jí)文本標(biāo)記語(yǔ)言是標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用，也是一種規(guī)范，一種標(biāo)準(zhǔn)，

它通過(guò)標(biāo)記符號(hào)來(lái)標(biāo)記要顯示的網(wǎng)頁(yè)中的各個(gè)部分。網(wǎng)頁(yè)文件本身是一種文本文件，通過(guò)在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等 ）。瀏覽器按順序閱讀網(wǎng)頁(yè)文件，然后根據(jù)標(biāo)記符解釋和顯示其標(biāo)記的內(nèi)容，對(duì)書寫出錯(cuò)的標(biāo)記將不指出其錯(cuò)誤，且不停止其解釋執(zhí)行過(guò)程，編制者只能通過(guò)顯示效果來(lái)分析出錯(cuò)原因和出錯(cuò)部位。但需要注意的是，對(duì)于不同的瀏覽器，對(duì)同一標(biāo)記符可能會(huì)有不完全相同的解釋，因而可能會(huì)有不同的顯示效果。

簡(jiǎn)而言之：

1.就是一種編寫網(wǎng)頁(yè)的語(yǔ)言

2.且是運(yùn)行在瀏覽器端的

3.且是解釋（是由瀏覽器自動(dòng)解釋的）執(zhí)行的

2.網(wǎng)頁(yè)的基本結(jié)構(gòu)：

：標(biāo)識(shí)出當(dāng)前文件是html5,其作用是告訴瀏覽器不要解釋錯(cuò)誤，要嚴(yán)格按照W3C標(biāo)準(zhǔn)模式進(jìn)行解析

備注：W3C是一個(gè)國(guó)際標(biāo)準(zhǔn)組織

網(wǎng)頁(yè)的基本結(jié)構(gòu)：

頭：

主體：

3.網(wǎng)頁(yè)運(yùn)行的原理：

html文件—>瀏覽器解析（Webkit渲染引擎）—>在頁(yè)面上呈現(xiàn)效果

編程中命名規(guī)范

1）不要使用關(guān)鍵字，保留字：因?yàn)闀?huì)產(chǎn)生二義性

2）不要隨便的寫：例如：a aa aaa

3 ) 盡量避免中文：轉(zhuǎn)碼容易出錯(cuò)

4）盡可能的以字母，下劃線，$開頭

5）盡可能的安照駝峰規(guī)范

原則：見名知意，盡可能的規(guī)范 假正經(jīng)

編程書寫規(guī)范：

因?yàn)閔tml的兼容性比較器，但是這并不是意味著我們可以隨便寫，反之我們更要嚴(yán)格規(guī)范要求自己

例如:1).html與.htm雖說(shuō)效果一樣，但是在引擎渲染的時(shí)候還是默認(rèn)先找.html

2）

雖然效果能出來(lái)，但是在不同瀏覽器的時(shí)候也是會(huì)有差異的

網(wǎng)頁(yè)的基本結(jié)構(gòu)：

：標(biāo)識(shí)出當(dāng)前文件是html5,其作用是告訴瀏覽器不要解釋錯(cuò)誤，要嚴(yán)格按照W3C標(biāo)準(zhǔn)模式進(jìn)行解析

備注：W3C是一個(gè)國(guó)際標(biāo)準(zhǔn)組織

網(wǎng)頁(yè)的基本結(jié)構(gòu)：

頭：

主體：

網(wǎng)頁(yè)運(yùn)行的原理：

html文件—>瀏覽器解析（Webkit渲染引擎）—>在頁(yè)面上呈現(xiàn)效果

HTML常見標(biāo)簽

標(biāo)題標(biāo)簽

用于來(lái)存放標(biāo)題內(nèi)容

<h1>...</h1> <!--標(biāo)題標(biāo)簽--> <h1>第一章</h1> <!--將第一章設(shè)為一級(jí)標(biāo)題-->

段落標(biāo)簽

用來(lái)存放正文

<p></p> <!--段落標(biāo)簽：主要用于存放一些內(nèi)容-->

水平線標(biāo)簽

用來(lái)當(dāng)作網(wǎng)頁(yè)中的分割線

<hr/> <!--水平線標(biāo)簽--> <!--類似于 -------------- 獨(dú)占一行-->

有序列表標(biāo)簽

創(chuàng)建一個(gè)有序列表

<ol><li></li> </ol> <!--有序列表標(biāo)簽-->

無(wú)序列表標(biāo)簽

創(chuàng)建一個(gè)無(wú)序列表

<ul><li></li> </ul> <!--無(wú)序列表標(biāo)簽-->

描述標(biāo)簽

用來(lái)描述一些圖片、視頻的標(biāo)簽

<dl><dt></dt><dd></dd> </dl> <!--描述標(biāo)簽-->

表格標(biāo)簽

創(chuàng)建一個(gè)多行多列的表格

<table align="center" border="2px" bordercolor="green"><tr><td>第一行第一列</td><td colspan="2">第一行第二列</td><!--<td>第一行第三列</td>--></tr><tr><td rowspan="2">第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td></tr><tr><!--<td>第三行第一列</td>--><td>第三行第二列</td><td>第三行第三列</td></tr></table>

table 的align屬性可以控制左對(duì)齊、右對(duì)齊、居中對(duì)齊等功能

border用來(lái)增加邊框， bordercolor是設(shè)置邊框的顏色

colspan：列合并單元格

rowspan: 行合并單元格

表單

格式為：

… 文本框、按鈕等表單元素…

表單提交地址：指定提交后，由服務(wù)器上哪個(gè)處理程序處理

提交方法：指定向服務(wù)器提交的方法，一般為post或get方法, post方法比較安全，但是get可以攜帶參數(shù)進(jìn)行傳遞且參數(shù)大小不能超過(guò)2K

擴(kuò)展知識(shí)點(diǎn)：post和get的區(qū)別

1.get是從服務(wù)器上獲取數(shù)據(jù)，post是向服務(wù)器傳送數(shù)據(jù)。

2.get是把參數(shù)數(shù)據(jù)隊(duì)列加到提交表單的action屬性所指的URL中，在URL中可以看到。post是通過(guò)HTTP post機(jī)制，用戶看不到這個(gè)過(guò)程 。

3.get傳送的數(shù)據(jù)量較小，不能大于2KB。post傳送的數(shù)據(jù)量較大，一般被默認(rèn)為不受限制。

4.get安全性非常低，post安全性較高。但是執(zhí)行效率卻比Post方法好。

form表單中常用的表單元素

<form action="https://www.baidu.com/?tn=62095104_33_oem_dg" method="post"><table><!--單行文本框--><tr><td>用戶名</td><td><input type="text" name="nf" value="" /></td></tr><!--密碼框--><tr><td>密碼</td><td><input type="password" name="ps" value="" /></td></tr><!--文本域 多行文本框--><tr><td>文本域/多行文本框</td><td><textarea cols="4" rows="2" name="tx"></textarea></td></tr><!--單選按鈕--><tr><td>單選按鈕：</td><td>男<input type="radio" name="ra" value=""/></td><td>女<input type="radio" name="ra" value=""/></td></tr><!--復(fù)選框--><tr><td>復(fù)選框</td><td>游泳<input type="checkbox" name="ck" value="" />籃球<input type="checkbox" name="ck" value="" />足球<input type="checkbox" name="ck" value="" /></td></tr><!--下拉列表--><tr><td>下拉框/下拉列表性別</td><td><select><option>---請(qǐng)選擇---</option><option>男</option><option>女</option></select></td></tr><!--提交按鈕--><tr><td></td><td ><input type="submit" name="bt" id="bt" value="提交" /></td></tr><!--重置按鈕--><tr><td>重置按鈕</td><td><input type="reset" /></td></tr><!--普通按鈕--><tr><td>普通按鈕</td><td><input type="button" name="ta" id="ta" value="按鈕" /></td><td><input type="hidden" name="ge" id="ge" value="123321" /></td></tr><!--時(shí)間選擇器--><tr><td>日期</td><td><input type="week" /></td></tr></table></form>

div分區(qū)標(biāo)簽

1、可以在這里寫基本的數(shù)據(jù)信息，當(dāng)然也可以寫其他的標(biāo)簽元素

2、起作用是相當(dāng)于在頁(yè)面上開辟了一塊區(qū)域

<div style="height: 300px;background-color: blue;">可以在div中使用基本數(shù)據(jù)<br /><h1>可以在div中使用其他標(biāo)簽</h1><p>我是段落</p> </div>

span范圍標(biāo)簽

1、既可以放基本的數(shù)據(jù)內(nèi)容，也可以放其他的標(biāo)簽內(nèi)容

2、其是作用于一行

<p>我的母親有 <span style="color:blue">藍(lán)色</span> 的眼睛。</p>

效果：

我的母親有 藍(lán)色 的眼睛。

a超級(jí)鏈接標(biāo)簽

<a name="abc" href="http://www.baidu.com">a標(biāo)簽可以實(shí)現(xiàn)超級(jí)鏈接</a>

代碼效果

a標(biāo)簽可以實(shí)現(xiàn)超級(jí)鏈接

在網(wǎng)頁(yè)中點(diǎn)擊一下可以實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)

HTML4和HTML5的區(qū)別

1.DOCTYPE的聲明

HTML4的DOCTYPE聲明方式：

HTML5 的DOCTYPE聲明方式：

2.指定字符編碼：在HTML4中 編碼需要有很多的聲明，但在HTML5中，寫法變得非常簡(jiǎn)單，我們來(lái)看一下代碼

3.新增的結(jié)構(gòu)元素（section、article、aside、header、hgroup、footer、nav、figure）

新增的其他元素（video、audio、embed、mark、 progress、 meter、time、ruby、rt、rp、wbr、canvas、command、details、datagrid、keygen、output、source、menu）

新增的input元素的類型（email、url、number、range、Date Pickers）

4.廢除的元素

能使用CSS代替的元素（basefont、big、center、font、s、tt、u）等等

只有部分瀏覽器支持的元素

其他被廢除的元素

h5中可以使用框架頁(yè)，也可以不使用

小結(jié)：H5語(yǔ)法更加簡(jiǎn)潔，標(biāo)簽更加全面，效果更加美好

頁(yè)面錯(cuò)誤調(diào)試的幾種常見手段

1、直接看源代碼

意思為看開發(fā)工具中寫的源代碼，但不是特別明顯，因?yàn)镠TML是解釋型語(yǔ)言，一行一行解釋，有得自動(dòng)會(huì)解釋通，解釋不通則會(huì)直接跳過(guò)

2、查看頁(yè)面源代碼

在網(wǎng)頁(yè)中右鍵，查看源代碼，會(huì)跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)中，顯示你網(wǎng)頁(yè)中的所有代碼

3、頁(yè)面開發(fā)者控制臺(tái)

F12可以快捷打開頁(yè)面控制臺(tái)，可以在控制臺(tái)中查看你所寫的源代碼，也可以對(duì)單個(gè)元素進(jìn)行審查

總結(jié)

以上是生活随笔為你收集整理的Web前端-HTML基础的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。