web标准有三层结构，分别是结构（html）、表现（css）和行为（javascript）
，结构类似人的身体， 表现类似人的着装， 行为类似人的行为动作。
HTML
1、html样式
1.1 html结构骨架标签
<!DOCTYPE html> -------文档类型
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
注释：
<!DOCTYPE html> -------文档类型
lang="zh-CN" -------------指定html 语言种类
<meta charset="UTF-8" />-------字符集编码方式
1.2 排版标签
1）标题标签h
<h1> 标题文本 </h1>
<h2> 标题文本 </h2>
<h3> 标题文本 </h3>
<h4> 标题文本 </h4>
<h5> 标题文本 </h5>
<h6> 标题文本 </h6>
2）段落标签p
<p> 文本内容 </p>
3）水平线标签hr
<hr />是单标签
4）换行标签br
<br />是单标签
4）div 和 span标签（无语义）
<div></div>标签 用来布局的，但是现在一行只能放一个div
<span></span>标签 用来布局的，一行上可以放好多个span
1.3 文本格式化标签------用来设置文字加粗、斜体或下划线等效果
<b>和<strong>标签使文字加粗（推荐使用strong标签）
<i>和<em>标签使文字倾斜（推荐使用em标签）
<S>和<del>标签使文字加删除线（推荐使用标签）
<u>和<ins>标签使文字加下划线（推荐使用ins）
1.4 图像标签img
<img src="图像URL" />
1.5 链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
1.6 注释标签
<!-- 注释语句 --> 快捷键是： ctrl + / 或者 ctrl +shift + /
1.7 锚点定位
<a href="#id名">链接文本</a>
<h3 id="two">第2集</h3> ----------点击a标签-跳转到第2集
1.8 base 标签
<base target="_blank" />------使所有的链接以新窗口的模式打开
1.9 预格式化文本pre标签
被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
1.10 特殊字符
常用的有：小于号---<
大于号--->
和号------&
空字符-- 
2、表格table
<table>
<caption表头文字></caption>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
--------table用于定义一个表格标签。
--------tr标签 用于定义表格中的行，必须嵌套在 table标签中。
--------td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
--------字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。
cellspacing-------单元格与单元格之间的距离
cellpadding------文字与单元格水平方向的距离
align--------------表格对齐方式
3、列表标签
3.1 无序列表 ul
无序列表的各个列表项之间没有顺序级别之分，是并列的。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
3.2 有序列表 ol
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义.
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
3.3 自定义列表
定义列表常用于对术语或名词进行解释和描述.
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
4、表单标签
表单目的是为了收集用户信息。
form表单域：
<form action="url地址" method="提交方式" name="表单名称">
各种input表单控件
</form>
input 控件:
用户名: <input type="text" />
密 码： <input type="password" />
性 别： <input type="radio" name="sex" checked="checked" />男<input type="radio" name="sex" />女
兴趣爱好：<input type=”checkbox” />足球<input type=”checkbox” />篮球<input type=”checkbox” />跑步
自我介绍：<textarea >
文本内容
</textarea>
地 址： <select>
<option selected =" selected ">安徽</option>
<option>浙江</option>
<option>江苏</option>
</select>
<input type="button" value=”普通按钮” /><input type="submit" value=”提交按钮” />
<input type="reset" value=”重置按钮” /><input type="image" value=”图像按钮” />
CSS
1、CSS样式表
行内式
<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
内嵌式
<head>
<style>
div {
color: red;
font-size: 12px;
}
</style>
外链式
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
2、CSS选择器
2.1 CSS基础选择器
2.1.1 标签选择器
2.1.2 类选择器
2.1.3 类选择器特殊用法- 多类名
2.1.4 id选择器
2.1.5 通配符选择器
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
2.2 CSS复合选择器
2.3 CSS 链接伪类选择器
例如： - a:link /* 未访问的链接 */
- a:visited /* 已访问的链接 */
- a:hover /* 鼠标移动到链接上 */
- a:active /* 选定的链接 */
3、CSS文字样式
3.1 font--------------font-size: 18px;
3.2 font-family-----font-family: Arial,"Microsoft Yahei", "微软雅黑";
3.3 font-weight:字体粗细述（100~900）
| normal | 默认值400（不加粗的）
| bold | 定义粗体700（加粗的）
3.4 font-style:字体风格
| normal | 默认值，浏览器会显示标准的字体样式 font-style: normal;
| italic | 浏览器会显示斜体的字体样式。
4、CSS外观属性
4.1 color:文本颜色
4.2 text-align:文本水平对齐方式（left center right）
4.3 line-height:行间距（单位一般都是用px）
4.4 text-indent:首行缩进（单位em）
4.5 text-decoration 文本的装饰
| none | 取消下划线
| underline | 定义文本下的下划线
5、CSS标签选择器显示模式（display）
块级元素 :display:block(如：h p div ul ol li )一行只能放一个块级元素,可以设置宽度高度
行内块元素:display:inline-block(如：img input td )一行放多个行内块元素,可以设置宽度和高度
行内元素 :display:inline(如：span a i s strong)一行可以放多个行内元素,可以 直接设置宽度高度
6、CSS 背景(background)
background-color:颜色值;(transparent 透明的)
background: rgba(0, 0, 0, 0.3);
background-image : url ();
background-repeat : repeat | no-repeat | repeat-x | repeat-y
background-position :x y(或者方位名词)
7、CSS盒子模型
* 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
* 盒子里面的文字和图片等元素是 内容区域
* 盒子的厚度 我们成为 盒子的边框
* 盒子内容与边框的距离是内边距（类似单元格的 cellpadding)
* 盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）
7.1 盒子边框（border）
border-width:1px;
border-style:none没有边框（默认值）/solid边框为单实线/dashed边框为虚线 /dotted 边框为点线
border-color:#ccc;
border-collapse:collapse;表格的细线边框模式
7.2 内边距（padding）
当我们给盒子指定padding值之后， 发生了2件事情：
1. 内容和边框有了距离，添加了内边距。
2. 盒子会变大了。
8、CSS 布局的三种机制
8.1 普通流（块级，行内快，行内元素）
8.2 浮动（主要作用是让多个块级盒子一行显示，而且不留空隙）
选择器 { float: none/left/right; }
作用：1. 让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
2. 可以实现盒子的左右对齐等等..
3. 浮动最早是用来控制图片，实现文字环绕图片的效果。
应用：浮动和标准流的父盒子搭配（浮动是脱标的，会影响下面的标准流元素，此时， 我们需要给浮动的元素添加一个标准流的父亲，这样，最大化的减小了对其他 标准流的影响。）
浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。
1). 浮动的子盒子与父盒子的关系
- 子盒子的浮动参照父盒子对齐
- 不会与父盒子的边框重叠，也不会超过父盒子的内边距
2). 浮动元素与兄弟盒子的关系
在一个父级盒子中，如果前一个兄弟盒子是浮动流，那么当前盒子会与前一个兄弟盒子 的顶部对齐；如果兄弟是普通流，那么当前盒子会显示在前一个兄弟盒子的下方。
8.2.1 清除浮动
选择器{clear:both/left/right;}
因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒 子高度为0，就影响了下面的标准流盒子。
方法1、浮动元素末尾加一个空标签<br />
方法2、给父级添加： overflow：hidden/auto/scroll
方法3、使用after伪元素清除浮动
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;}
方法3、使用双伪元素清除浮动
.clearfix:before,.clearfix:after { content:""; display:table; }
.clearfix:after { clear:both;}
.clearfix {*zoom:1;}
8.3 定位（将盒子定在浏览器的某一个位置）
Position：static（静态定位）/relative（相对定位）/absolute（绝对定位）/fixed（固定）
静态定位：
静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none， 不要定位的时候用。
静态定位 按照标准流特性摆放位置，它没有边偏移。
静态定位在布局时我们几乎不用的
相对定位：
相对于 自己原来在标准流中位置来移动的
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。
绝对定位：
绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以 浏览器文档为准移动位置，不保留原来的位置，完全是脱标的。
固定定位：
完全不占位置，跟父元素没有任何关系，只认浏览器的可视窗口来设置位置，单独使用的，不随滚动条滚动。 |
|
收藏
淘帖
踩
