精华内容
下载资源
问答
  • html meta标签使用总结

    千次阅读 多人点赞 2017-04-11 01:40:11
    之前学习前端中,对meta标签的了解仅仅只是这句。 meta charset="UTF-8"> 但是打开任意的网站,其head标签内都有列的meta标签。比如我博客的。 但是自己却很不熟悉,于是把meta标签加入了寒假学习...

    之前学习前端中,对meta标签的了解仅仅只是这一句。

    <meta charset="UTF-8">

    但是打开任意的网站,其head标签内都有一列的meta标签。比如我博客的。

    但是自己却很不熟悉,于是把meta标签加入了寒假学习计划的最前方。

    简介

    在查阅w3school中,第一句话中的“元数据”就让我开始了Google之旅。然后很顺利的在英文版的w3school找到了想要的结果。(中文w3school说的是元信息,Google和百度都没有相关的词条。但元数据在Google就有详细解释。所以这儿采用英文版W3school的解释。)

    The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

    不难看出,其中的关键是metadata,中文名叫元数据,是用于描述数据的数据。它不会显示在页面上,但是机器却可以识别。这么一来meta标签的作用方式就很好理解了。

    用处

    Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

    The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services

    这句话对meta标签用处的介绍,简洁明了。翻译过来就是:meta常用于定义页面的说明,关键字,最后修改日期,和其它的元数据。这些元数据将服务于浏览器(如何布局或重载页面),搜索引擎和其它网络服务。

    组成

    meta标签共有两个属性,分别是http-equiv属性和name属性。

    1. name属性

    name属性主要用于描述网页,比如网页的关键词,叙述等。与之对应的属性值为content,content中的内容是对name填入类型的具体描述,便于搜索引擎抓取。meta标签中name属性语法格式是:

    <meta name="参数"content="具体的描述">

    其中name属性共有以下几种参数。 (A-C为常用属性)

    A. keywords(关键字)

    说明:用于告诉搜索引擎,你网页的关键字。举例:

    <meta name="keywords"content="Lxxyx,博客,文科生,前端">

    B. description(网站内容的描述)

    说明:用于告诉搜索引擎,你网站的主要内容。举例:

    <meta name="description"content="文科生,热爱前端与编程。目前大二,这是我的前端博客"> 

    C. viewport(移动端的窗口)

    说明:这个概念较为复杂,具体的会在下篇博文中讲述。这个属性常用于设计移动端网页。在用bootstrap,AmazeUI等框架时候都有用过viewport。

    举例(常用范例):

    <meta name="viewport" content="width=device-width, initial-scale=1">

    D. robots(定义搜索引擎爬虫的索引方式)

    说明:robots用来告诉爬虫哪些页面需要索引,哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。

    举例:

    <meta name="robots" content="none"> 

    具体参数如下:

    1.none : 搜索引擎将忽略此网页,等价于noindex,nofollow。

    2.noindex : 搜索引擎不索引此网页。

    3.nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。

    4.all : 搜索引擎将索引此网页与继续通过此网页的链接索引,等价于index,follow。

    5.index : 搜索引擎索引此网页。

    6.follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。

    E. author(作者)

    说明:用于标注网页作者举例:

    <meta name="author"content="Lxxyx,841380530@qq.com"> 

    F. generator(网页制作软件)

    说明:用于标明网页是什么软件做的举例(不知道能不能这样写):

    <meta name="generator"content="Sublime Text3"> 

    G. copyright(版权)

    说明:用于标注版权信息举例:

    <meta name="copyright"content="Lxxyx"> //代表该网站为Lxxyx个人版权所有。

    H. revisit-after(搜索引擎爬虫重访时间)

    说明:如果页面不是经常更新,为了减轻搜索引擎爬虫对服务器带来的压力,可以设置一个爬虫的重访时间。如果重访时间过短,爬虫将按它们定义的默认时间来访问。举例:

    <meta name="revisit-after" content="7 days" >

    I. renderer(双核浏览器渲染方式)

    说明:renderer是为双核浏览器准备的,用于指定双核浏览器默认以何种方式渲染页面。比如说360浏览器。举例:

    <meta name="renderer" content="webkit"> //默认webkit内核
    <meta name="renderer" content="ie-comp"> //默认IE兼容模式
    <meta name="renderer" content="ie-stand"> //默认IE标准模式

    2. http-equiv属性

    介绍之前,先说个小插曲。看文档和博客关于http-equiv的介绍时,有这么一句。

    http-equiv顾名思义,相当于http的文件头作用。

    一开始看到这句话的时候,我是迷糊的。因为我看各类技术名词,都会习惯性的去记住它的英文全称。equiv的全称是"equivalent",意思是相等,相当于。然后我脑子里出现了大大的迷惑:“HTTP相等?”

    后来还准备去Segmentfault提问来着。结果在写问题的时候,突然反应出equivalent还有相当于的意思。意思就是相当于http的作用。至于文件头是哪儿出来的,估计是从其作用来分析的。我认为顾名思义并不能得出"相当于http的文件头作用"这个论断。

    这个我所认为的http-equiv意思的简介。

    相当于HTTP的作用,比如说定义些HTTP参数啥的。

    meta标签中http-equiv属性语法格式是:

    <meta http-equiv="参数" content="具体的描述">

    其中http-equiv属性主要有以下几种参数:

    A. content-Type(设定网页字符集)(推荐使用HTML5的方式)

    说明:用于设定网页字符集,便于浏览器解析与渲染页面举例:

    <meta http-equiv="content-Type" content="text/html;charset=utf-8">  //旧的HTML,不推荐
    
    <meta charset="utf-8"> //HTML5设定网页字符集的方式,推荐使用UTF-8

    B. X-UA-Compatible(浏览器采取何种版本渲染当前页面)

    说明:用于告知浏览器以何种版本来渲染页面。(一般都设置为最新模式,在各大框架中这个设置也很常见。)举例:

     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面

    C. cache-control(指定请求和响应遵循的缓存机制)

    用法1.

    说明:指导浏览器如何缓存某个响应以及缓存多长时间。这一段内容我在网上找了很久,但都没有找到满意的。最后终于在Google Developers中发现了我想要的答案。

    举例:

    <meta http-equiv="cache-control" content="no-cache">

    共有以下几种用法:

    1. no-cache: 先发送请求,与服务器确认该资源是否被更改,如果未被更改,则使用缓存。

    2. no-store: 不允许缓存,每次都要去服务器上,下载完整的响应。(安全措施)

    3. public : 缓存所有响应,但并非必须。因为max-age也可以做到相同效果

    4. private : 只为单个用户缓存,因此不允许任何中继进行缓存。(比如说CDN就不允许缓存private的响应)

    5. maxage : 表示当前请求开始,该响应在多久内能被缓存和重用,而不去服务器重新请求。例如:max-age=60表示响应可以再缓存和重用 60 秒。

    用法2.(禁止百度自动转码)

    说明:用于禁止当前页面在移动端浏览时,被百度自动转码。虽然百度的本意是好的,但是转码效果很多时候却不尽人意。所以可以在head中加入例子中的那句话,就可以避免百度自动转码了。举例:

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

    D. expires(网页到期时间)

    说明:用于设定网页的到期时间,过期后网页必须到服务器上重新传输。举例:

    <meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />

    E. refresh(自动刷新并指向某页面)

    说明:网页将在设定的时间内,自动刷新并调向设定的网址。举例:

    <meta http-equiv="refresh" content="2;URL=http://www.lxxyx.win/"> //意思是2秒后跳转向我的博客

    F. Set-Cookie(cookie设定)

    说明:如果网页过期。那么这个网页存在本地的cookies也会被自动删除。

    <meta http-equiv="Set-Cookie" content="name, date"> //格式
    
    <meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具体范例

    最后

    暂时总结的就这么多了,meta标签的自定义属性实在太多了。所以只去找了常用的一些,还有像 Window-target 这样已经基本被废弃的属性,我也没有添加。

    meta标签作用

    META标签是HTML标记HEAD区的一个关键标签,提供文档字符集、使用语言、作者等基本信息,以及对关键词和网页等级的设定等,最大的作用是能够做搜索引擎优化(SEO)。

    PS:便于搜索引擎机器人查找、分类,互联网应用应该要注意。

    大网站都是怎么写?

    在了解这个标签之前,我查找了各个主流网站他们的对于Meta的设置,如下:

    京东首页的Meta设置:

    <meta charset="gbk">
    <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!">
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">

    淘宝首页的Meta设置:

    复制代码
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="spm-id" content="a21bo">
    <meta name="description" content="淘宝网 - 亚洲最大、最安全的网上交易平台,提供各类服饰、美容、家居、数码、话费/点卡充值… 8亿优质特价商品,同时提供担保交易(先收货后付款)、先行赔付、假一赔三、七天无理由退换货、数码免费维修等安全交易保障服务,让你全面安心享受网上购物乐趣!">
    <meta name="keyword" content="">
    复制代码

    youku首页的Meta设置:

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="title" content="优酷-中国领先视频网站,提供视频播放,视频发布,视频搜索 - 优酷视频" />
    <meta name="keywords" content="视频,视频分享,视频搜索,视频播放,优酷视频" />
    <meta name="description" content="视频服务平台,提供视频播放,视频发布,视频搜索,视频分享" />

    斗鱼首页的Meta设置:

    复制代码
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <name="keywords" content="DOTA2,热门游戏直播,游戏直播,高清游戏直播,手机游戏直播,电子竞技直播" />
    <meta name="description" content="斗鱼 - 全民直播平台提供高清、快捷、流畅的视频直播和游戏赛事直播服务,包含DOTA2等各类热门游戏赛事直播和各种名家大神游戏直播,内容丰富,推送及时,带给你不一样的视听体验,一切尽在斗鱼 - 全民直播平台。" />
    复制代码

    腾讯网首页的Meta设置:

    复制代码
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="keywords" content="新闻 新闻中心 事实派 新闻频道,时事报道">
    <meta name="description" content="腾讯新闻,事实派。新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站">
    <meta name="author" content="skeetershi" />
    复制代码

    起点小说网首页的Meta设置:

    复制代码
    <meta name="keywords" content="小说,小说网,言情小说,青春小说,玄幻小说,武侠小说,都市小说,历史小说,网络小说,原创网络文学" />
    <meta name="description" content="小说阅读,精彩小说尽在起点小说。起点小说提供玄幻小说,武侠小说,原创小说,网游小说,都市小说,言情小说,青春小说,历史小说,军事小说,网游小说,科幻小说,恐怖小说,首发小说最新章节免费小说阅读,精彩尽在起点小说!ver:071011热门小说:。" />
    <meta http-equiv="Content-Type" id="meta_ContentType" content="text/html;charset=UTF-8" />
    <meta name="robots" content="all" />
    <meta name="googlebot" content="all" />
    <meta name="baiduspider" content="all" />
    <meta name="copyright" content="本页版权 www.qidian.com 起点中文网所有。All Rights Reserved" />
    <meta http-equiv="mobile-agent" content="format=wml; url=http://m.qidian.com" /><meta http-equiv="mobile-agent" content="format=xhtml; url=http://m.qidian.com" /><meta http-equiv="mobile-agent" content="format=html5; url=http://h5.qidian.com/bookstore.html" />
    <meta name="application-name" content="起点中文小说网" /
    <meta name="msapplication-starturl" content="/Default.aspx?_s=ie9" />
    <meta name="msapplication-tooltip" content="小说阅读_起点中文小说网|免费小说,玄幻小说,武侠小说,言情小说,青春小说,小说网各类小说下载" />
    <meta name="msapplication-task" content="name=起点小游戏;action-uri=http://game.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/game.ico" />
    <meta name="msapplication-task" content="name=藏书架;action-uri=http://me.qidian.com/BookCase/1/1?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/book.ico" />
    <meta name="msapplication-task" content="name=读书客户端;action-uri=http://c.qidian.com/android/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/phone.ico" />
    <meta name="msapplication-task" content="name=排行榜;action-uri=http://top.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/chart.ico" />
    <meta name="msapplication-task" content="name=搜索;action-uri=http://sosu.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/search.ico" />
    <meta property="qc:admins" content="204236767661141166375" />
    复制代码

    meta详解

    meta标签可分为两大部分:http-equiv和name变量。

    http-equiv

    http-equiv相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助浏览器正确地显示网页内容。

    描述 例子
    content-type 设定页面使用的字符集
    <meta http-equiv="content-Type" content="text/html; charset=utf-8">
    GB2312时,代表说明网站是采用的编码是简体中文;
    ISO-8859-1时,代表说明网站是采用的编码是英文;
    UTF-8时,代表世界通用的语言编码;
    PS:html5页面的做法是直接使用<meta charset="utf-8"/>
    X-UA-Compatible IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式,以此来解决部分兼容问题。
    <meta http-equiv="X-UA-Compatible" content="IE=7">  
    以上代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面。  
    <meta http-equiv="X-UA-Compatible" content="IE=8">  
    以上代码告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面。  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    以上代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。  
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame.
    PS:谷歌添加一个插件:Google Chrome Frame(谷歌内嵌浏览器框架GCF),这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器。
    expires 设定网页的过期时间。
    <meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT">
    PS:必须使用GMT的时间格式
    refresh 自动刷新并指向新页面。
    <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
    PS:2代表页面停留2秒后跳转到后面的网址上
    set-cookie 如果网页过期,那么自动删除本地cookie。
    <meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/">
    PS:必须使用GMT的时间格式。
    windows-target 强制页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作一个frame页调用
    <meta http-equiv="Window-target" content="_top">
    cache-control 缓存机制
    <meta http-equiv="cache-control" content="no-cache">
    Public:指示响应可被任何缓存区缓存。
    Private:指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效。
    no-cache:指示请求或响应消息不能缓存。
    no-store:用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
    max-age:指示客户机可以接收生存期不大于指定时间(以秒为单位)的响应。
    min-fresh:指示客户机可以接收响应时间小于当前时间加上指定时间的响应。
    max-stale:指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。

    name

    name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

    描述 例子
    author 标注网页的作者
    <meta name="author" content="dashen" />
    keywords 页面关键词,用于被搜索引擎收录
    <meta name="keywords" content="新闻,新闻中心, 新闻频道">
    description 页面描述,用于搜索引擎收录
    <meta name="description" content="新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站">
    viewport 用于控制页面缩放
    <meta name="viewport" content="width=device-width, initial-scale=1, 
    maximum-scale=1, minimum-scale=1, user-scalable=no"
    >
    详情可查看:http://www.cnblogs.com/lovesong/p/4355029.html
    renderer 指定双核浏览器默认以何种方式渲染页面。
    <meta name="renderer" content="webkit">//默认webkit内核
    <meta name="renderer" content="ie-comp">//默认IE兼容模式
    <meta name="renderer" content="ie-stand">//默认IE标准模式
    PS:360浏览器支持
    generator 说明网站的采用的什么软件制作
    <meta name="generator" content="Microsoft"/>
    revised 网页文档的修改时间
    <meta name="revised" content="设计网, 6/24/2015"/>
    robots 用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。
    <meta name="robots" content="none"/>
    取值:all|none|index|noindex|follow|nofollow, 默认all
    all:文件将被检索,且页面上的链接可以被查询;
    none:文件将不被检索,且页面上的链接不可以被查询;
    index:文件将被检索;
    follow:页面上的链接可以被查询;
    noindex:文件将不被检索,但页面上的链接可以被查询;
    nofollow:文件将不被检索,页面上的链接可以被查询。
    copyright 网站版权信息
    <meta name="copyright" content="本页版权XXX所有。All Rights Reserved" />
     

     

    总结

    通过大网站对于meta的设置,可以看到常用的有,X-UA-Compatible、keywords、description。

     

    参考文献

    1. http://www.haorooms.com/post/html_meta_ds

     

    本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。

    展开全文
  • html中meta标签详解

    千次阅读 2009-12-29 16:48:00
    meta是html语言head区的个辅助性标签。几乎所有的网页里,我们可以看到类似下面这段的html代码: <head> <meta http-equiv="content-Type" content="text/html; charset=gb2312"> </head> 也许你认为...

    meta是html语言head区的一个辅助性标签。几乎所有的网页里,我们可以看到类似下面这段的html代码:

      <head>

      <meta http-equiv="content-Type" content="text/html; charset=gb2312">

      </head>

      也许你认为这些代码可有可无。其实如果你能够用好meta标签,会给你带来意想不到的效果,例如加入关键字会自动被大型搜索网站自动搜集;可以设定页面格式及刷新等等。

      一、meta标签的组成

      meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。

      1、name属性

      name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

      meta标签的name属性语法格式是:<meta name="参数" content="具体的参数值"> 。

      其中name属性主要有以下几种参数:

      A、Keywords(关键字)

      说明:keywords用来告诉搜索引擎你网页的关键字是什么。

      举例:<meta name ="keywords" content="science, education,culture,politics,ecnomics,relationships, entertaiment, human">

      B、description(网站内容描述)

      说明:description用来告诉搜索引擎你的网站主要内容。

      举例:<meta name="description" content="This page is about the meaning of science, education,culture.">

      C、robots(机器人向导)

      说明:robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。

      content的参数有all,none,index,noindex,follow,nofollow。默认是all。

      举例:<meta name="robots" content="none">

      D、author(作者)

      说明:标注网页的作者

      举例:<meta name="author" content"root,root@21cn.com">

      2、http-equiv属性

      http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。

      meat标签的http-equiv属性语法格式是:<meta http-equiv="参数" content="参数变量值"> ;其中http-equiv属性主要有以下几种参数:

      A、Expires(期限)

      说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。

      用法:<meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT">

      注意:必须使用GMT的时间格式。

      B、Pragma(cache模式)

      说明:禁止浏览器从本地计算机的缓存中访问页面内容。

      用法:<meta http-equiv="Pragma" content="no-cache">

      注意:这样设定,访问者将无法脱机浏览。

      C、Refresh(刷新)

      说明:自动刷新并指向新页面。

      用法:<meta http-equiv="Refresh" content="2;URL=http://www.root.net">

      注意:其中的2是指停留2秒钟后自动刷新到URL网址。

      D、Set-Cookie(cookie设定)

      说明:如果网页过期,那么存盘的cookie将被删除。

      用法:<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT; path=/">

      注意:必须使用GMT的时间格式。

      E、Window-target(显示窗口的设定)

      说明:强制页面在当前窗口以独立页面显示。

      用法:<meta http-equiv="Window-target" content="_top">

      注意:用来防止别人在框架里调用自己的页面。

      F、content-Type(显示字符集的设定)

      说明:设定页面使用的字符集。

      用法:<meta http-equiv="content-Type" content="text/html; charset=gb2312">

      二、meta标签的功能

      上面我们介绍了meta标签的一些基本组成,接着我们再来一起看看meta标签的常见功能:

      1、帮助主页被各大搜索引擎登录

      meta标签的一个很重要的功能就是设置关键字,来帮助你的主页被各大搜索引擎登录,提高网站的访问量。在这个功能中,最重要的就是对Keywords和description的设置。因为按照搜索引擎的工作原理,搜索引擎首先派出机器人自动检索页面中的keywords和decription,并将其加入到自己的数据库,然后再根据关键词的密度将网站排序。因此,我们必须设置好关键字,来提高页面的搜索点击率。下面我们来举一个例子供大家参考:

      <meta name="keywords" content="政治,经济, 科技,文化, 卫生, 情感,心灵,娱乐,生活,社会,企业,交通">

      <meta name="description" content="政治,经济, 科技,文化, 卫生, 情感,心灵,娱乐,生活,社会,企业,交通">

      设置好这些关键字后,搜索引擎将会自动把这些关键字添加到数据库中,并根据这些关键字的密度来进行合适的排序。

      2、定义页面的使用语言

      这是meta标签最常见的功能,在制作网页时,我们在纯HTML代码下都会看到它,它起的作用是定义你网页的语言,当浏览者访问你的网页时,浏览器会自动识别并设置网页中的语言,如果你网页设置的是GB码,而浏览者没有安装GB码,这时网页只会呈现浏览者所设置的浏览器默认语言。同样的,如果该网页是英语,那么charset=en。下面就是一个具有代表性的例子:

      <meta http-equiv=″content-Type″ content=″text/html; charset=gb2312″〉

      该代码就表示将网页的语言设置成国标码。

      3、自动刷新并指向新的页面

      如果你想使您的网页在无人控制的情况下,能自动在指定的时间内去访问指定的网页,就可以使用meta标签的自动刷新网页的功能。下面我们来看一段代码:

      〈meta http-equiv=″refresh″ content=″2; URL=http://www.root.net″〉

      这段代码可以使当前某一个网页在2秒后自动转到http://www.root.net页面中去,这就是meta的刷新作用,在content中,2代表设置的时间(单位为秒),而URL就是在指定的时间后自动连接的网页地址。

      4、实现网页转换时的动画效果

      使用meta标签,我们还可以在进入网页或者离开网页的一刹那实现动画效果,我们只要在页面的html代码中的<head></head>标签之间添加如下代码就可以了:

      <meta http-equiv="Page-Enter" content="revealTrans(duration=5.0, transition=20)">

      <meta http-equiv="Page-Exit" content="revealTrans(duration=5.0, transition=20)">

      一旦上述代码被加到一个网页中后,我们再进出页面时就会看到一些特殊效果,这个功能其实与FrontPage2000中的Format/Page Transition一样,但我们要注意的是所加网页不能是一个Frame页;

      5、网页定级评价

      IE4.0以上版本的浏览器可以防止浏览一些受限制的网站,而之所以浏览器会自动识别某些网站是否受限制,就是因为在网站meta标签中已经设置好了该网站的级别,而该级别的评定是由美国RSAC,即娱乐委员会的评级机构评定的,如果你需要评价自己的网站,可以连接到网站http://www.020webseo.com/,按要求提交表格,那么RSAC会提供一段meta代码给你,复制到自己网页里就可以了。下面就是一段代码的样例:

      〈meta http-equiv=″PICS-Label″

      content=′(PICS-1.1 ″http://www.rsac.org/ratingsv01.html″

      l gen true comment ″RSACi North America Server″

      for ″http://www.rsac.org″

      on ″2001.08.16T08:15-0500″

      r (n 0 s 0 v 0 l 0))′〉

      6、控制页面缓冲

      meta标签可以设置网页到期的时间,也就是说,当你在Internet Explorer 浏览器中设置浏览网页时首先查看本地缓冲里的页面,那么当浏览某一网页,而本地缓冲又有时,那么浏览器会自动浏览缓冲区里的页面,直到meta中设置的时间到期,这时候,浏览器才会去取得新页面。例如下面这段代码就表示网页的到期时间是2001年1月12日18时18分18秒。

      〈meta http-equiv=″expires″ content=″Friday, 12-Jan-2001 18:18:18 GMT″〉

      7、控制网页显示的窗口

      我们还可以使用meta标签来控制网页显示的窗口,只要在网页中加入下面的代码就可以了:<metahttp-equiv="window-target" content="_top">,这段代码可以防止网页被别人作为一个Frame调用。

      8、Refresh (刷新)

      说明:让网页多长时间(秒)刷新自己,或在多长时间后让网页自动链接到其它网页。

      用法:<Meta http-equiv="Refresh" Content="30">

      <Meta http-equiv="Refresh" Content="5; Url=http://www.020webseo.com">

      注意:其中的5是指停留5秒钟后自动刷新到URL网址。

      9、Expires (期限)

      说明:指定网页在缓存中的过期时间,一旦网页过期,必须到服务器上重新调阅。

      用法:<Meta http-equiv="Expires" Content="0">

      <Meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT">

      注意:必须使用GMT的时间格式,或直接设为0(数字表示多少时间后过期)。

      10、Pragma (cach模式)

      说明:禁止浏览器从本地机的缓存中调阅页面内容。

      用法:<Meta http-equiv="Pragma" Content="No-cach">

      注意:网页不保存在缓存中,每次访问都刷新页面。这样设定,访问者将无法脱机浏览。

      11、Set-Cookie (cookie设定)

      说明:浏览器访问某个页面时会将它存在缓存中,下次再次访问时就可从缓存中读取,以提高速度。当你希望访问者每次都刷新你广告的图标,或每次都刷新你的计数器,就要禁用缓存了。通常HTML文件没有必要禁用缓存,对于ASP等页面,就可以使用禁用缓存,因为每次看到的页面都是在服务器动态生成的,缓存就失去意义。如果网页过期,那么存盘的cookie将被删除。

      用法:<Meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday,

      21-Oct-98 16:14:21 GMT; path=/">

      注意:必须使用GMT的时间格式。

      12、Window-target (显示窗口的设定)

      说明:强制页面在当前窗口以独立页面显示。

      用法:<Meta http-equiv="Widow-target" Content="_top">

      注意:这个属性是用来防止别人在框架里调用你的页面。Content选项:_blank、_top、_self、_parent。

      Head中的其它一些用法

      1、scheme (方案)

      说明:scheme can be used when name is used to specify how the value of content should

      be interpreted.

      用法:<meta scheme="ISBN" name="identifier" content="0-14-043205-1" />

      注意:

      2、Link (链接)

      说明:链接到文件

      用法:<Link href="soim.ico" rel="Shortcut Icon">

      注意:很多网站如果你把她保存在收件夹中后,会发现它连带着一个小图标,如果再次点击进入之后还会发现地址栏中也有个小图标。现在只要在你的页头加上这段话,就能轻松实现这一功能。<LINK> 用来将目前文件与其它 URL 作连结,但不会有连结按钮,用於 <HEAD> 标记间, 格式如下:

      <link href="URL" rel="relationship">

      <link href="URL" rev="relationship">

      3、Base (基链接)

      说明:插入网页基链接属性

      用法:<Base href="http://www.xia8.net/" target="_blank">

      注意:你网页上的所有相对路径在链接时都将在前面加上“http://www.cn8cn.com/”。其中target="_blank"是链接文件在新的窗口中打开,你可以做其他设置。将“_blank”改为“_parent”是链接文件将在当前窗口的父级窗口中打开;改为“_self”链接文件在当前窗口(帧)中打开;改为“_top”链接文件全屏显示。

      Meta的使用方法技巧:

      Meta标签是用来描述网页属性的一种语言,标准的Meta标签可以便于搜索引擎排序,提高搜索引擎网站权重排名。要想网站做的更符合搜索引擎标准就必须了解meta标签,下面由Seoer惜缘于大家讲讲meta标签含义与使用方法:

      1、META标签的keywords

      写法为:<meta name="Keywords" content="信息参数" />

      meat标签的Keywords的的信息参数,代表说明网站的关键词是什么。

      2、META标签的Description

      <meta name="Description" content="信息参数" />

      meat标签的Description的信息参数,代表说明网站的主要内容,概况是什么。

      3、META标签的http-equiv=Content-Type content="text/html

      http-equiv=Content-Type代表的是HTTP的头部协议,提示浏览器网页的信息,

      <meta http-equiv="Content-Type" content="text/html; charset=信息参数" />

      meat标签的Description的信息参数如GB2312时,代表说明网站是采用的编码是简体中文;

      meat标签的Description的信息参数如BIG5时,代表说明网站是采用的编码是繁体中文;

      meat标签的Description的信息参数如iso-2022-jp时,代表说明网站是采用的编码是日文;

      meat标签的Description的信息参数如ks_c_5601时,代表说明网站是采用的编码是韩文;

      meat标签的Description的信息参数如ISO-8859-1时,代表说明网站是采用的编码是英文;

      meat标签的Description的信息参数如UTF-8时,代表世界通用的语言编码;

      4、META标签的generator

      <meta name="generator" content="信息参数" />

      meat标签的generator的信息参数,代表说明网站的采用的什么软件制作。

      5、META标签的author

      <meta name="author" content="信息参数">

      meat标签的author的信息参数,代表说明网页版权作者信息。

      6、META标签的http-equiv="Refresh"

      <Meta http-equiv="Refresh" Content="时间; Url=网址参数">

      meat标签的Refresh代表多少时间网页自动刷新,加上Url中的网址参数就代表,多长时间自动链接其他网址。

      7、META标签的HTTP-EQUIV="Pragma" CONTENT="no-cache"

      <META HTTP-EQUIV="Pragma" CONTENT="no-cache">代表禁止浏览器从本地计算机的缓存中访问页面内容,这样设定,访

      问者将无法脱机浏览。

      8、META标签的COPYRIGHT

      <META NAME="COPYRIGHT" CONTENT="信息参数">

      meat标签的COPYRIGHT的信息参数,代表说明网站版权信息。

      9、META标签的http-equiv="imagetoolbar"

      <meta http-equiv="imagetoolbar" content="false" />

      指定是否显示图片工具栏,当为false代表不显示,当为true代表显示。

      10、META标签的Content-Script-Type

      <Meta http-equiv="Content-Script-Type" Content="text/javascript">

      W3C网页规范,指明页面中脚本的类型。

      11、META标签的revisit-after

      <META name="revisit-after" CONTENT="7 days" >

      revisit-after代表网站重访,7 days代表7天,依此类推。

      12、META标签的Robots

      <meta name="Robots" contect="信息参数">

      Robots代表告诉搜索引擎机器人抓取哪些页面

      其中的属性说明如下:

      信息参数为all:文件将被检索,且页面上的链接可以被查询;

      信息参数为none:文件将不被检索,且页面上的链接不可以被查询;

      信息参数为index:文件将被检索;

      信息参数为follow:页面上的链接可以被查询;

      信息参数为noindex:文件将不被检索,但页面上的链接可以被查询;

      信息参数为nofollow:文件将不被检索,页面上的链接可以被查询。

      13、META标签的<meta http-equiv="windows-Target" contect="_top">

      代表页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作一个frame页调用,设置有:_blank、_top、_self、_parent。

      14、META标签的set-cookie

      <meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT">

      代表Cookie设定,如果网页过期,存盘的cookie将被删除,需要注意的也是必须使用GMT时间格式

    展开全文
  • HTML和CSS常用标签和基本使用

    千次阅读 2018-05-22 21:17:58
    1.HTML常用标签1.标签分类块元素 (行元素)内联元素 (行内元素)块元素的特点:单个块元素在浏览器中默认独占行两个块元素不能够在行显示, 他们会自动换成两行显示块元素可以设置宽高等属性. 内联元素:多个内联元素...

    1.HTML常用标签

    1.标签分类

    • 块元素 (行元素)

    • 内联元素 (行内元素)

    块元素的特点:

    • 单个块元素在浏览器中默认独占一行

    • 两个块元素不能够在一行显示, 他们会自动换成两行显示

    • 块元素可以设置宽高等属性.

    内联元素:

    • 多个内联元素可以在一行显示

    • 内联元素不能够设置宽高, 设置了也没有用, 不会显示出效果

    • 内联元素的宽高由他们本身的内容多少来支撑, 内容多,宽高自动增加.

    2.常用块元素标签

    1. 标题标签

    ​ 表示文档的标题, 除了具有块元素基本特征之外, 还含有默认的外边距和字体大小

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    2.段落标签:

    ​ 表示文档中的一个文字段落, 除了具有块元素基本特征, 还含有默认的外边距

    <p></p>

    3. 通用块容器标签 div

    ​ 表示文档中一块内容, 具 有块元素基本特性, 没有其他默认样式

    <div></div>

    3.常用内联元素标签

    1.超链接标签 a

    ​ 链接到另外一个网页, 具有内联元素基本特征, 默认文字蓝色, 有下划线

    跳转地址

    说明:

    • a 标签的 href 属性可以添加 # 号, 这个是缺省链接地址:

    • text-decoration:none; (取消下划线)

    • 不确定地址时, 我们可以临时使用 # 来占位,确定后替换即可

    • 如果想要跳转到当前页面的最上方时, 可以使用 #

    • a 标签有 target 属性

      • 如果不设置该属性, 在当前页面打开新页面

      • 如果设置该属性, 则会在新窗口中打开新页面

    2.通用内联容器标签 span

    具有内联元素基本特性, 没有其他默认样式

    我们一般在文字段落的中间部分强调某一部分的时候调用span,添加样式,从而改变强调的部分的样式:

    例如: 这是一段文字,其中李总需要强调,所以我们可以使用span来完成强调的操作.

    
    <p>这是一个段落文字, 段落文字中有<span>特殊标志或者样式<span>的文字</p>

    3. 图片标签 img

    在网页中插入图片, 具有内联元素基本特性, 但是它支持宽高设置

    
    <img src="images/pic.png" alt="图片">

    说明:

    • src属性主要是添加要展示的图片地址

    • alt属性的作用:

      • 图片加载失败时, 显示的提示信息

      • 搜索引擎在收录图片时, 根据这个属性值来收录图片

      • 制作无障碍网页, 方便盲人的读屏软件读取.

    4.特殊标签

    空格: 在html中, 空格一般会用: &nbsp;表示

    回车: 在html中回车换行一般用<br>表示

    小于号( < ): 在html中一般用&lt;表示

    大于号( > ): 在html中一般用&gt;表示

    删除标签: del 或者 ( s )

    倾斜标签: em 或者 ( i )

    下划线标签: ins 或者 ( u )

    5.总结:

    • HTML 整体是由标签组成的, 各个标签的功能很多都是重复的

    • 同学们学习标签用法的时候多多练习即可

    • 标签整体分为: 块级标签 和 行内标签

      • 块级标签可以设置宽高值, 独占一行

      • 行内标签自动设置宽高值, 一行内可以有多个

      • 一般来说, 块级元素可以包含行内元素,行内元素不能包含块级元素.

      • 特殊情况, 需要记住: p 标签不能嵌套 div

    • a 标签用于跳转(超链接) [跳转网页, 跳转页面, 跳转文件等]

    • 标题标签用于设置标题, 共有6级

    • div就是一个无色透明的容器,看不见,摸不到

    • img标签主要用于设置图片

    • p 标签就是paragraph(段落) 通常用于包裹段落

    • span是一个行内元素通常用于p标签内部,个别文字设置时使用.

    6.标签语义化

    带语义的标签:

    • h1 ---- h6: 表示标题

    • p: 表示段落

    • img : 表示图片

    • a: 表示链接

    不带语义 的标签:

    • div: 表示一个容器

    • span: 表示行内的一块内容

    2.CSS基本用法

    1.CSS引入方法

    1.内联式:

    通过标签的 style 属性, 在标签上直接写样式.

    
    <div style="width:100px; height:100px; background:red">这是个div标签</div>

    2. 嵌入式:

    通过 style 标签, 在网页上创建嵌入的样式表.

    
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>

    3.外联式:

    
    <link rel="stylesheet" type="text/css" href="css/样式文件名.css">

    2.CSS选择器

    1.标签选择器

    标签选择器, 此种选择器影响范围大, 一般用来做一些通用设置, 或用在层级选择器中.

    通用格式:
    
    标签名 {
        属性名: 值;
        ...
    }

    例如:

    
    div {
        color: red;
    }
    
    p {
        font-size: 18px;
    }

    一旦使用标签选择器,则当前页面上的所有该标签全部都有该样式. 这一点需要注意

    2.类选择器

    通过类名来选择元素, 一个类可应用于多个元素, 一个元素上也可以使用多个类, 应用灵活, 可复用, 是css中应用最多的一种选择器

    
    常见格式:
    
    .类名 {
        属性名: 值;
        ...
    }

    举例:

    
    CSS部分:
    <style>
        .blue {
            color: blue;
        }
        .header {
            font-size: 19px;
        }
    </style>
    
    HTML部分:
    <div class="blue">这是个div标签</div>
    <h3 class="blue header">这个是个h3标签</h3>
    <p class="header">p标签部分</p>

    3.层级选择器:

    主要应用在标签嵌套的结构中,层级选择器, 是结合上面两种选择器来写的选择器, 它可与标签选择器结合使用,减少命名,同时也可以通过层级, 限制样式的作用范围

    例如:

    
    CSS部分:
    .con {
        width: 100px;
        height: 100px;
    }
    .con span {
        color: red;
    }
    .con .pink {
        color: pink;
    }
    
    HTML部分:
    <div class="con">
        <span>这里是span标签的内容</span>
        <div class="pink">这里是div中的div标签,我是粉色</div>
    </div>

    层级选择器: 按照标签的层级来匹配对应的标签

    4. id选择器

    通过 id 名来选择元素,元素的 id 名称不能重复,所以一个样式设置项只能对应于页面上一个元素,不能复用,id 名一般给程序使用,所以不推荐使用id作为选择器。

    
    使用格式:
    
    #id名 {
        属性名: 值
    }

    举例:

    
    CSS部分: 
    #box{
        color:red
    } 
    
    
    HTML部分:
    <p id="box">这是第一个段落标签</p>   
    <p>这是第二个段落标签</p> 
    <p>这是第三个段落标签</p> 

    5. 伪类选择器

    常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态。

    
    CSS部分: 
    .box1 {
        width:100px;
        height:100px;
        background:gold;
    }
    .box1:hover {
        width:300px;
    }
    
    HTML部分: 
    <div class="box1">别看村子不咋大呀, 有山有水有树林, 邻里相亲多和睦, 老少爷们也合群</div>
    
    
    补充: 
    #input:focus {
        outline: none;<!--去掉默认值-->
        border: 2px solid red;
    }

    ​ a:link {color: red} /* 未访问时的状态 */ a:visited {color: orange} /* 已访问过的状态 */ a:hover {color: pink} /* 鼠标移动到链接上时的状态 */ a:active {color: yellow} /* 鼠标按下去时的状态 */

    6.总结:

    • CSS 选择器的主要目的是: 获取 HTML 元素, 获取到后给当前元素添加样式.

    • CSS 选择器的种类非常多, 一般我们用不上, 把常用的学会即可.

    • 标签选择器尽量少用, 覆盖面巨大. 不利于我们样式的单独调整.

    • class 类选择器是经常使用的选择器. 可以多多练习

    • 层级选择器 一般配合类选择器或者其他的选择器一起使用. 常用来获取大容器里面没有明确定义类名的元素

    • id 选择器偶尔使用, 使用它往往就是利用他的唯一性. 获取单个某个标签使用.

    • 伪类选择器是需要设置特殊阶段的效果时, 添加的选择器, 知道即可

    4. CSS属性入门

    布局常用属性样式:

    属性作用举例
    width设置元素(标签)的宽度width: 200px;
    height设置元素(标签)的高度height: 200px;
    background设置元素背景色或者背景图片(详看下面)background: pink;
    border设置元素四周的边框border: 1px solid pink;
    border-top设置元素顶部边框border-top: 1px solid pink;
    border-left设置元素左边边框border-left: 1px solid pink;
    border-right设置元素右边边框border-right: 1px solid pink;
    border-bottom设置元素底部边框border-bottom: 1px solid pink;
    padding设置内边距(同时设置四个边,也可以分开设置)padding: 20px;
    margin设置外边距(同时设置四个边,也可以分开设置)margin: 20px;
    float设置元素浮动,浮动可以让块元素在一行排列float:left(左浮动) float: right(右浮动)

    补充说明:

    background-color 背景颜色

    background-image 背景图片

    background-repeat 背景重复

    我们可以对上面的代码进行合并书写:

    background: url(bgimg.gif) no-repeat 5px 5px;

    补充:

    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

    由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

    css 浮动:

    请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:

    再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。

    如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。

    如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:

    文本常用样式属性:

    color设置文字的颜色color: red;
    font-size设置文字的大小font-size: 12px;
    font-family设置文字的字体font-family: 'Microsoft Yahei'; (微软雅黑)
    font-weight设置文字是否加粗font-weight: bold; (bold:加粗 normal: 正常)
    line-height设置文字的行高line-height: 24px; (文字高度加上文字上下间距共计24px)
    text-decoration设置文字的下划线text-decoration:none; (取消下划线)

    提示:样式中的注释

    
    /* 设置头部的样式 */
    .header{
        width:960px;
        height:80px;
        background:gold;
    }

    5.盒子模型

    设置宽高 width height

    保持宽高不变:box-sizing:border-box

    width:200px; /* 设置盒子的宽度,此宽度是指盒子内容的宽度,不是盒子整体宽度(难点) */ height:200px; /* 设置盒子的高度,此高度是指盒子内容的高度,不是盒子整体高度(难点) */

    设置边框border

    border:10px solid red;宽度为10px红色边框

    border:10px dashed red ;宽度为10px红色虚线

    border-top/bottom/left/right

    设置内间距 padding

    设置盒子四边的内间距,可设置如下:

    
    padding-top:20px;     /* 设置顶部内间距20px */ 
    padding-left:30px;     /* 设置左边内间距30px */ 
    padding-right:40px;    /* 设置右边内间距40px */ 
    padding-bottom:50px;   /* 设置底部内间距50px */

    上面的设置可以简写如下:

    
    /* 四个值按照顺时针方向,分别设置的是 上 右 下 左  四个方向的内边距值。 */
    padding:20px 40px 50px 30px; 

    padding后面还可以跟3个值,2个值和1个值,它们分别设置的项目如下:

    
    padding:20px 40px 50px; /* 设置顶部内边距为20px,左右内边距为40px,底部内边距为50px */ 
    padding:20px 40px; /* 设置上下内边距为20px,左右内边距为40px*/ 
    padding:20px; /* 设置四边内边距为20px */

    设置外间距margin

    和padding用法相同

    外间距居中技巧

    margin: 0px auto;

    盒子的真实尺寸 盒子的width和height值固定时,如果盒子增加border和padding,盒子整体的尺寸会变大,所以盒子的真实尺寸为:

    • 盒子宽度 = width + padding左右 + border左右

    • 盒子高度 = height + padding上下 + border上下

    6.列表标签

    1.无序列表

    
    使用方式:         ul>li{列表标题}*3
    
    
    <ul>
        <li>列表标题</li>
        <li>列表标题</li>
        <li>列表标题</li>
    </ul>

    列表的内容一般是可以链接的,点击链接到新闻或者文章的具体内容,所以具体结构一般是这样的:

    
    ul>(li>a[href=#]{列表标题 $})*3
    
    <ul>
        <li><a href="#">列表标题 1</a></li>
        <li><a href="#">列表标题 2</a></li>
        <li><a href="#">列表标题 3</a></li>
    </ul>

    显示效果:

    显示效果:

    2.有序列表

    
    使用方式:         ol>li{列表标题}*3
    
    <ol>
        <li>列表标题</li>
        <li>列表标题</li>
        <li>列表标题</li>
    </ol>

    显示效果:

    总结:

    • 我们在写页面的时候经常会使用列表标签

    • 写列表标签的时候, 我们可以去掉前面的点或者是序号:

      • 
        <style>
            li {
                list-style:none; /* 取消列表前面的序号或者是点 */
            }
        </style>
    • 写所有 html 页面的时候, 都可以使用 emmet 语法

    • text-decoration:none; (取消下划线)

    7.表单

    表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下:

    1、<form>标签 定义整体的表单区域

    action属性 定义表单数据提交地址

    method属性 定义表单提交的方式,一般有“get”方式和“post”方式

    
    使用方式:
    
    <form action="" method="">
        
    </form>

    2、<label>标签 为表单元素定义文字标注

    label 的 for 属性值可以和 input 的 id 名书写一致, 使 label 的点击也能够触发 input 的聚焦

    
    label的使用方式:
    <label for="">Male</label>
    <label for="">Female</label>
    
    label的for属性设置: 
    <label for="male">用户名:
    <input type="text" id="male">

    3、<input>标签 定义通用的表单元素

    • type属性

      • type="text" 定义单行文本输入框

      • type="password" 定义密码输入框

      • type="radio" 定义单选框

      • type="checkbox" 定义复选框

      • type="file" 定义上传文件

      • type="submit" 定义提交按钮

      • type="reset" 定义重置按钮

      • type="button" 定义一个普通按钮

    • value属性 定义表单元素的值

    • name属性 定义表单元素的名称,此名称是提交数据时的键名

    
    使用方法:
    
    <input type="text" name="username" placeholder="请您输入姓名">
    
    <input type="password" name="password">
    
    <input type="radio" name="gender" value="1"> 男
    <input type="radio" name="gender" value="0"> 女
    
    <input type="checkbox" name="hobby" value="1"> 唱歌
    
    <input type="file" name="file"> 
    
    <input type="submit">
    <input type="reset">
    <input type="button" value="按钮1">

    4、<textarea>标签 定义多行文本输入框

    
    使用方法:
    <textarea name="" placeholder="提示信息..." id="" cols="30" rows="10">
        textarea的使用
    </textarea>

    5、<select>标签 定义下拉表单元素

    6、<option>标签 与<select>标签配合,定义下拉表单元素中的选项

    
    使用方法: 
    
    创建带有 4 个选项的选择列表:
    <select name="province" id="">
        <option value="1">北京</option>
        <option value="2">河北</option>
        <option value="3">河南</option>
        <option value="4">湖北</option>
    </select>

    单行文本框文字提示

    • placeholder 设置input输入框的默认提示文字。

    总结:

    • 在前端页面中, 我们往往用表单来制作用户的注册, 登录等功能.

    • 表单包含很多内容, 例如:

      • 单选: radio

      • 多选: checkbox

      • 密码: password

      • 文本: text

      • 按钮: reset, submit, file

      • 多行文本输入: textarea

      • 下拉菜单: select option

    • 表单( form )可以直接提交: 提交方法包含 get post

      • action: 提交的服务器地址

      • method: 提交的方法

    8. 表格元素及相关样式

    1、<table>标签

    声明一个表格

    2、<tr>标签

    定义表格中的行

    3、<td><th>标签

    定义列以及列中的标题

    td代表列,th表示列中的标题部分(加粗)

    它们的常用属性如下:

    • colspan 设置单元格水平合并,设置值是数值

    • rowspan 设置单元格垂直合并,设置值是数值

    表格相关样式属性

    • border-collapse 设置表格的边线合并,如:border-collapse:collapse;

    • border='1' 可以设置table的边框大小

    • text-align 可以设置对齐方式: left right center

    总结:

    • 在网页中, 表格用一般用 table 标签来做

    • 表格中分为 行 和 列

    • 表格中的行为 tr 标签

    • 表格中的列为 td 标签

      • 其中每一列都可以有一个标题, 我们可以使用 th 标签

    
    <table>
        <tr>
            <th>标题一</th>
            <th>标题二</th>
            <th>标题三</th>
            <th>标题四</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

    显示效果:

    9. CSS属性进阶

    1.文本常用样式属性进阶:

    • text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中

    • text-indent 设置文字首行缩进,如:text-indent:32px; 设置文字首行缩进32px

    2. display属性

    作用: 第一个决定了当前元素是否应该显示, 第二个决定了当前元素应该以什么类型显示

    display 属性规定元素应该生成的框的类型。

    display 的默认属性值是 inline, 此元素会被显示为内联元素

    display属性是用来设置元素的类型及隐藏的,常用的属性有:

    • none 元素隐藏且不占位置

    • block 此元素会被显示为块元素

    • inline 此元素会被显示为内联元素

    3.css元素溢出

    当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。

    overflow的设置项:

    1、visible 默认值。内容不会被修剪,会呈现在元素框之外。

    2、hidden 内容会被修剪,并且其余内容是不可见的。

    3、scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

    4、auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

    10.定位

    1. 定位分类:

    我们可以使用 CSS 的 position 属性来设置元素的定位类型,position 的设置项如下:

    • static 默认值. 没有定位: 元素出现在正常的流中(忽略top, bottom, left, right 或者 z-index 声明)

    • relative 生成相对定位元素,一般是将父级设置相对定位,子级设置绝对定位,子级就以父级作为参照来定位,否则子级相对于body来定位。

    • absolute: 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。

    • fixed: 生成固定定位的元素,相对于浏览器窗口进行定位。

      元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

    2.定位元素的偏移

    定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。

    position:fixed;

    left:30px;

    3.层级

    z-index:10;

    <!-- .z-index后数字越大,层级越靠上 -->

    11.页面嵌套

    在一个页面中可以开一个局部的窗口,嵌入另外一个页面

    制作这样的功能我们一般使用: iframe 标签来实现

    
    使用方法: 
    
    <iframe src="" frameborder="">
    
    </iframe>
    
    • src: 设置另一个网页的地址

    • frameborder: 设置这个局部窗口边框的粗细

    提升:

    iframe 可以和 a 标签搭配使用, 呈现切换的效果:

    我们知道 a 标签有 target 属性:

    target="_blank" : 新开一个浏览器窗口显示链接的页面

    如果 target 的值和 iframe 的 name 值保持相同, 则 a 标签切换后的 href 将作用到 iframe 的 src 上:

    
    <a href="001.html" target="name">001页面</a>
    <a href="002.html" target="name">002页面</a>
    <a href="003.html" target="name">003页面</a>
    
    <iframe src="001.html" frameborder="0" name="name"></iframe>
    

    12.权重值

    • 内联样式的权重值最高: 1000 (内联: 写在标签上的样式)

    • 标签选择器的权重值为最低: 1

    • 类选择器的权重值为: 10 ( 了解 )

    • 伪类选择器权重值为: 10 ( 了解 )

    • id 选择器的权重值为: 100

      权重值越高,显示越在上边

    展开全文
  • 个人整理 HTML全部标签总集,及用法

    千次阅读 2019-08-07 09:53:01
    个人整理,资料来自HTML参考手册,应该是最全的的了 1.<!--...--> 定义注释 ...使用注释标签来隐藏浏览器不支持的脚本也是个好习惯(这样就不会把脚本显示为纯文本): <script type="te...

    个人整理,资料来自HTML参考手册,应该是最全的的了

    1.<!--...--> 定义注释

    注释标签用于在源代码中插入注释。注释不会显示在浏览器中。

    您可使用注释对您的代码进行解释,这样做有助于您在以后的时间对代码的编辑。当您编写了大量代码时尤其有用。

    使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯(这样就不会把脚本显示为纯文本):

    <script type="text/javascript">
    <!--
    function displayMsg()
    {
    alert("Hello World!")
    }
    //-->
    </script>
    

    注释:注释行结尾处的两条斜杠 (//) 是 JavaScript 注释符号。这可以避免 JavaScript 执行 --> 标签

    2.<!DOCTYPE>定义文档类型

    <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。

    <!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

    在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。

    HTML5 不基于 SGML,所以不需要引用 DTD。

    提示:请始终向 HTML 文档添加 <!DOCTYPE> 声明,这样浏览器才能获知文档类型。

    3.<a> 定义锚,用于超链接

    <a> 标签定义超链接,用于从一张页面链接到另一张页面。

    <a> 元素最重要的属性是 href 属性,它指示链接的目标。

    在所有浏览器中,链接的默认外观是:

    • 未被访问的链接带有下划线而且是蓝色的
    • 已被访问的链接带有下划线而且是紫色的
    • 活动链接带有下划线而且是红色的

    4.<abbr>定义缩写

    <abbr> 标签指示简称或缩写,比如 "WWW" 或 "NATO"。

    通过对缩写进行标记,您能够为浏览器、拼写检查和搜索引擎提供有用的信息。

    <abbr> 标签最初是在 HTML 4.0 中引入的,表示它所包含的文本是一个更长的单词或短语的缩写形式。

    5.<acronym>定义只取首字母的缩写

    HTML5 中不支持 <acronym> 标签。请使用 <abbr> 标签代替。

    <acronym> 标签定义首字母缩写。

    缩写能够作为单词来朗读,例如 NATO, NASA, ASAP, GUI。

    通过对缩写进行标记,您能够为浏览器、拼写检查和搜索引擎提供有用的信息。

    6.<address>定义文档作者或拥有者的联系信息

    <address> 标签定义文档或文章的作者/拥有者的联系信息。

    如果 <address> 元素位于 <body> 元素内,则它表示文档联系信息。

    如果 <address> 元素位于 <article> 元素内,则它表示文章的联系信息。

    <address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。

    7.<applet>定义嵌入的小程序

    HTML5 中不支持 <applet> 标签。请使用 object 元素 标签代替。

    HTML 4.01 中不赞成使用 <applet> 元素。

    <applet> 标签定义嵌入的 applet。

    9.<area>定义图像映射内部的内容

    <area> 标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像)。

    area 元素总是嵌套在 <map> 标签中。

    注释:<img> 标签中的 usemap 属性与 map 元素 name 属性相关联,创建图像与映射之间的联系。

    10.<article>定义文章

    <article> 标签规定独立的自包含内容。

    一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。

    <article> 元素的潜在来源:

    • 论坛帖子
    • 报纸文章
    • 博客条目
    • 用户评论

    11.<aside>定义页面内容之外的内容

    <aside> 标签定义其所处内容之外的内容。

    aside 的内容应该与附近的内容相关。

     

    12.<audio>定义声音内容

    <audio> 标签定义声音,比如音乐或其他音频流。

     

    13.<b>定义粗体字

    <b> 标签规定粗体文本。

    14.<base>定义页面中所有链接的默认地址或默认目标

    <base> 标签为页面上的所有链接规定默认地址或默认目标。

    通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

    使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

    15.<basefont>定义页面中文本的默认字体,颜色或尺寸

    <basefont> 标签定义基准字体。该标签可以为文档中的所有文本定义默认字体颜色、字体大小和字体系列。

    注意:我尝试了一下发现最新版chrome浏览器已经不支持该标签了

     

    16.<bdi> 定义文本中的文本方向,使其脱离其周围文本的方向设置

    bdi 指的是 bidi 隔离。

    <bdi> 标签允许您设置一段文本,使其脱离其父元素的文本方向设置。

    在发布用户评论或其他您无法完全控制的内容时,该标签很有用。

    17.<bdo>定义文字方向

    bdo 元素可覆盖默认的文本方向。

    18.<big>定义大号文本

    <big> 标签呈现大号字体效果。

    使用 <big> 标签可以很容易地放大字体。这简直不能再简单了:浏览器显示包含在 <big> 标签和其相应的 </big> 标签之间的文字时,其字体比周围的文字要大一号。但是,如果文字已经是最大号字体,这个 <big> 标签将不起任何作用。

    更妙的是,可以嵌套 <big> 标签来放大文本。每一个 <big> 标签都可以使字体大一号,直到上限 7 号文本,正如字体模型所定义的那样。

    但是使用 <big> 标签的时候还是要小心,因为浏览器总是很宽大地试图去理解各种标签,对于那些不支持 <big> 标签的浏览器来说,它经常将其认为是粗体字标签。

    19.<blockquate>定义长的引用

    <blockquote> 标签定义块引用。

    <blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。

    20.<body>定义文档的主体

    body 元素定义文档的主体。

    body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)

     

    21.<br>定义简单的折行

    <br> 可插入一个简单的换行符。

    <br> 标签是空标签(意味着它没有结束标签,因此这是错误的:<br></br>)。在 XHTML 中,把结束标签放在开始标签中,也就是 <br />。

    请注意,<br> 标签只是简单地开始新的一行,而当浏览器遇到 <p> 标签时,通常会在相邻的段落之间插入一些垂直的间距。

    22.<button>定义按钮

    <button> 标签定义一个按钮。

    在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

    <button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。

    唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

    请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。

    23.<canvas>定义图形

    <canvas> 标签定义图形,比如图表和其他图像。

    <canvas> 标签只是图形容器,您必须使用脚本来绘制图形。

    24.<caption>定义表格标题

    caption 元素定义表格标题。

    caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

     

    25.<center>定义居中文本

    对其所包括的文本进行水平居中。

    26.<cite>定义引用(citation)

    <cite> 标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。

    按照惯例,引用的文本将以斜体显示。

    用 <cite> 标签把指向其他文档的引用分离出来,尤其是分离那些传统媒体中的文档,如书籍、杂志、期刊,等等。如果引用的这些文档有联机版本,还应该把引用包括在一个 <a> 标签中,从而把一个超链接指向该联机版本。

    <cite> 标签还有一个隐藏的功能:它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器,它能够自动整理引用表格,并把它们作为脚注或者独立的文档来显示。<cite> 标签的语义已经远远超过了改变它所包含的文本外观的作用;它使浏览器能够以各种实用的方式来向用户表达文档的内容。

    27.<code>定义计算机代码文本

    <code> 标签用于表示计算机源代码或者其他机器可以阅读的文本内容。

    软件代码的编写者已经习惯了编写源代码时文本表示的特殊样式。<code> 标签就是为他们设计的。包含在该标签内的文本将用等宽、类似电传打字机样式的字体(Courier)显示出来,对于大多数程序员和 W3School 的用户来说,这应该是十分熟悉的。

    只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 <code> 标签。虽然 <code> 标签通常只是把文本变成等宽字体,但它暗示着这段文本是源程序代码。将来的浏览器有可能会加入其他显示效果。例如,程序员的浏览器可能会寻找 <code> 片段,并执行某些额外的文本格式化处理,如循环和条件判断语句的特殊缩进等。

    28.<col>定义表格中一个或多个列的属性值

    <col> 标签为表格中一个或多个列定义属性值。

    如需对全部列应用样式,<col> 标签很有用,这样就不需要对各个单元和各行重复应用样式了。

    您只能在 table 或 colgroup 元素中使用 <col> 标签。

    29.<colgroup>定义表格中供格式化的列组

    <colgroup> 标签用于对表格中的列进行组合,以便对其进行格式化。

    如需对全部列应用样式,<colgroup> 标签很有用,这样就不需要对各个单元和各行重复应用样式了。

    <colgroup> 标签只能在 table 元素中使用。

    30.<command>定义命令按钮

    command 元素表示用户能够调用的命令。

    <command> 标签可以定义命令按钮,比如单选按钮、复选框或按钮。

    只有当 command 元素位于 menu 元素内时,该元素才是可见的。否则不会显示这个元素,但是可以用它规定键盘快捷键。

    注意:几乎已经没有浏览器支持该标签

    31.<datalist>定义下拉列表

    <datalist> 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。

    datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。

    请使用 input 元素的 list 属性来绑定 datalist。

     

    32.<dd>定义定义列表中项目的描述

     <dd> 在定义列表中定义条目的定义部分。

    33.,<del>定义删除的文本

       定义文档中已被删除的文本。

    34.<details>定义元素的细节。

    <details> 标签用于描述文档或文档某个部分的细节。

    注意:目前只有 Chrome 和 Safari 6 支持 <details> 标签。

     

    35.<dfn>定义项目

    <dfn> 标签可标记那些对特殊术语或短语的定义。

    现在流行的浏览器通常用斜体来显示 <dfn> 中的文本。将来,<dfn> 还可能有助于创建文档的索引或术语表。

    与其他许多基于内容的样式和物理样式标签一样,<dfn> 标签尽量少用为妙。作为一种通用样式,尤其在技术文档中,当第一次新的术语时,应该将它们与普通文本分开,这样读者可以更好地理解文章当前的主题,而从那以后就不要再对这个术语进行任何标记了。

    36.<dialog>定义对话框

    <dialog> 标签定义对话框或窗口。

    37.<dir>定义目录列表

    <dir> 标签定义目录列表。

    38.<div>定义文档中的节

    <div> 可定义文档中的分区或节(division/section)。

    <div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

    如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。

    用法

    <div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

    不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。

    可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。

    39.<dl>定义定义列表

    <dl> 标签定义了定义列表(definition list)。

    <dl> 标签用于结合 <dt> (定义列表中的项目)和 <dd> (描述列表中的项目)。

    40.<dt>定义定义列表中的项目

    <dt> 标签定义了定义列表中的项目(即术语部分)。

    41.<em>定义强调文本

    <em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说,这意味着要把这段文字用斜体来显示。

    在文本中加入强调也需要有技巧。如果强调太多,有些重要的短语就会被漏掉;如果强调太少,就无法真正突出重要的部分。这与调味品一样,最好还是不要滥用强调。

    尽管现在 <em> 标签修饰的内容都是用斜体字来显示,但这些内容也具有更广泛的含义,将来的某一天,浏览器也可能会使用其他的特殊效果来显示强调的文本。如果你只想使用斜体字来显示文本的话,请使用 <i> 标签。除此之外,文档中还可以包括用来改变文本显示的级联样式定义。

    除强调之外,当引入新的术语或在引用特定类型的术语或概念时作为固定样式的时候,也可以考虑使用 <em> 标签。例如,W3School 经常对重要的术语使用 <em> 标签。<em> 标签可以用来把这些名称和其他斜体字区别开来

     

    42.<embed>定义外部交互内容或者插件

    <embed> 标签定义嵌入的内容,比如插件。

     

    43.<fieldset>定义围绕表单中元素的边框

    fieldset 元素可将表单内的相关元素分组。

    <fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。

    当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。

    <fieldset> 标签没有必需的或唯一的属性。

    <legend> 标签为 fieldset 元素定义标题。

    44.<figcaption>定义figure元素的标题

    <figcaption> 标签定义 figure 元素的标题(caption)。

    "figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

    45.<figure>定义媒介内容的分组,以及他们的标题

    <figure> 标签规定独立的流内容(图像、图表、照片、代码等等)。

    figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

    46.<font>定义字体的字体,尺寸和颜色

    <font> 规定文本的字体、字体尺寸、字体颜色。

    47.<footer>定义section或page的页脚

    <footer> 标签定义文档或节的页脚。

    <footer> 元素应当含有其包含元素的信息。

    页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

    您可以在一个文档中使用多个 <footer> 元素。

    48.<form>定义供用户输入的HTML表单

    <form> 标签用于为用户输入创建 HTML 表单。

    表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。

    表单还可以包含 menustextareafieldsetlegend 和 label 元素

    表单用于向服务器传输数据。

    49.<frame>定义框架集的窗口或框架

    <frame> 标签定义 frameset 中的一个特定的窗口(框架)。

    frameset 中的每个框架都可以设置不同的属性,比如 border、scrolling、noresize 等等。

    50.<frameset>定义框架集

    <frame> 标签定义 frameset 中的一个特定的窗口(框架)。

    frameset 中的每个框架都可以设置不同的属性,比如 border、scrolling、noresize 等等

    51.<h1>to<h6>定义HTML标题

    <h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

    由于 h 元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小。相反,我们应当使用层叠样式表定义来达到漂亮的显示效果。

    如果您希望了解更多有关 HTML 标签选择和使用的信息,请阅读《Web 品质》。

     

    52.<head>定义关于文档的信息

    <head> 标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

    文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

    下面这些标签可用在 head 部分:<base><link><meta><script><style>, 以及 <title>

    <title> 定义文档的标题,它是 head 部分中唯一必需的元素。

    53.<header>定义section或page的页脚

    <header> 标签定义文档的页眉(介绍信息)。

    54.<hr>定义水平线

    <hr> 标签在 HTML 页面中创建一条水平线。

    水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。

    55.<html>定义HTML文档

    此元素可告知浏览器其自身是一个 HTML 文档。

    <html> 与 </html> 标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。正如您所了解的那样,文档的头部由 <head> 标签定义,而主体由 <body> 标签定义。

     

    56.<i>定义斜体字

    <i> 标签显示斜体文本效果。

    <i> 标签和基于内容的样式标签 <em> 类似。它告诉浏览器将包含其中的文本以斜体字(italic)或者倾斜(oblique)字体显示。如果这种斜体字对该浏览器不可用的话,可以使用高亮、反白或加下划线等样式。

    提示:<i> 标签一定要和结束标签 </i> 结合起来使用。

    57.<iframe>定义内联框架

    iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。

    58.<img>定义图像

    img 元素向网页中嵌入一幅图像。

    请注意,从技术上讲,<img> 标签并不会在网页中插入图像,而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

    <img> 标签有两个必需的属性:src 属性 和 alt 属性

    延伸阅读:如何正确地使用图像

     

    59.<input>定义输入控件

    <input> 标签用于搜集用户信息。

    根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

    60.<ins>定义被插入文本

    <ins> 标签定义已经被插入文档中的文本。

    61.<kbd>定义键盘文本

    <kbd> 标签定义键盘文本。

    说到技术概念上的特殊样式时,就要提到 <kbd> 标签。正如你已经猜到的,它用来表示文本是从键盘上键入的。

    浏览器通常用等宽字体来显示该标签中包含的文本。

    <kbd> 标签经常用在于计算机相关的文档和手册中。例如:

    62.<keygen>定义生成密匙

    <keygen> 标签规定用于表单的密钥对生成器字段。

    当提交表单时,私钥存储在本地,公钥发送到服务器。

     

    63.<label>定义input元素的标注

    <label> 标签为 input 元素定义标注(标记)。

    label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

    <label> 标签的 for 属性应当与相关元素的 id 属性相同。

    64.<legend>定义filedset元素的标题

    legend 元素为 fieldset 元素定义标题(caption)

    65.<li>定义列表的项目

    <li> 标签定义列表项目。

    <li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。

    66.<link>定义文档与外部资源的的关系

    <link> 标签定义文档与外部资源的关系。

    <link> 标签最常见的用途是链接样式表。

    67.<main>规定文档的主要内容

    <main> 标签规定文档的主要内容。

    <main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。

    注释:在一个文档中,不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代:<article>、<aside>、<footer>、<header> 或 <nav>。

    68.<map>定义图像的映射

    定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。

    69.<mark>定义有记号的文本

    <mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。

     

    70.<menu>定义命令的列表或菜单。

    <menu> 标签定义命令的列表或菜单。

    <menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。

    71.<menuitem>定义用户可以从弹出菜单调用额命令/菜单项目

    <menuitem> 标签定义用户可以从弹出菜单调用的命令/菜单项目。

    72.<meta>定义关于html文档得到原信息

    <meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

    <meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

     

    73.<meter>定义预定义范围内的度量

    <meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge(尺度)。

    例子:磁盘用量、查询结果的相关性,等等。

    注释:<meter> 标签不应用于指示进度(在进度条中)。如果标记进度条,请使用 <progress> 标签。

    74.<nav>定义导航链接

    <nav> 标签定义导航链接的部分。

    75.<noframes>定义支持不同的框架的

    noframes 元素可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。

    76.<noscript>定义针对不支持客户端脚本的用户的替代内容

    noscript 元素用来定义在脚本未被执行时的替代内容(文本)。

    此标签可被用于可识别 <script> 标签但无法支持其中的脚本的浏览器。

    77.<object>定义内嵌对象

    定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数,以及可用来显示和操作数据的代码。

    <object> 标签用于包含对象,比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。

    object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持,这一点并未实现。

    浏览器的对象支持有赖于对象类型。不幸的是,主流浏览器都使用不同的代码来加载相同的对象类型。

    而幸运的是,object 对象提供了解决方案。如果未显示 object 元素,就会执行位于 <object> 和 </object> 之间的代码。通过这种方式,我们能够嵌套多个 object 元素(每个对应一个浏览器)。

    78.<ol>定义有序列表

    <ol> 标签定义有序列表。

    79.<optgroup>定义选择列表中相关选项的组合

    <optgroup> 标签定义选项组。

    optgroup 元素用于组合选项。当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易。

    79.<option>定义选择列表中的选项

    option 元素定义下拉列表中的一个选项(一个条目)。

    浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。

    option 元素位于 select 元素内部

    80.<output>定义输出的一些类型

    <output> 标签定义不同类型的输出,比如脚本的输出。

    81.<p>定义段落

    <p> 标签定义段落。

    p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定。

    82.<rp>定义若浏览器不支持ruby元素显示的内容

    <rp> 标签在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。

    ruby 注释是中文注音或字符。

    在东亚使用,显示的是东亚字符的发音。

    与 <ruby> 以及 <rt> 标签一同使用:

    ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。

    83.<rt>定义ruby注释的解释

    <rt> 标签定义字符(中文注音或字符)的解释或发音。

    ruby 注释是中文注音或字符。

    在东亚使用,显示的是东亚字符的发音。

    与 <ruby> 以及 <rt> 标签一同使用:

    ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。

    84.<ruby>定义ruby注释

    <ruby> 标签定义 ruby 注释(中文注音或字符)。

    在东亚使用,显示的是东亚字符的发音。

    与 <ruby> 以及 <rt> 标签一同使用:

    ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。

    85.<s>定义加删除线的文本

    <s> 标签可定义加删除线文本定义。

    <s> 标签是 <strike> 标签的缩写版本,Netscape 和 Internet Explorer 都支持它。但在 HTML 4 和 XHTML 中已经不再赞成使用它了,意思就是不再使用了;它早晚有一天将会消失。

    86.<samp>定义计算机代码样本

    <samp> 标签表示一段用户应该对其没有什么其他解释的文本字符。要从正常的上下文抽取这些字符时,通常要用到这个标签。

    请看下面的例子:

    字符序列 <samp>ae</samp> 可能会被转换为 &aelig; 连字字符。

    上面的 HTML 代码会显示为:

    字符序列 ae 可能会被转换为 æ 连字字符。

    注释:在 HTML 中,用于 "ae" 连字的特殊实体是 "&aelig;",大多数浏览器都会将它转换成相应的 "æ" 连字字符。

    <samp> 标签并不经常使用。只有在要从正常的上下文中将某些短字符序列提取出来,对它们加以强调的极少情况下,才使用这个标签

     

    87.<script>定义客户端脚本

    <script> 标签用于定义客户端脚本,比如 JavaScript。

    script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。

    必需的 type 属性规定脚本的 MIME 类型。

    JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。

    88.<section> 定义section

    <section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

    89.<select>定义选择列表

    select 元素可创建单选或多选菜单。

    <select&> 元素中的 <option> 标签用于定义列表中的可用选项。

    90.<small>定义小号文本

    <small> 标签呈现小号字体效果。

    <small> 标签和它所对应的 <big> 标签一样,但它是缩小字体而不是放大。如果被包围的字体已经是字体模型所支持的最小字号,那么 <small> 标签将不起任何作用。

    与 <big> 标签类似,<small> 标签也可以嵌套,从而连续地把文字缩小。每个 <small> 标签都把文本的字体变小一号,直到达到下限的一号字。

    91.<source>定义媒介源

    <source> 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。

    <source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

    92.<span>定义文档中的节

    <span> 标签被用来组合文档中的行内元素

     

    93.<strike>定义加删除线文本

    <strike> 标签可定义加删除线文本定义。

    94.<strong>定义强调文本

    <strong> 标签和 <em> 标签一样,用于强调文本,但它强调的程度更强一些。

    浏览器通常会以不同于 <em> 标签的方式来显示 <strong> 标签中的内容,通常是用加粗的字体(相对于斜体)来显示其中的内容,这样用户就可以把这两个标签区分开来了。

    如果常识告诉我们应该较少使用 <em> 标签的话,那么 <strong> 标签出现的次数应该更少。如果说用 <em> 标签修饰的文本好像是在大声呼喊,那么用 <strong> 标签修饰的文本就无异于尖叫了。沉默寡言的人说出的话总是一诺千金,与此相同,限制 <strong> 的使用可以令应该更加引人注意,而且更加有效。

    举一个例子,经常访问 W3school 的用户可以注意到了,许多教程页面的第一句摘要都是以粗体显示的,而实际上,我们对这一句摘要使用了 <strong> 标签。使用这个标签的理由是,我们认为教程摘要不仅概括了其所在页面的内容,而且位于页面的最重要的位置,其内容自然是非常重要的且值得强调的。

    95.<style>定义文档的样式信息

    <style> 标签用于为 HTML 文档定义样式信息。

    在 style 中,您可以规定在浏览器中如何呈现 HTML 文档。

    type 属性是必需的,定义 style 元素的内容。唯一可能的值是 "text/css"。

    style 元素位于 head 部分中。

    96.<sub>定义下标文本

    <sub> 标签可定义下标文本。

    包含在 <sub> 标签和其结束标签 </sub> 中的内容将会以当前文本流中字符高度的一半来显示,但是与当前文本流中文字的字体和字号都是一样的。

    提示:无论是 <sub> 标签还是和它对应的 <sup> 标签,在数学等式、科学符号和化学公式中都非常有用。

    97.<table>定义表格

    <table> 标签定义 HTML 表格。

    简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

    tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。

    更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

    98.<tbody>定义表格中的主体内容

    <tbody> 标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容。

    tbody 元素应该与 thead 和 tfoot 元素结合起来使用。

    thead 元素用于对 HTML 表格中的表头内容进行分组,而 tfoot 元素用于对 HTML 表格中的表注(页脚)内容进行分组。

    注释:如果您使用 thead、tfoot 以及 tbody 元素,您就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

    提示:在默认情况下这些元素不会影响到表格的布局。不过,您可以使用 CSS 使这些元素改变表格的外观。

    详细描述

    thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。

    99.<td>定义表格中的单元

    <td> 标签定义 HTML 表格中的标准单元格。

    HTML 表格有两类单元格:

    • 表头单元 - 包含头部信息(由 th 元素创建)
    • 标准单元 - 包含数据(由 td 元素创建)

    td 元素中的文本一般显示为正常字体且左对齐。

    100.<textarea>定义多行的文本输入控件

    <textarea> 标签定义多行的文本输入控件。

    文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。

    可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。

    注释:在文本输入区内的文本行间,用 "%OD%OA" (回车/换行)进行分隔。

    101.<tfoot>定义表格中的表注内容(脚注)

    <tfoot> 标签定义表格的页脚(脚注或表注)。该标签用于组合 HTML 表格中的表注内容。

    tfoot 元素应该与 thead 和 tbody 元素结合起来使用。

    thead 元素用于对 HTML 表格中的表头内容进行分组,而 tbody 元素用于对 HTML 表格中的主体内容进行分组。

    注释:如果您使用 thead、tfoot 以及 tbody 元素,您就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

    提示:在默认情况下这些元素不会影响到表格的布局。不过,您可以使用 CSS 使这些元素改变表格的外观。

    102.<th>定义表格中的表头单元格

    定义表格内的表头单元格。

    HTML 表单中有两种类型的单元格:

    • 表头单元格 - 包含表头信息(由 th 元素创建)
    • 标准单元格 - 包含数据(由 td 元素创建)

    th 元素内部的文本通常会呈现为居中的粗体文本,而 td 元素内的文本通常是左对齐的普通文本。

    103.<thead>定义表格中的表头内容

    <thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

    thead 元素应该与 tbody 和 tfoot 元素结合起来使用。

    tbody 元素用于对 HTML 表格中的主体内容进行分组,而 tfoot 元素用于对 HTML 表格中的表注(页脚)内容进行分组。

    注释:如果您使用 thead、tfoot 以及 tbody 元素,您就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

    提示:在默认情况下这些元素不会影响到表格的布局。不过,您可以使用 CSS 使这些元素改变表格的外观。

    104.<time>定义日期/时间

    <time> 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。

    该元素能够以机器可读的方式对日期和时间进行编码,这样,举例说,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。

    105.<title>定义文档的标题

    <title> 元素可定义文档的标题。

    浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样,当把文档加入用户的链接列表或者收藏夹或书签列表时,标题将成为该文档链接的默认名称。

    106.<tr>定义表格中的行

    <tr> 标签定义 HTML 表格中的行。

    tr 元素包含一个或多个 th 或 td 元素。

    107.<track>定义用在媒体播放器中的文本轨道

    <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。

    用于规定字幕文件或其他包含文本的文件,当媒介播放时,这些文件是可见的。

    108.<tt>定义打字机文本

    <tt> 标签呈现类似打字机或者等宽的文本效果。

    <tt> 标签与 <code> 和 <kbd> 标签一样,<tt> 标签和必需的 </tt> 结束标签告诉浏览器,要把其中包含的文本显示为等宽字体。对于那些已经使用了等宽字体的浏览器来说,这个标签在文本的显示上就没有什么特殊效果了

    109.<u>定义下划线文本

    <u> 标签可定义下划线文本。

     

    110.<ul>定义无序列表

    <ul> 标签定义无序列表。

    111.<var>定义文本的额变量部分

    <var> 标签表示变量的名称,或者由用户提供的值。

    <var> 标签是计算机文档中应用的另一个小窍门,这个标签经常与 <code> 和 <pre> 标签一起使用,用来显示计算机编程代码范例及类似方面的特定元素。

    用 <var> 标签标记的文本通常显示为斜体。

    就像其他与计算机编程和文档相关的标签一样,<var> 标签不只是让用户更容易理解和浏览你的文档,而且将来某些自动系统还可以利用这些恰当的标签,从你的文档中提取信息以及文档中提到的有用参数。我们再一次强调,提供给浏览器的语义信息越多,浏览器就可以越好地把这些信息展示给用户。

    112.<video>定义视频

    <video> 标签定义视频,比如电影片段或其他视频流。

     

    113.<wbr>定义可能的换行符

    Word Break Opportunity (<wbr>) 规定在文本中的何处适合添加换行符。

    提示:如果单词太长,或者您担心浏览器会在错误的位置换行,那么您可以使用 <wbr> 元素来添加 Word Break Opportunity(单词换行时机)。

    114.<xmp>定义预格式文本

     

     

     

     

     

     

     

    展开全文
  • Html5和Css3的基础标签及常用属性

    千次阅读 2017-10-05 15:07:32
    H5的常用标签及属性: 新增和废弃 新增的结构(布局) 标签:section、artcle、nav、footer、header、hgroup、Aside、figure 新增的其他标签: Video、audio、mark、time、menu、canvas、svg、details、datalist、...
  • 如何正确使用html基本标签

    千次阅读 2016-09-02 10:06:03
    比如那些需要读屏软件的用户。作为个前端,我们又怎么会忍心呢。之前就一直想写这样的篇文章,分享一下如何去创造个可访问性更好的页面。今天的计划里有条把 HTML Tag 和 WCAG标准结合起来。我推荐你这样去...
  • html与css常用标签大全

    千次阅读 多人点赞 2018-09-02 23:12:47
    html+css基础 1-1 Html和CSS的关系 学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体。内容就是网页制作者放在页面上...
  • 前端html+css+js面试题整理,附常用标签属性手册。

    千次阅读 多人点赞 2019-12-17 21:26:36
    、什么是选择器,选择器包括哪几种? 选择器:选择器就是找到你要渲染的那个HTML标签。 选择器类型: HTML标签选择器:直接作用于某个HTML标签 类选择器:可在页面中被多次使用 ID选择器:作用于同一ID的某个资源...
  • 段落标记,一般情况下在每个段落的前面加上个标记可以区分...标签可以把原文件中的空格,回车,换行,tab键表现出来  标记将取消浏览器由于窗口大小变化而换行。 在HTML文档中加入标记,使标记内的HTML标记不起作用。
  • 市食品批发系统概要设计平台融合了主流电商交易平台的特点,同时网上交易系统的的独特性,方便日常食材的交易,提高了其效率。 在整个系统设计的过程中遵循以下的设计原则: 1.1实用性 实用性是系统的主要设计原则...
  • JSP标准标签库、通用标签

    千次阅读 2016-09-15 09:12:54
    JSP标准标签库、通用标签 JSP标准标签库(JSP Standard Tag ...本章将介绍JSTL的应用基础、如何从表示层删除源代码来简化软件的维护。 JSTL概述 JSTL英文全称是“JSP Standard Tag Library”,即JSP标准标签库之意。
  • Fanvas, 把swf文件转html5 canvas js软件工具程序 什么是Fanvas? Fanvas是个把swf转为html5 canvas动画的系统,由两部分组成:Actionscript实现的解析器、js运行库。 Flash做动画是最成熟最高效的方式,但由于...
  • 软件测试总结——常见的面试问题(

    万次阅读 多人点赞 2019-10-12 18:40:58
    Findyou又称为模块测试,个单元测试是用于判断某个特定条件(或者场景)下某个特定函数的行为。(测试内容:模块接口测试、局部数据结构测试、路径测试、错误处理测试、边界测试) 集成测试:(集成测试也称联合...
  • 个合格的初级前端工程师需要掌握的模块笔记

    千次阅读 多人点赞 2021-02-04 09:43:23
    文章目录个合格的初级前端工程师需要掌握的模块笔记前言Web模块html基本结构标签属性事件属性文本标签多媒体标签列表表格表单标签其他语义化标签网页结构模块划分CSS代码语法CSS 放置位置CSS的继承选择器的种类...
  • 前端,种GUI软件

    千次阅读 2020-07-03 09:26:47
    喂喂喂,那个切图的,把页面写好就发给研发工程师套模板吧。 你好,切图仔。 不知道你的团队如何定义前端开发,据我所知,...、前端,是种GUI软件 现如今前端可谓包罗万象,产品形态五花八门,涉猎极广,什么高大上
  • 篇奶妈级HTML学习笔记

    千次阅读 2020-10-07 20:19:56
    W3C万维网联盟,发展迭代web网页规范,四个重要组成部分,我们的北航就是个据点,所以拥有个中文网站,W3C中国,到一定层次的水平时候想要深入理解,必定要查阅规范,奉上上传文件查阅自己编码的文件是否符合...
  • Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的种标记语言。 就是给文本加上含有语义的标签。 接下来应该学习更多具体语义标签、结构(固定的结构)   &lt;html&gt; ...
  • 推荐系统-用户标签预测算法基础实践 1.用户画像概述 用户画像就是给到用户打标签 用户画像 用户角色 用户属性 用户画像和用户角色较为接近,而用户属性使用户的画像中的子集 用户画像阶段 1.用户画像基础 2....
  • 用ESC操作JSP页面,仅选择删除脚本注释,测试结果发现能够删除页面中JS代码注释,也会删除JSP代码注释,但并不能删除html注释(<!-- -->)。对于某些情况,虽然执行结果没有报出错误,但是实际上对页面存在较大影响...
  • JSP标准标签库 通用标签

    千次阅读 2012-11-26 17:56:10
    •  JSP标准标签库(JSP Standard Tag Library,JSTL)是实现Web应用程序...本章将介绍JSTL的应用基础、如何从表示层删除源代码来简化软件的维护。 JSTL概述 •  JSTL英文全称是“JSP Standard Tag Library”,即J
  • 影像标签

    千次阅读 2005-06-07 14:55:00
    影像标签 【影像标签】 在使用影像标签时有两件事值得注意一下,是档名,二是路径。首先要注意的就是,档名是否正确以及大小写是否一致!图档名称不正确,任电脑再厉害也找不到您要的图,档名大小写不一致,如...
  • Android软件安全开发实践

    千次阅读 2014-09-26 10:16:53
    Android开发是当前最火的话题之,但很少有人讨论这个领域的安全问题。本系列将分两期,探讨Android开发中常见的安全隐患和解决方案。第期将从数据存储、网络通信、密码和认证策略这三个角度,带你走上Android...
  • 前端重要的H标签详解(干货!)最新版

    万次阅读 多人点赞 2020-09-23 20:51:01
    目录重要的H标签主要标签h系列标签主要用来做标题。h1到h6 依次缩小。p标签:段落。div标签:表示大的容器。span:放一些文本。a标签:超链接。img标签:增加背景图片块级标签和行内标签 重要的H标签 主要标签 h系列...
  • 软件测试面试题(含答案)

    万次阅读 多人点赞 2021-03-01 15:15:38
    软件测试面试题(含答案)
  • 看清恶意软件的十张脸 迈出避免问题的第步作者:Michael Kassner翻译:endurer,2009-08-13 第2版分类:安全标签软件,特洛伊木马,恶意软件,电脑,Vundo,Sony BMG CD Copy Protection Scandal,内核模式,终...
  • windows如何删除默认打开方式

    千次阅读 2018-05-15 17:34:00
    一般某一文件的右键打开方式中,系统会自动推荐一些程序,有时候这些程序会较多,而且很多都是无关的,或者有时我们错误地用某一程序打开后,这个程序就会一直出现在推荐程序或其他程序中,这时我们就有必要对其进....
  • 这样去写你的HTML

    千次阅读 2012-01-10 00:01:50
    1. 文档声明: ...互联网的联几乎可以说是用 来实现的,作为个页面最常见的标签。我们应该如何对待呢? 为关键链接添加 accesskey 除非万不得已,不要去掉 focus 时虚线框 hidefocus>Link 3. 缩写:
  • HTML入门学习笔记+案例

    万次阅读 2020-02-21 15:30:02
    HTML简介 1.HTML是什么? HTML:hyper text markup language超文本标记(标签)语言由各种标签组成,用来制作网页,告诉浏览器该如何显示页面 2.作用 制作网页,控制网页和内容的显示 插入图片、音乐、视频、...
  • 软件界面设计思想方法

    万次阅读 2015-03-04 10:16:28
    15.1什么是好的软件界面 简而言之,好的软件界面应当是易用的和美观的。易用是交互设计的主要目标,美观是视觉设计的主要目标,交互设计和视觉设计完成后,最终靠编程来实现可运行的软件界面。 15.1.1易用 ...
  • 篇文带你从0到1了解建站及完成CMS系统编写

    万次阅读 多人点赞 2020-10-24 00:48:06
    学习目标 了解搭建一般网站的简便方式 了解最原始一般站点搭建 了解内容管理站点搭建 了解权限设计及完成 ...文章为从0到1了解内容管理系统搭建与编写,由于篇文章内容篇幅过长,文章内容经过压缩,该项目中相

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,963
精华内容 14,385
关键字:

删除html某一标签软件