「前端」HTML之結(jié)構(gòu)

天繼續(xù)為大家分享前端的知識，如果對前端比較感興趣的小伙伴，可以關(guān)注我，我會更大家繼續(xù)分享更多與前端相關(guān)的內(nèi)容，當(dāng)然如果內(nèi)容中又不當(dāng)?shù)幕蛘呶淖皱e誤的，歡迎大家在評論區(qū)留言，我會及時修改糾正。

1.初識HTML

HTML指的是超文本標(biāo)記語言（Hyper Text Markup Language），是用來描述網(wǎng)頁的一種語言。
HTML不是一種編程語言，而是一種標(biāo)記語言（markup language），標(biāo)記語言是一套標(biāo)記標(biāo)簽（markup tag）。
HTML標(biāo)簽描述網(wǎng)頁元素，比如圖片標(biāo)簽、文字標(biāo)簽、鏈接標(biāo)簽等。
HTML標(biāo)簽有自己的語法規(guī)范，并且所有的HTML標(biāo)簽都是用尖括號（<>）包起來。

2.HTML骨架結(jié)構(gòu)

HTML基本骨架語法如下所示：

HTML基本骨架結(jié)構(gòu)

HTML骨架標(biāo)簽說明：

HTML骨架標(biāo)簽說明

下面通過對HTML骨架的基本認(rèn)識，你也可以小試牛刀，打開記事本，新建一個帶有HTML骨架標(biāo)簽的.txt文件。

在.txt中寫入HTML骨架標(biāo)簽，保存，并將.txt的后綴名修改為.html，右鍵單擊你寫好的文件，然后選擇你要顯示的瀏覽器，本人習(xí)慣用谷歌的瀏覽器，這個根據(jù)個人的習(xí)慣來選擇就好了。

示例代碼如下：

我的第一個HTML頁面

注意：HTML標(biāo)簽名、標(biāo)簽的屬性名以及大部分屬性值都統(tǒng)一用小寫，不要問我為什么，這是人家W3C的規(guī)范，咱們按規(guī)范行事就好啦。

正確示范：

書寫規(guī)范

錯誤示范：

錯誤的規(guī)范

3.HTML標(biāo)簽的分類

HTML標(biāo)簽：在HTML頁面中，帶有“<>”尖括號符號的元素被稱為HTML標(biāo)簽元素，如上面的<html>、<head>、<body>，它們都是用尖括號包起來，而且這幾個標(biāo)簽還是HTML的骨架結(jié)構(gòu)標(biāo)簽，就好比人之所以能站立，就是因為有骨架支撐。

通常我們將其分為常規(guī)元素和空元素，以下是對兩種類型的介紹。

常規(guī)元素（雙標(biāo)簽）

語法：<標(biāo)簽名>內(nèi)容</標(biāo)簽名>，如<body>我的網(wǎng)頁內(nèi)容</body>。

說明：

該語法中"<標(biāo)簽名>"表示該標(biāo)簽的作用開始，一般稱為"開始標(biāo)簽（start tag）"，"</標(biāo)簽名>"表示該標(biāo)簽的作用結(jié)束，一般稱為"結(jié)束標(biāo)簽（end tag）"。
和開始標(biāo)簽相比，結(jié)束標(biāo)簽只是在前面加了一個封閉符"/"。
提示：HTML多數(shù)都是雙標(biāo)簽。

空元素（單標(biāo)簽或自封閉標(biāo)簽）

語法：<標(biāo)簽名 /> ，比如 <br />

說明：

空元素用單標(biāo)簽來表示。簡單說，就是里邊不需要包含內(nèi)容，屬于自封閉標(biāo)簽。
提示：此類標(biāo)簽較少，只需要用到的時候記住就行，在開發(fā)過程中自己不斷的積累。

4.HTML標(biāo)簽的關(guān)系

標(biāo)簽之間的關(guān)系主要是針對雙標(biāo)簽，雙標(biāo)簽之間的關(guān)系分為如下幾種。

嵌套關(guān)系：

嵌套關(guān)系

并列關(guān)系：

并列關(guān)系

提示：在開發(fā)的過程中，如果標(biāo)簽之間是嵌套關(guān)系，那么子元素可以通過tab鍵進(jìn)行縮進(jìn)，讓其結(jié)構(gòu)和格式更加的清晰。

5.前端開發(fā)工具

之前我們是通過記事本來寫html骨架結(jié)構(gòu)，會發(fā)現(xiàn)這種情況針對幾行代碼，還是能消化的，但是碰上幾千甚至幾萬以及更多，此時應(yīng)該怎么辦呢？這個時候就得用到我們的前端開發(fā)工具，通過前端開發(fā)工具，可以更快更高效的提高我們的開發(fā)效率，那我們常見的前端開發(fā)工具有如下幾種：

常見的前端開發(fā)工具

說明：

