html和小程序的常用标签的一些对应关系

最新推荐文章于 2022-03-06 22:11:14 发布
最新推荐文章于 2022-03-06 22:11:14 发布
阅读量691 收藏
点赞数 1
分类专栏： 踩坑 文章标签： 小程序 常用标签 对应关系
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44220680/article/details/94867317
版权

简介：微信小程序的wxml和html写法很是相似，但是有些标签和html不同,本文主要介绍了微信小程序一些常用标签与html5的对应关系.

-html--小程序-
-<div></div>--<view></view>-
-<i class="icon">-- <view></view>-
<h1></h1>...<h6></h6><p></p><span></span><view></view>
<i class="icon"><icon></icon>
<iput type="text"> <iput type="checkbox"><iput type="radio"><iput type="file"><input/><checkbox/><radio/><view bindtab="chooseImage">
<a href="#"></a><navigator url="#" redirect></navigator >
<img src=""><image src="" ></image >

参考地址（源地址）
https://blog.csdn.net/tianxintiandisheng/article/details/82464324

XAIhan
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序与web前端的区别
算法与编程之美
11-02 3360
1 引言刚接触小程序，会有很多错误的思路去编写，为了避免在代码方面出错，本文将对前端和小程序做一个区分。2 问题描述微信小程序与web前端的区别。3 算法描述在web的html中我们一般都...
【毕业设计】基于深度学习的阿兹海默症早期诊断辅助系统设计与实现.zip
06-27
当用户ID和密码都正确时，登录成功，将自动跳转到对应用户的首页，首页将自动展示该用户可在本系统中执行的功能以及操作。 2，诊断修正功能：当管理员批准诊断申请并进行预测后，专家用户便可对该用户的MRI影像进行...
对比下HTML5和小程序的组件标签的区别
老刘的博客
06-28 2301
下面一一来分析下： 1、view div和view都是盒模型，默认display:block。 盒模型在布局过程中，一般推荐display:flex的写法，配合justify-content:center;align-items:center;的定义实现盒模型在横向和纵向的居中。 2、text 除了text文本节点以外的其他节点都无法长按选中。。 截止到0.10
微信小程序阶段总结
Dipper_Dubhe的博客
03-06 1028
微信小程序 APPID 云开发要求必须有appid，在微信小程序的开发设置里面 新建项目 新建文件夹 在app.json 中，写入文件夹名或者文件名，就会自动新建以文件名命名的wxml、wxss、js和json文件 wxml：相当于html文件 wxss：相当于css文件 "pages": [ //放在首位的路径就是首页文件 "pages/home/home",//在pages文件夹下的home文件夹下，有home命名的wxml、wxss、js和json文件 "pages/
微信小程序一些常用标签与html的对应关系
天心天地生的博客
09-06 1万+
简介：微信小程序的wxml和html写法很是相似，但是有些标签和html不同,本文主要介绍了微信小程序一些常用标签与html5的对应关系. HTML 微信小程序 &lt;div&gt;&lt;/div&gt; &lt;view&gt;&lt;/view&gt; &lt;h1&gt;&lt;/h1&gt;...&lt;h6&gt;&lt;/h
微信小程序里面的标签和html标签做对比
xinzi11243094的博客
06-12 1万+
一、微信小程序和html5标签的区别：二、wxss 选择器HTML5微信小程序div（标签选择器）view、text、icon、input、image、navigator（标签选择器）class(类选择器)classid(id选择器)（效率最高）id(效率最高)element,element(层级选择器)element,element(层级选择器)：after（伪类选择器）：after    ：b...
html入门到放弃笔记
05-15
将以上文本内，对应文字的特殊效果，用标记体现出来 3、标题元素 以 醒目 的方式表现出文本 语法： 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 属性： 1、align 文本的水平对齐方式 取值...
JAVA程序开发大全---上半部分
12-15
网上这本书的电子版不好这，这是用money换来的——和大家分享！ 由于书太大，我把书分成两部分别上传。 内容简介 本书系统全面地介绍了Java中的各项主流技术，以及基于这些技术的商业化应用程序的开发技巧，在讲解...
PHP程序开发范例宝典III
01-07
1.3　应用常用开发工具开发PHP程序　23 实例018　应用Dreamweaver开发PHP程序　24 实例019　应用Eclipse开发PHP程序　25 实例020　应用PHPEditor开发PHP程序　27 实例021　应用UltraEdit开发PHP程序　29 实例022　...
cmd操作命令和linux命令大全收集
04-24
at ip time 程序名（或一个命令） /r 在某时间运行对方某程序并重新启动计算机 finger username @host 查看最近有哪些用户登陆 telnet ip 端口 远和登陆服务器，默认端口为23 open ip 连接到IP（属telnet登陆后的...
微信小程序的组件用法与传统HTML5标签的区别
热门推荐
麻球科技
01-12 3万+
小程序与传统HTML5的区别 小程序刚开放公测，互联网圈内开始了各种解读和猜测。其中有观点认为小程序和HTML5有着紧密关联，甚至小程序就是基于HTML5开发。 经过仔细研究文档和代码开发，从视图层的角度来说，小程序与传统HTML5还是有明显的区别，主要区别在于： 开发工具不同。 区别于H5的开发工具+浏览器Device Mode预览的模式，小程序的开发基于自己的开发者工具
WXML标签---html--template模板
weixin_45625673的博客
11-22 1490
WXML和 HTML 非常相似，WXML 由标签、属性等等构成。但是也有很多不一样的地方，下面来一一阐述一下： （1）标签名不一致 HTML 经常会用到的标签是 div, p, span，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件， 例如弹窗等等。既然都需要这些组件，那干脆把这些常用组件包装起来，大大提高开发效率。 小程序的 WXML 用的标签是 view, butt...
微信小程序里面的标签和html标签的对比、微信小程序基础之常用控件
小宫主的博客
10-22 5343
微信小程序和html5标签的区别： HTML5 微信小程序 &lt;h1&gt;&lt;/h1&gt;...&lt;h6&gt;&lt;/h6&gt; &lt;p&gt;&lt;/p&gt; &lt;span&gt;&lt;/span&gt; &lt;text&gt;&lt;/text&gt; &
WXML与HTML的区别
Black_stonenight的博客
08-13 9594
1、标签名字有点不一样 2、多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式 3、开发工具限制：WXML仅能在微信小程序开发工具中预览，而HTML可以在浏览器内预览。 4、组件封装不同：WXML对组件进行了重新封装，为后续的性能优化提供了可能，同时避免开发者写出低质量的代码。 5、没有DOM树：小程序运行在JS Core内，没有DOM树和window对象，没有办法使用相关API。 ...
微信小程序-组件
weixin_30294295的博客
06-13 59
1.轮播图 <swiper indicator-dots="{{indicatorDots}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{indicatorActiveColor}}" autoplay="{{autoplay}}" interval="{{interval}}" dura...
html和wxml标签对比,微信小程序笔记（2）：wxml相比于html的扩展
weixin_33089345的博客
06-26 1303
wxml的概述WXML(WeiXin Markup Language)是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。与html不同的是，为了方便小程序的开发，wxml配合小程序渲染层与逻辑层分离的理念，新增了数据绑定、列表渲染、条件渲染、模板、引用功能。数据绑定小程序为了做到数据与逻辑的分离，可以在wxml中使用在js中定义的变量名，并且通过在js中调用setData的方...
前端两个div之间总是有白线的产生原因和解决方法
weixin_44220680的博客
06-18 8972
在写前端样式的时候，遇到过一个很坑很坑的大坑。 就是两个兄弟div排列的时候，哪怕margin为0，padding为0，两个div之间还是有一条白线。 产生原因：因为两个div之间有空格，而浏览器默认空格存在，那一条白线其实是空格占据产生。 解决方法： 1. 在父元素之中设置font-size为0。 2. 将两个div紧贴着（删除div之间的空格） 如： <div class="box...
手机端设置缩放的解决方法和遇到的UC浏览器的坑
weixin_44220680的博客
06-20 4044
更换之后没有禁止成功。
常见报错——Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function
weixin_44220680的博客
11-29 3548
在进行原生的前端开发的时候遇到的问题:Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function...... 原因: 选择器没有正确选择元素对象 document.getElementsByClassName(…)捕捉到的是该类名元素的数组 解决方法 docum...
微信小程序v-html
最新发布
07-27
微信小程序中没有直接支持的v-html指令，但你可以通过使用rich-text组件来实现类似的效果。rich-text组件可以渲染带有HTML标记的文本内容。 首先，在你的小程序页面中引入rich-text组件： ```xml <rich-text nodes="{{content}}"></rich-text> ``` 然后，在对应的Page的JS文件中，将HTML内容转换为nodes数组： ```javascript Page({ data: { content: [], }, onLoad: function () { // 假设你的HTML内容存储在变量htmlContent中 const nodes = this.convertHtmlToNodes(htmlContent); this.setData({ content: nodes, }); }, convertHtmlToNodes: function (html) { // 使用正则表达式将HTML内容转换为nodes数组 // 这里可以自定义转换规则，根据需要进行处理 // 下面是一个简单示例，只处理了部分常用标签 const tagRegex = /<(\/?)(\w+)([^>]*)>/g; const attrRegex = /(\w+)=["']([^"']*)["']/g; const nodes = []; let match; let lastIndex = 0; while ((match = tagRegex.exec(html)) !== null) { const [fullMatch, isClosingTag, tagName, attrs] = match; const attributes = {}; let attrMatch; while ((attrMatch = attrRegex.exec(attrs)) !== null) { const [attrFullMatch, attrName, attrValue] = attrMatch; attributes[attrName] = attrValue; } const node = { type: isClosingTag ? 'node' : 'element', name: tagName, attrs: attributes, children: [], }; if (isClosingTag) { let parentIndex = nodes.length - 1; while (parentIndex >= 0) { const parent = nodes[parentIndex]; if (parent.type === 'element' && parent.name === tagName) { parentIndex--; break; } parentIndex--; } if (parentIndex >= 0) { nodes[parentIndex].children.push(node); } } else { if (lastIndex < match.index) { const textContent = html.slice(lastIndex, match.index); nodes.push({ type: 'text', text: textContent, }); } nodes.push(node); } lastIndex = match.index + fullMatch.length; } if (lastIndex < html.length) { const textContent = html.slice(lastIndex); nodes.push({ type: 'text', text: textContent, }); } return nodes; }, }); ``` 这样就可以在小程序中渲染带有HTML标记的文本内容了。请注意，上述示例只是一个简单的转换方法，如果你的HTML内容比较复杂，可能需要进行更复杂的处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值