整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
本標(biāo)簽: 32
例:
<dl>
<dt>標(biāo)題1</dt>
<dd>內(nèi)容11</dd>
<dd>內(nèi)容12</dd>
<dt>標(biāo)題2</dt>
<dd>內(nèi)容21</dd>
<dd>內(nèi)容22</dd>
</dl>
target="...",決定鏈接源在什么地方顯示(用戶(hù)自定義的名字,_blank,_parent,_self,_top);
rel="...",發(fā)送鏈接的類(lèi)型;
rev="...",保存鏈接的類(lèi)型;
accesskey="...",指定該元素的熱鍵;
shape="...",允許我們使用已定義的形狀定義客戶(hù)端的圖形鏡像(default,rect,circle,poly);
coord="...",使用像素或者長(zhǎng)度百分比來(lái)定義形狀的尺寸;
tabindex="...",使用定義過(guò)的tabindex元素設(shè)置在各個(gè)元素之間的焦點(diǎn)獲取順序(使用tab鍵使元素獲得焦點(diǎn)).
action="...",接收數(shù)據(jù)的服務(wù)器的URL;
method="...",HTTP的方法(get,,post),其中g(shù)et是被反對(duì)使用的;
enctype="...",指定MIME(Internet媒體類(lèi)型);
onsubmit="...",當(dāng)提交表單時(shí)發(fā)生的內(nèi)部事件;
noreset="...",在重新設(shè)置表單時(shí)發(fā)生的內(nèi)部事件;
target="...",決定把內(nèi)容顯示在什么地方(_blank,_parent,_self,_top)
disabled="...",把按鈕的狀態(tài)設(shè)置為不能;
name="...",按鈕的控制名,value="...",按鈕的值;
type="...",按鈕的類(lèi)型(button,,submit,,reset);
type="...",用于輸入控件的類(lèi)型(text,password,checkbox,radio,submit,reset,file,hidden,image,button);
name="...",控件的控制名(要求是除了submit和reset之外的任何名字);
value="...",控件的初始值;
checked="...",把一個(gè)單選鈕設(shè)置為選中的狀態(tài);
disabled="...",把控件的狀態(tài)設(shè)置為不能使用;
readonly="...",只對(duì)輸入密碼的文本框使用;
size="...",表示以像素為單位的除了文本框和密碼框控件之外的其它控件的寬度,它是用來(lái)指定字符的數(shù)目;
src="...",一個(gè)圖像控件的URL;
maxlength="...",指定可以輸入的最多的字符數(shù)目;
alt="...",另外一種文本描述;
usemap="...",到客戶(hù)端圖形鏡像的URL;
align="...",被反對(duì).控制對(duì)齊方式(left,,center,,right,,justify);
tabindex="...",通過(guò)定義的tabindex值確定在不同元素之間獲得焦點(diǎn)的順序;
onfocus="...",當(dāng)元素獲得焦點(diǎn)時(shí)發(fā)生的事件;
onblur="...",當(dāng)元素失去焦點(diǎn)時(shí)發(fā)生的事件;
onselect="...",當(dāng)元素被選中時(shí)發(fā)生的事件;
onchang="...",當(dāng)元素狀態(tài)被改變時(shí)發(fā)生的事件;
accept="...",允許上載的文件類(lèi)型.
scr="...",定義在幀中顯示的內(nèi)容的來(lái)源;
frameborder="...",定義幀之間的邊界(0或1);
align="...",被反對(duì),控制對(duì)齊方式(left,,center,,right,,justify);
height="...",幀的高度,width="..."幀的寬度;
.標(biāo)簽語(yǔ)義化
提到標(biāo)簽，很多剛?cè)腴T(mén)前端開(kāi)發(fā)的人，肯定都會(huì)很納悶，這么多HTML標(biāo)簽我如何記住呢？我又應(yīng)該根據(jù)什么依據(jù)去正確使用它呢？其實(shí)這樣的問(wèn)題，我剛開(kāi)始和大家一樣苦悶，但是在我學(xué)習(xí)Web頁(yè)面開(kāi)發(fā)的過(guò)程中，然后不斷的積累，不斷的總結(jié)，發(fā)現(xiàn)要想記住HTML標(biāo)簽以及怎樣更好的去使用這些標(biāo)簽，需要做到以下三點(diǎn)：
第一點(diǎn)：不要死記硬背，沒(méi)意義，只需要記住常用的哪幾個(gè)足矣。
第二點(diǎn)：根據(jù)內(nèi)容選擇使用HTML標(biāo)簽，什么意思呢？見(jiàn)下文分解。
第三點(diǎn)：遵循W3C的規(guī)范。
首先，第一點(diǎn)咱們就不用說(shuō)，不讓死記硬背，就是要多寫(xiě)頁(yè)面，多敲代碼，久而久之孰能生巧，巧能生花，慢慢的你就能記住這些標(biāo)簽了，而且在開(kāi)發(fā)頁(yè)面的過(guò)程中，你們會(huì)發(fā)現(xiàn)，咱們最常用的也就是那么幾個(gè)而已。
其次，第二點(diǎn)根據(jù)內(nèi)容選擇使用HTML標(biāo)簽，這一點(diǎn)非常關(guān)鍵，因?yàn)槟阏莆樟诉@一點(diǎn)，你能很好地去使用HTML標(biāo)簽，并且能讓頁(yè)面變得很優(yōu)質(zhì)，這也會(huì)提高你網(wǎng)頁(yè)被搜索引擎收錄。
最后，也就是第三點(diǎn)，這一點(diǎn)自然不用懷疑，如果要想讓頁(yè)面更好的在不同的瀏覽器中呈現(xiàn)出一致的效果，那么必須遵循W3C的規(guī)范。
說(shuō)了這么多，只是一些學(xué)習(xí)需要注意的問(wèn)題，下面才是真正解開(kāi)怎樣去使用和記住標(biāo)簽這個(gè)謎團(tuán)的方法。
我們?cè)谑褂脴?biāo)簽的過(guò)程中，大家會(huì)發(fā)現(xiàn)類(lèi)似的標(biāo)簽，比如標(biāo)題標(biāo)簽（h1-h6）、p（段落標(biāo)簽）、a（超鏈接標(biāo)簽）以及圖片標(biāo)簽（img）等，通過(guò)這些標(biāo)簽的名稱(chēng)，咱們是不是不難理解吧，很直觀的就知道這些標(biāo)簽該怎么，用于何處。而這些名稱(chēng)的含義就是我們所說(shuō)的標(biāo)簽語(yǔ)義化。隨著智能手機(jī)的出來(lái)，移動(dòng)Web都是通過(guò)H5去開(kāi)發(fā)頁(yè)面，而H5中的HTML標(biāo)簽就比之前版本的HTML標(biāo)簽更加具有語(yǔ)義化。
那么什么是標(biāo)簽語(yǔ)義化呢？所謂的標(biāo)簽語(yǔ)義化，指的就是標(biāo)簽所代表的含義。咱們可以通過(guò)標(biāo)簽的含義，正確地去使用它。
標(biāo)簽語(yǔ)義化的作用：
如下圖所示，通過(guò)使用語(yǔ)義化標(biāo)簽和沒(méi)使用任何標(biāo)簽，就能直觀感受到語(yǔ)義化標(biāo)簽的好處。
普通的文本和使用語(yǔ)義化標(biāo)簽后的效果對(duì)比圖
那么如何去判斷一個(gè)頁(yè)面中，語(yǔ)義化是否良好呢？很簡(jiǎn)單，直接扒掉CSS這層漂亮的衣服，當(dāng)我們把CSS去掉后，如果頁(yè)面中的結(jié)構(gòu)依然組織有序，并且有良好的可讀性，那么它就是非常良好的。
如何去使用這些標(biāo)簽?zāi)兀渴紫雀鶕?jù)內(nèi)容確定語(yǔ)義化的標(biāo)簽，其次再根據(jù)呈現(xiàn)需求，使用CSS樣式。因此HTML標(biāo)簽并非通過(guò)死記硬背，而是通過(guò)在使用的過(guò)程中，利用HTML標(biāo)簽的語(yǔ)義化去記憶。如下圖所示，通過(guò)使用語(yǔ)義化標(biāo)簽，瞬間就能把普通的文本，以更清晰的結(jié)構(gòu)呈現(xiàn)出來(lái)。
使用語(yǔ)義化的普通文本，變得更為結(jié)構(gòu)清晰
2.常用標(biāo)簽分類(lèi)匯總
通常我們常見(jiàn)的標(biāo)簽有標(biāo)題標(biāo)簽、段落標(biāo)簽、水平線(xiàn)標(biāo)簽、換行標(biāo)簽以及div和span標(biāo)簽，這些標(biāo)簽又被統(tǒng)稱(chēng)為排版標(biāo)簽。
在開(kāi)發(fā)中，排版標(biāo)簽主要是和CSS搭配使用，主要是用于顯示網(wǎng)頁(yè)的整體結(jié)構(gòu)，也是網(wǎng)頁(yè)布局中常用的標(biāo)簽。下面我一一了解一下。
排版標(biāo)簽：
【1】標(biāo)題標(biāo)簽（h1-h6）
標(biāo)題標(biāo)簽的使用
呈現(xiàn)的效果如下：
呈現(xiàn)的效果
一句話(huà)總結(jié)：使用了標(biāo)題標(biāo)簽的文字會(huì)加粗，會(huì)根據(jù)級(jí)別顯示文字的大小，并且一行只能放一個(gè)標(biāo)題。
【2】段落標(biāo)簽（p）
p標(biāo)簽語(yǔ)法格式
【3】水平線(xiàn)標(biāo)簽（hr）
【4】換行標(biāo)簽（br）
文本
呈現(xiàn)效果：
使用br標(biāo)簽后的效果
【5】div和span標(biāo)簽
最后給大家來(lái)一個(gè)完美的總結(jié)：
排版標(biāo)簽的匯總
難道這就完了嗎？咱們的標(biāo)簽就只有這些常用的嗎？那當(dāng)然不是，咱們接下來(lái)再看我們的文本格式化標(biāo)簽。
文本格式化標(biāo)簽
文本格式化標(biāo)簽的作用：通常文本格式化標(biāo)簽主要用于網(wǎng)頁(yè)中文字樣式的設(shè)置，比如字體加粗、斜體或下劃線(xiàn)等效果，當(dāng)然后期也會(huì)通過(guò)CSS樣式來(lái)實(shí)現(xiàn)，會(huì)更加完美。
常見(jiàn)的文本格式化標(biāo)簽如下：
文本格式化標(biāo)簽
它們分別的區(qū)別：
我么網(wǎng)頁(yè)中除了排版標(biāo)簽、文本格式化標(biāo)簽，當(dāng)然還少不了圖片標(biāo)簽（img），通過(guò)圖片的展示，會(huì)讓整個(gè)頁(yè)面更加的生動(dòng)形象。那么下面再來(lái)看一下這個(gè)標(biāo)簽吧。
圖片標(biāo)簽（img）
img標(biāo)簽屬性
標(biāo)簽屬性的特點(diǎn)：
圖片標(biāo)簽屬性使用
鏈接標(biāo)簽
a標(biāo)簽的常見(jiàn)屬性
提示：
內(nèi)部鏈接地址
注釋標(biāo)簽
注釋標(biāo)簽
好了，各位小伙伴，今天我就給大家分享到這兒了，希望我給大家總結(jié)的內(nèi)容，能幫到正在瀏覽我這篇內(nèi)容的前端開(kāi)發(fā)者，也希望你們有所收獲。如果喜歡的，可以點(diǎn)擊關(guān)注，會(huì)繼續(xù)給大家分享更多的內(nèi)容。
今年國(guó)慶假期終于可以憋在家里了不用出門(mén)了，不用出去看后腦了，真的是一種享受。這么好的光陰怎么浪費(fèi)，睡覺(jué)、吃飯、打豆豆這怎么可能（耍多了也煩），完全不符合我們程序員的作風(fēng)，趕緊起來(lái)把文章寫(xiě)完。
這篇文章比較基礎(chǔ)，在國(guó)慶期間的業(yè)余時(shí)間寫(xiě)的，這幾天又完善了下，力求把更多的前端所涉及到的關(guān)于文件上傳的各種場(chǎng)景和應(yīng)用都涵蓋了,若有疏漏和問(wèn)題還請(qǐng)留言斧正和補(bǔ)充。
以下是本文所涉及到的知識(shí)點(diǎn)，break or continue ?
原理很簡(jiǎn)單，就是根據(jù) http 協(xié)議的規(guī)范和定義，完成請(qǐng)求消息體的封裝和消息體的解析，然后將二進(jìn)制內(nèi)容保存到文件。
我們都知道如果要上傳一個(gè)文件，需要把 form 標(biāo)簽的enctype設(shè)置為multipart/form-data,同時(shí)method必須為post方法。
那么multipart/form-data表示什么呢？
multipart互聯(lián)網(wǎng)上的混合資源，就是資源由多種元素組成，form-data表示可以使用HTML Forms 和 POST 方法上傳文件，具體的定義可以參考RFC 7578。
multipart/form-data 結(jié)構(gòu)
看下 http 請(qǐng)求的消息體
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDCntfiXcSkPhS4PN 表示本次請(qǐng)求要上傳文件，其中boundary表示分隔符，如果要上傳多個(gè)表單項(xiàng)，就要使用boundary分割，每個(gè)表單項(xiàng)由———XXX開(kāi)始，以———XXX結(jié)尾。
每一個(gè)表單項(xiàng)又由Content-Type和Content-Disposition組成。
Content-Disposition: form-data 為固定值，表示一個(gè)表單元素，name 表示表單元素的 名稱(chēng)，回車(chē)換行后面就是name的值，如果是上傳文件就是文件的二進(jìn)制內(nèi)容。
Content-Type：表示當(dāng)前的內(nèi)容的 MIME 類(lèi)型，是圖片還是文本還是二進(jìn)制數(shù)據(jù)。
解析
客戶(hù)端發(fā)送請(qǐng)求到服務(wù)器后，服務(wù)器會(huì)收到請(qǐng)求的消息體，然后對(duì)消息體進(jìn)行解析，解析出哪是普通表單哪些是附件。
可能大家馬上能想到通過(guò)正則或者字符串處理分割出內(nèi)容，不過(guò)這樣是行不通的，二進(jìn)制buffer轉(zhuǎn)化為string,對(duì)字符串進(jìn)行截取后，其索引和字符串是不一致的，所以結(jié)果就不會(huì)正確，除非上傳的就是字符串。
不過(guò)一般情況下不需要自行解析，目前已經(jīng)有很成熟的三方庫(kù)可以使用。
至于如何解析，這個(gè)也會(huì)占用很大篇幅，后面的文章在詳細(xì)說(shuō)。
使用 form 表單上傳文件
在 ie時(shí)代，如果實(shí)現(xiàn)一個(gè)無(wú)刷新的文件上傳那可是費(fèi)老勁了，大部分都是用 iframe 來(lái)實(shí)現(xiàn)局部刷新或者使用 flash 插件來(lái)搞定，在那個(gè)時(shí)代 ie 就是最好用的瀏覽器（別無(wú)選擇）。
DEMO
這種方式上傳文件，不需要 js ，而且沒(méi)有兼容問(wèn)題，所有瀏覽器都支持，就是體驗(yàn)很差，導(dǎo)致頁(yè)面刷新，頁(yè)面其他數(shù)據(jù)丟失。
HTML
<form method="post" action="http://localhost:8100" enctype="multipart/form-data">
選擇文件:
<input type="file" name="f1"/> input 必須設(shè)置 name 屬性，否則數(shù)據(jù)無(wú)法發(fā)送<br/>
<br/>
標(biāo)題：<input type="text" name="title"/><br/><br/><br/>
<button type="submit" id="btn-0">上 傳</button>
</form>
復(fù)制代碼服務(wù)端文件的保存基于現(xiàn)有的庫(kù)koa-body結(jié)合 koa2實(shí)現(xiàn)服務(wù)端文件的保存和數(shù)據(jù)的返回。
在項(xiàng)目開(kāi)發(fā)中，文件上傳本身和業(yè)務(wù)無(wú)關(guān)，代碼基本上都可通用。
在這里我們使用koa-body庫(kù)來(lái)實(shí)現(xiàn)解析和文件的保存。
koa-body 會(huì)自動(dòng)保存文件到系統(tǒng)臨時(shí)目錄下，也可以指定保存的文件路徑。
然后在后續(xù)中間件內(nèi)得到已保存的文件的信息，再做二次處理。
NODE
/**
* 服務(wù)入口
*/
var http = require('http');
var koaStatic = require('koa-static');
var path = require('path');
var koaBody = require('koa-body');//文件保存庫(kù)
var fs = require('fs');
var Koa = require('koa2');
var app = new Koa();
var port = process.env.PORT || '8100';
var uploadHost= `http://localhost:${port}/uploads/`;
app.use(koaBody({
formidable: {
//設(shè)置文件的默認(rèn)保存目錄，不設(shè)置則保存在系統(tǒng)臨時(shí)目錄下 os
uploadDir: path.resolve(__dirname, '../static/uploads')
},
multipart: true // 開(kāi)啟文件上傳，默認(rèn)是關(guān)閉
}));
//開(kāi)啟靜態(tài)文件訪(fǎng)問(wèn)
app.use(koaStatic(
path.resolve(__dirname, '../static')
));
//文件二次處理，修改名稱(chēng)
app.use((ctx) => {
var file = ctx.request.files.f1;//得道文件對(duì)象
var path = file.path;
var fname = file.name;//原文件名稱(chēng)
var nextPath = path+fname;
if(file.size>0 && path){
//得到擴(kuò)展名
var extArr = fname.split('.');
var ext = extArr[extArr.length-1];
var nextPath = path+'.'+ext;
//重命名文件
fs.renameSync(path, nextPath);
}
//以 json 形式輸出上傳文件地址
ctx.body = `{
"fileUrl":"${uploadHost}${nextPath.slice(nextPath.lastIndexOf('/')+1)}"
}`;
});
/**
* http server
*/
var server = http.createServer(app.callback());
server.listen(port);
console.log('demo1 server start ...... ');
復(fù)制代碼CODE
https://github.com/Bigerfe/fe-learn-code/
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
