資訊專欄INFORMATION COLUMN
摘要：認(rèn)識(shí)什么是是描述制作網(wǎng)頁的語言，指的是超文本標(biāo)記語言。中的列表共有種形式無序列表有序列表以及定義列表。無序列表語法成員內(nèi)容代表整個(gè)列表，代表列表中的每個(gè)成員。
HTML是描述（制作）網(wǎng)頁的語言，指的是超文本標(biāo)記語言（Hyper Text Markup Language）。
超文本：就是指頁面內(nèi)可以包含圖片、鏈接、甚至音樂、程序等非文字元素；
標(biāo)記語言：是一套標(biāo)記標(biāo)簽（markup tag）；
標(biāo)記：一種標(biāo)記符、標(biāo)記標(biāo)簽，可以告訴瀏覽器如何顯示其中的內(nèi)容；
應(yīng)用程序一般分為兩種架構(gòu)：
1、C/S架構(gòu) ：Client客戶端和Server服務(wù)器端架構(gòu)，比如我們使用的QQ、Foxmail等；
2、B/S架構(gòu) ：B瀏覽器/S服務(wù)器結(jié)構(gòu)，比如我們使用淘寶、京東、百度等；能直接通過瀏覽器使用的應(yīng)用都是B/S架構(gòu)；
C/S架構(gòu)特點(diǎn)需要用戶下載安裝軟件并更新麻煩，而B/S架構(gòu)特點(diǎn)是用戶電腦上面只需有瀏覽器就可以使用，所以B/S架構(gòu)是趨勢，我們以后開發(fā)的應(yīng)用也是B/S架構(gòu)。
總結(jié)：B/S架構(gòu)的軟件重要的一塊就是使用瀏覽器，瀏覽器呈現(xiàn)內(nèi)容需要HTML，所以我們必須學(xué)習(xí)HTML；
靜態(tài)網(wǎng)頁：html代碼和內(nèi)容書寫完畢后，頁面的內(nèi)容和顯示效果就基本上不會(huì)發(fā)生變化了——除非你修改頁面代碼。
動(dòng)態(tài)網(wǎng)頁：頁面代碼雖然沒有變，但是顯示的內(nèi)容卻是可以隨著時(shí)間、環(huán)境或者數(shù)據(jù)庫操作的結(jié)果而發(fā)生改變的。動(dòng)態(tài)網(wǎng)頁一般需要與后臺(tái)程序支撐（jsp,aspx，php）。
注意：動(dòng)態(tài)網(wǎng)頁與靜態(tài)網(wǎng)頁的區(qū)分不能以頁面是否有動(dòng)態(tài)效果，而是內(nèi)容本身是否是變化顯示的。
1.File→New→Other→輸入web→選擇Static Web Project
此時(shí)創(chuàng)建的是一個(gè)static靜態(tài)web項(xiàng)目：
?
2.在創(chuàng)建好的WebContent目錄下新建一個(gè)html5格式的.html文件；
?
3.自定義快速創(chuàng)建一個(gè)HTML文件；
在WebContent文件右鍵彈框中自定義顯示HTML創(chuàng)建文件屬性的方法：
Window→Perspective→Customize Perspective→Shortcuts→Web→勾選HTML選項(xiàng)；
?
涉及到網(wǎng)頁的編碼顯示問題，所以一開始我們就需要考慮工程開發(fā)的編碼（UTF-8）的形式。在此說明兩種設(shè)置工程編碼的方式：
①設(shè)置項(xiàng)目工程目錄Workspace下所有工程編碼統(tǒng)一為UTF-8；
?
②設(shè)置單個(gè)工程文件編碼為UTF-8；
在項(xiàng)目工程位置處右鍵，修改Other中的編碼為UTF-8編碼；
下面是一個(gè)H5格式的HTML初始的結(jié)構(gòu)及結(jié)構(gòu)的意義說明：
1 2 4 DOCTYPE html> 5 6 <html> 7 8 <head> 9 13 <meta charset="UTF-8"> 14 15 <meta name="keyword" content="java、大數(shù)據(jù)、golang"> 16 17 <title>Insert title heretitle> 18 head> 19 20 <body> 21 22 body> 23 24 html>
HTML里最重要的也是最豐富的元素，就是HTML里面的標(biāo)簽，作為一名web開發(fā)者，我們有必要了解并熟練掌握這些HTML里的各個(gè)標(biāo)簽元素；下面一一進(jìn)行分類別講解。
在網(wǎng)頁中比較少見的比如<>與&就屬于特殊符號(hào)，這部分標(biāo)簽比較特殊，需要多帶帶拿出來說明一下；
|
格式 |
意義 |
|
|
空格 (小空格) |
|
|
空格 (大空格，占一個(gè)中文位置) |
|
> |
大于 > |
|
< |
小于 < |
|
& |
& |
?
?
?
?
?
?
?
?
?
基本標(biāo)簽是網(wǎng)頁元素的主要組成部分，一般構(gòu)成網(wǎng)頁文字及承載內(nèi)容塊的主要載體標(biāo)簽有以下類型的標(biāo)簽元素：
|
標(biāo)簽 |
標(biāo)簽說明 |
閉合屬性 |
|
i |
斜體(強(qiáng)調(diào)) |
雙標(biāo)簽 |
|
b |
加粗(重要) |
雙標(biāo)簽 |
|
u |
下劃線 |
雙標(biāo)簽 |
|
p |
段落(換行，默認(rèn)情況下和上下的內(nèi)容之間有間距) |
雙標(biāo)簽 |
|
br |
換行 |
單標(biāo)簽 |
|
font |
字體(屬性：size,color,face) |
雙標(biāo)簽 |
|
h(n) |
標(biāo)題 (h1-h6 從大到小的 換行 加粗，上下內(nèi)容之間有距離) 官方：一個(gè)網(wǎng)頁里面，建議只出現(xiàn)一個(gè)h1與h2 |
雙標(biāo)簽 |
|
hr |
水平線 |
單標(biāo)簽 |
|
pre |
預(yù)格式文本 |
雙標(biāo)簽 |
|
span |
行內(nèi)標(biāo)簽 |
雙標(biāo)簽 |
|
div |
塊標(biāo)簽 |
雙標(biāo)簽 |
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
div 、span兩個(gè)標(biāo)簽沒有特殊的功能，只是作為一個(gè)內(nèi)容容器,但使用頻率很高，主要與CSS配合使用。
兩個(gè)都是用于寫CSS樣式。
主要區(qū)別：
div：塊標(biāo)簽（它會(huì)獨(dú)占一行）
span：行內(nèi)標(biāo)簽（它不會(huì)獨(dú)占一行）
直接上代碼說明一下：
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>div與span容器類標(biāo)簽title> 6 head> 7 <body> 8 9 <span style="background-color: red;">span標(biāo)簽span>可以繼續(xù)寫東西 10 11 <div style="background-color: green;">div標(biāo)簽div>這個(gè)地方不能寫東西了 12 body> 13 html>
顯示效果如下：
?
?a:標(biāo)簽代表超連接，可以使多個(gè)頁面可以鏈接起來。
語法：
<a href=”鏈接跳轉(zhuǎn)地址” target=”何處打開目標(biāo)”>鏈接名a>
屬性說明：
|
屬性名 |
屬性值 |
備注 |
|
href |
鏈接的目標(biāo) URL |
打開頁面的地址 |
|
target |
在何處打開目標(biāo) URL) |
_blank:打開新頁面 |
?
?
?
?
?
img:標(biāo)簽可以向頁面展示一個(gè)圖片信息。
語法：
<img alt="規(guī)定圖像的替代文本" src="指定圖片來源" width="設(shè)置圖片的寬度" height="設(shè)置圖片的高度" title="鼠標(biāo)移動(dòng)會(huì)顯示此title內(nèi)容">
注意：
img是一個(gè)行內(nèi)標(biāo)簽；支持多種圖片格式（jpg，bmp，png，gif）；必須要有src屬性；未設(shè)置寬高時(shí)，默認(rèn)是等比顯示
列表標(biāo)簽是頁面開發(fā)中非常常用的一個(gè)種標(biāo)簽，一般用于做某項(xiàng)數(shù)據(jù)的列表或是導(dǎo)航。
HTML中的列表共有3種形式：無序列表、有序列表以及定義列表。
①無序列表ul
語法：
<ul> <li>成員內(nèi)容li> ul>
ul代表整個(gè)列表， li代表列表中的每個(gè)成員。
示例代碼：
<ul> <li>本科生招生li> <li>研究生招生li> <li>留學(xué)生招生 <ul> <li>英國留學(xué)區(qū)li> <li>美國留學(xué)區(qū)li> ul> li> <li>本科生就業(yè)li> <li>研究生就業(yè)li> <li>成教/網(wǎng)絡(luò)/自考li> ul>
顯示效果如下：
②有序列表ol
語法：
<ol> <li>成員內(nèi)容li> ol>
示例代碼：
<ol> <li>本科生招生li> <li>研究生招生li> <li>留學(xué)生招生 <ol> <li>英國留學(xué)區(qū)li> <li>美國留學(xué)區(qū)li> ol> li> <li>本科生就業(yè)li> <li>研究生就業(yè)li> <li>成教/網(wǎng)絡(luò)/自考li> ol>
顯示效果如下：
③定義列表dl
語法：
1 7 <dl> 8 <dt>上層項(xiàng)目dt> 9 <dd>下層項(xiàng)目dd> 10 dl>
示例代碼：
1 <dl> 2 <dt>女裝dt> 3 <dd>連衣裙dd> 4 <dd>牛仔褲dd> 5 6 <dt>男裝dt> 7 <dd>T桖dd> 8 <dd>POLO杉dd> 9 dl>
顯示效果如下：
table標(biāo)簽一般使用來生成表格。
語法：
1 7 <table border="邊框" width="寬度" height="高度"> 8 <caption>表格標(biāo)題caption> 9 <thead> 10 <tr> 11 <th>標(biāo)題th> 12 tr> 13 thead> 14 <tbody> 15 <tr> 16 <td>單元格td> 17 tr> 18 tbody> 19 <tfoot> 20 <tr> 21 <td>結(jié)尾td> 22 tr> 23 tfoot> 24 table>
跨行與跨列的屬性在td標(biāo)簽中：
colspan :合并列； 跨列 跨n列，就把下面的n-1個(gè)td刪除
rowspan :合并行； 跨行跨n行，在把它下面n-1 個(gè) tr的td刪除一個(gè)
示例代碼：
1 4 <table border="1"> 5 <caption>班級(jí)學(xué)生信息表caption> 6 <thead> 7 <tr> 8 <th>姓名th> 9 <th>年齡th> 10 <th>性別th> 11 <th>班級(jí)th> 12 tr> 13 thead> 14 <tbody> 15 <tr> 16 <td>張三td> 17 <td>15td> 18 <td>男td> 19 <td rowspan="4">17級(jí)2班td> 20 tr> 21 <tr> 22 <td>李四td> 23 <td colspan="2">20td> 24 tr> 25 <tr> 26 <td>王五td> 27 <td>18td> 28 <td>男td> 29 tr> 30 <tr> 31 <td>廖七td> 32 <td>15td> 33 <td>女td> 34 tr> 35 tbody> 36 table>
顯示效果如下：
表單主要用于收集用戶數(shù)據(jù)，然后提供表單提交數(shù)據(jù)到后臺(tái)進(jìn)行對(duì)應(yīng)的數(shù)據(jù)參數(shù)的處理。
表單Form標(biāo)簽的基本語法（結(jié)構(gòu)組成）：
1 6 <form action="#id" method="get"> 7 8 <input type="text" name="username"> 9 10 <input type="submit" value="提交注冊(cè)"> 11 form>
input標(biāo)簽中的可選type類型：
|
類型 |
名稱 |
特點(diǎn) |
|
text |
普通文本框 |
?顯示普通文字 |
|
password |
密碼框 |
內(nèi)容顯示為*號(hào) |
|
submit |
提交按鈕 |
點(diǎn)擊后就提示表單 |
|
button |
普通按鈕 |
?普通按鈕，可添加事件方法 |
|
reset |
重置按鈕 |
回到最初狀態(tài)(注：不是清空) |
|
radio |
單選 |
一組單選必需name相同 |
|
checkbox |
多選 |
一組多選必需name相同 |
|
file |
附件 |
可以選擇文件進(jìn)行提交 |
|
hidden |
隱藏域 |
不顯示控件；做數(shù)據(jù)修改時(shí)會(huì)有用 |
|
image |
圖片按鈕 |
必需配合src屬性來展示 |
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
備注input標(biāo)簽元素屬性：
name屬性：
注：表示控件的名稱，只名稱的控件數(shù)據(jù)才會(huì)提交到后臺(tái)
??????? 凡是要提交到后臺(tái)的控件，都要加上name
??????? 用于單選與多選的分組，同一組的元素name需要一致
value屬性：
??? 注：有不同的類型(type)中，value的意義是不同的
??????? text/password 如果我們提交寫上,它就是默認(rèn)值(也是我們要提交的值)，提交value的值
??????? submit/button/reset 表示顯示在按鈕中的文字
??????? radio/checkbox 是一個(gè)元素所代表的值
其它屬性：
??????? maxlength:一個(gè)文本框最多輸入多少字符
??????? readonly:只讀(不可輸入)
??????? disabled：禁用(不可輸入) -> 不會(huì)提交這個(gè)表單元素的數(shù)據(jù)
??????? checked:僅用于 radio/checkbox作用是默認(rèn)幫我們進(jìn)行選擇
代碼示例：
1 6 <form action="" method="get"> 7 12 用戶名：<input type="text" name="username"><br> 13 密碼：<input type="password" name="password"><br> 14 性別：<input type="radio" name="sex" checked="checked">男 15 <input type="radio" name="sex">女<br> 16 愛好：<input type="checkbox" name="hobby">籃球 17 <input type="checkbox" name="hobby">足球 18 <input type="checkbox" name="hobby">舞蹈<br> 19 上傳文件：<input type="file" name="image"><br> 20 個(gè)人簡介：<textarea rows="3" cols="20">textarea><br> 21 26 聯(lián)系地址： <select multiple="multiple" size="2"> 27 <option value="">---請(qǐng)選擇---option> 28 <option value="chengdu" selected="selected">成都option> 29 <option value="chongqing">重慶option> 30 <option value="wuhan">武漢option> 31 select><br> 32 37 <input type="submit" value="提交注冊(cè)"> 38 <input type="reset" value="重置"> 39 <input type="button" value="按鈕"> 40 <input type="image" src="./eategg.gif" alt="圖片不存在" value="圖片提交"> 41 form>
以文件本身為參照路徑進(jìn)行定位。
../代表返回當(dāng)前文件路徑的上一級(jí)目錄；./代表當(dāng)前頁面所在文件夾下的文件路徑
?
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/1039.html
摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...
摘要：樹結(jié)構(gòu)繪制樹測試測試鄭少女哈哈需要注意的點(diǎn)節(jié)點(diǎn)很特殊，和標(biāo)簽之間的不屬于的子節(jié)點(diǎn)。如果緊跟標(biāo)簽后面的不是上面 DOM樹結(jié)構(gòu) 繪制DOM樹 測試 hello, Im come from Mars. by--鄭少女哈哈 需要注意的點(diǎn) html節(jié)點(diǎn)很特殊，html和head標(biāo)簽之間的text不屬于html的子節(jié)...
摘要：類似于頁面加載完畢執(zhí)行的操作，比如默認(rèn)加載商品列表需特別注意，和遍歷是在前，在后。過濾器應(yīng)用在產(chǎn)品金額前加上符號(hào)局部過濾器在實(shí)例中創(chuàng)建過濾器名稱全局過濾器在實(shí)例外建立語法過濾器名稱回調(diào)參數(shù)舉例或者寫成元方法語法全局方法局部方法 mounted mounted 類似于window.onload 頁面加載完畢執(zhí)行的操作，比如默認(rèn)加載商品列表 mounted: function () { ...
摘要：一內(nèi)聯(lián)元素與行元素的區(qū)別內(nèi)聯(lián)元素即行內(nèi)元素。絕對(duì)定位，相對(duì)于定位以外的第一個(gè)父元素進(jìn)行定位，元素脫離文檔流。 一、內(nèi)聯(lián)元素與行元素的區(qū)別 1、內(nèi)聯(lián)元素即行內(nèi)元素。2、內(nèi)聯(lián)元素，在文檔流中擠在一行；不能設(shè)置寬高（即，即使設(shè)置了也不管用，例如a標(biāo)簽）、margin和padding的top和bottom 塊元素，獨(dú)占一行；可以設(shè)置寬高、margin、padding3、可以使用displa...
閱讀 6932·2021-09-22 15:08
閱讀 1933·2021-08-24 10:03
閱讀 2446·2021-08-20 09:36
閱讀 1323·2020-12-03 17:22
閱讀 2481·2019-08-30 15:55
閱讀 913·2019-08-29 16:13
閱讀 3061·2019-08-29 12:41
閱讀 3257·2019-08-26 12:12
