zoukankan      html  css  js  c++  java
  • HTML基本标签问题总结

    一、常见的内联元素和块元素
    块级元素:
    div, form, (列表相关ul,dl,ol,li,) h1-6,p,table
    内联元素:
    a, br, u,(b , em, strong, i,) img , (表单相关input, label, select, textarea) , span ,
    其中img和input是替换元素类,可以设置宽高。


    二、关于html头部声明的各种区别
    常用的HTML声明:

    HTML5

    <!DOCTYPE html>
    

    HTML 4.01

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    

    XHTML 1.0

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    

    三、<head>标签
    head 是头部元素的容器。可以加入<title><base><link><style><script><meta>、这些标签。

    其中<title>显示的是浏览器工具栏中的标题,页面被收藏到收藏夹中的标题,搜索引擎结果中页面的标题。

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

    <meta>:meta是用来在HTML文档中模拟HTTP协议的响应头报文

    属性name,

    1、<meta name="Generator" contect="">
    用以说明生成工具(如Microsoft FrontPage 4.0)等;
    2、<meta name="KEYWords" contect="">
    向搜索引擎说明你的网页的关键词;
    3、<meta name="DEscription" contect="">
    告诉搜索引擎你的站点的主要内容;
    4、<meta name="Author" contect="你的姓名">
    告诉搜索引擎你的站点的制作的作者;
    5、<meta name="Robots" contect= "all|none|index|noindex|follow|nofollow">

      其中的属性说明如下:
      设定为all:文件将被检索,且页面上的链接可以被查询;
    设定为none:文件将不被检索,且页面上的链接不可以被查询;
    设定为index:文件将被检索;
    设定为follow:页面上的链接可以被查询;
    设定为noindex:文件将不被检索,但页面上的链接可以被查询;
    设定为nofollow:文件将不被检索,页面上的链接可以被查询。
    http-equiv 属性,
    1、<meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80">
    <meta http-equiv="Content-Language" contect="zh-CN">
    用以说明主页制作所使用的文字以及语言;又如英文是ISO-8859-1字符集,还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集;
    2、<meta http-equiv="Refresh" contect="n;url=http://yourlink">
    定时让网页在指定的时间n内,跳转到页面http://yourlink;
    3、<meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT">
    可以用于设定网页的到期时间,一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式;
    4、<meta http-equiv="Pragma" contect="no-cache">
    是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出;
    5、<meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT">
    cookie设定,如果网页过期,存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式;
    6、<meta http-equiv="Pics-label" contect="">
    网页等级评定,在IE的internet选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过meta属性来设置的;
    7、<meta http-equiv="windows-Target" contect="_top">
    强制页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作一个frame页调用;
    8、<meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion= 50)">
    <meta http-equiv="Page-Exit" contect="revealTrans(duration=20,transtion=6)">
    设定进入和离开页面时的特殊效果,这个功能即FrontPage中的“格式/网页过渡”,不过所加的页面不能够是一个frame页面。
    百度的写法:
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    content 属性
    content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。
    content 属性始终要和 name 属性或 http-equiv 属性一起使用。


    四、a标签常用属性总结:
    1、download: HTML5属性
    用来规定被下载超链接的目标,可以给一张图片加上超链接之后加上download属性便可以下载此图片。
    <a href="/i/w3school_logo_white.gif" download="w3logo">
    下载时文件自动命名为w3logo.XXX
    2、 href:指向页面的URL
    3、 name:可以指定锚点的名称,HTML5中不支持
    4、 rel:规定当前文档与被链接文档之间的关系
    5、 rev:规定被链接文档与当前文档的关系。
    6、 target:规定在何处打开文档
    值:_blank新窗口打开
    _parent ,在父框架载入
    _top,清除所有窗口包含的框架之后在整个窗口打开
    _self,一般是不必要的,除非和标签中的target一起使用。


    五、插入音频的最好的解决办法:
    实例

    <audio controls="controls" height="100" width="100">
      <source src="song.mp3" type="audio/mp3" />
      <source src="song.ogg" type="audio/ogg" />
    <embed height="100" width="100" src="song.mp3" />
    </audio>
    

    Html会首先尝试用mp3或ogg来播放音频,如果失败,代码会退回到emded元素。

    问题:
    • 必须把音频转换为不同的格式。
    <audio> 元素无法通过 HTML 4 和 XHTML 验证。
    <embed> 元素无法通过 HTML 4 和 XHTML 验证。
    <embed> 元素无法回退来显示错误消息。
    注释:使用 (HTML5) 解决验证问题

    插入视频的最好解决办法:

    HTML 5 + <object> + <embed>

    <video width="320" height="240" controls="controls">
      <source src="movie.mp4" type="video/mp4" />
      <source src="movie.ogg" type="video/ogg" />
      <source src="movie.webm" type="video/webm" />
      <object data="movie.mp4" width="320" height="240">
        <embed src="movie.swf" width="320" height="240" />
      </object>
    </video>
    

    HTML5会首先尝试用vedio来播放这些格式视频中其中的一种,如果全部失败,退回到embed元素。
    问题
    • 必须把视频转换为很多不同的格式
    <video> 元素无法通过 HTML 4 和 XHTML 验证。
    <embed> 元素无法通过 HTML 4 和 XHTML 验证。
    注释:使用 <!DOCTYPE html> (HTML5) 解决验证问题。


    六、表单标签常用属性:
    (一)、form:
    1、action,值为URL:表单提交时向何处发送表单数据
    2、method,值为get post:表单数据可以作为 URL 变量(method="get")或者 HTTP post (method="post")的方式来发送
    关于post和get:
    采用post方法,在浏览器端,浏览器会分两步发送数据。首先浏览器与action属性指定的表单处理服务器建立连接,之后分段传输数据给服务器;在服务器端,post样式的应用程序开始执行的时候,服务器从一个标志的位置读取参数,读到之后必须对接收到的表单值进行解码才能够接受这些参数。
    采用get方法,浏览器端与表单处理服务器建立连接,然后直接一个传输步骤发送所有表单数据。浏览器会直接将数据附在表单的action URL之后。两者用问号分隔。
    什么时候用post,什么时候用get?
    少数简短字段的小表单用get,有很多字段或者很长的文本域的表单用post;
    安全性要求高时用post,因为get方法是将表单参数直接放在应用程序的URL中,这样很容易被窥探。Post将参数作为单独的事务传输给服务器进行处理时,可以采用加密的方法;
    如果想在表单之外调用服务器端的应用程序,而且包括向其传递参数的过程,就要采用 GET 方法,因为该方法允许把表单这样的参数包括进来作为 URL 的一部分。使用 POST 样式的应用程序却希望在 URL 后还能有一个来自浏览器额外的传输过程,其中传输的内容不能作为传统 <a> 标签的内容;
    3、name
    4、target
    _blank 在新窗口中打开。
    _self 默认。在相同的框架中打开。
    _parent 在父框架集中打开。
    _top 在整个窗口中打开。
    framename 在指定的框架中打开。


    七、关于html中<i><em><b><strong>的区别:
    <b><i>是视觉元素也可说是物理元素,表示无意义的加粗和斜体。
    < em >< strong > 是表达要素也可以说成逻辑标记。 < em >表示一般的强调文本,而 < strong >表示比 < em > 语义更强的的强调文本。这些都是含有语义的标签,搜索引擎会了解这些语义。当发现这些表示“强调”的标签时,一些屏幕阅读器可能使用不同的inflection,更利于SEO。例如:当盲人使用屏幕阅读器上时能够明显能体现出B与Strong的不同。遇到B时与处理一般词语一样进行阅读,遇到Strong时回加重与停顿.

  • 相关阅读:
    java实现第三届蓝桥杯拼音字母
    java实现第三届蓝桥杯数据压缩
    java实现第三届蓝桥杯数据压缩
    java实现第三届蓝桥杯数据压缩
    java实现第三届蓝桥杯数据压缩
    java实现第三届蓝桥杯数据压缩
    Jackson工具类(各种转换)
    Jackson转换JSON例子
    Jackson的用法实例分析
    SpringMVC 封装返回结果对象
  • 原文地址:https://www.cnblogs.com/this-xiaoming/p/5671280.html
Copyright © 2011-2022 走看看