0
点赞
收藏
分享

微信扫一扫

大前端 (二) -- HTML5 标签 1


HTML

​HTML​​ 不是程序设计语言,而是一种标记语言,它用一些标记、标签来说明文本的显示效果。要制作网页和建立网站,就必须对​​HTML​​​语言有所了解。客观地讲:​​HTML​​标签没有多少逻辑性而言,为了大家更好的理解和记忆,我们对这些标签进行分门别类的讲解,主要分为:

  • 常用标签
  • 文本标签
  • 语义标签
  • 结构标签
  • 列表标签
  • 表格标签
  • 表单标签
  • 新增标签和API

好的,我们就从常用标签下手吧

HTML 常用标签

1. p标签

p标签在HTML中常用于表示段落,它是英文单词paragraph的缩写。p标签的用法非常简单,只需要在标签中放置一段文本即可。

<p>2017,顶着刘海的iPhoneX带着“史上升级变动最大”的iOS11,依然碎片化严重的Android带着“更快、更强大、更安全” 的8.0来到我们面前,忽思十年初,那个触 屏的、没有物理键盘的智能手机惊艳了我 ,但连个复制粘贴功能都没有的时光。回首一顾,从2007到2017,从诺记的Symbian、摩托罗拉的Linux、苹果的iOS、微软的Windows Phone、三星的 Tizen到Google的Android等,移动操作系统也曾百花齐放,但经过十年厮杀各自蚕食,格局已相当明朗,只剩下了iOS和Android两大巨头</p>

2. h标签

h标签用于表示标题,它是英文单词header的缩写。我想这个单词对于Android程序员来说是再熟悉不过了吧;例如,给ListView,Recyclerview设置header和footer。在​​HTML​​​中​​h​​​标签细分为​​h1​​​~​​h6​​​,请注意:​​h​​后的数字越大,那么标题所对应的字体越小。示例如下:

<h1>这里是h1</h1>
<h2>这里是h2</h2>
<h3>这里是h3</h3>
<h4>这里是h4</h4>
<h5>这里是h5</h5>
<h6>这里是h6</h6>

3. hr标签

hr标签用于表示一条水平横线,它是英文中Horizontal Rule的缩写。它的用法非常简单:

<hr>

在页面中只用写一个hr标签,就可以表示一条水平横线。

4. br标签

​br​​ 标签用于表示换行,它在英文所对应的单词是break。它的用法也非常简单:

<br>

5. nobr标签

会了刚才的br标签,再来看nobr就很简单了;该标签表示不换行。比如,我们想表示一个很长的数学公式,需要将其显示在同一行,从而避免换行后导致可读性变差产生歧义。

<nobr>这里是一个很长的数学公式,不能换行显示,只能在一行显示。这里是一个很长的数学公式,不能换行显示,只能在一行显示。这里是一个很长的数学公式,不能换行显示,只能在一行显示。这里是一个很长的数学公式,不能换行显示,只能在一行显示。</nobr>

6. center标签

center标签表示居中显示,比如我们想将一句话显示在页面的水平方向的中间,可以这么做:

<center>测试center标签</center>

7. marquee标签

marquee标签用于表示跑马灯效果

<marquee behavior="scroll" direction="left">
<p>测试marquee标签</p>
</marquee>

在 ​​marquee​​​ 标签中可以通过 ​​behavior​​​ 和 ​​direction​​ 属性控制跑马灯的不同效果。

8. button标签

button标签用于表示按钮,这和我们在Android开发中常用的Button控件是完全一样的。

<button type="button" onclick="onButtonClick()">This is a button</button>
<script type="text/javascript">
function onButtonClick(){
alert('You click button');
}
</script>

此处,我们给button标签设置一个监听器,当用户点击button后利用JavaScript弹出一个对话框。

9. a标签

​a​​​ 标签在 ​​THML​​中常用于表示锚点和超链接,它是英文中 ​​anchor​​的缩写;在此,我们主要来瞅瞅利用a标签实现超链接。

<a href="http://www.fjisu.com/tv/27829/" title="我只喜欢你" target="_blank">请点击此处的超链</a>

10. img标签

img标签在HTML中常用于表示图像,它是英文中image的缩写。请看如下示例:

<img src="myblog.jpg" title="这是我的博客头像">


举报

相关推荐

0 条评论