问题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
设置margin 只有左右margin有效,上下无效。
设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的,看图上效果就知道了
上文部分翻译自:http://www.maxdesign.com.au/presentation/inline/
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仅作用于行内内容上。