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