一月二十五日H5课程

超链接标签<a></a>

在我们看微信公众号时,常会发现一些超链接。
比如这个:

而当我们查看历史消息的时候会发现,这里变成了这样:

但是如果你不想以网址的方式来呈现,比如网址太长了,怎么办呢?

代码如下:
<a href="http://mp.weixin.qq.com/s/z0ZrfdhjG3MlFKUDTwfmWQ">点这里观看视频教学</a>
↓↓↓
<a href="而这里面就是你链接指向的网址">这里面的字会原封不动的呈现出来</a>
很简单是吧?
我们在百度,在任何一个网页点击的超链接,基本上都是<a></a>

大家以后如果想改动超链的内容或者地址的话,就可以自己来改啦。
HTML中超链还有一些额外的功能,比如说一些伪类::hover :after :before之类的。
这里不展开了,如果想看的话可以点击这里的博客了解一下。

css基本属性——padding和margin

padding定义的是内边距,margin定义的是外边距。
我们先找到这个模板的源代码,然后粘贴到自己的编辑器里,进行修改。


其中,我们暂时可以不管style="这里面的东西"。上次说过,这东西就是css样式。
改内容的话,只要在<p><\p>里面改就好了。但是如果想要调整边距的话,就要自己来补充代码了。

比如说,我们想要把内边距调宽一些,就是让内容离边框更远一点。
我们可以在<p>里面加上一行style="margin:10px",然后效果就是这样。

当然了,这里的数值也可以为负。
看看下面这张图就能基本了解这两个属性啦。

顺便说一下,这两个属性有几种写法。
margin为例:

  1. margin:[n] px
    这表示距离四周都是n个像素。

  2. margin-top:[n] px
    这表示距离顶部n个像素,top还可以改成bottom、left、right。

  3. margin:60 px 0 px
    这表示上下60左右0。

  4. margin:60 px 30 px 0 px
    这表示上60下30左右0。

  5. margin:60 px 30 px 60 px 30 px
    这表示上60下30左60右30。