细说HTML<head>内标签之<meta>

Starter

        <meta>是HTML和XHTML中的元素,在网页头部<head>标签内定义,可提供与网页有关的结构化元数据,即网页的元信息(meta-information)。这些元数据不会显示在网页上,但机器可以识别并翻译出其功能,比如它会告诉浏览器网页要如何显示内容、多长时间重新加载页面,为搜索引擎提供关键词等其他 web 服务。<meta>元素放在头标签<head></head>内,在HTML中没有结束标签,但在XHTML中必须正确地关闭。

关于 Metadata

        在继续说明<meta>的属性之前,我们有必要先弄明白一个由meta定义的术语:元数据(Metadata)。元数据是用来描述数据的数据,但其实在HTML中,我们说的前者“数据”就指网页,即用来描述网页的数据,这种元数据是结构化数据,具有二维结构的性质。既然是二维结构化数据,那么就像数据库表(Table)结构一样,元数据是通过指定某一属性的特定值来实现的,即元数据总是由“名称/值”对(name-value pairs)的形式成对传递,这里的“名称”为属性名称,“值”为属性值。

<meta>元素的属性

        <meta>元素有一个必需属性和三个可选属性,必需属性为content属性,三个可选属性分别为name、http-equiv、scheme属性,这三个可选属性都对应于必需属性content,下面逐一说明。

content属性

        content属性是<meta>必须包含的属性,主要用来定义与 http-equiv 或 name 属性相关的元信息,其实就是用来提供“名称/值”对中的“值”。

http-equiv属性

        该属性用于给“名称/值”对形式提供“名称”。使用http-equiv属性可以指示服务器在发送实际的文档之前先在文档头部包含这些名称/对。当服务器向浏览器发送文档时,会先发送许多名称/值对,但至少要发送一个:content-type: text/html。这将告诉浏览器准备接受一个 HTML 文档。现总结一些http-equiv属性的“名称”参数及其对应的参数“值”。
        (1)content-type
        用于定义服务器发送文件的类型,其默认值为text/html。即:
  
<meta http-equiv="content-type" content="text/html">
除text/html外,还有许多种文件类型都可以作为content-type的参数值,比如text/asp、text/css、text/xml、image/fax等。
      
        (2)charset
        用于设定服务器向浏览器发送文件文档的字符类型和编码形式,其默认值为ISO-8859-1,如果网页使用不同于 ISO-8859-1 的字符集,就应该在 <meta> 标签内用charset属性进行指定。在HTML5之前,指定字符类型如下:     
<meta http-equiv="charset" content="ISO-8859-1">
更多字符集,参看 HTML字符集。也可以同时将文档类型和字符类型作为content-type的属性值:       
<meta http-equiv="content-type" content="text/html;charset=gb2312">
        (3)refresh
        定义文档自动刷新的间隔时间,其值为数字,单位为秒:      
<meta http-equiv="refresh" content="5">
这行代码指定网页每隔5秒钟刷新一次。如果想在一段时间之后刷新到一定地址的网页,比如百度首页,则可写成:
<meta http-equiv="refresh" content="5;url="http://www.baidu.com">
但注意,refresh的值应该慎重选择,选择不当会使得页面不受用户控制,影响用户体验。除了用 refresh属性,还可用javascript的方法实现网页的刷新与跳转。
        (4)expires
        设定网页的到期时间,一旦网页过期,必须请求服务器重新传输。expires的值既可以为具体的秒数,也可以为特定的时间,这个时间必须为GMT时间,即按照"星期 日 月 年 时间 GMT"的格式。如下设定网页在60秒之后过期:
<meta http-equiv="expires" content="60">
        如果要设置具体的时间,则其格式为
<meta http-equiv="Expires" content="Day, dd Mon yyyy hh:mm:ss GMT>
如设置在2016年3月13日20:00过期则为:
<meta http-equiv="expires" content="Sun 13 Mar 2016 20:00:00 GMT">
        如果要禁止浏览器使用cache缓存来浏览网页,则可将其值设为0或负值。
        (5)windows-target
        为防止本网页不被放置在小窗体中,而是整个窗体进行显示就可以将windows-target的属性值设为"_top":
<meta http-equiv="windows-target" content="_top">
        (6)pragma
        说明一种cache的模式。如果想禁止浏览器和缓存服务器从本地计算机的缓存中访问页面内容,则可将其值设为"no-cache":
<meta http-equiv="pragma" content="no-cache">
其他pragma的值有:
        public:浏览器和缓存服务器都可以缓存页面信息;
        no-store:请求和响应的信息都不应该被存储在对方的磁盘系统中;
        must-revalidate:对于客户机的每次请求,代理服务器必须想服务器验证缓存是否过时。
值得注意的是,为禁止浏览器缓存网页,可将pragma的值设为no--cache的同时将expires的值设为0。
        (7)set-cookie
        Cookie是由服务器端生成,发送给User-Agent(一般是浏览器)并保存在计算机本地某个目录下的文本文件内的名称/值信息。这些信息包含用户与服务器的会话信息,用户在下次请求同一网站时浏览器就发送该Cookie给服务器(前提是浏览器设置为启用Cookie)。服务器可以利用Cookies包含信息的任意性来筛选并经常性维护这些信息,以判断在HTTP传输中的状态。Cookie在一定的期限内有效,超过期限则需要重新创建,即 Cookie存在生命周期。在<meta>标签内指定Cookie的expires值可以定义Cookie的生命周期,若其值为0或负值,则当浏览器关闭时 Cookie会自动清除,不会记录用户的任何信息。
       
<meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Mar-2016 22:33:00 GMT;path=/">
        (8)Page-Enter,Page-Exit
        Page-Enter和Page-Exit用来指定进入页面和退出时的特效,总共有23种,用0~22表示。例如:
       
<meta http-equiv="Page-Enter" content="revealTrans(duration=3,transition=5)">
<meta http-equiv="Page-Exit" Content="revealTrans(duration=5,transition=8)">
但是包括(7)中的set-cookie和页面特性一般都不会用HTML,而是用JavaScript来设置。
        (9)X-UA-Compatible
        User-Agent兼容新该设置。UA一般为浏览器。不同浏览器内核,对应不同X-UA-Compatible的值:
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!--优先使用IE最新版本和chrome-->


name属性

         <meta>标签中的name属性仍然采用“名称/值”的形式定义,用于在网页中加入一些网页的关键字、网页描述文字等信息,便于搜索引擎抓取。一般有如下几种name属性:
        (1)keywords
        网页关键字。关键字可以由多个,不同的关键字之间可用逗号或竖线分开:
<meta name="keywords" content="关键字1,关键字2,关键字3">
        (2)description
        网页描述性内容。用简短的文字描述该网页的内容,便于搜索引擎进行抓取:
<meta name="description" content="这是一个农村电子商务平台,你可以在这里查看和订购全国各地的特色农产品">
        (3)robots
        定义搜索引擎中方式,其值可为 all, none, index, noindex, follow, nofollow,分别表示:
        index:允许网页被搜索引擎索引进数据库;
        follow:允许搜索引擎可通过此网页链接继续索引其他网页;
        noindex:网页不允许被搜索引擎索引进数据库,但搜索引擎可以通过此网页的链接继续索引其它网页;
        nofollow:允许网页被搜索引擎索引进数据库,但搜索引擎不可以通过此网页的链接继续索引其它网页;
        none:网页不被搜索引擎索引进数据库,且搜索引擎不可以通过此网页的链接继续索引其它网页;
        all:允许搜索引擎索引此网页,且搜索引擎可以通过此网页的链接索引其他网页。
        注:如果网页没有提供robots,则默认为all。
<meta name="robots" content="index">
        (4)author
        网页作者。
<meta name="author" content="WiX">
        (5)Copyright
        版权。       
<meta name="Copyright" content="2016 WiX,All rights reserved">
        (6)viewport
        控制网页在移动端浏览器中的显示方式。其属性有 width, height, minimum-scale, maximum-scale, initial-scale , user-scalable。其分别表示:
        width:宽度,其值为device-width 或具体在200~10000的像素数值;
        height:高度,其值为device-height或具体在200~10000的像素数值;
        minimum-scale:允许用户缩放到的最小比例,其值为0.0~10.0的小数值;
        maximum-scale:允许用户缩放到的最大比例,其值为0.0~10.0的小数值;
        initial-scale:初始缩放比例,其值为minimum-scale 和 maximum-scale之间的小数值;
        user-scalable:指定网页是否可以被用户缩放,其值为yes 和 no。
        注意,如果窗口尺寸指定为像素值,则其值不一定为设备的真实像素值,因为一台设备与另一台设备的真实像素有差别,且如果不是响应式网站,不要使用initial-scale或者禁用缩放。
       
<meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial-scale=1.0; user-scalable=yes"/>
        网页尺寸高度的默认值由设备的宽度和宽高比决定。最好的方法是将高度忽略设为默认值(device-height),因为如果是硬性设置的高度值,则适合于对纵向或横向尺寸,而不是同时都合适。
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第四步是在layout文件中使用Data Binding来绑定数据。下面是具体步骤: 1. 在layout文件的根布局中添加`<layout>`标签,使其变成Data Binding布局。 ``` <layout xmlns:android="http://schemas.android.com/apk/res/android"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"> <!-- UI元素 --> </LinearLayout> </layout> ``` 2. 在需要绑定数据的UI元素中添加`android:id`属性,用于在ViewModel中引用。 ``` <TextView android:id="@+id/myTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" /> ``` 3. 在ViewModel中创建一个变量,用于引用UI元素。 ``` class MyViewModel : ViewModel() { val myText = MutableLiveData<String>() } ``` 4. 在Activity或Fragment中创建一个ViewModel实例,并将其与Data Binding绑定。 ``` class MyActivity : AppCompatActivity() { private lateinit var binding: MyLayoutBinding private val viewModel by viewModels<MyViewModel>() override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = DataBindingUtil.setContentView(this, R.layout.my_layout) binding.lifecycleOwner = this binding.viewModel = viewModel // 更新UI viewModel.myText.value = "Hello World!" } } ``` 5. 在layout文件中使用Data Binding将ViewModel中的数据绑定到UI元素。 ``` <TextView android:id="@+id/myTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@{viewModel.myText}" /> ``` 这样就完成了在layout文件中使用Data Binding来绑定数据的步骤。注意要在Activity或Fragment中设置`lifecycleOwner`和`viewModel`,以便让Data Binding知道它们之间的关系。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值