持续会添加一些新的内容：
<meta charset="UTF-8"> <!-- 设置 H5 的编码格式 charset 是字符集的意思 设置 UTF-8 编码 需要使用 charset 为网页提供了一种编码方式，否则页面很可能出现乱码。 UTF-8 是一种字符编码，除此之外在国内网站常用的还有GB2312和GBK。 GB2312 和 GBK 主要用于汉字编码，utf-8 是国际编码，实用性比较强。 --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!-- viewport 意思是视图 width 设置视觉窗口的宽度，为一个正整数，或字符串"width-device" initial-scale 设置页面的初始缩放值，为一个数字，可以带小数 minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数 maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数 height 设置视觉窗口的高度，这个属性对我们并不重要，很少使用 user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 -->
meta中的name属性
<!--用以说明生成工具--> <meta name="Generator" content=""> <!--向搜索引擎说明你的网页的关键词--> <meta name="Keywords" content=""> <!-- 告诉搜索引擎你的站点的主要内容--> <meta name="Description" content=""> <!-- 告诉搜索引擎你的站点的制作的作者 --> <meta name="Author" content="你的姓名"> <meta name="Robots" content= "all|none|index|noindex|follow|nofollow"> <!-- 设定为all：文件将被检索，且页面上的链接可以被查询； 设定为none：文件将不被检索，且页面上的链接不可以被查询； 设定为index：文件将被检索； 设定为follow：页面上的链接可以被查询； 设定为noindex：文件将不被检索，但页面上的链接可以被查询； 设定为nofollow：文件将不被检索，页面上的链接可以被查询。 -->
meta中的 http-equiv属性
<!--设置字符编码和文件格式--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--设置定时刷新--> <meta http-equiv="Refresh" content="8;url=http://"> <!-- 告诉浏览器不要缓存页面--> <meta http-equiv="Pragma" content="no-cache"> <!-- 告诉浏览器不要缓存页面 --> <meta http-equiv="cache-control" content="no-cache"> <!--禁用浏览器缓存此页面--> <meta http-equiv="expires" content="0"> <!--设置ie的文档兼容模式,设置IE7+的浏览器以IE7的兼容模式查看页面--> <meta http-equiv="X-UA-Compatible" content="IE=7">
html5中更多的meta与link
<!DOCTYPE html> <!-- HTML5 doctype 不区分大小写 --> <html lang="zh"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 优先使用IE最新版本和 Chrome --> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <!-- 360 浏览器内核控制 --> <!-- content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别代表用webkit内核，IE兼容内核，IE标准内核。 若页面需默认用极速核，增加标签：<meta name="renderer" content="webkit"> 若页面需默认用ie兼容内核，增加标签：<meta name="renderer" content="ie-comp"> 若页面需默认用ie标准内核，增加标签：<meta name="renderer" content="ie-stand"> --> <!-- width=device-width 会导致 iPhone 5 添加到主屏后以 WebAPP 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz --> <meta name ="viewport" content ="initial-scale=1.0, maximum-scale=3, minimum-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏时的标题 --> <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebAPP 全屏模式 --> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 状态条颜色 --> <meta name="format-detection" content="telephone=no" /> <!-- 屏蔽数字自动识别为电话号码 --> <!-- favicon 图标 --> <link type="image/x-icon" rel="icon" href="http://static.example.com/favicon.ico"/> <link type="image/x-icon" rel="shortcut icon" href="http://static.example.com/favicon.ico"/> <link type="image/x-icon" rel="bookmark" href="http://static.example.com/favicon.ico"/> <!-- iOS 图标 begin --> <!--默认 57x57 像素--> <link rel="apple-touch-icon-precomposed" href="http://wanke.etao.com/assets/img/icon/57/apple-touch-icon-57x57-precomposed.png" /> <!--iPad 1 72x72 像素--> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://wanke.etao.com/assets/img/icon/72/apple-touch-icon-72x72-precomposed.png" /> <!--iPhone 4 114x114 像素--> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://wanke.etao.com/assets/img/icon/114/apple-touch-icon-114x114-precomposed.png" /> <!-- iOS 图标 end --> <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 --> <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 --> <!-- SEO 优化 --> <meta name="description" content="" /> <!-- 页面描述 --> <meta name="keywords" content=""/> <!-- 页面关键词 --> <title>页面标题</title> <!-- iOS 应用启动界面设置 begin --> <!-- iPad Landscape – 1024 x 748 --> <link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" /> <!-- iPad Portrait – 768 x 1004 --> <link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" /> <!-- iPhone/iPod Touch Portrait – 320 x 480 (standard resolution) --> <link rel="apple-touch-startup-image" href="img/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch Portrait – 640 x 960 pixels (high-resolution) --> <link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" /> <!-- iOS 应用启动界面设置 end --> </head>
基本的meta设置：
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maxinum-scale=1,width=device-width"> <meta content="telephone=no" name="format-detection"> <meta name="applicable-device" content="mobile"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no,email=no">
<meta charset="utf-8"> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> <!-- 启用webAPP全屏模式--> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 隐藏状态栏或者设置状态栏的颜色--> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 忽略数字自动识别为电话号码--> <meta name="format-detection" content="telephone=no"> <!--控制缓存的失效日期 --> <meta http-equiv="Expires" content="-1"> <!-- 禁止转码--> <meta http-equiv="Cache-Control" content="no-cache"> <!-- 禁止缓存访问页面--> <meta http-equiv="Pragma" content="no-cache"> <meta name="applicable-device" content="mobile"> <!-- X5内核下强制横屏或者竖屏--> <meta name="x5-orientation" content="portrait" /> <!--X5下设置全屏--> <meta name="x5-fullscreen" content="true" /> <!-- UC强制竖屏或横屏--> <meta name="screen-orientation" content="portrait"> <!-- UC全屏显示--> <meta name="full-screen" content="yes"> <!--禁止识别电话号码和邮箱--> <meta name="format-detection" content="telephone=no, email=no" /> <!-- 页面关键词--> <meta content="" name="keywords"> <meta name="description" content="">
相关推荐
3. **元数据标签 `<meta>`** - 用于定义文档的元数据，如字符集、关键词等，对于搜索引擎优化至关重要。 - 示例：`<meta charset="utf-8">` 设置文档编码为UTF-8。 - `<meta name="keyword" content="淘宝,网上...
【酷炫浪漫的H5表白网页制作详解】 在数字化的时代，用创新的方式表达情感成为了一种新潮流。本文将深入探讨如何利用HTML、CSS和JavaScript（包括jQuery）技术，制作一款“酷炫浪漫的H5表白网页”，让你的爱意在...
### H5前端面试题知识点详解 #### 一、HTML和CSS ##### 1. 测试过的浏览器及其内核 - **Chrome**: Blink 内核 - **Firefox**: Gecko 内核 - **Safari**: WebKit 内核 - **Internet Explorer (IE)**: Trident 内核 -...
### H5基础及高级知识点详解 #### 一、内联元素与块元素 - **内联元素与块元素概述** - **内联元素**（Inline Element）：默认情况下，这些元素只占据必要的空间，不会形成新的行。例如，`<span>`、`<a>`等都是...
- **元数据型 (Metadata Content)**：这类元素主要用于描述文档或其他内容，如`<meta>`, `<link>`, `<script>`, `<style>`等。 - **区块型 (Sectioning Content)**：定义文档的结构区域，如`<article>`, `<aside>`...
- 通过设置路由对象`meta`属性`keepAlive`来控制页面是否需要缓存，例如：`{path: '/', component: Home, meta: { keepAlive: true }}` **6. 页面组件封装** - 可以封装常用的组件如`toast`、`dialog`和底部导航栏...
在移动端H5页面开发中，适配屏幕是一个重要的任务，以确保内容在不同尺寸和分辨率的设备上都能正常显示。以下将详细介绍四种常见的适配方案： ### 方法一：引入淘宝开源的可伸缩布局方案（lib-flexible） 淘宝的可...
7. SEO优化：一个优秀的HTML5自适应模板应考虑搜索引擎优化（SEO），例如合理使用meta标签、确保内容可爬取、优化页面加载速度等，以提高网站在搜索引擎中的排名。 8. 兼容性：由于H5技术的广泛支持，这个模板通常...
本文实例为大家分享了vue移动端左右滑动事件，供大家参考，具体内容如下 <!...<... <head>...meta charset=UTF-8>...meta name=viewport content=width=device-width, initial-...meta content=telephone=no name
在自适应响应式设计中，HTML会使用如`<meta>`标签的视口设置（viewport meta tag），以及媒体查询（media queries）来适应不同设备的显示。 2. CSS：负责样式和布局，通过选择器匹配HTML元素并应用样式规则，让网页...
5. SEO优化：使用语义化HTML标签，添加meta标签，优化图片大小和格式，确保搜索引擎能够理解和索引网页内容。 6. 性能优化：压缩CSS和JavaScript文件，减少HTTP请求，使用CDN加速资源加载，优化图片和视频，实现更...
### HTML语法概述与各标签详解 #### 一、HTML语法概览 HTML（Hyper Text Markup Language），即超文本标记语言，是一种用来创建网页的标准标记语言。它通过一系列的标签来组织网页内容，使得内容能够被浏览器正确...
#### 一、Meta标签详解 Meta标签主要用于定义页面的元信息，比如字符集、页面描述、关键词等，这些信息对于搜索引擎优化（SEO）至关重要。 ##### 1. Charset属性 - **用途**：设置文档的字符编码格式。 - **示例*...
该资源中的HTML5模板，不仅考虑了桌面端的展示效果，还通过meta标签实现了对不同屏幕尺寸的适配，确保在手机和平板上也能有良好的用户体验。 其次，CSS（Cascading Style Sheets）是用于控制网页样式的语言，特别是...
7. SEO友好：使用语义化HTML和合适的meta标签，有助于搜索引擎理解和索引网页内容。 8. Accessibility：遵循无障碍（WCAG）标准，确保残障人士也能轻松访问网站。 综上所述，这个压缩包中的源码应该包含了实现上述...
手机和电脑的自适应设计，意味着源码中可能包含meta标签，如`<meta name="viewport" content="width=device-width, initial-scale=1">`，用于确保页面在不同设备上都能正确显示。 CSS（Cascading Style Sheets）则...
这套源码中可能包含了各种响应式的HTML标签和属性，如`<meta name="viewport">`，用于设定视口宽度，确保页面在不同设备上正确缩放。 其次，CSS（层叠样式表）是控制页面外观和布局的重要工具。在移动端，CSS3的...
1. 设置viewport元标签：通过`<meta name="viewport" content="width=device-width, initial-scale=1">`，确保页面宽度与设备宽度一致，并保持初始缩放比例为1。 2. 引入Flexible.js库：这个库会根据设备的dpr动态...
为了提高搜索引擎的可见性，源码可能遵循SEO最佳实践，如添加meta标签，优化页面标题、描述，以及确保所有链接和图片都有合适的alt属性。 7. 移动优先策略： "红辉煌相机"遵循移动优先的设计原则，先为移动设备...