meta标签

每日思考(2020/01/04)

╄→尐↘猪︶ㄣ 提交于 2020-01-05 00:38:53
题目概览 对 <meta> 标签的理解 rgba()和opacity这两个的透明效果有什么区别? 为浏览器元素添加一个随机颜色的边框 在浏览器中输入url到页面显示出来的过程发生了什么 题目解答 对 <meta> 标签的理解 定义:元素可提供相关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词等等。标签位于文档的头部 <head></head> 标签内,不包含任何内容。 标签的属性定义了与文档相关联的【名称/值对】。 HTML 4.01 :<meta http-equiv="content-type" content="text/html; charset=UTF-8"> HTML5 :<meta charset="UTF-8"> 属性 属性 值 描述 content (必需) some_text 定义与 http-equiv 或 name 属性相关的元信息 http-equiv content、type-expires、refresh、set-cookie 把 content 属性关联到 HTTP 头部。 name author、description、keywords、generator、revised、others 把 content 属性关联到一个名称。 scheme some_text 定义用于翻译 content 属性值的格式。

使用css打造形形色色的形状!

做~自己de王妃 提交于 2020-01-03 08:41:27
  css是非常强大的工具,如果我们掌握的好,那么许多复杂的形状不需要使用图片而直接使用css完成即可,这不仅有利于减少http请求以增强性能还便于日后的管理和维护,一举两得! 这篇博文会主要介绍一些常见的图形,如圆、椭圆、三角形、平行四边形、菱形、切角效果等等。     由于这篇博文中的多数实现代码用到了css3,鉴于篇幅有限,所以大家如果对css3不太了解可以先看我的博文《 强大的css3 》。 第一部分:圆   用css创建一个圆是很简单的,只需要把border-radius的值设置位宽和高的一般即可,代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>梯形</title> <style> div{ width: 100px; height: 100px; line-height: 100px; text-align: center; border-radius: 50px; background: red; color:white; } </style> </head> <body> <div>918之初</div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

HTML头部

牧云@^-^@ 提交于 2020-01-03 07:53:20
  HTML的文档首行需要标注文档定义声明,随后就是定义整个HTML文档的 <html> 标签,在 <html> 标签中包括了 <head> 和 <body> 两个元素。<body> 元素定义了HTML文档的主体,页面中所有的可见内容都是通过 <body> 中的其他元素来表现。<head> 中的内容对于用户来说并不总是可见,head主要用于定义文档的信息,便于其他的程序、爬虫等访问获取。   头部具体的信息需要一些特殊的标签来描述: title    这里的title指的是 <title></title> 标签,最直观的是用于定义网页的标题,也就是显示的名称。如图:   实质上title标签中的内容会应用于浏览器工具栏的标题(如上)、网页添加收藏加后显示的标题 以及 显示在搜索引擎结果页面的标题。   严格规定的HTML文档必须包含有title,但是如果不写的话,浏览器将会显示html文件完整的文件名。 base    base标签描述了基本的链接地址也就是说页面中所有请求的资源(表单、图片、脚本、CSS等)都会默认访问base标签中定义的地址。使用base标签必须配置href属性,target属性为可选属性。 <base href="www.luanqibazao.com/test/" target="_blank"> meta   meta标签提供了一些基本的元数据

HTML 头部标记

守給你的承諾、 提交于 2020-01-03 07:51:30
HTML头部标记放在<head></head>中,一般包括标题、基底信息、元信息等。 <base> 当前文档的URL全称(基底网址) <basefont> 设定基准的文字字体、字号和颜色 <title> 显示在浏览器左上方的标题内容(标签卡上) <isindex> 表明该文档是一个可用于检索的网关脚本,由服务器自动建立 <meta> 有关文档本身的元信息,如用于查询的关键字、获取该文档的有效期等 <style> 设定CSS层叠样式表的内容 <link> 设定外部文件的链接 <script> 设定页面中程序脚本的内容 meta元素的属性有两种,name和http-equiv,其中name属性主要用于描述网页,以便于搜索引擎查找和分类 <meta name="keyword" content=""> <meta name="description" content=""> <meta name="generator" content=""> //设置编辑软件的名称 <meta name="author" content=""> <meta name="robots" content=""> //限制搜索方式 搜索方式: All(可搜索当前网页及其链接的网页)、Index(表示能搜索当前网页)、Nofollow(表示不能搜索当前网页链接的网页)、Noindex(表示不能搜索当前网页)

