[华为云WEB前端全栈成长计划]三、常用标签
【摘要】 上一章，我们大概的认识HTML，这一张我们来学习常见的HTML标签。我先解释以下，在html中每一个标签都是用<>进行包围的，一般来说每一个标签都需要我们进行闭合也就是</>。比如<p></p>,我们在这两个标签中间编写我们的内容，html的语言规范性不强，所以有的时候你没有闭合也会正常的显示，甚至你可以新建一个文件删除里面的所有字符，然后只留下Hello，Web也会在浏览器上显示出来。查看...
上一章，我们大概的认识HTML，这一张我们来学习常见的HTML标签。
我先解释以下，在html中每一个标签都是用<>进行包围的，一般来说每一个标签都需要我们进行闭合也就是</>。比如<p></p>,我们在这两个标签中间编写我们的内容，html的语言规范性不强，所以有的时候你没有闭合也会正常的显示，甚至你可以新建一个文件删除里面的所有字符，然后只留下Hello，Web也会在浏览器上显示出来。查看源代码会发现，自动进行了代码填充。但是我们还是要规范自己的写法，万一那一天有人写的代码不规范，而恰好让你去看他写的代码，估计你头都要大了，所以我们写代码一定要满足一些规范，约定俗成。常用注释表明这一段代码的作用。在html中，注释为<!-- -->我们可以在空白的地方写注释，这些描述不会出现在浏览器显示的内容里，但是查看源代码是可以被发现的。有的标签比如<br />就是一个单标签，这个标签的作用时换行，我们不需要写<br></br>直接使用<br />关闭即可。单标签还有很多这里只是用<br />作为说明。我们会发现一些网站里源代码中标签里还有class，id等内容例如图中<div class = "name"></div>一般格式都是 <标签 key="value"></标签>。这里我们暂且不多说。
这就是html最简单的一个例子，这里结构比上一章要清晰。
我们再来看看这个，发现多了html标签中多了" lang="en" "这表明这是一个英文网站，但是注意这并不是说，不能显示中文，在head标签中，用meta标签设置了文件的编码格式为utf-8。这里不多说，想了解的可以去自己查阅文件的编码类型。
标题元素
是<h1>~<h6>.具体效果如图：
我们可以发现从上到下字体越来越小，而且这些字体都是加粗的效果。用<h1>~<h6>来表示不同级别的标题。其中加入了对照组div标签和h7标签发现好标签不起任何作用，div标签没有加粗效果。
段落元素
效果如图：
发现了吗，其中换行和多个空格最终显示出来只有一个空格。这里想到了什么吗，上一章我们有说过，<br/>标签用来换行，那么要产生多个空格效果怎么办，直接在要输入的空格的地方加入 ，注意";"不要省略，需要多少空格就复制多少份。相关的可以去网上查找其他的转义字符。
结构标签
效果如图所示。其中<hr />表示横线我们可以直观的看到div块标签和span行标签的区别。
链接
我们经常出现这种情况，点击了一段文字后跳转到了另外一个网址，比如这样：
源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<base target="_blank" />
</head>
<body>
<div><a href="https://www.baidu.com" target="_blank">百度一下</a></div>
<div><a href="javascript:void(0);" target="_blank">空链接</a></div>
<div><a href="javascript:;" target="_blank">空链接</a></div>
<!--上面定义的base表示全局设置为新打开一个标签页 -->
<!--如果用在单个标签内表示只针对使用的标签有效 -->
</body>
</html>点击后
注意可以使用href="javascript:void(0);"或者href="javascript:;"来进行空链接的跳转。
图片
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<base target="_blank" />
</head>
<body>
<img src="../img/favicon.ico" alt="..代表上级目录"/>
<img src="./favicon.ico" alt=".代表同级"/>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="网络资源"/>
<!--本地图片请保证图片存在，如果是网络资源，那么网址改变，或者服务器关闭就不能保证有效 -->
</body>
</html>效果：
列表
话不多说看代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<base target="_blank" />
</head>
<body>
<div>
<ul>
<!-- 无序列表
可以使用type改变默认的小黑点
disc
circle
square
-->
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul type="circle">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div>
<ol>
<!-- 有序列表
可以使用type改变默认的1
1
a
A
i
I
-->
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ol type= "A">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
<div>
<dl>
<dt>陕西</dt>
<dd>西安</dd>
<dd>咸阳</dd>
<!--
1.dt、dd是同级别的
2.dt、dd不能脱离dl单独使用
-->
</dl>
</div>
</body>
</html>
type类型改变后：
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
稻香老农丶2020/06/18 01:30:381楼编辑删除举报
TancyJimVonZ2020/06/18 04:14:15编辑删除举报