zoukankan      html  css  js  c++  java
  • 第六十八节,htnl全局属性和其他属性

    htnl全局属性和其他属性

    学习要点:
    1.实体
    2.元数据
    3.全局属性

    本章主要探讨HTML5中的HTML实体、以及HTML核心构成的元数据,最后了解一下HTML中的全局属性。

    一.实体

    HTML实体就是将有特殊意义的字符通过实体代码显示出来。使用方法,实体名称或者实体编号

           显示结果           实体名称             实体编号                  描述

                                                               空格

               <              &lt;              &#60;                 小于号

               >              &gt;              &#62;                  大于号

               &             &amp;             &#38;                  和号

               "             &quot;             &#34;                     引号

               '             &apos;                &#39;                    撇号

               ¢             &cent;               &#162;                  分

               £            &pound;              &#163;                  镑

               ¥             &yen;                 &#165;                   日圆

               €             &euro;               &#8364;                 欧元

               §             &sect;                &#167;                   小节

               ©             &copy;              &#169;                   版权

               ®             &reg;                &#174;                   注册商标

               ™            &trade;              &#8482;                  商标

               ×            &times;               &#215;                    乘号

               ÷            &divide;              &#247;                    除号

    二.元数据
    <meta>元素可以定义文档中的各种元数据,而且一个HTML页面可以包含多个<meta>元素。

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <!--定义文档的编码类型-->
        <meta charset="utf-8">
        
        <!--
            name, content 组合的示例如下(不全)
        -->
        <!--定义文档的作者-->
        <meta name="author" content="webabcd" />
        <!--定义文档的生成工具-->
        <meta name="generator" content="EditPlus" />
        <!--如果把此 html5 文档看成一个程序,则此处用于定义程序的名称-->
        <meta name="application-name" content="meta 标签的介绍" />
    
    
        <!--
            http-equiv, content 组合的示例如下(不全)
        -->
        <!--定义文档内容的语言-->
        <meta http-equiv="content-language" content="zh-CN" />
        <!--定义文档内容的类型-->
        <meta http-equiv="content-type" content="text/html" />
        <!--定义文档所使用的样式表的 title,从而在有多个样式表的时候,只使用指定 title 的样式表。本例中会强制只使用 title 为 css1 的样式表-->
        <meta http-equiv="default-style" content="css1" />
        <!--
        文档每多少秒刷新一次,或者跳转
        如果要做成跳转,content属性值里引号加跳转网址,不加网址就跳转本页,相当于刷新
        如:<meta http-equiv="refresh" content="1;www.baidu.com" />
        -->
        <meta http-equiv="refresh" content="1" />
        <!--设置 cookie-->
        <meta http-equiv="set-cookie" content="author=webabcd;" />
        <title>标题</title>
    <!--设置图标-->
       <link rel="icon" href="//www.jd.com/favicon.ico" mce_href="//www.jd.com/favicon.ico" type="image/x-icon">
        <!--定义关键字-->
        <meta name="keywords" content="html5, flash, silverlight" />
        <!--定义文档的描述信息-->
        <meta name="description" content="介绍 html5 中的 meta 标签" />

    </head> <body> </body> </html>


    三.全局属性
    在此之前,我们涉及到的元素都讲解了它的局部数据,当然也知道一些全局属性,比如id。全局属性是所有元素共有的行为,HTML5还提供了一些其他的全局属性。

    1.id属性,id属性给元素分配一个唯一标识符

    <p id="abc">段落</p> 

    解释:id属性给元素分配一个唯一标识符。这种标识符通常用来给CSS和JavaScript 调用选择元素。一个页面只能出现一次同一个id名称。

    2.class属性,用来给元素归类

    <p class="abc">段落</p> 
    <p class="abc">段落</p> 
    <p class="abc">段落</p> 

    解释:class属性用来给元素归类。通过是文档中某一个或多个元素同时设置CSS样式。

    3.accesskey属性 ,输入框属性,快捷键操作

    <input type="text" name="user" accesskey="n">

    解释:快捷键操作,windows下alt+accesskey="n"指定键,光标定位到此输入框,前提是浏览器alt并不冲突。

    4.contenteditable属性,让文本处于可编辑状态

    <p contenteditable="true">我可以修改吗</p> 

    解释:让文本处于可编辑状态,设置true则可以编辑,false则不可编辑。或者直接 设置属性。

    5.dir属性,让文本左或者右

    <p dir="rtl">文字到右边 </p> 

    解释:让文本从左到右(ltr),还是从右到左(rtl)。

    6.hidden属性,隐藏元素

    <p hidden>文字 </p> 

    解释:隐藏元素。

    7.lang属性,可以局部设置语言

    <p lang="en">HTML5</p>

    解释:可以局部设置语言。zh-cn为中文,en为英文

    8.title属性,对元素的内容进行额外的提示

    <p title="HTML5教程">HTML5</p> 

    解释:对元素的内容进行额外的提示。,也就是鼠标放上去会出现提示内容

    9.tabindex属性,表单中按下tab键,实现获取焦点的顺序

    <input type="text" name="user" tabindex="2"> 
    <input type="text" name="user" tabindex="1">

    解释:表单中按下tab键,实现获取焦点的顺序。如果是-1,则不会被选中。

    10.style属性 ,设置元素行内CSS样式

    <p style="color:red;">CSS样式</p> 

    解释:设置元素行内CSS样式。

  • 相关阅读:
    迭代器、可迭代对象、生成器
    提问的智慧
    爬虫【自动登陆github和抽屉】
    爬虫【爬取汽车之家新闻】
    Python多线程-守护线程
    Python的多线程
    一个简单的Python多线程
    Python实现SSH传输文件(sftp)
    Python实现SSH连接远程服务器
    实验吧CTF题库-WEB题(部分)
  • 原文地址:https://www.cnblogs.com/adc8868/p/5962733.html
Copyright © 2011-2022 走看看