学习css之前必懂html 这是基础万变不离之根。
html 是什么？ 超文本标记语言
css就是为html加样式，就是穿衣服。首先要懂行如何写html的结构。用html写网页就是让浏览器能够读懂它。html有114个标签，不用怕，常用的只有25个左右。这点和英语单词有点像。html最新版本是html5,新规定了一批结构化标签，<header> <nar> <article> <section> <aside> <footer>
html基础:闭合标签 非闭合标签 ,所有的文本都用闭合标签如 <标签名>文本内容</标签名>,当然这太简单了，主要是看属性。属性绝定了一切，如 <标签名 属性＝\'属性值\'></标签名>
<h1></h1> <p></p>标题和段落
引用的内容用自闭合标签：意思就是自己把自己结束。如 <img src=\'images/tupian.jpg\'/>
建议大家写代码是一定把所有标签都闭合，这是一个符合w3c标准的要求形成好的代码习惯，是成为高手的基本要求。html5对于标签的闭合没有强制要求，这是因为之前的网站没有统一的标准为了适应更多的网站.
本节的重点：
块级标签：<h1>-<h6> <h1>表示最重要 行内标签:<a> 链接
<p> 段落 <img> 图片
<ol> 有序列表 <em> 斜体
<li> 列表项 <strong> 重要
<blockquote> 独立引用 <abbr> 简写
<cite> 引证 <q>文本内引用
来说下这两个词，块级就是每一个标签都会自动占一行，自动换行，行内：则会紧贴着排成一行，直到内容过多超过一行的范围则会自动换行，
复合元素：创建列表表格表单等复杂用户界面组件标记，由多个标签组成，
li是一个列表项，只能在ol ul中出现，这是最重要的是理解嵌套标签，
<p>这种写法是<em>对的</em></p>必须先关闭后标签再关闭前标签，
html文档剖析：
<!DOCTYPE html> 这里不需要闭合
<html>
<head>
<meta charset="ntf-8">
<title>这是最新的html5的写法</title>
</head>
</html>
这种写法是html5较之之前简化了许多，<!--注释-->这个很有用，文档的可读性就看你的注释写的好不好呢 title标签很有用，主要是亲近seo，在后期我会和大家分享更多的seo知识，请记住是分享，也就是说我的水平和您一样，哈哈。那这里做个小宣传我的新浪博客地址：http://blog.sina.com.cn/u/3753799240 所有的教程都会发布在这里。
那接下来我们来写一短代码加以分析，
首先要确家标题 加上一段文字 下边是一张图，肯定是要先写语义结构的，先不要管好不好看，先把内容表现出来，正常的做法是先写出需要用到的标签，
<h1></h1>标题 <p></>一段文字 <img >图写的时候注意文章代码的层次性 别忘了我们的注释啊，无论多么复杂的代码都是这样的流程及规范写法。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body> <!-- 主体内容开始-->
<h1>这是一个小小的测试</h1>
<p>分享知识我快乐，希望大家共同进步，我的博客地址: http://blog.sina.com.cn/u/3753799240 </p>
<img src="http://p1.sinaimg.cn/3753799240/180/71741377824267" /> <!-- 这是图片的引用-->
</body><!-- 主体内容结束-->
</html>
这里要引入一个新词叫文档流，一定要记住,意思就是html会按照它们各自在标记中出现的先后顺序，依次从页面上方流向下方。这种方法很实现，css就是让其展现出来特别的效果我们需要的效果。
所有的html元素的display(可以实现块级和行内之间的转换)都是block inline这两种，只有table标签特别，有自己的display，请记住,在写代码时，先要问自己所用的标签是块级的还是行内的，这样才能和css更好的结合起来。那我们来看一个代码实例说明一下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body> <!-- 主体内容开始-->
<h1>这是一个小小的测试</h1>
<p>分享知识我快乐，希望大家共同进步，我的博客地址: <a href="http://blog.sina.com.cn/u/3753799240 ">请点击</a> </p>
<h2>这是一个小小的测试</h2>
<p>分享知识我快乐，希望大家共同进步，我的博客地址: <a href="http://blog.sina.com.cn/u/3753799240 ">请点击</a> </p>
<h3>这是一个小小的测试</h3>
<p>分享知识我快乐，希望大家共同进步，我的博客地址: <a href="http://blog.sina.com.cn/u/3753799240 ">请点击</a> </p>
<h4>这是一个小小的测试</h4>
<p>分享知识我快乐，希望大家共同进步，我的博客地址: <a href="http://blog.sina.com.cn/u/3753799240 ">请点击</a> </p>
<h5>这是一个小小的测试</h5>
<p>分享知识我快乐，希望大家共同进步，我的博客地址: <a href="http://blog.sina.com.cn/u/3753799240 ">请点击</a> </p>
</body>
</html>
看是不是每一个元素都占了一行对吧，这些代码大家可以在dr里边测试
相关文章：