元素与属性

元素

元素是　HTML 文档的基本单位

  • 元素以开始标签起始
  • 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些元素具有空内容（empty content）
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数元素可拥有属性

格式

元素 = 开始标签 + 内容 + 结束标签

<开始标签>受标签影响的内容</结束标签>

小贴士：自闭合标签比较特殊，它总是单独出现，以/>结尾

HTML 空元素

  1. 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的

  2. <br>就是没有关闭标签的空元素（<br>标签定义换行）

  3. 在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭

  4. 在开始标签中添加斜杠，比如<br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式

自闭合标签

常用的自闭和标签

水平线

<hr />：水平线标记，块级元素，表示文档内容变化

注释

<!-- 注释内容 -->：为HTML文档添加注释，可以跨越多行

换行

<br />：用于换行，行内元素。浏览器渲染页面时，会移除源代码中多余的空格和空行，所有连续的空格或空行都会被算作一个空格显示。如果需要显示多个空格，使用多个&nbsp;表示

图片

  1. <img src="图片地址" width="宽度" height="高度" alt="图片无法加载显示" />
  1. 显示图片，内联元素
  2. “src”属性指向图片地址(本地地址或网络URL)
  3. “width”和”height”属性分别控制宽和高

HTML嵌套

大多数的HTML 元素是可以嵌套的（可以包含其他 HTML 元素），HTML 文档就是由嵌套的 HTML 元素构成的，嵌套规则如下：

  1. 块级元素能嵌入内联元素和部分块级元素，内联元素只能嵌入内联元素
  2. 块级元素不能放在标签 p 里面
  3. li 标签可以包含 div 标签，因为 li 和 div 标签都是装载内容的容器
  4. 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素(h1~h6、p、dt)
  5. 块级元素与块级元素平级、内嵌元素与内嵌元素平级
  1. <div><span></span><p></p></div>
  2. <!-- span是行内元素，p是块级元素，所以这个是错误的嵌套 -->
  3. <div><span></span><a></a></div> <!-- 这才是对的 -->

内联元素和块级元素

HTML标签有两类：

块级元素

特点：总是在新行上开始，高度、行高以及顶和底边距都可控制，宽度缺省是它的容器的100%，除非设定一个宽度

功能：主要用来搭建网站架构、页面布局、承载内容

主要包括:div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul …

行内元素

特点：和其他元素都在一行上，高、行高及顶和底边距不可改变，宽度就是它的文字或图片的宽度，不可改变

功能：用于加强内容显示,控制细节，例如：加粗、斜体等等

主要包括:span、a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、strike、strong、sub、sup、textarea、tt、u、var …

关于内联元素和块级元素的文章

注意：

  1. 使用小写标签
  2. 不要忘记结束标签
  3. 自闭合标签不要忘记写/，养成良好的习惯

属性

  1. HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息
  2. 属性总是以名称/值对的形式出现，比如：name="value"
  3. 属性总是在 HTML 元素的开始标签中规定

通用的属性

属性 描述
class 规定元素的一个或多个类名（引用样式表中的类）
id 规定元素的唯一 id
style 规定元素的行内 CSS 样式
title 规定有关元素的额外信息
accesskey 规定激活元素的快捷键(Alt+acc or Shift+Alt+acc)
tabindex 规定元素的 tab 键次序
dir 规定元素中内容的文本方向

注意：

  1. 推荐属性使用小写
  2. 并且始终为属性值添加引号，一般使用双引号
  3. 如果值本身含有双引号，需要使用单引号

参考