HTML基本骨架

Altenaco
500 阅读6分钟

目录

HTML基本骨架1 HTML基本结构2 文档声明3 HTML元素4 head元素

HTML基本骨架

1 HTML基本结构


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2 文档声明


<!DOCTYPE html>

DTD文档模型也称DOCTYPE文档声明，它是Document TypeDefinition的英文缩写，意思是文档类型定义，在HTML文档中 ，用来指定页面所使用的HTML（或者XHTML）的版本 。

HTML基本骨架1 HTML基本结构2 文档声明3 HTML元素4 head元素

是指HTML5版本

其他版本：

HTML4.01严格版

">

HTML4.01过渡版

">

3 HTML元素

是一个网页的根目录，一页网页只能有一个。

lang是指定网页的开发语言，en表示英文，zh-CN表示中文

lang的作用如下：

  • 设定不同语言的css样式或者字体
  • 方便搜索引擎做精确的识别
  • 让语法检查程序做语言识别
  • 帮助翻译工具做识别
  • 帮助网页阅读程序做识别

4 head元素

主要是对网页的内容进行配置

1

 <meta charset="UTF-8">

设置字符编码格式，如果不声明，则会乱码

2

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

设置浏览器的渲染模式

meta标签的http-equiv属性相当于文件头的作用，它向浏览器传递一些信息使界面能正确渲染 ， 而X-UA-Compatible参数是IE8新加的一个设置，用来让IE8浏览器按照content设置的内核渲染方式进行界面渲染，

从而解决部分兼容性的问题。IE=edge表示使用最高版本的IE内核进行渲染，比如你的电脑里有IE 6/7/8/9内核浏览器，它会强制使用IE9的内核进行渲染。关于X-UA-Compatible的用法详情可参考blog.csdn.net/weixin_3058…，blog.csdn.net/ccfxue/arti…这两篇文章。

　　http-equiv的语法格式是： <meta http-equiv="参数"content="参数变量值">； 其中有以下几种参数：

  • content-Type：用来设置网页字符集，这个是html4的用法，所以不推荐使用
  • Expires（期限）：用于设置网页到期时间，一旦网页过期，必须到服务器上重新传输。用法：**<metahttp-equiv="expires"content="Fri,12Jan200118:18:18GMT">，注意必须使用GMT的时间格式**
  • Pragma（Cache模式）：用于禁止浏览器从本地的缓存中调阅页面内容，设定后一旦离开网页就无法从cache中在调出。**用法：<metahttp-equiv="Pragma"content="no-cache">**
  • Refresh（刷新）：自动刷新页面并指向新的页面。用法：metahttp-equiv="Refresh"content="2;URL=https://www.jb51.net"（2表示的是秒数）
  • cache-control：请求和响应遵循的缓存机制，也就是清除缓存（在访问这个网站要重新下载）。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached。响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。这些指定的含义如下：
Public指示响应可被任何缓存区缓存
Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效
no-cache指示请求或响应消息不能缓存
no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应
min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应
max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

3

<meta name="viewport" content="width=device-width, initial-scale=1.0">

设置视窗、视口大小设置

viewport就是设备的屏幕上用来显示我们的网页的那一块区域，只不过PC端和移动端的视口设置不同，PC端视口是浏览器窗口区域，而在移动端有三个不同的视口概念：布局视口、视觉视口、理想视口。详情可查看这篇文章 关于这三个视口的总结如下:

  • layout viewport（布局视口）：PC端上的布局视口就是浏览器的宽度，而在移动端上为了让PC端设计的网页内容完全显示在屏幕中，此时的布局视口要远远大于移动设备屏幕的尺寸，不然内容会挤成一团出现错乱。
  • visual viewport（视觉视口）：用户正在看到的网页的区域，可通过缩放来查看网页内容。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也会变大。同理，用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也变小了。注意，不管用户如何缩放，都不会影响到布局视口的宽度。
  • ideal viewport（理想视口）：布局视口的一个理想尺寸，只有当布局视口的尺寸等于设备屏幕的尺寸时，才是理想视口。　

width=device-width表示viewport的宽度等于设备的宽度，如果不这么设定那内容就会按照viewport的默认大小显示，可能就会出现滚动条。

initial-scale表示设置web页面的初始缩放比例。设置为1.0表示显示未经缩放的web页面。

maximum-scale和minimum-scale用于设置用户对web页面缩放比例的限制。值的范围为0.25~10.0之间。

user-scalable指定用户是否可以缩放视区，即缩放web页面的视图。值为yes时允许用户进行缩放，值为no时不允许缩放。

　　除此之外name属性还有其他的参数值，比如：

  • keywords(关键字) 告诉搜索引擎，该网页的关键字
  • description(网站内容描述) 用于告诉搜索引擎，你网站的主要内容。
  • robots(定义搜索引擎爬虫的索引方式) robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引
  • author(作者)
  • generator(网页制作软件）
  • copyright(版权)

4

<title>Document</title>

定义文档的标题

并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。

5

<body></body>

body元素定义文档的主体，包含了文档的所有内容（文本、超链接、图像、音频、视频、列表等），这部分内容是用户可以看到的，是设计的核心部分。

avatar
文章
阅读
粉丝