新手小白学前端(1)——从认识html标签开始

“HTML“”,对于这个很专业的词,其实我也不知道是什么东西,大概貌似是网页文档吧。
以前在学校的时候学过这个,但是那时候并没有接触过用代码来编写网页,当时都是可视化的工具,直接拿鼠标在哪儿点,点完了直接拖过来就好,哪里像现在这样,满屏都是标签,看不懂,但是现在不一样,最起码能看懂了。稍稍有那么一点意思。话不多说,该学习了:
首先先来解释一下什么叫标签:标签就和现实生活中的标签差不多的意思,都是用来标注一些东西,比如生活中的书签啥的。只不过网页中的标签不是给人看的,是给计算机看的,写给计算机编译器看的,当然人也是能看懂的哈。
标签这个东西是特定的,特定的标签标示特定的东西。如果标签错了,那表示的意思也就错了。所以这一部分一定要严谨。
首先呢看看网页最基础的都有些什么标签吧。
##网页中的默认标签
这一部分的标签呢是伴随网页出现的,也就是说,在你新建一个网页HTML文件的时候,会默认添加这些标签。而这些标签也构成了网页的最基本模型。
###1、HTML标签
这个应该是起到声明的作用吧,因为我见过的所有网页文件最外层都是这个标签,作用呢大概就是在说,这是一个网页文档,这里边放的所有内容都是网页上的内容
###2、head标签
head虽然不知道怎么解释,但是我知道他是干什么用的。在他里边我们一般做一些声明工作和导入工作,就比如字符集的声明,以及css样式的引入,JavaScript的编写和导入都是在这一部分进行的。
###3、meta标签’
head标签中有这样一个标签,我特意查了一下,发现在英语中是目标的意思,但具体在及损及专业看来是什么意思,我也不懂,因为在下英语也不咋地。但是,这个标签中写的都是声明的内容,比如字符集的声明等,都写在这个标签中。
###4、title标签
相信英语好的都已经猜出来了,对,没错,就是标题,只不过它是整个网页的标题,浏览网页的时候,最上边标题栏中看到的,就是这个标签中写的东西。
###5、body标签
有了head标签,当然就该有body标签,有头就得有身体,对吧。
这个标签里边写的东西可以说是重中之重,因为你在这里边写了什么,在网页上就会显示什么,比如在这个标签中写了一段话,他就会显示一段话。网页的结构和内容也都是由它来决定的。
说了这么多,再来看看上述标签是怎么写的吧``

<html>
	<head>
		<meta charset="utf-8">
		<title>网页标题</title>
	</head>
	<body>
		hello  world
	</body>
</html>

经过上述操作,我们只需要将这个HTML文件运行起来,我们就可以在浏览器中打开一个网页,并在网页上显示一句 hello world。
那么接下来,看一下标签到底是怎么写的吧,以及我们常用的一些标签。

首先,有些标签是成对出现的,而且大多数标签也都是成对出现的,书写格式是
<标签名 属性=“”属性的具体值“”> 标签内容</标签名>
注意的是,在HTML中用 <> 尖括号表示一个标签,里边的标签名也是规定好的,不能随便乱写,不然计算机不认识哦。
有了标签的书写方法,就来开始写标签吧


一个网页中最常见的是什么呢? 没错,是文字,那第一个标签肯定就是文字段落标签了;在这里呢我们要用

标签来表示一段文字
如`
<html>
	<head>
		<meta charset="utf-8">
		<title>网页标题</title>
	</head>
	<body>
		<p>这是一个文字段落标签,它表示一整行,他里边可以从放一段很长很长的文字</p>
	</body>
</html>

这时候呢,在网页上就会显示p标签里边的那段话
可是一段话很长很长的时候,我们想让他换行,怎么办呢?这时候我们就要用到换行标签
br
br标签,因为我打出完整的标签的话,会将我的文本换行,且不会显示标签文本, 所以我在写法上省略了外边的尖括号。只是单个标 签,不是成对出现的。所以在用的时候只需要输入一个就好。
使用这个换行标签,它可以将我们的网页自动换行,也就是说,你在什么地方写换行标签,就可以在哪里换行,比如你在平标签中写一段话,想让这段话在中间某个地方换行,那你就可以在文字中间加入一个br标签,它可以帮你完成换行。
比如

<html>
	<head>
		<meta charset="utf-8">
		<title>网页标题</title>
	</head>
	<body>
		<p>hello  world,这个后面有一段很长<br>很长的话,长的不能再长的那种话总之很长很长</p>
	</body>
</html>

我在段落标签中输了一段很长的文字,而且在中间加了br标签,那么在网页中,的文字就会在长字后面换行,后面的文字在下一行显示。
nobr
有了换行标签,那肯定得有不换行啊,对不,所以,当当当当,nobr,哈哈,是不是早就料到了,所以,你将要写的东西装入这个标签内,哪怕你给女朋友写一万字的检查,那也只会在这一行中显示。
img
可是网页不该只有文字,不然那该多难看,所以,我们还要加入图,加入图片我们就需要用到img标签,同样,这个标签只是单标签,而它有一个很重要的属性,那就是src也就是文件路径
比如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页标题</title>
	</head>
	<body>
		<img src="img/这是图片名.jpg" >
    </body>
</html>

一般我们会建一个文件夹,将网页编写时要用到的图片存放在此文件夹中,也就是示例代码的img文件夹中。这样我们就可以在网页中插入一张美美的图片啦。
a
当然,网页中常见的还有就是超链接啦,超链接呢我们用a标签来实现,在标签属性中加入链接的地址,在标签中写入要实现超链接的内容。如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页标题</title>
	</head>
	<body>
		<a href="http://www.baidu.com"><img src="img/这是图片名.jpg" ></a>		
    </body>
</html>

这样,我们就在图片中插入了一个超链接,超链接的地址指向百度,也就是说,你点击图片,就可以跳转到你想跳转的页面。当然,你也可以将超链接绑定到文字上

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值