[华为云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)