PHP基础PHP教程php框架JavaScript

asp.netAJAX正则表达式ASP

输入banner图图片脚本导航/分类

《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标签都可以添加属性。如：

My dog Cisco

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

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

  块级标签

-
:6级标签，
表示很重要
:段落标签
    :有序列表
  1. :列表项
    :独立引用

  行内标签：

:链接（anchor，锚）:图片:斜体:重要:简要:引证:文本内引用

1.1.4 段落与标签

  

不仅是最大最突出的标题，搜索引擎也会将其视为仅次于标签的另一个搜索关键词的来源。 <br />  段落用于标记主要的文本内容，是所有文本元素中出场率最高的一个。简言之，只有不适合放在其他文本标签中的文本，都可以把它放一个段落里面。</p> <h4>1.1.5 复合元素</h4> <p>  所谓复合元素，即它们是由多个标签共同构成的。如用于创建列表，表格，和表单等复杂用户界面组件的标记。</p> <h4>1.1.6 嵌套标签</h4> <p>  要在一个标签里嵌套另一个标签，必须要先关闭后一个标签在关闭前面那个标签。HTML文档的结构正是通过类似这样的嵌套标签，以及就此建立起来标签间的“父-子”关系形成的。</p> <h3>1.2 HTML文档剖析</h3> <pre class="sycode"><!DOCTYPE html><html><head><meta charset="utf-8" /> <title>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编码。
  标签中的文本会在页面显示时，作为整个页面的标题出现在浏览器窗口顶部的标题栏中。 <br />  搜索引擎会给<title>标签中的文字内容赋予很高的权重，而且这些文字也会作为网页标题出现在搜索列表结果中。一定依然那个这些文字简单明确，而且包含目标读者在搜索你的网页时会使用的关键词。 <br />  <body>标签则包含着标记所有内容的HTML元素。 <br />  在<img>标签中，src属性即：source，来源；而在标签中，href属性即：hyperlink reference,超链接引用。</p> <h4>1.2.1 一个开发工具介绍：Web Developer</h4> <p>  <strong>相关文章</strong>：</p> <li><p>Web Developer 简体中文汉化版下载（ Firefox & Chrome 扩展）</p></li> <li><p>百度百科：WebDeveloper插件</p></li> <li><p>WEB DEVELOPER</p></li> <p>  通过Outline(轮廓)菜单中的Outline Block Level Elements 命令，这个命令可以显示页面中块级元素方盒子的轮廓。</p> <p>  通过Outline 菜单中的Outline Custom Element 可以显示自定义元素的轮廓。如body，行内元素等。</p> <p></p> <h4>1.2.2 HTML实体</h4> <p>  <strong>重点文章链接：</strong></p> <li><p>HTML 字符实体</p></li> <li><p>HTML 符号</p></li> <li><p>HTML实体符号代码速查表</p></li> <h3>1.3 文档对象模型（DOM）</h3> <p>  <strong>文档对象模型DOM</strong>（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。</p> <p>  如下面代码：</p> <p></p> <p>将HTML代码分解为DOM节点层次图:</p> <p></p> <p>  HTML文档可以说由节点构成的集合，DOM节点有:</p> <li><p>元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。</p></li> <li><p>文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。</p></li> <li>属性节点:元素属性，如标签的链接属性href=”http://www.imooc.com”。</li> </div> </div> <script type="text/javascript" src="/layui/layui.js"></script> <script> layui.use('code', function(){ layui.code({ elem: 'pre', //默认值为.layui-code about:false, title:'《CSS设计指南》笔记HTML标记与文档结构_html/css_WEB-ITnose代码块', encode: true //是否转义html标签。默认不开启 }); }); </script> <footer class="comm-footer"> <ul class="channels"> <li> <a target="_top" href="/system/">操作系统</a> </li><li> <a target="_top" href="/down/">程序下载</a> </li><li> <a target="_top" href="/jquery/">jquery插件库</a> </li><li> <a target="_top" href="/jiaoben/">编程</a> </li><li> <a target="_top" href="/db/">数据库</a> </li><li> <a target="_top" href="/tools/">在线工具</a> </li><li> <a target="_top" href="/framebook/">框架书籍</a> </li><li> <a target="_top" href="/xitongjiaocheng/">系统教程</a> </li><li> <a target="_top" href="/ruanjianxiazai/">软件下载</a> </li> </ul> <ul class="versions"> <li> <a href="https://m.gxlcms.com" class="active">触屏版</a> </li> <li> <a href="https://www.gxlcms.com" target="_top">电脑版</a> </li> </ul> <p><a href="https://beian.miit.gov.cn/" target="_blank" style="color:#ffffff"></a><script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6c9b8cea1903c9f813f150c04aeebc3c"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script></p> </footer> </body> </html>