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> 标签里面还可以包含其它的标签。