Web前端-HTML基础
Web前端
- Web前端基礎(chǔ)
- HTML
- 編程中命名規(guī)范
- 網(wǎng)頁的基本結(jié)構(gòu)：
- 網(wǎng)頁運(yùn)行的原理：
- HTML常見標(biāo)簽
- 標(biāo)題標(biāo)簽
- 段落標(biāo)簽
- 水平線標(biāo)簽
- 有序列表標(biāo)簽
- 無序列表標(biāo)簽
- 描述標(biāo)簽
- 表格標(biāo)簽
- 表單
- form表單中常用的表單元素
- div分區(qū)標(biāo)簽
- span范圍標(biāo)簽
- a超級鏈接標(biāo)簽
- HTML4和HTML5的區(qū)別
- 頁面錯(cuò)誤調(diào)試的幾種常見手段
Web前端基礎(chǔ)
HTML：是一種編程語言，意思為“擴(kuò)展標(biāo)記語言”，可以簡單的理解為一個(gè)“毛坯房子”
CSS：是層疊樣式表，是一種技術(shù)，其主要目的是為了幫助美化HTML頁面的，可以簡單的理解為“裝修過的房子”
JS：是一種編程語言，起作用是幫助美化國的頁面使得其更加只能，更加人性化，可以簡單的理解為“智能家居房”
Jquery: 是js封裝后的一個(gè)組件，可以用更加簡潔的代碼使得頁面更加美化更加智能更加人性化通用性更強(qiáng)，可以簡單的理解為“微型智能家居助手”
HBUlider:是基于eclipse用java開發(fā)一款軟件，所以在運(yùn)行的時(shí)候要有java的環(huán)境，（但是pycharm安裝的時(shí)候默認(rèn)是打上勾（自動(dòng)安裝且配置了環(huán)境變量）的所以就避免了）
HTML
HTML：超級文本標(biāo)記語言是標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用，也是一種規(guī)范，一種標(biāo)準(zhǔn)，
它通過標(biāo)記符號來標(biāo)記要顯示的網(wǎng)頁中的各個(gè)部分。網(wǎng)頁文件本身是一種文本文件，通過在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等 ）。瀏覽器按順序閱讀網(wǎng)頁文件，然后根據(jù)標(biāo)記符解釋和顯示其標(biāo)記的內(nèi)容，對書寫出錯(cuò)的標(biāo)記將不指出其錯(cuò)誤，且不停止其解釋執(zhí)行過程，編制者只能通過顯示效果來分析出錯(cuò)原因和出錯(cuò)部位。但需要注意的是，對于不同的瀏覽器，對同一標(biāo)記符可能會(huì)有不完全相同的解釋，因而可能會(huì)有不同的顯示效果。
簡而言之：
1.就是一種編寫網(wǎng)頁的語言
2.且是運(yùn)行在瀏覽器端的
3.且是解釋（是由瀏覽器自動(dòng)解釋的）執(zhí)行的
2.網(wǎng)頁的基本結(jié)構(gòu)：
：標(biāo)識出當(dāng)前文件是html5,其作用是告訴瀏覽器不要解釋錯(cuò)誤，要嚴(yán)格按照W3C標(biāo)準(zhǔn)模式進(jìn)行解析備注：W3C是一個(gè)國際標(biāo)準(zhǔn)組織
網(wǎng)頁的基本結(jié)構(gòu)：
頭：
主體：
3.網(wǎng)頁運(yùn)行的原理：
html文件—>瀏覽器解析（Webkit渲染引擎）—>在頁面上呈現(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雖說效果一樣，但是在引擎渲染的時(shí)候還是默認(rèn)先找.html
2）
雖然效果能出來，但是在不同瀏覽器的時(shí)候也是會(huì)有差異的
網(wǎng)頁的基本結(jié)構(gòu)：
：標(biāo)識出當(dāng)前文件是html5,其作用是告訴瀏覽器不要解釋錯(cuò)誤，要嚴(yán)格按照W3C標(biāo)準(zhǔn)模式進(jìn)行解析備注：W3C是一個(gè)國際標(biāo)準(zhǔn)組織
網(wǎng)頁的基本結(jié)構(gòu)：
頭：
主體：
網(wǎng)頁運(yùn)行的原理：
html文件—>瀏覽器解析（Webkit渲染引擎）—>在頁面上呈現(xiàn)效果
HTML常見標(biāo)簽
標(biāo)題標(biāo)簽
用于來存放標(biāo)題內(nèi)容
<h1>...</h1> <!--標(biāo)題標(biāo)簽--> <h1>第一章</h1> <!--將第一章設(shè)為一級標(biāo)題-->段落標(biāo)簽
用來存放正文
<p></p> <!--段落標(biāo)簽：主要用于存放一些內(nèi)容-->水平線標(biāo)簽
用來當(dāng)作網(wǎng)頁中的分割線
<hr/> <!--水平線標(biāo)簽--> <!--類似于 -------------- 獨(dú)占一行-->有序列表標(biāo)簽
創(chuàng)建一個(gè)有序列表
<ol><li></li> </ol> <!--有序列表標(biāo)簽-->無序列表標(biāo)簽
創(chuàng)建一個(gè)無序列表
<ul><li></li> </ul> <!--無序列表標(biāo)簽-->描述標(biāo)簽
用來描述一些圖片、視頻的標(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屬性可以控制左對齊、右對齊、居中對齊等功能
border用來增加邊框， bordercolor是設(shè)置邊框的顏色
colspan：列合并單元格
rowspan: 行合并單元格
表單
格式為：
… 文本框、按鈕等表單元素…
表單提交地址：指定提交后，由服務(wù)器上哪個(gè)處理程序處理
提交方法：指定向服務(wù)器提交的方法，一般為post或get方法, post方法比較安全，但是get可以攜帶參數(shù)進(jìn)行傳遞且參數(shù)大小不能超過2K
擴(kuò)展知識點(diǎn)：post和get的區(qū)別
1.get是從服務(wù)器上獲取數(shù)據(jù)，post是向服務(wù)器傳送數(shù)據(jù)。
2.get是把參數(shù)數(shù)據(jù)隊(duì)列加到提交表單的action屬性所指的URL中，在URL中可以看到。post是通過HTTP post機(jī)制，用戶看不到這個(gè)過程 。
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>---請選擇---</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)于在頁面上開辟了一塊區(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超級鏈接標(biāo)簽
<a name="abc" href="http://www.baidu.com">a標(biāo)簽可以實(shí)現(xiàn)超級鏈接</a>代碼效果
a標(biāo)簽可以實(shí)現(xiàn)超級鏈接
在網(wǎng)頁中點(diǎn)擊一下可以實(shí)現(xiàn)頁面的跳轉(zhuǎn)
HTML4和HTML5的區(qū)別
1.DOCTYPE的聲明
HTML4的DOCTYPE聲明方式：
HTML5 的DOCTYPE聲明方式：
2.指定字符編碼：在HTML4中 編碼需要有很多的聲明，但在HTML5中，寫法變得非常簡單，我們來看一下代碼
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中可以使用框架頁，也可以不使用
小結(jié)：H5語法更加簡潔，標(biāo)簽更加全面，效果更加美好
頁面錯(cuò)誤調(diào)試的幾種常見手段
1、直接看源代碼
意思為看開發(fā)工具中寫的源代碼，但不是特別明顯，因?yàn)镠TML是解釋型語言，一行一行解釋，有得自動(dòng)會(huì)解釋通，解釋不通則會(huì)直接跳過
2、查看頁面源代碼
在網(wǎng)頁中右鍵，查看源代碼，會(huì)跳轉(zhuǎn)到另一個(gè)網(wǎng)頁中，顯示你網(wǎng)頁中的所有代碼
3、頁面開發(fā)者控制臺
F12可以快捷打開頁面控制臺，可以在控制臺中查看你所寫的源代碼，也可以對單個(gè)元素進(jìn)行審查
總結(jié)
以上是生活随笔為你收集整理的Web前端-HTML基础的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 人工鱼群算法Matlab实现
- 下一篇： [hackinglab][CTF][脚本