[华为云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类型改变后：
- 点赞
- 收藏
- 关注作者
评论（0）