[华为云WEB前端全栈成长计划]三、常用标签

举报
TancyJimVonZ 发表于 2020/06/18 01:39:49 2020/06/18
【摘要】 上一章,我们大概的认识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/>标签用来换行,那么要产生多个空格效果怎么办,直接在要输入的空格的地方加入&nbsp;,注意";"不要省略,需要多少空格就复制多少份。相关的可以去网上查找其他的转义字符。

结构标签

效果如图所示。其中<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
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。