Vue--HTML标签--插值语法失效
起因:前些天在做练习时被问到的一般想到的结构此时运行结果问题:当使用同样的标签写时会出现插值语法失效代码如下:此时的效果:但是后来我自己实验的时候还换了div标签进行测试,出现以下结果所以上述的问题并不严谨,就开始了研究(可能当时比较无聊了)在上网查了资料后发现,好像并没有人写过这样的问题(一般人应该也不会有这样的写代码习惯)于是我又想到了应该是涉及到了HTML标签的问题,就换了一个方向,开始研究
·
起因:前些天在做练习时被问到的
一般想到的结构
此时运行结果
问题:当使用同样的标签写时会出现插值语法失效
代码如下:
此时的效果:
但是后来我自己实验的时候还换了div标签进行测试,出现以下结果
所以上述的问题并不严谨,就开始了研究(可能当时比较无聊了)
在上网查了资料后发现,好像并没有人写过这样的问题(一般人应该也不会有这样的写代码习惯)
于是我又想到了应该是涉及到了HTML标签的问题,就换了一个方向,开始研究这两个标签的渲染问题
外层标签为h1时 页面渲染如下:
外层标签为div时 页面渲染如下:
可以发现h1时,并没有将代码包裹的部分渲染在标签内,而div时渲染进去了。
经过资料查询:
在布局html重构时候,div主要用于布局框架,大小结构布局均使用div来布局;
h1只是布局文本容器,输入文字时进行展示(参考p标签)
仅个人观点,我认为是和标签的作用有关系。
在此也提醒一下,在页面搭建时,根据标签功能使用标签,尽量做到不滥用标签,规范使用html标签元素。
更多推荐
已为社区贡献2条内容
所有评论(0)