《CSS设计指南》笔记HTML标记与文档结构_html/css_WEB-ITnose
《CSS设计指南》/Charles lvyke-Smith著.李松峰译—人民邮电出版社
本书网站:http://www.stylinwithcss.com
强烈推荐!!深入浅出,精简,适合入门!!
HTML标记与文档结构
1.1 HTML标记基础
1.1.1 文本用闭合标签
闭合标签的基本格式如下:
文本内容文本内容标签名>
1.1.2 引用内容用自闭合标签
自闭合标签的基本格式如下:
非文本内容是通过自闭合标签显示的。闭合标签与自闭合标签的区别在于,闭合标签包含的是会显示的实际内容,而自闭合标签只是给浏览器提供一个对要显示的内容的引用。浏览器会在HTML页面加载的时候,额外向服务器发送请求,以取得自闭合标签引用的内容。
1.1.3 属性
属性负责为浏览器提供有关标签的额外信息。每个HTML标签都可以添加属性。如:
注:视障用户使用的屏幕阅读器会大声读出alt5属性的内容,因此一定要给标签的这个alt属性添加让人一听(或一看)就能明白的内容。
补充重点:块级(block)标签和行内(inline)标签。
块级标签
-
:6级标签,
表示很重要
:段落标签
:有序列表
- :列表项
:独立引用
行内标签:
:链接(anchor,锚):图片:斜体:重要:简要:引证:文本内引用
1.1.4 段落与标签
不仅是最大最突出的标题,搜索引擎也会将其视为仅次于标签的另一个搜索关键词的来源。
段落用于标记主要的文本内容,是所有文本元素中出场率最高的一个。简言之,只有不适合放在其他文本标签中的文本,都可以把它放一个段落里面。 1.1.5 复合元素
所谓复合元素,即它们是由多个标签共同构成的。如用于创建列表,表格,和表单等复杂用户界面组件的标记。
1.1.6 嵌套标签
要在一个标签里嵌套另一个标签,必须要先关闭后一个标签在关闭前面那个标签。HTML文档的结构正是通过类似这样的嵌套标签,以及就此建立起来标签间的“父-子”关系形成的。
1.2 HTML文档剖析
An HTML Template Stylin' with CSS
Great Web pages start with great HTML markup!
A code example from Stylin’ with CSS, Third Edition by Charles Wyke-Smith. Visit stylinwithcss.com for more CSS information and updates.
标签有一个charset属性,它是在告诉浏览器这个页面使用的是UTF-8编码。
标签中的文本会在页面显示时,作为整个页面的标题出现在浏览器窗口顶部的标题栏中。
搜索引擎会给标签中的文字内容赋予很高的权重,而且这些文字也会作为网页标题出现在搜索列表结果中。一定依然那个这些文字简单明确,而且包含目标读者在搜索你的网页时会使用的关键词。
标签则包含着标记所有内容的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”。
段落用于标记主要的文本内容,是所有文本元素中出场率最高的一个。简言之,只有不适合放在其他文本标签中的文本,都可以把它放一个段落里面。
1.1.5 复合元素
所谓复合元素,即它们是由多个标签共同构成的。如用于创建列表,表格,和表单等复杂用户界面组件的标记。
1.1.6 嵌套标签
要在一个标签里嵌套另一个标签,必须要先关闭后一个标签在关闭前面那个标签。HTML文档的结构正是通过类似这样的嵌套标签,以及就此建立起来标签间的“父-子”关系形成的。
1.2 HTML文档剖析
An HTML Template Stylin' with CSS
Great Web pages start with great HTML markup!
A code example from Stylin’ with CSS, Third Edition by Charles Wyke-Smith. Visit stylinwithcss.com for more CSS information and updates.
标签有一个charset属性,它是在告诉浏览器这个页面使用的是UTF-8编码。
搜索引擎会给
Web Developer 简体中文汉化版下载( Firefox & Chrome 扩展)
百度百科:WebDeveloper插件
WEB DEVELOPER
HTML 字符实体
HTML 符号
HTML实体符号代码速查表
元素节点:上图中、
、等都是元素节点,即标签。
文本节点:向用户展示的内容,如
上一篇: php岗位是什么意思啊
推荐阅读
-
《CSS 设计指南》学习笔记 一_html/css_WEB-ITnose
-
CSS设计指南笔记_html/css_WEB-ITnose
-
《CSS 设计指南》学习笔记 一_html/css_WEB-ITnose
-
CSS设计指南笔记_html/css_WEB-ITnose
-
html标记与文档结构_html/css_WEB-ITnose
-
css细节复习笔记--结构与层叠_html/css_WEB-ITnose
-
《CSS设计指南》笔记HTML标记与文档结构_html/css_WEB-ITnose
-
CSS 设计指南 学习笔记 二_html/css_WEB-ITnose
-
[读书笔记] CSS权威指南2: 结构和层叠_html/css_WEB-ITnose
-
[读书笔记] CSS权威指南2: 结构和层叠_html/css_WEB-ITnose