前言

要学的和学到的东西实在太多，未免日后有所遗忘，特地花了一天的时间来整理HTML和CSS当中需要注意的知识点和基本语法问题。自认为整理的还算全面，对一些没有基础的朋友本笔记或许能帮助到你。作为一门超文本标记型语言（大杂烩），实际学起来还是很轻松的，只要能熟练掌握各类标签各自的作用点，贴合规范的语法，既能轻松驾驭。
CSS (Cascading Style Sheets)层叠样式表，目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
CSS+DIV结合使用就能胜任所有静态页面的制作，它可以实现网页页面内容与表现相分离。提起DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML（标准通用标记语言的子集）基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。

head头部

<head></head>；这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是标题标记符和meta标记符，其中标题标记符用于定义网页的标题，它的内容显示在网页窗口的标题栏中，网页标题可被浏览器用作书签和收藏清单。html结构体head头中只能出现以下六种标签，否则会自动转移至<body>标签内，因此不建议这样写。


<title>index</title> <!-- 网页标题 -->
<meta charset="utf-8"/> <!-- 设定本网页字符集 -->
<base href="http://www.baidu.com" /> <!-- 定义一个绝对路径 -->
<link rel="stylesheet" type="text/css" href="./style.css"/> <!-- 引入外部css层叠样式表 -->
<style type="text/css"></style> <!-- 头部嵌套css样式 -->
<script src="./test.js"></script> <!-- 引入外部javascript特效文件 -->

body内容

body 元素定义文档的主体，包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）。含有六种不同类型标签：格式标签，文本标签，图像和链接，表格标签，表单标签，分帧标签。

1.格式标签

用作于文字排版的格式标签。（包含br， hr， p， pre， center， ul， ol， li， dl， dt， dd ）共十一种常用标签。

<br /> <!-- 空行 -->
<hr /> <!-- 分割线 -->
<p></p> <!-- 自动在尾部加一空行 -->
<pre></pre> <!-- 原样输出标签 -->
<center></center> <!-- 居中 -->
<ul> <!-- 无序列表标签 -->
 <li></li> <!-- list 条目 -->
</ul>
<ol> <!-- 有序列表标签 -->
 <li></li> <!-- list 条目 -->
</ol>
<dl>
 <dt></dt>
 <dd></dd>
</dl>

2.文本标签

用户修饰文本的标签。包含：b，strong， i， em， cite， u， small， big， sup， sub。等十种常用标签。

<b></b> <!-- 粗体 -->
<strong></strong> <!-- 粗体效果同<b> -->
<i></i> <!-- 斜体 -->
<em></em> <!-- 斜体效果同<i> -->
<cite></cite> <!-- 斜体效果同<i> -->
<u></u> <!-- 下划线 -->
<small></small> <!-- 小号字体 -->
<big></big> <!-- 大号字体 -->
<sup></sup> <!-- 上标 -->
<sub></sub> <!-- 下标 -->

3.图像和链接
<a>标签中的name定义的是锚点，href定义的可以是链接至的URL，也可以是锚点。<img>标签中的src定义的是要被引入的图片的路径或者链接。

<a href="" target="_blank" title=""></a>
<img src="" width="" height="" />
<a name="" href=""></a>

4.表格标签

table定义整个表格主体，tr定义表格行数，td定义表格列数
表格相关标签：
table tr td  定义整个表格框架

  1.  Table 可设置的属性
      1. border 设置表格边框粗细。单位：px
    1. width 设置表格宽度
    2. cellspacing 单元格外边距
    3. cellpadding 单元格内边距
    4. align 表格相对于其他元素的对齐方式
      1. left 左
      2. center 中
      3. right 右
    5. bgcolor 设置背景色
    6. background 设置背景图片
  2. Caption 定义表格标题
  3. Tr
    1. height 设置行高
  4. Td
    1. width 设置单元格宽度
    2. bgcolor  设置单元格颜色
    3. colspan  合并行
    4. rowspan 合并列

5.表单标签

