WEB前端
web前端包括HTML、CSS、JavaScript
HTML是网页内容的载体，包括图片、文字、视频
CSS是样式是表现，标题字体、颜色变化、背景图片、边框等。这些用来改变内容外观的东西称为表现。
JavaScript是网页上的特效效果。有动画的，有交互的都可用JavaScript来实现。
HTML
html的标签不区分大小写（习惯上是小写），标签可嵌套使用
html文件基本结构
<html> 根标签
<head>…</head> 头部标签。包括
<script> <style> <link /> <meta />
<body>...</body> 内容标签。包括 <h1> <p> <a> <img />
</html></a></style></script>
认识标签
标签之间的文字内容是网页的标题信息，会出现在浏览器的标题栏上。
<em>斜体
<strong>粗体
<span>用自定义的样式修饰文本 span{自定义样式内容}
<p>段落标签
<q>简短文本引用标签
<blockquote> 长文本引用标签
<br /> 回车键
html中的空格
<hr /> 添加水平横线
<address>地址信息标签。电子信息、签名
<code> 单行编程语言代码标签
<pre> 多行代码标签,预显示（即会保留显示内容中的回车空格等）
<li> 列表条目
<ul> 无序列表标签
<ol> 有序列表标签
<table> 表格标签 没有添加css样式的时候是没有表格线的
<tr> 表格的一行
<th> 表格头部的一个单元格
<td> 表格的一个单元格
<caption> 表格标题标签
<table summary="表格简介内容">
<a href="目标网址" title="鼠标停留显示的文本">链接显示的文本</a> 默认当前窗口打开 target="_blank" 若添加则新窗口打开
<img src="图片地址" alt="下载失败时的替换文本" title="提示文本" /> 支持gif,png,jpeg格式
<form method="传送方式" action="服务器文件"></form> 表单
<input type="text/password" name="名称" value="文本" /> 文本输入框
<textarea rows="行数" cols="列数">文本</textarea> 多行文本输入框
<input type="radio/checkbox" name="名称" value="值" checkd="checkd" /> 单选/复选框
<select><option value="提交值">显示值</option>...</select> 下拉单选框
selected="selected" 可设置为默认选中项
<select multiple="multiple"><option>...</select> 下拉多选框
<input type="submit" value="显示文字" />
<input type="reset" value="重置" />
<label for="控件id名称"> form表单中的label标签不呈现特殊效果，根据点击触发相应id的控件
CSS 层叠样式表
语法：选择符{属性1：属性值1；属性2：属性值2} p{color:blue}
内联式css，直接把css代码写在相应的html标签中 style="属性：属性值"
嵌入式css，在<style type="text/css">css代码</style>标签中实现，通常写在<head></head>之间
外联式css, 在html文件中引入外部css文件
<head><link href="文件名.css" rel="stylesheet" type="text/css" /></head>
上述使用方法的优先级，权值相同的情况下，遵循就近原则(内联式>嵌入式>外联式>)
选择器。选择器{样式;}
标签选择器，即选择器为标签
类选择器， .classname{css样式代码;} 应用 <span class="classname">被修饰内容</span>
ID选择器， #idname{css样式代码;} 应用 <span id="idname">被修饰内容</span>
上述两类选择器的区别
1.ID选择器只能在文档中使用一次，类选择器可使用多次
2.ID选择器只能设置一个样式，类选择器可同时设置多个样式
子选择器， .classname>childname{css样式代码;} 用于选择指定标签元素的第一代后代childname
包含选择器， .classname childname{css样式代码;} 用于指定标签元素的所有后代childname
通用选择器 *{css样式代码;} 匹配所有标签元素
伪类选择符 a:hover{css样式代码;} a标签鼠标滑过时被修饰内容状态改变
分组选择符 h1,span{color:red;} 相当于 h1{color:red} span{color:red}
css样式权值 标签的权值为1，类选择符的权值为10，ID选择符的权值为100
css优先级 一般情况下 用户自定义样式>网页制作样式>浏览器默认样式
!important p{color:red!important;} 最高优先级（权值）
CSS文字段落处理
字体 font-family:"Microsoft Yahei"
字号颜色 font-size:"12px";color:red
粗体 font-weight:bold;
斜体 font-style:italic;
下划线 text-decoration:underline;
删除线 text-decoration:line-through;
段落缩进 text-indent:2em; 2倍缩进
段落行间距 line-height:1.5em; 1.5间距
字间距 letter-spacing:10px; 单词间距 word-spacing:2px
对齐 text-align:center/left/right; 居中/左/右
布局元素分类：a{display:block} 可用display转换
1.block块状元素：div p h1...h6 ol ul dl table address blockquote form
特点：独占一行，高度、宽度、行高及边距都可设置，若不设置宽度，则为本身父元素的100%
2.inline内联元素：a span br i em strong lable q var cite code
特点：和其他元素在一行，高度、宽度、行高及边距都不可设置，宽度就是它包含的宽度，不可变
3.inline-block内联块元素：img input
特点：和其他元素在一行，宽高及行高、边距都可设置
盒子模型
border margin padding
CSS布局模型
1.流动模型（Flow）,默认布局模型,类似安卓线性布局
2.浮动模型（Float）
3.层模型（Layer）,类型ps中的图层,三种形式，绝对定位、相对定位、固定定位
position:absolute 绝对定位，相对于确定的元素标签或父元素使用上、右、下、左移动
position:relative 相对定位，相对于自身的前确定位置移动。注意：偏移前的位置保留不动
position:fixed 固定定位，相对于窗口视图固定不动不随文档流动。常应用于小说网页的固定广告。
绝对定位与相对定位配合可使某一元素相对另一元素定位不动。
CSS长度值 px em % 均为相对单位
font-size:14px; 则1em=14px
</label></option></select></table></caption></td></th></tr></table></ol></ul></li></pre></code></address></blockquote></q></p></span></strong></em>