1 文本元素使用闭合标签
标签格式:<标签>内容</标签>
2 引用内容用自闭和标签
<标签名 属性1="" 属性2="" /> , 自闭和标签只是给浏览器提供一个要展示内容的引用,浏览器加载HTML时,额外向服务器发送请求,以获取自闭合标签引用的内容.
<img src="images/cisco.jpg" alt="My dog Cisco">
3 复合元素 用于创建表格 列表 表单等复杂用户界面的标记,由多个标签共同组成.
4 嵌套标签
<ol>
<li>橘子</li>
<li>苹果</li>
<li>西瓜</li>
</ol>
ol标签是 li的父标签(父元素). li标签是 ol标签的子标签(子元素).
<p>That car is <em>fast</em>.</p>
5 HTML模板
<!DOCTYPE html> 声明是html文档
<html>
<head>
<meta charset="utf-8"/>
<title>文档标题</title>
</head>
<body>
//网页内容展示
</body>
</html>
- HTML注释内容
6 块级元素 行内元素
块级元素:
- 所有块级元素的父元素都是 <body>
- 块级元素宽度默认与浏览器窗口一样 有少许间隔.这也是其自动换行的原因
- 可设置宽高 margin padding
行内元素:
- 行内元素盒子尽可能的收缩包裹 这也是行内元素可以并排显示一行.
- 设置宽高 无效.
- 可设置 margin padding
常见的块级元素:
<h1>...<h6> 6级标签
<p>段落
<ol>
<ul>
<li>
<blockquote></blockquote> 独立引用
常见的行内元素:
<strong> </strong> 加粗
<em></em> 斜体
<a href="" /> 超链接
<img src="" alt="" /> 图片
<cite>李白</cite> 包裹作者
<abbr title="JavaScript">JS</abbr> 简写
<p>窗前明<strong>月光<strong>,疑是<em>地上霜</em>,<cite>李白</cite>,<abbr title="JavaScript">JS</abbr></p>
<q>文本内引用
7 DOM 文档对象模型
实例代码如下:
<body>
<section>
<h1>The Document Object Model</h1>
<p>The page's HTML markup structure defines the DOM.</p>
</section>
</body>
示例代码的DOM层次如下:
- section 是 h1 p的父元素 也是其直接祖先元素
- h1 p 是section的子元素,也是其直接后代元素
- h1 p 是同胞元素,他们有共同的父元素 section
- section h1 p是 body的后代元素 或者下面的元素
- body section是h1 p的祖先元素 或者上面的元素
小结:文档流效果, HTML元素会按照他们各自在标记中出现的的先后顺序,依次从页面上方流向下方. 浏览器的样式表之所以提供这种流动式效果,就是为了让那些简单却正确标记的HTML的内容,能够以朴素却可用的方式显示出来.
CSS的妙处就是把这种默认显示效果,转换为既有吸引力又直观的页面设计.