HTML笔记(七)head相关元素<base> & <meta>

[亡魂溺海] 提交于 2020-01-03 07:51:12
  <head>元素是所有头部元素的容器。   可添加的标签有:<title>、<base>、<link>、<meta>、<script>和<style>。 <base>元素   <base>标签规定了页面上的所有链接的默认地址或默认目标target。 <html> <head> <base href="http://www.w3school.com.cn/i/" /> <base target="_blank" /> </head> <body> <!-- head部分已经规定了一个基准UR。 --> <img src="eg_smile.gif" /> <p><a href="http://www.w3school.com.cn">W3School</a></p> </body> </html> <meta>元素   <meta>元素提供有关页面的元信息meta-infomation,如针对搜索引擎和更新频率的描述好关键字。   <mata>不包含任何内容,其属性定义了与文档相关联的键 / 值对。   所有服务器至少要发送一个:content-type: text/html。   content属性主要是为键 / 值对提供值。 它必须和name属性或者http-equiv属性一起使用。    ① name属性和content属性   name属性主要为键 / 值对提供键的名称

html meta link script form

匆匆过客 提交于 2020-01-03 07:24:28
<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。 <!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。 <meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 <meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。 <link> 标签定义文档与外部资源的关系。 <link> 标签最常见的用途是链接样式表。 <script> 标签用于定义客户端脚本,比如 JavaScript。 script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。 必需的 type 属性规定脚本的 MIME 类型。 JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。 <form> 标签用于为用户输入创建 HTML 表单。 表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。 表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。 表单用于向服务器传输数据。 来源: https://www.cnblogs.com/begoogatprogram/p/4779242.html

meta标签

早过忘川 提交于 2020-01-03 05:18:44
使用meta标签设置网页关键字 <meta name="keywords" content = "这里写关键字" /> 指定网页的描述 <meta name="description" content="这里也网页的描述"/> description和keywords不会影响页面在搜索引擎中的排名 请求的重定向 <meta http-equiv="refresh" content="5;url=http://www.baidu.com"/> 表示页面加载后,5秒后跳转到指定的路径(可以是绝对路径和相对路径) 来源: CSDN 作者: 无悟饭空 链接: https://blog.csdn.net/weixin_43269800/article/details/103792431

HTML meta viewport属性说明(mark)

*爱你&永不变心* 提交于 2020-01-02 02:53:38
偶遇PC站网页,客户想在手机上查看(不是响应式那种,自然缩放那种): 直接以下代码: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/> 但发现,样式仍然会乱,检查有些模块是不是没有限制最小宽度,直接崩塌至手机的屏宽,可直接将body设置最小宽度即可! Viewport 基础 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下: <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″> width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。 height:和 width 相对应,指定高度。 initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。 maximum-scale:允许用户缩放到的最大比例。 minimum-scale:允许用户缩放到的最小比例。 user-scalable:用户是否可以手动缩放 引入好的文章:

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

ぐ巨炮叔叔 提交于 2020-01-02 02:52:18
一次面试前端开发,被要求详解 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求,但让viewport的宽度等于设备的宽度,这个应该是大家都想要的效果,如果你不这样的设定的话,那就会使用那个比屏幕宽的默认viewport,也就是说会出现横向滚动条。 1. name="viewport" meta viewport 标签首先是由苹果公司在其safari浏览器中引入的,目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿,引入对meta viewport的支持,事实也证明这个东西还是非常有用的。 2.content 属性值 : width:可视区域的宽度,值可为数字或关键词device-width height:同width intial-scale

<meta name=\"viewport\" content=\"width=device-width, maximum-scale=1.0, initial-scale=1.0, user-sc

淺唱寂寞╮ 提交于 2020-01-02 02:50:19
网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放。 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放 来源: https://www.cnblogs.com/webu/archive/2013/03/28/2987179.html