一个H5页面的基本结构是什么

我么在编辑器中输入html:5可以得到

<!DOCTYPE html>

<!-- 声明文档类型 -->

<html lang="en">

<!-- 标识Html文档所用的语言是英语 -->

<head>

    <meta charset="UTF-8">

    <!-- 声明文档所使用的字符编码是UTF-8 -->

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

    <!-- 移动端适配 -->

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

    <!-- 指定文件的兼容模式，模式Edge 模式告诉 IE 以最高级模式渲染文档 -->

    <title>勇哥测试页面</title>

    <link rel="stylesheet" href="#">

    <!-- 引入外部css文件 -->

</head>

<body>

<!-- 结构标签就不介绍 -->

    <script></script>

    <script src="#"></script>

    <!-- 书写和引用外部js -->

</body>

</html>
常见的字符编码还有： gb2312（国家标准第2312条）
gbk2312（扩展版加了中文繁体）
unicode（万国码）
UTF-8（万国码升级版）
一般都用UTF-8包含了基本上所有的字符编码，一个大合集
 
SEO优化 -- meta标签优化
什么是SEO?
百度词条介绍
 SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是：为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，获得品牌收益；SEO包含站外SEO和站内SEO两方面；为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，还会使搜索引擎中显示的网站相关信息对用户来说更具有吸引力。
 
目的就是让你的页面能够更好的被搜索引擎爬虫抓取到
这html页面中通过一些meta标签来进行标识
 
页面描述
<meta name="description" content="不超过150个字符" />
 
页面关键词
<meta name="keywords" content="html5, css3, 关键字"/>
 
定义网页作者
<meta name="author" content="yongGcode" />
 
定义网页搜索引擎索引方式，robotterms是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。
<meta name="robots" content="index,follow" />
接下来再来简单的说说meta标签，由于meta的内容呢实在太多（学海无涯），这里就简单的介绍一下。
如果有问题及时联系，互相交流
 
转自w3c对meta的介绍：
 

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对

<meta>标签的四个属性：content  name  scheme  http-equiv

name：主要是对页面的解释说明和介绍 

需要配合content使用

　　属性值：

    • author  　　  作者
    • description　描述　
    • keywords　  关键字　
    • generator　  网页制作用的软件　
    • revised　　  重新访问的时间　　
    • others　　    其他描述
    • viewport        移动端窗口配置
    • robots           定义搜索引擎爬虫的索引方式
    • copyright      标注版权信息
    • rederer         规定双核浏览器默认渲染引擎
 http-equiv：属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
需要配合content使用
当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部
意思应该是当浏览器输入一个网址的时候，会向服务器请求资源，在请求html文件时，服务器会在发送文件的头文件中除了发送content-type:text/html，还会发送你所描述的内容给浏览器端
 
content：是对前面一个属性的描述，每个meta标签都会有content属性，content会配合name，http-equiv，scheme来使用
 
scheme：属性用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义。
 
 
 
 
 
 
以上就是今天分享的内容了，欢迎一起交流分享！！

