3.1 HTML5 元素简介及使用方法

本节课程为大家讲解 HTML5 元素、属性和格式化。而这里也是主要以 HTML 的数据先为主,我们从基础开始讲起。

HTML 元素

HTML 元素指的是从开始标签到结束标签的所有代码。

我们看一张图:

图片说明

<p> 标签是段落开始标签,而有 / 的称为结束标签 </p>。开始标签和结束标签之间的部分是元素内容。我们也可以称开始标签为开放标签,后面的结束标签称为闭合标签,这是它的另一种说法。下面的 <br /> 标签我们称为空标签或空元素,由于它里面没有元素内容。而且结束符是在元素内部,开始元素内部进行结束。需要注意的是内部的 / 结束标志需要加上,当然不加也不会错误,但是这是不规范的。下面我们根据具体代码来演示一下。

我们打开开发环境:

图片说明

选择 Create New Project 创建一个工程:

图片说明

选择 Static Web,然后 next:

图片说明

填写一下项目名称(Project name),我这里填写 L02_Heading,然后 Finash。

图片说明

完成工程的创建。

在项目目录下点击鼠标右键新建一个 HTML 文件:

图片说明

这里写上文件名就好,不需要我们再写后缀名。包括一些基础的 HTML 代码也帮你填写好了。我们直接在 <body> 中写我们的代码。
先写一个 p 标签:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <p>this is my web page</p>
</body>
</html>

然后在右上角选择浏览器来运行看下效果。

图片说明

没有问题,已经显示了具体的内容。
那么在这个标签下再写内容的话肯定要另起一行了,我们继续添加代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <p>this is my web page</p>
    Hello jikexueyuan
    Hello World
</body>
</html>

刷新浏览器:

图片说明

大家可以看到下面写的内容全部在一行里面,如果你想把他们分开,在代码里面添加:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <p>this is my web page</p>
    Hello jikexueyuan <br/> 
    Hello World
</body>
</html>

这个时候再刷新页面:

图片说明

可以看见已经换行了。而且他们之间的距离是有差距的,<p> 标签定义和换行是有差距的,虽然都是换行,其行与行之间的间距是不一样的,这就是 <br />。刚才我们说过它属于空元素,你写成 <br> 也是可以执行的,效果没有任何区别。只是推荐大家加上 / ,因为在后面我们的代码会越来越规范,这些规范化的东西根据我们的版本更新后会去加上,以后可能会因为这些出现一些不必要的麻烦。包括结束符标签也希望可以加上,如果你去掉 </p>,刷新一下浏览器:

图片说明

内容虽然也呈现了,但是跟我们想要的内容是有一定差距的。所以推荐大家把标准化写好。

HTML 元素语法

元素的内容是开始标签与结束标签之间的内容。在上图中 this is my web page 就是我们的元素内容。

空元素在开始标签中进行关闭。我们的 <br /> 就是一个开始标签,在开始标签中直接加入了 /,代表它已经结束了。当然我们不加也能呈现内容。

大多数 HTML 元素可拥有属性。关于属性的使用我们在稍后的课程中给大家讲解。

嵌套的 HTML 元素

大多数的 HTML 元素都是可以嵌套使用的,大家可以看下自己的代码。

首先最外层是一个 <html> 标签,里面包含一个 <head>,而 <head> 里面又包含一个 <title>。包括 <body> 里面包含一个 <p> 标签,<p> 标签里面还可以包含其它的标签。

全部评论

相关推荐

Pandaileee:校友加油我现在也只有一个保底太难了
点赞 评论 收藏
分享
ArisRobert:统一解释一下,第4点的意思是,公司按需通知员工,没被通知到的员工是没法去上班的,所以只要没被通知到,就自动离职。就是一种比较抽象的裁员。
点赞 评论 收藏
分享
点赞 收藏 评论
分享
牛客网
牛客企业服务