HTML5
文件均以
<html>
标记开始,以
</html>
标记结束。
一个完整
HTML5
文件包含头部和主体两个部分的内容,在头部标记<head></head>
里可以定义标题、样式等,文档的主 体<body></body>
中的内容就是浏览器要显示的信息。
HTML5的文档声明:
<!DOCTYPE html>
HTML5文档基本结构,示例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的第一个网页</title>
</head>
<body>
Hello World!
</body>
</html>
注意:
页面中必须有文档声明,而且必须在文档页面的第一行!
1.头部内容
<head>
标签用于表示网页的元数据,即描述网页的基本信息。其中主要包含以下标签:
1
)
<title>
标签用于定义页面的标题,是成对标记,位于
<head>
标签之间。
2
)
<meta>
标签用于定义页面的相关信息,为非成对标记,位于
<head>
标签之间。
3
)
<meta>
标签可以描述页面的作者、摘要、关键词、版权、自动刷新等页面信息。
4) <link>标签定义文档与外部资源的关系。标签最常见的用途是链接样式表。
<meta>标签的常用属性:
1
)
charset
属性:设置文档的字符集编码格式。
HTML5 中设置字符集编码,基本语法如下:<meta charset="UTF-8">
常见的字符集编码格式包括 GB2312
、
GBK
、
UTF-8
等。
GB2312 是国标码,简体中文。
GBK
是扩展的国标码。
UTF-8
是一种针对
Unicode
的可
变长度字符编码,也称万国码(常用)。
2
)
http-equiv
属性:
将信息写给浏览器看,让浏览器按照这里面的要求执行,可选属性值有 Content-Type(文档类型)、
refresh
(网页定时刷新)、
set-cookie
(设置浏览器
cookie
缓存),需要配合 content
属性使用。
http-equiv
属性只是表明需要设置哪一部分,具体的设置内容需要放到 content
属性中。
基本语法如下:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
3
)
name
属性:
将信息写给搜索引擎看。使用方法同 http-equiv
属性。常用的属性值有 author
(作者)、
keywords
(网页关键字)、
description(网页描述)、viewport(视口),它们在网页中必不可少。基本语法如下:
<!--作者-->
<meta name="author" content="http://www.html.com" />
<!--网页关键字:多个关键字用英文逗号分隔-->
<meta name="keywords" content="HTML5,网页,Web 前端开发" />
<!--网页描述:搜索网站时,title 下面的解释文字。-->
<meta name="description" content="这是我的第一个网页。" />
<link>标签:
<link>
标签可以加载一个图片作为网页图标。
<link>
标签有如下属性:
1
)
rel
属性:声明被链接文件与当前文件的关系,此处选
icon
。
2
)
type
属性:声明被链接文件的类型,可以省略。
3
)
href
属性:表示图片的路径地址。
基本语法如下:
<link rel="stylesheet" type="text/css" href="theme.css" />
2.主体内容
标记<body></body>包含文档所有的内容,如文字、图像、表格、表单等元素。例如, 在<body>中使用语义化标记设计网页,基本语法如下:
<body>
<header>网站主题</header>
<nav>连接菜单</nav>
<article>
主内容
<section>
章节段落
</section>
</article>
<aside>侧边栏</aside>
<footer>页脚</footer>
</body>
3,<meta>标签 name="viewport" 详解:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
什么是Viewport
手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。
Viewport 基础
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:width
:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)height
:和 width 相对应,指定高度initial-scale
:初始缩放比例,也即是当页面第一次 load 的时候缩放比例maximum-scale
:允许用户缩放到的最大比例minimum-scale
:允许用户缩放到的最小比例user-scalable
:用户是否可以手动缩放
shrink-to-fit=no
下面的一行代码可以让网页的宽度自动适应手机屏幕的宽度:
<meta name="viewport" content="width=device-width, initial-scale=1">
//在iOS9中要想起作用,得加上"shrink-to-fit=no"