html5前端的head怎么写？

最新推荐文章于 2022-10-21 19:27:17 发布
最新推荐文章于 2022-10-21 19:27:17 发布
阅读量242 收藏
点赞数
文章标签： 前端 ui javascript ViewUI
原文链接：https://my.oschina.net/u/2433082/blog/818567
版权 
<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>Amaze UI Examples</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="{{assets}}i/favicon.png">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="{{assets}}i/app-icon72x72@2x.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
  <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
  <meta name="msapplication-TileColor" content="#0e90d2">

  <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
  <!--
  <link rel="canonical" href="http://www.example.com/">
  -->

</head>
<body>
...

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<![endif]-->

</body>
</html>

 说明：

1、移动优先

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

禁止用户进行缩放

2、渲染引擎

由于目前国内有一些x核浏览器，指定网页使用 webkit 引擎渲染，下面的代码，只对 360浏览器6.5+有效

<meta name="renderer" content="webkit">

 3、防止页面被植入莫名其妙的广告

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

转载于:https://my.oschina.net/u/2433082/blog/818567

chengxiong5395
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Head First HTML5 Programming（中文版）
03-16
Head First HTML5 Programming（中文版）| Eric Freeman / Elisabeth Robson | 中国电力出版社 | 出版年: 2012-9 ⚠️注意：这本书网上有很多扫描版本的资源，但其实都是同一份PDF文件，里面的页面大小不统一，且...
HTML5基础
wkk的博客
12-23 1145
HTML是HyperText Markup Language(超文本标记语言)的缩写，用于创建网页的标准标记语言。HTML使用标记标签来描述网页，由浏览器来解析，即使用HTML来建立Web站点，通过Web浏览器读取HTML文档，并以网页的形式显示出来。HTML5是HTML最新的修订版本。任何一个网页都是由一行行的HTML代码编写而成。HTML5除了本身的标记外，广义上还包含CSS3 与 JavaScript。HTML5的特点头部只需要写、、
入门Web前端开发 ＜header＞
m0_74364380的博客
10-21 2248
入门Web前端开发一、了解web前端HTML、CSS之导学宇宙第一编辑器VS Codechrome浏览器深入了解网站开发web前端三大核心技术二、关于HTMLHTML基本结构和属性HTML初始代码HTML中的注释标题与段落文本修饰标签图片属性引入文件的地址路径跳转锚点特殊符号无序列表有序列表定义列表 一、了解web前端 HTML、CSS之导学 什么是HTML？ HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻
自学前端（三）：head标签的内容和书写方法
老谷笔记
07-16 745
前言 经过前两节的学习，老谷已经初步了解了HTML的含义和结构内容。那么今天老谷将继续学习HTML中的head标签。 包含内容 一般来说，head标签只包含如下六个内容。 一、title标签 这个是页面的标题，所以每个页面都需要写title标签 二.meta标签 meta标签用来定义一些页面的特殊含义，例如网页描述、关键词等。这是给“搜索引擎蜘蛛”看的，比如百度蜘蛛，搜狗蜘蛛等。所以这个标签和网页的“seo”有所关联。 name属性 meta标签中的name属性大约有这么几个 1.keywords-网页关
前端学习（二）：head标签
爱吃西瓜的夏天
09-08 273
进击のpython 前端学习——head标签 head标签中的相关标签，是看不见摸不着的，仅仅是对应用于网页的一些基础信息(元信息) 前面说的是青春版，完整的head应该是这样的 !<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <met...
怎么写html5文档 第一个html5文档
pikachu-fat的博客
11-06 542
什么是html文档： HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言，而是一种标记语言 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 文档包含了HTML 标签及文本内容 HTML文档也叫做 web 页面 什么是标签： HTML 标记标签通常被称...
前端基础-HTML5新特性
01-20
html5的新特点 1.语法更简单 a) 头部声明 b) 简化了字符集声明 2.语法更宽松 a) 可以省略结束符的标签 li、dt、dd、p、optgroup、option、tr、td、th b) 可以完全省略的标签 html、head、body 3.标签语义化 增加了...
Web前端基础：HTML5技术介绍.pptx
05-06
所有的HTML文档都遵循由W3C规定的HTML规范。 在文档的第一行可能出现这样的一句DTD引用语句，这句语句说明了HTML遵循了W3C的标准。;HTML文档的根元素;...DOCTYPE>、<html>、<head>、和等HTML基本标记。;THANK YOU!
HTML标签meta总结,HTML5 head meta 属性整理
09-28
移动前端开发中添加一些webkit专属的HTML5头部标签，帮助浏览器更好解析HTML代码，更好地将移动web前端页面表现出来。本文整理一些常用的meta标签,需要的朋友可以参考下
《Html》前端学习笔记
最新发布
04-12
DOCTYPE html>声明文档类型 ，doctype 不区分大小写，没有 5 <html>：是整个文档的根节点，它包含了两个子节点 <head>：主要描述文档设置信息， 比如字符集（有 utf-8） ，标题 title <body>：是文档的主体，需要...
小红帽学前端 | 1.2 了解 head 元素
小红帽的博客
09-01 253
前言 我们上次大概了解了 HTML 的那么一个结构。其中讲到我们有一个 head 元素，这个东西不能简单讲完。所以这边我们单独挖出来讲讲。 1 定义 学之前还是要先知道人家是啥，其实 head 元素人家也是一个元素，但是与一般元素不同，人家一般元素的内容是会显示在浏览器页面上的。head 元素里面的内容是不会显示在浏览器中的。他里面放着的是文档的各种属性和信息，包括文档的标题，样式和脚本的引用，元...
前端之HTML
qq_774952435的博客
04-28 2162
html基础
html5书写,高效书写HTML5
weixin_31509859的博客
06-18 183
H5开始对标签及属性的书写更加包容，同时新增了语义化的标签，也是为了替代纯div+css的布局，本文讲带大家一起学习和探讨HTML书写规范。1.文档类型声明文档类型声明2.标签、属性名、文件名推荐小写字母标签、属性、文件名3.双标签可省略关闭标签，不过建议保留关闭标签双标签4.单标签的“/”可写可不写(但在XHTML和XML中斜线是必须的)"/"的省略5.可全部省略的标签，不过建议保留可全部省略的...
关于html<head>部分怎么写的一些思考
晴晴晴的博客
07-17 1068
关于html部分怎么写的一些思考 在编辑器里直接!+tab键就可以写好一个 html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-
前端html小课堂—head篇
yunduanaoligei的博客
01-21 442
今天分享下”前端html小课堂—head篇“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。下面介绍一下常用的head头部结构，以及每个标签、元素的意义和使用场景的逐一介绍（本文基于一个伟大的神的文章，扩展和总结）。 padding.me的head头结构 复制代码 代码如下: <!DOCTYPE HTML> <html lang="zh-cmn-Hans"> <head> &l
重学前端（九）-head
weixin_33895695的博客
06-19 146
元信息：描述自身的信息，元信息类标签，就是 HTML 用于描述文档自身的一类标签，它们通常出现在 head 标签中，一般都不会在页面被显示出来（与此相对，其它标签，如语义类标签，描述的是业务）。 一、定义和用法 <head> 标签用于定义文档的头部，它是所有头部元素的容器。 <head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。 复制代码文档的头部...
HTML基础笔记——head标签
KllKllKll
07-15 3844
//一个简单的HTML结构 <!DOCTYPE html> //文档声明 <html> <head> <title>标题</title> </head> <body> <p>内容</p> </body> </html> head标签是网页的头部，用于定义一些特殊的内容，比如页面标题、定时刷新、外部.
html5-"head" 标签里面应该放什么
健哥哥的博客
05-15 6526
head里面应该要放什么？ title Encoding（编码方式） Description（网站描述） Viewport Viewport使用 javascript文件应该放在head还是body，js文件<script>标签放在head和body的区别 defer和async的用法和区别
html中head标签中都放哪些内容
热门推荐
xiaoshi178488920的专栏
05-21 1万+
html中head标签中的内容 定义和用法 标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。 文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 下面这些标签可用在 head 部分： 标签">, , 标签"
请帮助我写一下二手书商城的前端网页代码？
03-25
A：非常感谢您的提问！下面是一个简单的二手书商城前端网页的代码实现。请注意，这只是一个示例，您需要根据自己的需求进行适当的调整。 HTML代码： ```html <!DOCTYPE html> <html> <head> <title>二手书商城</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <header> <h1>二手书商城</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">图书分类</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </header> <main> <h2>热门图书</h2> <section class="book-list"> <div class="book-card"> <img src="book1.jpg"> <h3>《人性的弱点》</h3> <p class="author">作者：卡耐基</p> <p class="price">价格：￥20.00</p> <button class="buy">立即购买</button> </div> <div class="book-card"> <img src="book2.jpg"> <h3>《活着》</h3> <p class="author">作者：余华</p> <p class="price">价格：￥15.00</p> <button class="buy">立即购买</button> </div> <div class="book-card"> <img src="book3.jpg"> <h3>《三体》</h3> <p class="author">作者：刘慈欣</p> <p class="price">价格：￥30.00</p> <button class="buy">立即购买</button> </div> </section> <h2>全部图书</h2> <select> <option value="all">全部</option> <option value="novel">小说</option> <option value="biography">传记</option> <option value="history">历史</option> <option value="science-fiction">科幻</option> </select> <section class="book-list"> <div class="book-card"> <img src="book4.jpg"> <h3>《平凡的世界》</h3> <p class="author">作者：路遥</p> <p class="price">价格：￥18.00</p> <button class="buy">立即购买</button> </div> <div class="book-card"> <img src="book5.jpg"> <h3>《战争与和平》</h3> <p class="author">作者：列夫·托尔斯泰</p> <p class="price">价格：￥28.00</p> <button class="buy">立即购买</button> </div> <div class="book-card"> <img src="book6.jpg"> <h3>《1984》</h3> <p class="author">作者：乔治·奥威尔</p> <p class="price">价格：￥21.50</p> <button class="buy">立即购买</button> </div> </section> </main> <footer> <p>版权所有 © 2022 二手书商城</p> </footer> </body> </html> ``` CSS代码： ```css header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 20px; background-color: #fff; box-shadow: 0px 2px 10px rgba(0,0,0,0.1); } header h1 { font-size: 36px; } nav ul { display: flex; flex-direction: row; } nav ul li { list-style: none; margin-right: 20px; } nav ul li a { text-decoration: none; color: #333; transition: all 0.3s ease-in-out; } nav ul li a:hover { color: #f00; } .book-list { display: flex; flex-wrap: wrap; margin-top: 20px; } .book-card { display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin: 20px; padding: 20px; width: 280px; height: 360px; border: 1px solid #ccc; } .book-card img { width: 200px; height: 260px; } .buy { padding: 10px 20px; background-color: #f00; color: #fff; border: none; border-radius: 5px; transition: all 0.3s ease-in-out; } .buy:hover { background-color: #fff; color: #f00; border: 2px solid #f00; cursor:pointer; } footer { background-color: #333; color: #fff; padding: 10px; text-align: center; } ``` 希望这个代码能帮到您！如果有任何问题或反馈，请随时与我联系。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值