一、html简单基础
什么是HTML
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
HTML 常用标签演示
本页演示的所有标签均为浏览器默认效果。
【基础】
<div> 定义文档中的节（块元素，无任何属性）
<span> 定义文档中的节（内联元素，无任何属性）
<h1> to <h6> 定义标题（通常使用粗体显示。注意：单个页面内最好只使用1个H1标签）
H1 标题
H2 标题
H3 标题
H4 标题
H5 标题
H6 标题
<p> 定义段落
<hr> 定义水平线（本页中的分割线均为 <hr> 标签）
<header> 定义 section 或页面的头部
<footer> 定义 section 或页面的尾部
<article> 定义文章
<section> 定义文档中的节
<aside> 定义文档内容相关的内容
<nav> 定义导航
header 头部footer 尾部article 内容section 内容aside 内容nav 内容
<details> 定义细节内容
<summary> 定义 details 的标题
HTML 5
【列表】
<ul> 定义无序列表（通常列表前会有项目符号）
- <li> 定义列表的项目
- 张三
- 李四
<ol> 定义有序列表。（通常列表前会有数字符号）
- <li> 定义列表的项目
- 张三
- 李四
<dl> 定义定义列表
- <dt> 定义定义列表中的项目
- <dd> 定义定义列表中项目的描述
- 张三的家谱
- 张三的家谱于1900年开始统计，进行了..
【表格】
<table> 定义表格
<caption> 定义表格标题
<thead> 定义表格中的表头内容
<tfoot> 定义表格中的表注内容（脚注）
<tbody> 定义表格中的主体内容
<tr> 定义表格中的行
<th> 定义表格中的表头单元格（通常使用粗体显示）
<td> 定义表格中的单元
table 结构标准顺序如下：
<table>
<caption></caption>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
※ 虽然 tfoot 放在了 tbody 之前，浏览器依然会将 tfoot 显示在 tbody 之后，而且这样做能让浏览器在获得所有表格内的数据前显示表注。
| 表头 ID | 表头 姓名 | 表头 日期 |
|---|---|---|
| 表注 这是编号 | 表注 这是假名 | 表注 这是添加日期 |
| 1 | 张三 | 2009-09-09 |
| 2 | 李四 | 2010-10-10 |
| 表头 ID | 表头 姓名 | 表头 日期 |
|---|---|---|
| 表注 这是编号 | 表注 这是假名 | 表注 这是添加日期 |
| 1 | 张三 | 2009-09-09 |
| 2 | 李四 | 2010-10-10 |
【表单】
<form> 定义表单
<fieldset> 定义围绕表单中元素的边框（通常四周会有缩进，并显示围绕的边框）
<legend> 定义 fieldset 元素的标题
<select> 定义选择列表（下拉列表、多选列表）
<optgroup> 定义选择列表中相关选项的组合
<option> 定义选择列表中的选项
滚动列表形式
多选列表
【格式】
<blockquote> 定义长的引用（通常四周会有缩进）
WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。
<pre> 定义预格式文本（通常会保留空格及换行符，并使用等宽字体显示，很适合用来表示计算机代码）
for(var i=0; i<9; i++){
i++;
};
<address>定义文档作者或拥有者的联系信息（通常使用斜体显示）
联系小叉前端开发工程师
<a> 定义链接、锚点
<em> 定义强调文本（通常使用斜体显示）
<strong> 定义更为强调的文本（通常使用粗体显示）
<mark> 定义带有标记的文本（通常会高亮显示）
<time> 定义时间（通常不会有任何视觉效果）
<del> 定义被删除文本（通常带有删除线）
<ins> 定义新插入文本（通常带有下划线）
2015年1月1日是星期五星期四
<i> 定义斜体文本
<b> 定义粗体文本
<big> 定义大号文本（通常使用比正文更大的字号显示）
<small> 定义小号文本（通常使用比正文更小的字号显示）
<sup> 定义上标文本、X2
<sub> 定义下标文本、H2O
<code> 定义计算机代码文本。This HTML Code.（通常使用等宽字体显示，但不会保留空格及换行符，需要保留空格及换行符，请使用<pre>）详细描述
<cite> 定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。（通常使用斜体显示）详细描述
<q> 定义短的引用
（通常会在两边加双引号）
<bdo> 定义文本的方向
后面的文字会从右到左来显示：你已经具备了倒读的能力
<abbr> 定义缩写
微软推出的浏览器是 IE 浏览器。（鼠标移到“IE”上看效果）
<progress> 定义进度条
<meter> 定义度计量
【图像】
<img> 定义图像
<map> 定义可点击区域
<area> 定义可点击区域的内部区域
图片左右两边的链接不一样：
<figure> 定义文档中的媒体内容（图片、图表、照片、代码等）
<figcaption> 定义 figure 元素的标题
小叉试验场
<canvas> 定义画布（此处不做演示）
【音频/视频】
<audio> 定义声音
<source> 定义媒体源
<audio> 定义视频
<video> 定义字幕
【其他】
<noscript> 定义针对不支持客户端脚本的用户的替代内容
当前您的浏览器支持JavaScript脚本
<noframes> 定义针对不支持框架的用户的替代内容
<ruby> 定义 ruby 注释
<rt> 定义 ruby 注释的解释
<rp> 定义若浏览器不支持 ruby 元素显示的内容
二、CSS选择器的概念
选择器是css 的灵魂,所谓的选择器就是能够在css 文件中识别 html 中指定的元素的语法,css 的选择器有很多种,基本的选择器有:元素选择器(直接使用元素的名称选择)、id 选择器 (在id 值前面加上#)、类选择器(在 class 的值前面加上dot)、子选器器、后代选择器、伪类选择器、属性选择器选择器的概念很重要,因为在 jQuery 中也会出现类似的原则器,所以你现在记住了,jQuery 的时候就会轻松一些。
总结:
1、元素选择器:直接使用元素名称
2、id 选择器:在 id 值得前面加上“#”
3、类选择器:在 class 的值之前加上“.”
4、后代选择器:选择的是指定元素的后代元素
5、子选择器:选择指定元素的子元素
6、伪类选择器:在其他原则器后面加上“:”+行为(hover)