表单在网页中主要负责数据采集功能。表单定义：用form定义整个主体，action 收集数据转发到哪个文件来处理，method选择提交方式。input构造表单元素，select下拉菜单，option选项元素。name属性必须有，因为这个是提交数据的数据名，如果没有，这个数据无法提交。value属性对于text password 来说是设置默认值。对于按钮来说，就是按钮上面的文字。

  1. input标签
    1. type 类型
    2. text 文本框
    3. password 密文输入框
    4. radio 单选
    5. checkbox 多选
    6. image 用图片定义提交按钮
    7. submit 提交按钮
    8. reset 重置按钮
    9. button 无意义按钮
  2. select标签
    1. option 选项元素
<html>
 <head>
 <title></title>
 <meta charset="utf-8"/>
 </head>
 <body>
 <table width="550" border="1" align="center" cellspacing="0" cellpadding="0">
 <caption><h3>用户注册</h3></caption>
 <form action="./text.php">
 <tr>
 <td align="right">邮箱账号:</td>
 <td><input type="text" name="email" height="100"/></td>
 </tr>
 <tr>
 <td align="right">昵称:</td>
 <td><input type="text" name="nname"/></td>
 </tr>
 <tr>
 <td align="right">生日:</td>
 <td><select name="yyl">
 <option value="yinli">阴历</option>
 <option value="yangli">阳历</option>
 </select>
 <select name="year">
 <option value="2000">2000</option>
 <option value="2001">2001</option>
 </select>
 <select name="mon">
 <option value="1mo">1月</option>
 <option value="2mo">2月</option>
 <option value="3mo">3月</option>
 <option value="4mo">4月</option>
 <option value="5mo">5月</option>
 <option value="6mo">6月</option>
 </select>
 <select name="day">
 <option value="1day">1日</option>
 <option value="2day">2日</option>
 <option value="3day">3日</option>
 <option value="4day">4日</option>
 <option value="5day">5日</option>
 <option value="6day">6日</option>
 </select></td>
 </tr>
 <tr>
 <td align="right">性别:</td>
 <td><input type="radio" name=sex value="0" />男
 <input type="radio" name=sex value="1" />女
 <input type="radio" name=sex value="2" />other
 </td>
 </tr>
 <tr>
 <td align="right">密码:</td>
 <td><input type="password" name="pw"/></td>
 </tr>
 <tr>
 <td align="right">确认密码:</td>
 <td><input type="password" name="repw"></td>
 </tr>
 <tr align="center">
 <td colspan="2"><input type="submit" /></td>
 </tr>
 </form>
 </table>
 </body>
</html>

6.分桢标签

常用于网站后台页面的编写。使用分帧要去掉body标签，两者不能共存。frameset用于分帧（切割），切割后用frame进行填充，切割成了多少块，就填充多少块，否则没填充的永远空白。

<html> <!-- index.html 主页面，在里面分隔和引入分帧页面 -->
 <head>
 <title></title>
 <meta charset="utf-8"/>
 </head>
 <frameset rows="10%,80%,10%" frameborder="1">
 <frame src="./top.html" name="top"/>
 <frame src="./main.html" name="main"/>
 <frame src="./wb.html" name="wb"/>
 </frameset>
</html
<html> <!-- top页面 -->
 <head>
 <title></title>
 <meta charset="utf-8"/>
 </head>
 <body>
 <h3>我是头部</h3>
 </body>
</html
<html> <!-- 引入body嵌套页 -->
 <head>
 <title></title>
 <meta charset="utf-8"/>
 </head>
 <frameset cols="20%,*" noresize="noresize">
 <frame src="./cbl.html" name="cbl"/>
 <frame src="./spgl.html" name="body"/>
 </frameset>
</html>
<html> <!-- 尾部分帧页 -->
 <head>
 <title></title>
 <meta charset="utf-8"/>
 </head>
 <body>
 <h3>我是尾部</h3>
 </body>
</html

CSS

DIV+CSS

赏

生きて生きて生きて生きて生きて。