HTML学习四(标签页面结构)

oscarDP
60 阅读4分钟

DOCTYPE

声明位于文档中最前面的位置，处于html标签之前。主要作用是告知浏览器页面使用了哪种HTML版本。 标签没有结束标签，同时也不区分大小写。

常见用法<!DOCTYPE html>

  • 告知浏览器这是一个HTML文档
  • 是HTML文档中最外层的元素
  • 是其它HTML元素的容器(除了标签)

 head 

  • 是HTML文档所有头部元素的容器
  • head标签必须包含文档的标题,可以包含脚本、样式、meta信息以及其它信息

可以被包含的标签：<title>、<style>、<base>、<link>、<meta>、<script>、<noscript>

 title 

  • 定义浏览器的标题

  • 提供页面被添加到收藏夹时的标题

  • 显示在搜索引擎结果中的页面标题

  • 定义文档的主体

  • 包含文档所有的内容（如文本、超链接、表格等等）

meta

  • meta标签提供关于HTML文档的元数据。
  • 元数据不会显示在页面上，但是对于机器是可读的。
  • 可以用于如何显示页面内容或重新加载页面
  • 搜索引擎关键词等

name 属性：

  • name 属性可设置或者返回content属性信息名称
  • name属性值依赖content 属性值
  • name 属性可以预定义值，或由用户定义

name属性值：

  • application-name: 指定web应用名称 <meta name="application-name" content="Hello World">

  • author：指定HTML文档作者名称  <meta name='author' content=‘作者111’>

  • description：指定页面描述。搜索引擎可以使用这个描述作为搜索结果。<meta name="description" content="搜索我">

  • generator: 指定文档的生成工具名称 <meta name="generator" content="FrontPage 4.0">

  • keywords: 指定网页关键字，用于告诉搜索引擎网页内容相关关键词<meta name="keywords" content="HTML, HTML DOM, JavaScript,告诉我">

  • robots:搜索引擎索引方式 

    <meta name="robots" content="index,follow">
all:文件将被检索，且页面上的链接可以被查询
none: 文件将不被检索，且页面上的链接不可用被查询
index:文件可以被检索
follow:页面上的链接可以被查询
noindex:文件将不被检索
nofollow:页面上的链接不可用被查询

  • viewport ：优化移动浏览器的显示。如果不是响应是网站，不要使用initia-scale或者禁用缩放

    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
width:宽度（数值/device-width） 范围从200 到10000 ，默认为980像素
height:高度（数值/device-height）范围从223到 10000
initial-scale: 初始的缩放比例 范围从>0到10
minimum0-scale: 允许用户缩放到的最小比例 范围同上
maximum0scale: 允许用户缩放到的最大比例 范围同上user-scalable：用户是否可以手动缩放（no,yes）
minimal-ui: 可以在页面加载时最小化上下状态栏（已弃用）

  • apple-mobile-web-app-status-bar-style:webapp全屏模式（用于伪装app，离线应用）<meta name="apple-mobile-web-app-capable" content="yes" />

  • apple-mobel-web-app-status-bar-style: 只有在开启webapp全屏时才会生效。

    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
content ：default/black/black-translucent

  • apple-moblile-web-app-title:添加到主屏后的标题

     <meta name="apple-mobile-web-app-title" content="标题">

  • format-detection:格式监测 用来监测html中的一些格式

    <meta name="format-detection" content="telephone=no" /> // 忽略数字自动识别为电话号码
<meta name="format-detection" content="email=no" />  //忽略识别邮箱
<meta name="format-detection" content="adress=no"  /> // 忽略识别地址
// 也可以写成
<meta name="format-detection" content="telephone=no,email=no,adress=no" />

  • apple-itunes-app:告诉浏览器这个网站对应的app，并在页面上显示下载banner

    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

  • Alt text

http-equiv属性：

  • http-equiv属性可设置或者返回content属性中HTTP头部信息

  • http-equiv属性可以使用伪装HTTP响应头部信息

  • http-equiv属性依赖content属性的值

  • 如果name属性已设置，http-equiv属性就无须设置

http-equiv属性值：

  • cache-control: 控制文档的缓存机制。

    可用的值：
public:所有内容都将被缓存（客户端和代理服务器都可缓存）
private：内容值缓存到私有缓存中（仅客户端可以缓存，代理服务器不可缓存）
no-cache:不缓存
no-store:缓存当不归档
例子：<meta http-equiv="cache-control" content="no-cache">

  • content-language:响应体的语言

    <meta http-equiv="content-language" content="zh-cn">

  • content-type:返回内容的MIME类型 通常用于设置字符集

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  • date:原始服务器消息发出的时间

    <meta http-equiv="date" content="Wed, 16 Feb 2011 22:34:13 GMT">

  • expries:响应过期的日期和时间

    <meta http-equiv="expires" content="Fri, 30 Dec 2011 12:00:00 GMT">

  • last-modified:请求资源的最后修改时间

    <meta http-equiv="last-modified" content="Mon, 03 Jan 2011 17:45:57 GMT">

  • location:用来重定向接受方到非请求URL的位置来完成请求或标识新的资源

    <meta http-equiv="location" content="URL=http://www.runoob.com">

  • refresh:定义间隔多久后刷新页面

    <meta http-equiv="refresh" content="300"> //时间单位为秒

  • set-cookie:创建一个cookie 包含cookie名，cookie值 过期时间

    <meta http-equiv="set-cookie" content="runoobcookie=myContent;expires=Fri, 30 Dec 2015 12:00:00 GMT; path=http://www.runoob.com">

  • window-target:指定要载入的框架名

  • X-UA-Compatible:指定有限使用的浏览器版本

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

  • renderer:浏览器内核控制（国内浏览器很多都是双内核webkit和trident）,webkit内核高速浏览，IE内核兼容网页和旧版网站。

    <meta name="renderer" content="webkit|ie-comp|ie-stand">

  • Pragma :(cache模式) 禁止浏览器从本地计算机的缓存中访问页面内容

    <metahttp-equiv="Pragma"content="no-cache">

  • Window-target：显示窗口的设定

    <metahttp-equiv="Window-target"content="_top"> // 强制页面当前窗口以独立页面显示

content 属性：

  • content 属性可设置或者返回meta元素content属性值

  • content 属性指定了meta信息的内容。（注意：content 属性可用的值依赖于name和httpEquiv属性的值）。

scheme属性 ：设置或返回用于解释content属性的值

charset 属性： 申明编码格式

avatar
文章
阅读
粉丝