前端三部曲之Html -- 1（html的基本结构和常见的meta标签的作用）的更多相关文章

  1. web前端-《手机移动端WEB资源整合》——meta标签篇

    前端网页meta元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词.meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向 ...

  2. 移动前端不得不了解的HTML5 head 头标签 —— Meta 标签

    Meta 标签 meta标签是HTML中head头部的一个辅助性标签,它位于HTML文档头部的 <head> 和 <title> 标记之间,它提供用户不可见的信息.虽然这部分信 ...

  3. 移动前端工作的那些事---前端制作篇之meta标签篇

    移动端前端制作有些地方不同于互联网,这篇主要讨论的是meta标签.meta标签位于head标签之间.是主要辅助HTML结构层的.meta标签不管在互联网前端还是在移动端都起了很重要的作用.这里只讨论移 ...

  4. 前端制作篇之meta标签篇

    移动端前端制作有些地方不同于互联网,这篇主要讨论的是meta标签.meta标签位于之间.是主要辅助HTML结构层的.meta标签不管在互联网前端还是在移动端都起了很重要的作用.这里只讨论移动端. 附上 ...

  5. 移动前端常用meta标签

    移动前端常用meta标签 移动前端head常用meta标签 原文链接:http://caibaojian.com/mobile-meta.html //code from http://caibaoj ...

  6. 前端三部曲之Css-- 1（常见的居中方式）

    下面来介绍一下web端页面最常见的居中方式 页面的基本结构:一个简单的div <!DOCTYPE html> <html lang="en"> <he ...

  7. 前端Datatables自定义事件（监听Datatables插件一些常见的事件动作）

    今天开发项目的时候,用Datatables插件做前端分页列表,想在列表发生翻页.排序.搜索.改变单页显示数据条数这些行为的时候做一些其他的操作,看了半天Datatables官网终于找到可以监测到这些事 ...

  8. 移动web前端之meta标签

    最近这段时间忙着做web移动端,东西跟pc端还是有区别的.这个月也学到了不少东西,太多了就从头开始,先总结meta标签吧. 主要标签内容和注释如下: <meta charset="UT ...

  9. 前端开发，走浏览器缓存真的很烦，拒绝浏览器走缓存从meta标签做起！

    <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv ...

随机推荐

  1. LeetCode：跳跃游戏【55】

    LeetCode:跳跃游戏[55] 题目描述 给定一个非负整数数组,你最初位于数组的第一个位置.数组中的每个元素代表你在该位置可以跳跃的最大长度.判断你是否能够到达最后一个位置. 示例 1: 输入: ...

  2. Linux中常用文件传输命令及使用方法

    sftp sftp即Secure Ftp 是一个基于SSH安全协议的文件传输管理工具.由于它是基于SSH的,会在传输过程中对用户的密码.数据等敏感信息进行加密,因此可以有效的防止用户信息在传输的过程中 ...

  3. js(11)

    style对象的相关案例 <!DOCTYPE html> <html> <head> <title>MyHtml.html</title> ...

  4. Apache禁止或允许固定IP访问特定目录、文件、URL

    1. 禁止访问某些文件/目录 增加Files选项来控制,比如要不允许访问 .inc 扩展名的文件,保护php类库: <Files ~ "\.inc$"> Order a ...

  5. workerman介绍

    WorkerMan的特性 1.纯PHP开发 使用WorkerMan开发的应用程序不依赖php-fpm.apache.nginx这些容器就可以独立运行. 这使得PHP开发者开发.部署.调试应用程序非常方 ...

  6. javascript基础知识整理（不定时更新）

    1.js中真与假的定义: 真:true,非零数字,非空字符串,非空对象 假:false,数字零,空字符串,空对象(null),undefined 2.使用for循环对json进行循环操作 for(va ...

  7. 「NOIP2016」「P1850」 换教室（期望dp

    题目描述 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程. 在可以选择的课程中,有 2n2n 节课程安排在 nn 个时间段上.在第 ii(1 \leq i \leq n1≤ ...

  8. ACM学习历程—HDU4956 Poor Hanamichi（模拟）

    Poor Hanamichi Problem Description Hanamichi is taking part in a programming contest, and he is assi ...

  9. ACM学习历程——hihoCoder挑战赛10A 01串（策略）

    时间限制:7000ms 单点时限:1000ms 内存限制:256MB 描述 给定两个整数n和m,求是否存在恰好包含n个0和m个1的01串S,使得S中不存在子串"001"和" ...

  10. EMQ开启mysql认证

    规定通过mqtt_user表格验证过的用户才能连接EMQ服务器,我们需要开启mysql插件认证.EMQ2.0自带mysql插件,下面开始配置. 新建mqtt_user表格 要想控制用户登录EMQ,肯定 ...