HTML学习（六）：网页的骨架

最新推荐文章于 2024-04-01 20:34:15 发布

观月执白

最新推荐文章于 2024-04-01 20:34:15 发布

阅读量874

点赞数

分类专栏： HTML 文章标签： html 前端

本文链接：https://blog.csdn.net/pianzang5201/article/details/121025254

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

注释：注释内容再  之间填写，即

<!-- 在此处写注释 -->

一、html标签

html是双标签，所有的网页内容在html标签内填写。

<html>

<!-- 网页所有内容都写在这里 -->

</html>

二、head标签

head是双标签，所有的网页头部内容在head标签内填写。

<html>
    <head>
    <!-- 网页所有头部内容都写在这里 -->

    </head>

</html>

三、body标签

body是双标签，所有的网页头部内容在body标签内填写。

<html>
    <head>
    <!-- 网页所有头部内容都写在这里 -->

    </head>

    <body>
    <!-- 网页所有主体内容都写在这里 -->
    
    </body>

</html>

四、title标签

title是双标签，包含在head标签内，所有的网页头部内容在title标签内填写。

<html>
    <head>
        <title>
        <!-- 网页标题写在这里 -->
        </title>

    <!-- 网页所有头部内容都写在这里 -->

    </head>

    <body>
    <!-- 网页所有主体内容都写在这里 -->

    </body>

</html>

五、其他

<!DOCTYPE html>表示文档类型的定义，表示的是此网页使用的是哪一年定制的骨架。

<meta charset="utf-8">的meta是单标签，拥有一个chartset（字符集）属性，属性值为utf-8，防止内容出现乱码。

<meta name="viewport" content="width=device-width, initial-scale=1">不是很好理解，首先要清楚几个概念。meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。

viewport 是用户网页的可视区域。移动设备上的viewport是设备屏幕上用来显示网页的那部分区域，再具体一点就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域大，也可能比浏览器的可视区域小。在默认状况下，移动设备上的viewport都是大于浏览器可视区域的，这是由于移动设备的分辨率相对于PC来讲都比较小，因此为了能在移动设备上正常显示那些为PC浏览器设计的网站，移动设备上的浏览器都会把本身默认的viewport设为980px或1024px（也多是其它值，由设备自己决定），但后果是浏览器出现横向滚动条，这是由于浏览器可视区域的宽度比默认的viewport的宽度小。

也就是说，PC 端的网页若是以自身默认“视区”大小在移动设备上显示时，会超出移动设备的屏幕大小，致使出现横向滚动条。使用 <meta viewport>方案，可使网页根据不一样的显示设备“自适应”，自动调整网页自身的“视区”，去适应不一样的设备。

至此，骨架的基本结构为：

<!DOCTYPE html>
<html>
    <head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <title></title>
    </head>
    <body>

    </body>
</html>

观月执白

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML学习（六）：网页的骨架

注释：注释内容再之间填写，即一、html标签html是双标签，所有的网页内容在html标签内填写。<html></html>二、head标签head是双标签，所有的网页头部内容在head标签内填写。<html> <head> <!-- 网页所有头部内容都写...
复制链接

扫一扫