整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天继续为大家分享前端的知识，如果对前端比较感兴趣的小伙伴，可以关注我，我会更大家继续分享更多与前端相关的内容，当然如果内容中又不当的或者文字错误的，欢迎大家在评论区留言，我会及时修改纠正。
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小时内与您取得联系。
