元素(Element)是文档结构的基础。
替换元素和非替换元素。
- 替换元素：用来替换内容的部分并非由文档内容直接表示。例如
<img src="howdy.gif">，img没有具体内容，它是由文档本身之外的一个图像文件来替换。 - 非替换元素：元素内容由用户代理（浏览器）在元素本身生成的框中显示。例如
<span>hello</span>，文本"hello"将由用户代理显示。
块级元素（block-level）和行内元素（inline-level）。
可用display来改变一个元素的显示方式。例如可以将行内元素以块级方式显示span { display:block ;},也可以将块级元素以行内元素显示p { display: inline ;}
- 块级元素：块级元素生成一个元素框，（默认的）它会填充父元素的内容区，旁边不能有其他的元素。也就是，它会在元素框之前和之后生成“分隔符”。例如
p，div，li等，都是块级元素。 - 行内元素：行内元素在一个文本行内生成元素框，而不会打断这行文本。例如
a，span，等。块级元素不能继承自行内元素（即块级元素不能嵌套在行内元素中）。
css样式引入方式
css样式引入方式一般有三种方式：link标签，style元素，元素内联style。
link与@import的相同点：
- 都可以通过绝对或相对URL引入外部样式表。
- 都可以有多个，例如多个link，多个@import。
- 都可以选择样式表所应用的媒体，link标签中通过
media指定，@import通过url后指定，例如:
//link 标签方式
<link rel="stylesheet" type="text/css" href="sheet1.css" media="all">
//@import方式
@import url(sheet2.css) all;
link与@import不同点：
- link标签必须在
head中，@import指令可以在style中或则外部样式表中，并且@import指令必须放在其他css规则前面，否则不起作用（IE总会起作用）。 - 当
head中有多个link时，浏览器会默认只应用rel="stylesheet"的指定的外部样式表，而不会应用rel="alternate stylesheet"的外部样式表（备用样式表）；而多个@import时，都会被加载并应用。
向后可访问性
有些老的浏览器可能不识别style标签，就会将<style></style>忽略掉，但是，style的css规则声明不一定会被忽略，因为，它们看上去就是正常的文本，会被原样显示出来，而这个不是我们想要的结果。为了解决这个问题，建议将css规则声明放在一个注释标签中。这样，即使老的浏览器不识别style标签，也会将注释内的css规则声明忽略。而能识别style的浏览器依旧可以识别注释内的css规则声明。例如：
<style type="text/css"><!--
@import url(sheet2.css);
h1{ color:red ;}
--></style>
网友评论