整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天繼續為大家分享前端的知識，如果對前端比較感興趣的小伙伴，可以關注我，我會更大家繼續分享更多與前端相關的內容，當然如果內容中又不當的或者文字錯誤的，歡迎大家在評論區留言，我會及時修改糾正。
1.初識HTML
2.HTML骨架結構
HTML基本骨架語法如下所示：
HTML基本骨架結構
HTML骨架標簽說明：
HTML骨架標簽說明
下面通過對HTML骨架的基本認識，你也可以小試牛刀，打開記事本，新建一個帶有HTML骨架標簽的.txt文件。
在.txt中寫入HTML骨架標簽，保存，并將.txt的后綴名修改為.html，右鍵單擊你寫好的文件，然后選擇你要顯示的瀏覽器，本人習慣用谷歌的瀏覽器，這個根據個人的習慣來選擇就好了。
示例代碼如下：
我的第一個HTML頁面
注意：HTML標簽名、標簽的屬性名以及大部分屬性值都統一用小寫，不要問我為什么，這是人家W3C的規范，咱們按規范行事就好啦。
正確示范：
書寫規范
錯誤示范：
錯誤的規范
3.HTML標簽的分類
HTML標簽：在HTML頁面中，帶有“<>”尖括號符號的元素被稱為HTML標簽元素，如上面的<html>、<head>、<body>，它們都是用尖括號包起來，而且這幾個標簽還是HTML的骨架結構標簽，就好比人之所以能站立，就是因為有骨架支撐。
通常我們將其分為常規元素和空元素，以下是對兩種類型的介紹。
常規元素（雙標簽）
語法：<標簽名>內容</標簽名>，如<body>我的網頁內容</body>。
說明：
空元素（單標簽或自封閉標簽）
語法：<標簽名 /> ，比如 <br />
說明：
4.HTML標簽的關系
標簽之間的關系主要是針對雙標簽，雙標簽之間的關系分為如下幾種。
嵌套關系：
嵌套關系
并列關系：
并列關系
提示：在開發的過程中，如果標簽之間是嵌套關系，那么子元素可以通過tab鍵進行縮進，讓其結構和格式更加的清晰。
5.前端開發工具
之前我們是通過記事本來寫html骨架結構，會發現這種情況針對幾行代碼，還是能消化的，但是碰上幾千甚至幾萬以及更多，此時應該怎么辦呢？這個時候就得用到我們的前端開發工具，通過前端開發工具，可以更快更高效的提高我們的開發效率，那我們常見的前端開發工具有如下幾種：
常見的前端開發工具
說明：
提示：Hbuilder和VS Code誰更好？我只能說各有千秋，根據個人的習慣，我個人就比較喜歡Hbuilder，偶爾會用VS Code，如果你習慣用VS Code，繼續用就行了。
以上開發工具的安裝使用，在網絡上都會有很多資料，可以動動小手指就能查到哦。
今天就分享到這兒吧，如果喜歡的記得點關注哦，也歡迎在留言區留言。
鍵菜單是軟件設計中常用的功能之一，但這個功能在Axure設計時，需要聯合中繼器才能實現一些大家認知的效果。這篇文章，作者分享了這一功能的操作，推薦給大家。
右鍵菜單在軟件系統中是非常常見的，他可以作為一個快捷方式，里邊包含各種命令可以選擇。那今天作者就教大家，如果用中繼器制作一個右鍵顯示菜單的的原型模板，結合動態面板，實現快捷菜單頁面跳轉的效果。
點擊鼠標右鍵，彈出菜單，彈出的位置為鼠標指針的位置；
彈出的菜單由中繼器制作，在中繼器表格中輸入選項后自動生成交互效果；
點擊菜單選項，可以實現頁面的跳轉，案例中是中繼器和動態面板間的聯動。
其實做鼠標右鍵菜單的最主要的難點是鼠標右鍵這個動作，因為Axure是通過瀏覽器來發布預覽的，而瀏覽器自身也有右鍵菜單的快捷操作，所以當我們做鼠標右鍵這個操作時，首先是顯示瀏覽器自身的右鍵菜單，從而導致原型中的鼠標右鍵這個動作失效。
那我們就要考慮，能不能把瀏覽器中的右鍵顯示的快捷菜單這個操作禁用呢？當然可以，其實我們可以通過代碼的方式將它禁用掉，對應的代碼如：
我們可以把上述代碼復制到字體里，那在預覽演示的時候就會自動生效，具體操作是點擊工具欄的發布——生成html文件——選擇fonts——添加字體——選擇@font-face——將代碼復制進入。這樣就可以實現原型內鼠標右鍵的交互而又不觸發瀏覽器鼠標右擊的默認操作。注：上述方法為Axure的操作路徑，其他版本位置可能有所出入，但是都是可行的。
本案例是用中繼器菜單和動態面板聯動制作的，在動態面板不同的stare里面放入對應的內容，然后后續可以通過設置面板狀態的交互就可以實現跳轉不同的頁面了。當然了如果你們不想把頁面放在動態面板內，也可以用多個頁面，用打開鏈接的交互也可以實現。具體可以按照你們實際需求操作，思路都是一樣的。
那我們把頁面內容放進動態面板里不同的狀態后，要把動態面板每個狀態state命名成和菜單一致的名字，案例中為我的論文、我的收藏、我的問答、我的關注、我的點贊、我的通知、我的記錄、我的資料，這一步命名涉及后面頁面的跳轉。2、中繼器
我們在中繼器默認的表格里填寫菜單名稱，和前面動態面板名稱一致即可，案例中為我的論文、我的收藏、我的問答、我的關注、我的點贊、我的通知、我的記錄、我的資料。
元件的樣式和其他的效果需要的話可以自由添加，例如移入變色，可以在元件樣式懸停時添加；需要陰影效果的也可以自由添加，這里就不詳細說明了，可以根據自己的喜好設置。三、交互制作
首先我們用顯示的交互，將菜單組合中繼器顯示出來，這里注意我們要選擇燈箱效果，燈箱顏色為同名即可，這樣設置以后，如果點擊菜單外的內容，菜單就可以自動隱藏
然后，我們還要讓彈窗菜單移動到鼠標指針的位置，這里我們用移動的交互就可以了，選擇到達，這里需要用到鼠標指針的函數Cursor.x和Cursor.y，分別對應鼠標指針所在的x坐標值和y坐標值。最后我們為了顯示的彈出不跳出窗口，我們在移動時增加邊界，這里用到window函數，window.height是窗口高度，window.width是窗口的寬度，我們設置菜單的右邊界小于窗口的寬度，下邊界小于窗口的寬度即可。
如果鼠標點擊頁面空白地方時，其實交互也是和上面一樣，這里考慮到上面的動態面板不是全屏的，所以我們補充這個交互，我們也不用復制上面的交互，我們直接用觸發的交互，觸發動態面板鼠標右擊時的交互即可。
鼠標單擊中繼器菜單里面的選項時，我們用設置面板狀態的交互，設置頁面動態面板的值為中繼器表格內當前行記錄的文本值，簡單來說你們可以用item.column0（如果你們沒有改列名，如果改了列名這里也對應變化）或者this.text。最后我們用隱藏的交互，將菜單隱藏起來即可。最后的最后，這里提醒一下，菜單選項名必須和動態面板里狀態名一一對應，不然就跳轉不了的。
這樣我們就完成了鼠標右鍵顯示中繼器菜單原型模板了，下次使用時，我們只需要在中繼器表格里填寫選項，即可自動生成交互，是不是很方便呢？感興趣的同學們可以動手試試哦。
本文由人人都是產品經理作者【AI產品人】，微信公眾號：【Axure高保真原型】，原創/授權 發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協議。
天給大家分享一個超厲害的Vue Uniapp可視化拖拽編程項目dragUI。
drag-ui 基于 vuedraggable.js+vue+uniapp 的可視化拖放布局編程。能自動生成項目，自動生成代碼，支持導入第三方組件。
效果圖
dragUI演示視頻
一個簡單創建 hello world 界面的介紹視頻，幫助大家更快了解項目。
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
# 克隆項目
git clone https://github.com/wozhishilaonanhai/dragUI.git
# 進入dragUI目錄
cd dragUI
# 安裝依賴包
npm install
# 用HBuilderX打開項目
運行 > 運行到瀏覽器 > Chrome項目目錄注釋
作者已經將該插件上傳到了插件市場，大家可以下載使用。
https://ext.dcloud.net.cn/plugin?id=1035store中 componentsInfo 存貯組件的基本信息。
componentsInfo: { // 組件的基本信息
// id 0- 999 （約定）會根據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: '藍色',value: 'primary'},
{label: '白色',value: 'default'}
]
},
...
]
},
...
]
}項目中用到了 element-ui 組件庫及第三方UI庫 colorUI。
創建新項目
切換頁面模式/組件模式
布局預覽效果
查看uniapp頁面代碼
最后附上demo及項目地址
# demo地址
https://wozhishilaonanhai.github.io/dragUI/unpackage/dist/build/h5/index.html
# 倉庫地址
https://github.com/wozhishilaonanhai/dragUIok，這次就分享到這里。如果小伙伴們感興趣的話可以去看下哈。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
