前言:”不肯下一點(diǎn)功夫,永遠(yuǎn)不會(huì)明白自己從何而來店读,又將立足于何處嗦枢。“
你好屯断,我是夢(mèng)陽(yáng)辰文虏,期待與你相遇,和我一起進(jìn)入HTML的世界吧殖演!
文章目錄
01.HTML概述
02.HTML實(shí)戰(zhàn)
03.實(shí)體符號(hào)
04.表格
05.背景顏色和背景圖片
06.圖片標(biāo)簽
07.超鏈接
08.列表
09.表單
10.div和span在網(wǎng)頁(yè)中的應(yīng)用
01.HTML概述
1.知識(shí)的引入:
關(guān)于系統(tǒng)的結(jié)構(gòu):
B/S架構(gòu):
Browser/Server(瀏覽器/服務(wù)器的交互形式)
Browser支持哪些語(yǔ)言:HTML CSS JavaScript
寫HTML CSS JavaScript代碼的叫做:WEB前端開發(fā)工程師氧秘。
前端的圖片需要UI設(shè)計(jì)師完成。
S是服務(wù)器端Server,Server端的語(yǔ)言有很多:如c/c++,Java,python…等等趴久。
B/s架構(gòu)的系統(tǒng)有什么優(yōu)缺點(diǎn)丸相?
優(yōu)點(diǎn):升級(jí)方便,只升級(jí)服務(wù)器端代碼即可彼棍。維護(hù)成本低灭忠。
缺點(diǎn):速度慢,體驗(yàn)差滥酥,界面不炫酷更舞,無(wú)法運(yùn)行大型游戲。(否則卡死)
企業(yè)內(nèi)部的解決方案都是采用B/S的系統(tǒng)坎吻,因?yàn)檗k公不需要選課缆蝉,只要能做數(shù)據(jù)的增刪改查即可。并且維護(hù)成本低。
如:京東刊头、騰訊視頻黍瞧、百度等
C/S架構(gòu)
Clienet/Server(客戶端/服務(wù)器端的交互形式)
缺點(diǎn):升級(jí)麻煩,維護(hù)成本較高原杂。
優(yōu)點(diǎn):速度快印颤,體驗(yàn)好,界面炫酷穿肄。(娛樂性的系統(tǒng)多數(shù)是C/S架構(gòu))
如:各種app年局。
2.什么是HTML:?
HTML 是用來描述網(wǎng)頁(yè)的一種語(yǔ)言咸产。
它包括一系列標(biāo)簽.通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一矢否,使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本脑溢,HTML命令可以說明文字僵朗,圖形、動(dòng)畫屑彻、聲音验庙、表格、鏈接等社牲。
超文本是一種組織信息的方式粪薛,它通過超級(jí)鏈接方法將文本中的文字、圖表與其他信息媒體相關(guān)聯(lián)膳沽。這些相互關(guān)聯(lián)的信息媒體可能在同一文本中汗菜,也可能是其他文件,或是地理位置相距遙遠(yuǎn)的某臺(tái)計(jì)算機(jī)上的文件挑社。這種組織信息方式將分布在不同位置的信息資源用隨機(jī)方式進(jìn)行連接陨界,為人們查找,檢索信息提供方便痛阻。使用HTML語(yǔ)言描述的文件需要通過WWW瀏覽器顯示出效果菌瘪。
HTML:Hyper Text Markup Language(超文本標(biāo)記語(yǔ)言)
HTML 不是一種編程語(yǔ)言,而是一種標(biāo)記語(yǔ)言 (markup language)
標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽 (markup tag)
HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁(yè)
有大量的標(biāo)簽組成阱当,每一個(gè)標(biāo)簽都有開始標(biāo)簽和結(jié)束標(biāo)簽俏扩。
<標(biāo)簽>
<標(biāo)簽>
<標(biāo)簽 屬性名="屬性值" 屬性名="屬性值">
</標(biāo)簽>
</標(biāo)簽>
</標(biāo)簽>
HTML開發(fā)的時(shí)候使用普通的文本編輯器就可以,也可以使用專業(yè)的開發(fā)工具:DreamWeaver,HBuilder…
創(chuàng)建的文件擴(kuò)展名是.html或.htm弊添,直接采用瀏覽器打開HTML文件就是運(yùn)行录淡。
HTML是誰(shuí)制定的?
W3C:世界萬(wàn)維網(wǎng)聯(lián)盟
制訂的協(xié)議:HTML/XML/http協(xié)議/https協(xié)議
W3C制定了HTML的規(guī)范油坝,每個(gè)瀏覽器廠家都會(huì)遵守嫉戚。
HTML目前最高版本是:HTML5.0,簡(jiǎn)稱H5
為了方便中國(guó)web前端程序員的開發(fā)的網(wǎng)站刨裆,提供了大量的幫助文檔,為開發(fā)提供方便彬檀。
W3school:先出現(xiàn)帆啃,和w3c沒有關(guān)系。
W3cschool:后出現(xiàn)窍帝,和w3c沒有關(guān)系努潘。
02.HTML實(shí)戰(zhàn)
1.第一個(gè)HTML:
<!--
1.HTML的注釋
2.加上以下代碼為HTML5,不加為HTML4
3.HTML不區(qū)分大小寫,語(yǔ)法松散
-->
<!doctype heml>
<!--根-->
<html>
<!--頭-->
<head>
<!--網(wǎng)頁(yè)標(biāo)題,顯示在網(wǎng)頁(yè)左上角-->
<title>夢(mèng)陽(yáng)辰坤学,你好疯坤!</title>
</head>
<!--體-->
<body>
歡迎來到HTML!
<body>
</html>
2.基本標(biāo)簽
分段:
<p> 內(nèi)容</p>
標(biāo)題字:
<h1>標(biāo)題</h1>
<h2>標(biāo)題</h2>
<h3>標(biāo)題</h3>
<h4>標(biāo)題</h4>
<h5>標(biāo)題</h5>
<h6>標(biāo)題</h6>
獨(dú)目標(biāo)記:
換行:<!--換行-->
內(nèi)容<br>內(nèi)容
橫線:
<hr>
<hr color='red' width='50%'>
這里單引號(hào),雙引號(hào)都可以,甚至可以不用拥峦。
預(yù)留格式:
<pre>
內(nèi)容
</pre>
其他:
刪除字:
<del>內(nèi)容</del>
插入字:
<ins>內(nèi)容</ins>
粗體字:
<b>內(nèi)容</b>
斜體字:
<i>內(nèi)容</i>
<!--字體標(biāo)簽-->:
<font color='red' size ='50'>內(nèi)容</font>
數(shù)字的右上角加數(shù):如10的平方
10<sup>2</sup>
數(shù)字的右下角加數(shù):
10<sub>m</sub>
03.實(shí)體符號(hào)
當(dāng)內(nèi)容與與HMTL語(yǔ)法相沖突時(shí)采用實(shí)體符號(hào)贴膘。
實(shí)體符號(hào)特點(diǎn):以&開始,以;結(jié)束略号。
b<a>c
<!--<是小于號(hào),>是大于號(hào)-->
空格:
04.表格
1.畫一個(gè)表格
<!doctype html>
<html>
<head>
<title>表格</title>
</head>
<body>
<br><br> <!--表示換行-->
<center><h2>信息表</h2></center>
<hr> <!--橫線-->
<table align="center" border="1px" width="60%" height="150px"> <!--表,居中,邊框?yàn)?像素寬,寬度占比洋闽,也可用像素-->
<tr align="center"> <!--行 ,對(duì)齊方式-->
<td>a</td> <!--一個(gè)小格-->
<td>a</td>
<td>a</td>
</tr>
<tr> <!--行-->
<td>b</td> <!--一個(gè)小格-->
<td>b</td>
<td>b</td>
</tr>
<tr> <!--行-->
<td align="center">c</td> <!--一個(gè)小格,內(nèi)容的對(duì)齊方式-->
<td>c</td>
<td>c</td>
</tr>
</table>
</body>
<html>
2.單元格合并
上下合并:刪除下面的那行玄柠,上行的單元格加rowspan。
左右合并:隨便刪除哪個(gè)诫舅,剩余的哪個(gè)加colspan.
<!doctype html>
<html>
<head>
<title>單元格合并</title>
</head>
<body>
<br><br> <!--表示換行-->
<center><h2>信息表</h2></center>
<hr> <!--橫線-->
<table align="center" border="2px" width="30%" height="150px"> <!--表,居中,邊框?yàn)?像素寬,寬度占比羽利,也可用像素-->
<tr align="center"> <!--行 ,對(duì)齊方式-->
<td>a</td> <!--一個(gè)小格-->
<td>a</td>
<td>a</td>
</tr>
<tr> <!--行-->
<td>a</td> <!--一個(gè)小格-->
<td>a</td>
<td rowspan="2">aaa</td>
</tr>
<tr> <!--行-->
<td align="center">a</td> <!--一個(gè)小格,內(nèi)容的對(duì)齊方式-->
<td>a</td>
<!--
<td>a</td>
-->
</tr>
</table>
</body>
<html>
3.th標(biāo)簽
第一行字段,比td多的是加粗和居中刊懈。
<th>內(nèi)容</th>
<th>內(nèi)容</th>
<th>內(nèi)容</th>
4.thead,tbody,tfoot標(biāo)簽
這三個(gè)这弧, 將表格分割。
thead表示頭虚汛,tboby表示中間內(nèi)容匾浪,tfoot表示腳。
05.背景顏色和背景圖片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景顏色和背景圖片</title>
</head>
<!--
bgcolor:設(shè)置背景色
background:設(shè)置背景圖片
-->
<body bgcolor="red" background="image/ma.jpg">
asdfa
</body>
</html>
06.圖片標(biāo)簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片</title>
</head>
<body>
<img src="ma.jpg" width="100px" title="我是夢(mèng)陽(yáng)辰卷哩!"/><!--值設(shè)置寬度就可以了蛋辈,高度會(huì)隨著改變,-->
<br><br>
<img src="ma.jpg" height="200px"/>
<!--img標(biāo)簽就是圖片標(biāo)簽将谊,
src屬性為路徑冷溶,
width為寬度
titel為鼠標(biāo)懸停時(shí)顯示的信息
alt設(shè)置圖片加載失敗時(shí)顯示的提示信息
開始標(biāo)簽和結(jié)束標(biāo)簽沒有內(nèi)容時(shí),可以省略結(jié)束標(biāo)簽尊浓,并在前面加一個(gè)反斜杠-->
</body>
</html>
07.超鏈接
通過超鏈接瀏覽器可以向服務(wù)器發(fā)送請(qǐng)求逞频。
瀏覽器向服務(wù)器發(fā)送數(shù)據(jù)(請(qǐng)求:request)
服務(wù)器向?yàn)g覽器發(fā)送數(shù)據(jù)(響應(yīng):response)
B/s結(jié)構(gòu)的系統(tǒng):每一個(gè)請(qǐng)求都會(huì)對(duì)應(yīng)一個(gè)響應(yīng)。
B–>請(qǐng)求—>s
s–>響應(yīng)—>s
href:hot references 熱引用
href屬性為一個(gè)地址栋齿,可以是本地路徑
超鏈接有一個(gè)target屬性:
_blank:新窗口
_self:當(dāng)前窗口(默認(rèn)窗口)
_top:頂級(jí)窗口
_parent:父窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超鏈接</title>
</head>
<body>
<a href = "http://www.baidu.com">百度一下</a><br><br><br>
<a href = "https://www.taobao.com">淘寶</a>
<!--
href:hot references 熱引用
href屬性為一個(gè)地址苗胀,可以是本地路徑
超鏈接有一個(gè)target屬性:
_blank:新窗口
_self:當(dāng)前窗口(默認(rèn)窗口)
_top:頂級(jí)窗口
_parent:父窗口
-->
<br><br><br>
<a href = "https://www.taobao.com" target="_blank">淘寶</a>
<!--
圖片超鏈接
-->
<br><br><br>
<a href="https://www.taobao.com/">
<img src="image/ma.jpg" width="30px"/>
淘寶
</a>
</body>
</html>
08.列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>國(guó)</li>
<li>省</li>
<li>市
<ol type="I">
<li>縣</li>
<li>鎮(zhèn)</li>
</ol>
</li>
</ol>
<!--無(wú)序列表-->
<ul type="circle">
<li>夢(mèng)陽(yáng)辰
<ul type="disc">
<li>深圳</li>
<li>北京</li>
<li>上海</li>
</ul>
</li>
<li>星空</li>
<ul type="square">
<li>杭州</li>
<li>西安</li>
</ul>
<li>輕松玩編程</li>
</ul>
</body>
</html>
09.表單
例如以下就是一個(gè)表單:
表單用于接收用戶的信息
表單展現(xiàn)之后襟诸,用戶填寫表單,點(diǎn)擊提交后數(shù)據(jù)傳入到服務(wù)器柒巫。
1.怎么畫表單呢?
使用from標(biāo)簽畫表單励堡。
一個(gè)網(wǎng)頁(yè)當(dāng)中可以有多個(gè)表單。
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>表單</title>
</head>
<body>
<!--action屬性用來指定數(shù)據(jù)提交給哪個(gè)服務(wù)器堡掏。
action屬性和超鏈接的href一樣应结,都可以向服務(wù)器發(fā)送請(qǐng)求(request)
-->
<from action="http://192.168.112.34:2341/adf">
<!-- 畫一個(gè)提交按鈕,這個(gè)按鈕可以提交表單-->
<input type="submit" value="登錄"/><br>
<!-- 普通按鈕不具有提交表單的功能-->
<input type="button" value="按鈕上的文本"/>
</from><br>
<!--表單可以向服務(wù)器發(fā)送請(qǐng)求泉唁,只不過表單發(fā)送請(qǐng)求的同時(shí)可以攜帶數(shù)據(jù)-->
<from action="http://www.baidu.com">
<input type="text"/>
<input type="submit" value="百度"/>
</from>
<br>
<from action="http://localhost:8032/kj">
用戶名<input type = "text"/><br>
密碼<input type="password"/><br>
<input type="submit" value="登錄"/>
</from>
<from action="http://localhost:8080/jd/login">
<table>
<tr>
<td> 用戶名</td>
<td><input type = "text" name="username" /></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="password" name ="usercode"/></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="登錄"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</from>
</body>
</html>
2.用戶注冊(cè)表單
form表單method屬性:
get:采用get方式提交的時(shí)候鹅龄,用戶提交的信息會(huì)顯示在瀏覽器的地址欄上。
post:采用post方式提交的時(shí)候亭畜,用戶提交的信息不會(huì)顯示在瀏覽器的地址欄上扮休。post更安全
method不指定,為get.
超鏈接也可以提交數(shù)據(jù)給服務(wù)器拴鸵,但是提交的內(nèi)容是不變的玷坠。默認(rèn)為get。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
用戶注冊(cè)
用戶名
姓名
密碼
確認(rèn)密碼
性別
興趣愛好
學(xué)歷
簡(jiǎn)介-->
<from action="http://localhost:8080/jd/register" mothod="post">
用戶名
<input type="text" name="username"/>
<br>
密碼
<input type="password" name="usercode"/>
<br>
確認(rèn)密碼
<input type="passcode"/>
<br>
性別
<input type="radio" name="gender" value="1" checked/>男<!--默認(rèn)選中-->
<input type="radio" name ="gender" value="0"/>女<!--單選按鈕必須手動(dòng)指定-->
<br>
興趣愛好
<input type="checkbox" name="hobby" value="basketball" checked/>籃球
<input type="checkbox" name="hobby" value="study"/>學(xué)習(xí)
<input type="checkbox" name="hobby" value="game"/>游戲
<br>
學(xué)歷
<select name="grade">
<option value="HighSchool">高中</option>
<option value="Bachelor'sDegree" selected>本科</option>
<option value="Master'sDegree">碩士</option>
<option value="DoctoralDegree">博士</option>
</select>
<br>
簡(jiǎn)介
<br> <textarea rows="10" cols="66" name="introduce"></textarea>
<br>
<input type="submit" value="注冊(cè)"/>
<input type="reset" value="清空"/>
</from>
</body>
</html>
3.下拉列表支持多選
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--muultiple屬性支持多選劲藐,size顯示條目數(shù)-->
<select multiple="multiple" size="2">
<option>浙江</option>
<option>湖北</option>
<option>江西</option>
</select>
</body>
</html>
4.file控件
可以用于選擇文件八堡,上傳
<input type="file"/>
5.隱藏域hidden控件
用于將數(shù)據(jù)提交給服務(wù)器,但不想讓用戶看見
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<from action="http://localhost:8080/asdf" method="post">
<input type="hidden" name="userid" value="111"/>
用戶代碼<input type="text" name="usercode"/>
<input type="submit" value="提交"/>
</from>
</body>
</html>
5.readonly和disabled
都表示只讀聘芜。
但是readonly可以提交給服務(wù)器兄渺,disabled數(shù)據(jù)不會(huì)提交(即使有name屬性也不會(huì))
<input type="text" name ="usercode" value="112" readonly/>
<input type="text" name ="usercode" value="112" disabled/>
6.input控件的maxlength屬性
表示最多輸入的字符數(shù)量。
7.HTML中元素的id屬性
1.在HTML文檔中汰现,任何元素(節(jié)點(diǎn))都有id屬性挂谍,id屬性是該節(jié)點(diǎn)的唯一標(biāo)識(shí)。所以在同一個(gè)HTML文檔當(dāng)中id值不能重復(fù)瞎饲。
2.提交表單只和name有關(guān)
3.id的作用
為了讓我們更好的獲取元素口叙。
javascript語(yǔ)言:可以對(duì)HTML文檔當(dāng)中的任意節(jié)點(diǎn)進(jìn)行增刪改操作!那么我們應(yīng)該先通過id拿到節(jié)點(diǎn)對(duì)象企软。
4.HTML文檔是一棵樹庐扫,樹上有很多節(jié)點(diǎn),每個(gè)節(jié)點(diǎn)都有唯一的id.
DOM(Document)樹仗哨。
<from id="myform">
<input type ="text" id="username" name="username"/>
<input type ="text" id="usercode" name="usercode"/>
</form>
10.div和span在網(wǎng)頁(yè)中的應(yīng)用
1.div和span都可以稱為圖層形庭。
圖層是為了頁(yè)面更好的布局,學(xué)過ps的小伙伴就估計(jì)知道圖層的概念厌漂。
div會(huì)獨(dú)自占用一行萨醒,而span不會(huì)獨(dú)自占用一行。
table布局不靈活苇倡,太石板富纸。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>hello Meng</div>
<div>hello Yangv>
<div>Chen
<div>Xingkongiv>
<span id="sqan1">first span</span>
<span id="sqan1">second span</span>
</body>
</html>