我们做小程序页面的时候，最基本的元素不过文字、图像、视频、超链接，我们将从简单向复杂的讲

`<view>`

这个标签可以当作是HTML中的div，它是一个块标签

从上篇的进度继续

1	<view class="box">test1</view>

上篇说到WXML源于HTML，但是WXML的独特之处其实在于标签内部封装了很多的属性和方法，例如我们来看view的官方文档

例如我们来试一下这个hover-class属性

1	<view class="box" hover-class="boxHover">test1</view>

然后打开样式表，添加一行

1	.boxHover{background: green;}

保存后发现，我们在按下去的时候，颜色变成了绿色，过了一会儿，又变回了红色

按压时间

现在根据文档添加一个hover-start-time属性，并设置成500ms，这样的效果就是按下去半秒才会变色

1	<view class="box" hover-class="boxHover" hover-start-time="500">test1</view>

对应的，也有一个hover-stay-time属性，表示的是过多久恢复

关联父元素

但修改这两个属性的默认值不是很重要（默认一般就是最好的），重要的是剩下的hover-stop-propagation属性，这是设定与父元素的关联的

例如，再嵌套一个view，并为它添加点击的样式

<view class="box" hover-class="boxHover">
  test1
  <view class="item" hover-class="itemHover">test2</view>
</view>

1 2	.item{width: 50px;height: 50px;background: gold} .itemHover{background:hotpink;}

这时点击大块，大块变色小块不变，而点击小块，大小块都会变色

这是因为view标签的hover-stop-propagation属性默认为false，也就是按压会传到到祖先节点，如果我们将其设置为true，则会阻断这一过程（或者只加上hover-stop-propagation而不赋值，也是可以的）

`<text>`

在HTML中有行标签和块标签，在WXML中块标签有view，而行标签是text

text在『基础内容』分类中

1
2
3

<view class="out">
  <text>我是一句话。</text> <text>我是另外一句话。</text>
</view>

选中文本

第一个属性是user-select，众所周知一般的页面里是不能选中文字的，加上这个属性就可以选中

例如添加上一段文字

1
2
3

<view>
  <text user-select>马克思主义，英文是Marxism，是马克思主义理论体系的简称，是关于全世界无产阶级和全人类彻底解放的学说。它由马克思主义哲学、马克思主义政治经济学和科学社会主义三大部分组成，是马克思、恩格斯在批判地继承和吸收人类关于自然科学、思维科学、社会科学优秀成果的基础上于19世纪40年代创立的，并在实践中不断地丰富、发展和完善的无产阶级思想的科学体系。</text>
</view>

之后打开预览，在手机上预览效果