zoukankan      html  css  js  c++  java
  • 前端基础一:Doctype? 行内元素和块级元素

    问题1:Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?

    <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

    该标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

    以下面这个 <!DOCTYPE> 标签为例:

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

    在上面的声明中,声明了文档的根元素是 html,它在公共标识符被定义为 "-//W3C//DTD XHTML 1.0 Strict//EN" 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到,浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置。

    提示和注释:

    注释:<!DOCTYPE> 标签没有结束标签!

    HTML

    HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。

    HTML Strict DTD

    如果您需要干净的标记,免于表现层的混乱,请使用此类型。请与层叠样式表(CSS)配合使用:

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

    Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表(CSS)的浏览器以至于您不得不使用 HTML 的呈现特性时,请使用此类型:

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

    Frameset DTD 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外,Frameset DTD 等同于 Transitional DTD:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "
    http://www.w3.org/TR/html4/frameset.dtd">
    
    具体内容参考:http://www.w3school.com.cn/tags/tag_doctype.asp

    问题2:行内元素有哪些?块级元素有哪些?

    块级元素

      
    <address> information on author
    <blockquote> long quotation
    <button> push button
    <caption> table caption
    <dd> definition description
    <del> deleted text
    <div> generic language/style container
    <dl> definition list
    <dt> definition term
    <fieldset> form control group
    <form> interactive form
    <h1> heading
    <h2> heading
    <h3> heading
    <h4> heading
    <h5> heading
    <h6> heading
    <hr> horizontal rule
    <iframe> inline subwindow
    <ins> inserted text
    <legend> fieldset legend
    <li> list item
    <map> client-side image map
    <noframes> alternate content container for non frame-based rendering
    <noscript> alternate content container for non script-based rendering
    <object> generic embedded object
    <ol> ordered list
    <p> paragraph
    <pre> preformatted text
    <table> table
    <tbody> table body
    <td> table data cell
    <tfoot> table footer
    <th> table header cell
    <thead> table header
    <tr> table row
    <ul> unordered list

    行内元素

      
    <a> anchor
    <abbr> abbreviated form
    <acronym> acronym
    <b> bold text style
    <bdo> I18N BiDi over-ride
    <big> large text style
    <br> forced line break
    <button> push button
    <cite> citation
    <code> computer code fragment
    <del> deleted text
    <dfn> instance definition
    <em> emphasis
    <i> italic text style
    <iframe> inline subwindow
    <img> Embedded image
    <input> form control
    <ins> inserted text
    <kbd> text to be entered by the user
    <label> form field label text
    <map> client-side image map
    <object> generic embedded object
    <q> short inline quotation
    <samp> sample program output, scripts, etc.
    <select> option selector
    <small> small text style
    <span> generic language/style container
    <strong> strong emphasis
    <sub> subscript
    <sup> superscript
    <textarea> multi-line text field
    <tt> teletype or monospaced text style
    <var> instance of a variable or program argument

    大家可以发现,上面有些元素有重复,为什么呢,是因为HTML中存在可变元素。
    可变元素为根据上下文语境决定该元素为块元素或者内联元素。
    ◎ applet - java applet
    ◎ button - 按钮
    ◎ del - 删除文本
    ◎ iframe - inline frame
    ◎ ins - 插入的文本
    ◎ map - 图片区块(map)
    ◎ object - object对象(当浏览器不支持时,则显示为块级)
    ◎ script - 客户端脚本
    但是就我个人而言,我更愿意把它们当做行内元素,因为一般情况下,不会解释为块级元素

    二.行内元素与块级元素有什么不同?

     记住对行内元素

    设置宽度width   无效。
    设置高度height  无效,可以通过line-height来设置。
    设置margin 只有左右margin有效,上下无效。
    设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的,看图上效果就知道了

    上文部分翻译自:http://www.maxdesign.com.au/presentation/inline/

    2.text-align属性是两者表现的又以不同之处

    W3C CSS2.1规范第16.2节 对text-align 有详细地描述:
    ------------------------------------------
    值: left | right | center | justify | inherit
    初始值:匿名值,由'direction'的值而定,如果'direction'为'ltr'则为'left',如果'direction'为'rtl'则为'right'。
    应用于: 块级元素,表格单元格,行内块元素
    继承性: 是
    计算后的值:初始值或指定值
    ------------------------------------------
    这个特性描述了如何使一个块元素的行内内容对齐。
    注意一点,w3c标准里说这个属性是用来对齐行内内容的,所以,不应该对块级内容起作用。
    解释一下,行内内容是说由行内元素组成的内容,
    这样,我们对这个特性的认识应该就清楚了。但是,问题来了,虽然标准里这么规定,那么是不是所有浏览器都遵守呢?答案是否定的。啊? 又是IE!!
    IE6/7及IE8混杂模式中,text- align:center可以使块级元素也居中对齐。其他浏览器中,text-align:center仅作用于行内内容上。
  • 相关阅读:
    Evaluate Reverse Polish Notation(逆波兰表达式)
    PostreSQL linux添加psql 命令
    C#用文件流读取cvs内容并返回DataTable,并把第一行设为列名
    鹅鹅鹅饿饿
    编译器和解释器
    delphi之多线程编程
    Arduino 板子 COM 接口找不到设备
    JS事件冒泡
    vi编辑器的使用(2)
    vi编辑器的使用(1)
  • 原文地址:https://www.cnblogs.com/cyweb/p/4120685.html
Copyright © 2011-2022 走看看