认识html文件基本结构

HTML文档结构详解

一个HTML文件是有自己固定的结构的。

<html>

    <head>...</head>

    <body>...</body>

</html>

代码讲解:

1. <html></html>称为根标签,所有的网页标签都在<html></html>中。

2. <head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title><script> <style><link> <meta>等标签,头部标签在下一小节中会有详细介绍。

3. <body></body>标签之间的内容是网页的主要内容,如<h1><p><a><img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。

 

 <head>标签

下面我们来了解一下<head>标签的作用。文档的头部描述了文档的各种属性和信息,包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分:

<head>
    <title>...</title>
    <meta>
    <link>
    <style>...</style>
    <script>...</script>
</head>

<title>标签:在<title></title>标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出网页的主题。每个网页的内容都是不同的,每个网页都应该有一个独一无二的title

例如:

<head>
    <title>hello world</title>
</head>
<title>标签的内容“hello world”会在浏览器中的标题栏上显示出来,如下图所示:


<body>标签,网页上显示的内容放在这里

在网页上要展示出来的页面内容一定要放在body标签中。如下图是一个新闻文章的网页。




在浏览器中的显示效果:



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值