Dreamweaver：學(xué)校用得多。
Sublime：推薦使用，輕量級，效率高，打開速度快，優(yōu)點多，但是使用插件的時候，需要下載哦。
WebStorm：這個我沒用過，但是有的人很喜歡，屬于付費的。
Hbuilder：推薦使用，輕量級，免費，效率高，打開速度快，現(xiàn)在都是使用HbuilderX版本，這個是可以去官網(wǎng)下載到的，重點它免費、免費、免費，重要的事情說三遍?。。?。
VS Code：這個是微軟的，也屬于開源免費的，功能很強大的，尤其是在JavaScript開發(fā)方面，也是本人推薦使用的。

提示：Hbuilder和VS Code誰更好？我只能說各有千秋，根據(jù)個人的習(xí)慣，我個人就比較喜歡Hbuilder，偶爾會用VS Code，如果你習(xí)慣用VS Code，繼續(xù)用就行了。

以上開發(fā)工具的安裝使用，在網(wǎng)絡(luò)上都會有很多資料，可以動動小手指就能查到哦。

今天就分享到這兒吧，如果喜歡的記得點關(guān)注哦，也歡迎在留言區(qū)留言。

鍵菜單是軟件設(shè)計中常用的功能之一，但這個功能在Axure設(shè)計時，需要聯(lián)合中繼器才能實現(xiàn)一些大家認(rèn)知的效果。這篇文章，作者分享了這一功能的操作，推薦給大家。

右鍵菜單在軟件系統(tǒng)中是非常常見的，他可以作為一個快捷方式，里邊包含各種命令可以選擇。那今天作者就教大家，如果用中繼器制作一個右鍵顯示菜單的的原型模板，結(jié)合動態(tài)面板，實現(xiàn)快捷菜單頁面跳轉(zhuǎn)的效果。

【原型效果】

點擊鼠標(biāo)右鍵，彈出菜單，彈出的位置為鼠標(biāo)指針的位置；

彈出的菜單由中繼器制作，在中繼器表格中輸入選項后自動生成交互效果；

點擊菜單選項，可以實現(xiàn)頁面的跳轉(zhuǎn)，案例中是中繼器和動態(tài)面板間的聯(lián)動。

【制作教程】一、重點難點和解決思路講解

其實做鼠標(biāo)右鍵菜單的最主要的難點是鼠標(biāo)右鍵這個動作，因為Axure是通過瀏覽器來發(fā)布預(yù)覽的，而瀏覽器自身也有右鍵菜單的快捷操作，所以當(dāng)我們做鼠標(biāo)右鍵這個操作時，首先是顯示瀏覽器自身的右鍵菜單，從而導(dǎo)致原型中的鼠標(biāo)右鍵這個動作失效。

那我們就要考慮，能不能把瀏覽器中的右鍵顯示的快捷菜單這個操作禁用呢？當(dāng)然可以，其實我們可以通過代碼的方式將它禁用掉，對應(yīng)的代碼如：

我們可以把上述代碼復(fù)制到字體里，那在預(yù)覽演示的時候就會自動生效，具體操作是點擊工具欄的發(fā)布——生成html文件——選擇fonts——添加字體——選擇@font-face——將代碼復(fù)制進(jìn)入。這樣就可以實現(xiàn)原型內(nèi)鼠標(biāo)右鍵的交互而又不觸發(fā)瀏覽器鼠標(biāo)右擊的默認(rèn)操作。注：上述方法為Axure的操作路徑，其他版本位置可能有所出入，但是都是可行的。

二、主要的制作材料1、動態(tài)面板（頁面內(nèi)容）

本案例是用中繼器菜單和動態(tài)面板聯(lián)動制作的，在動態(tài)面板不同的stare里面放入對應(yīng)的內(nèi)容，然后后續(xù)可以通過設(shè)置面板狀態(tài)的交互就可以實現(xiàn)跳轉(zhuǎn)不同的頁面了。當(dāng)然了如果你們不想把頁面放在動態(tài)面板內(nèi)，也可以用多個頁面，用打開鏈接的交互也可以實現(xiàn)。具體可以按照你們實際需求操作，思路都是一樣的。

那我們把頁面內(nèi)容放進(jìn)動態(tài)面板里不同的狀態(tài)后，要把動態(tài)面板每個狀態(tài)state命名成和菜單一致的名字，案例中為我的論文、我的收藏、我的問答、我的關(guān)注、我的點贊、我的通知、我的記錄、我的資料，這一步命名涉及后面頁面的跳轉(zhuǎn)。2、中繼器

我們在中繼器默認(rèn)的表格里填寫菜單名稱，和前面動態(tài)面板名稱一致即可，案例中為我的論文、我的收藏、我的問答、我的關(guān)注、我的點贊、我的通知、我的記錄、我的資料。

元件的樣式和其他的效果需要的話可以自由添加，例如移入變色，可以在元件樣式懸停時添加；需要陰影效果的也可以自由添加，這里就不詳細(xì)說明了，可以根據(jù)自己的喜好設(shè)置。三、交互制作

1、鼠標(biāo)右鍵點擊動態(tài)面板時

首先我們用顯示的交互，將菜單組合中繼器顯示出來，這里注意我們要選擇燈箱效果，燈箱顏色為同名即可，這樣設(shè)置以后，如果點擊菜單外的內(nèi)容，菜單就可以自動隱藏

