1html文件基本结构

<html>
    <head>...</head>
    <body>...</body>
</html>

head部分

<head>
    <title>...</title>
    <meta>
    <link>
    <style>...</style>
    <script>...</script>
</head>

body部分

　　标签语义化　　

<p>段落文本</p>
<hx>标题文本</hx>
<em>需要强调的文本</em>  
<strong>需要强调的文本</strong>
<!-- 但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。-->
<span>设置单独样式</span>
<q>引用短文本</q>
<blockquote>引用长文本</blockquote>
<br /><!--分行显示，回车-->
&nbsp;<!--空格-->
<hr/><!--水平横线-->
<address>联系地址信息</address>
<code>var i=i+300;</code>
<pre>语言代码段</pre>

　　信息列表:新闻图片。。。

<!--无序-->
<ul>
  <li>精彩少年</li>
  <li>美丽突然出现</li>
  <li>触动心灵的旋律</li>
</ul>

<!--有序-->
<ol>
   <li>前端开发面试心法 </li>
   <li>零基础学习html</li>
   <li>JavaScript全攻略</li>
</ol>

　　数据显示

<table summary="表格简介文本">>
  <caption>标题文本</caption>
  <tr>
    <th>班级</th>
    <th>学生数</th>
    <th>平均成绩</th>
  </tr>
  <tr>
    <td>一班</td>
    <td>30</td>
    <td>89</td>
  </tr>
</table>

<!--创建表格的四个元素：
table、tbody、tr、th、td
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
5、<th>…</th>：表格的头部的一个单元格，表格表头。
6、表格中列的个数，取决于一行中数据单元格的个数。-->

　　链接

<a  href="http://www.imooc.com"  title="点击进入"  target="_blank">click here!</a>

　　图片

<img src = "myimage.gif" alt = "My Image" title = "My Image" />

　　表单交互

<form method="post" action="save.php">
      <label for="username">用户名:</label>
      <input type="text"  name="username" value="" />
      <label for="pass">密码:</label>
      <input type="password"  name="pass" value="" />
      <textarea cols="50" rows="10" >在这里输入内容...</textarea>
      <input   type="radio/checkbox"   value="值"    name="名称"        checked="checked"/>
      <label for="控件id名称">
      <select multiple="multiple">
       <option value="看书">看书</option>
       <option value="旅游" selected="selected">旅游</option>
       <option value="运动">运动</option>
       <option value="购物">购物</option>
      </select>  
      <input type="submit" value="确定"  name="submit" />
      <input type="reset" value="重置" name="reset" />
</form>

<!--<label>性别:</label>
    <label>男</label>
    <input type="radio" value="1"  name="sex" />
    <label>女</label>
    <input type="radio" value="2"  name="sex" />
-->

css样式

　　优先级：内联式 > 嵌入式 > 外部式 /*嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）*/

　　选择器　　

/*标签选择器*/
p{font-size:12px;line-height:1.6em;}
/*类选择器*/
.类选器名称{css样式代码;}
/*ID选择器*/
#setGreen{   color:green;}
/*子选择器*/
.food>li{border:1px solid red;}
/*后代选择器*/
.first  span{color:red;}
/*通用选择器*/
* {color:red;}
/*伪类选择器*/
a:hover{color:red;}
/*分组选择器*/
h1,span{color:red;}

　　格式化排版

/*文字排版*/
body{font-family:"宋体";}
body{font-size:12px;color:#666}
p span{font-weight:bold;}
p a{font-style:italic;}
p a{text-decoration:underline;}
.oldPrice{text-decoration:line-through;}
/*段落排版*/
p{text-indent:2em;}
p{line-height:1.5em;}
h1{    letter-spacing:50px;}
h1{    text-align:center;}

　　元素分类

在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

<img>、<input>

设置display:block就是将元素显示为块级元素。

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

块状元素也可以通过代码display:inline将元素设置为内联元素。

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

代码display:inline-block就是将元素设置为内联块状元素。

inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置