《CSS设计指南》笔记HTML标记与文档结构_html/css_WEB-ITnose

通过阅读和学习书籍《CSS设计指南》总结
《CSS设计指南》/Charles lvyke-Smith著.李松峰译—人民邮电出版社
本书网站：http://www.stylinwithcss.com
强烈推荐！！深入浅出，精简，适合入门！！

HTML标记与文档结构

1.1 HTML标记基础

1.1.1 文本用闭合标签

  闭合标签的基本格式如下：

<标签名>文本内容<标签名/><标签名 属性_1="属性值" 属性_2="属性值">文本内容</标签名>

1.1.2 引用内容用自闭合标签

  自闭合标签的基本格式如下：

<标签名 属性_1="属性值" 属性_n="属性值" />

  非文本内容是通过自闭合标签显示的。闭合标签与自闭合标签的区别在于，闭合标签包含的是会显示的实际内容，而自闭合标签只是给浏览器提供一个对要显示的内容的引用。浏览器会在HTML页面加载的时候，额外向服务器发送请求，以取得自闭合标签引用的内容。

1.1.3 属性

  属性负责为浏览器提供有关标签的额外信息。每个HTML标签都可以添加属性。如：

<img src="/static/imghw/default1.png"  data-src="images/cisco.jpg"  class="lazy" alt="My dog Cisco" />

  注：视障用户使用的屏幕阅读器会大声读出alt5属性的内容，因此一定要给标签的这个alt属性添加让人一听（或一看）就能明白的内容。

  补充重点：块级（block）标签和行内（inline）标签。

  块级标签

<h1 id="h-级标签-h-表示很重要-p-段落标签-ol-有序列表-li-列表项-blockquote-独立引用-pre-div-class-contentsignin-Copier-après-la-connexion-div-div-p-strong-行内标签-strong-p-div-class-code-style-position-relative-padding-px-margin-px-pre-class-brush-php-toolbar-false-a-链接-anchor-锚-img-alt-CSS设计指南-笔记HTML标记与文档结构-html-css-WEB-ITnose-图片-em-斜体-strong-重要-abbr-简要-cite-引证-q-文本内引用-pre-div-class-contentsignin-Copier-après-la-connexion-div-div-h-段落与标签-h-p-h-不仅是最大最突出的标题-搜索引擎也会将其视为仅次于-title-标签的另一个搜索关键词的来源-br-段落用于标记主要的文本内容-是所有文本元素中出场率最高的一个-简言之-只有不适合放在其他文本标签中的文本-都可以把它放一个段落里面-p-h-复合元素-h-p-所谓复合元素-即它们是由多个标签共同构成的-如用于创建列表-表格-和表单等复杂用户界面组件的标记-p-h-嵌套标签-h-p-要在一个标签里嵌套另一个标签-必须要先关闭后一个标签在关闭前面那个标签-HTML文档的结构正是通过类似这样的嵌套标签-以及就此建立起来标签间的-父-子-关系形成的-p-h-HTML文档剖析-h-div-class-code-style-position-relative-padding-px-margin-px-pre-class-brush-php-toolbar-false-DOCTYPE-html-html-head-meta-charset-utf-title-An-HTML-Template-title-head-body-h-Stylin-with-CSS">-<h6>:6级标签，<h1>表示很重要<p>:段落标签<ol>:有序列表<li>:列表项<blockquote>:独立引用

  行内标签：

<a>:链接（anchor，锚）<img  alt="《CSS设计指南》笔记HTML标记与文档结构_html/css_WEB-ITnose" >:图片<em>:斜体<strong>:重要<abbr>:简要<cite>:引证<q>:文本内引用

1.1.4 段落与标签

  

不仅是最大最突出的标题，搜索引擎也会将其视为仅次于 标签则包含着标记所有内容的HTML元素。
  在标签中，src属性即：source，来源；而在标签中，href属性即：hyperlink reference,超链接引用。

1.2.1 一个开发工具介绍：Web Developer

  相关文章：

Web Developer 简体中文汉化版下载（ Firefox & Chrome 扩展）

百度百科：WebDeveloper插件

WEB DEVELOPER

  通过Outline(轮廓)菜单中的Outline Block Level Elements 命令，这个命令可以显示页面中块级元素方盒子的轮廓。

  通过Outline 菜单中的Outline Custom Element 可以显示自定义元素的轮廓。如body，行内元素等。

1.2.2 HTML实体

  重点文章链接：

HTML 字符实体

HTML 符号

HTML实体符号代码速查表

1.3 文档对象模型（DOM）

  文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

  如下面代码：

将HTML代码分解为DOM节点层次图:

  HTML文档可以说由节点构成的集合，DOM节点有:

元素节点：上图中、

、

等都是元素节点，即标签。

文本节点:向用户展示的内容，如

...

中的JavaScript、DOM、CSS等文本。

属性节点:元素属性，如标签的链接属性href=”http://www.imooc.com”。