然后，我們還要讓彈窗菜單移動到鼠標(biāo)指針的位置，這里我們用移動的交互就可以了，選擇到達(dá)，這里需要用到鼠標(biāo)指針的函數(shù)Cursor.x和Cursor.y，分別對應(yīng)鼠標(biāo)指針?biāo)诘膞坐標(biāo)值和y坐標(biāo)值。最后我們?yōu)榱孙@示的彈出不跳出窗口，我們在移動時增加邊界，這里用到window函數(shù)，window.height是窗口高度，window.width是窗口的寬度，我們設(shè)置菜單的右邊界小于窗口的寬度，下邊界小于窗口的寬度即可。

2、鼠標(biāo)右鍵點擊頁面空白地方時

如果鼠標(biāo)點擊頁面空白地方時，其實交互也是和上面一樣，這里考慮到上面的動態(tài)面板不是全屏的，所以我們補充這個交互，我們也不用復(fù)制上面的交互，我們直接用觸發(fā)的交互，觸發(fā)動態(tài)面板鼠標(biāo)右擊時的交互即可。

3、中繼器菜單內(nèi)部矩形鼠標(biāo)單擊時

鼠標(biāo)單擊中繼器菜單里面的選項時，我們用設(shè)置面板狀態(tài)的交互，設(shè)置頁面動態(tài)面板的值為中繼器表格內(nèi)當(dāng)前行記錄的文本值，簡單來說你們可以用item.column0（如果你們沒有改列名，如果改了列名這里也對應(yīng)變化）或者this.text。最后我們用隱藏的交互，將菜單隱藏起來即可。最后的最后，這里提醒一下，菜單選項名必須和動態(tài)面板里狀態(tài)名一一對應(yīng)，不然就跳轉(zhuǎn)不了的。

這樣我們就完成了鼠標(biāo)右鍵顯示中繼器菜單原型模板了，下次使用時，我們只需要在中繼器表格里填寫選項，即可自動生成交互，是不是很方便呢？感興趣的同學(xué)們可以動手試試哦。

本文由人人都是產(chǎn)品經(jīng)理作者【AI產(chǎn)品人】，微信公眾號：【Axure高保真原型】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于 CC0 協(xié)議。

天給大家分享一個超厲害的Vue Uniapp可視化拖拽編程項目dragUI。

drag-ui 基于 vuedraggable.js+vue+uniapp 的可視化拖放布局編程。能自動生成項目，自動生成代碼，支持導(dǎo)入第三方組件。

效果圖

dragUI演示視頻

一個簡單創(chuàng)建 hello world 界面的介紹視頻，幫助大家更快了解項目。

技術(shù)棧

vue ^2.5.17 + uniApp
element-ui ^2.12.0 餓了么pc組件庫
sortablejs 組件拖拽功能
file-saver 文件保存
ejs ^2.7.1 JavaScript模板引擎
jszip ^3.2.2 JS壓縮庫
vue-context-menu 基于vue自定義右鍵菜單

安裝使用

# 克隆項目
git clone https://github.com/wozhishilaonanhai/dragUI.git

# 進(jìn)入dragUI目錄
cd dragUI

# 安裝依賴包
npm install

# 用HBuilderX打開項目
運行 > 運行到瀏覽器 > Chrome

項目目錄

項目目錄注釋

作者已經(jīng)將該插件上傳到了插件市場，大家可以下載使用。

https://ext.dcloud.net.cn/plugin?id=1035

store中 componentsInfo 存貯組件的基本信息。

componentsInfo: { // 組件的基本信息
    // id 0- 999  （約定）會根據(jù)id來判斷是哪個list
    list: [
        {
            name:'按鈕',
            id: 0,
            componentName: 'Ibutton',
            iStyle:{},
            iClass: [],
            propsValue: [
                {   
                    label:'值',
                    key:'text',
                    value:'按鈕',
                    toDataOrHtml: 'html',
                    type: 'String'
                },
                {
                    label:'類型',
                    key:'type',
                    value:'default',
                    toDataOrHtml: 'html',
                    type:'select',
                    select: [
                        {label: '紅色',value: 'warn'},
                        {label: '藍(lán)色',value: 'primary'},
                        {label: '白色',value: 'default'}
                    ]
                },
            ...
            ]
        },
        ...
    ]
}

項目中用到了 element-ui 組件庫及第三方UI庫 colorUI。

創(chuàng)建新項目

切換頁面模式/組件模式

布局預(yù)覽效果

查看uniapp頁面代碼

最后附上demo及項目地址

# demo地址
https://wozhishilaonanhai.github.io/dragUI/unpackage/dist/build/h5/index.html

# 倉庫地址
https://github.com/wozhishilaonanhai/dragUI

ok，這次就分享到這里。如果小伙伴們感興趣的話可以去看下哈。

在線咨詢

上一篇：有這15個應(yīng)用，程序員用iPad照樣可以編程！
下一篇：JavaScript+css實現(xiàn)的鼠標(biāo)懸?？ㄆD(zhuǎn)h

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商