前端基础一: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仅作用于行内内容上。
 

相关文章