HTML与CSS学习基础总结
先了解学习的知识点有哪些：
HTML
HTML指的是超文本标记语言（Hyper Text Markip Language），它不是一种编程语言而是一种标记语言，通过使用标签来描述网页。
CSS
CSS （Cascading Style Sheets）是层叠样式表用来定义网页的显示效果。
可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。
简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
JS
JS 全称（javascript）中文是java脚本的意思 。
它的由来（在互联网刚兴起的时候，网络速度比较慢，而体验又是放在服务器端的，所以用户体验度非常差，为了了解这一难题，网景公司发明了livescript liverscript主要把表单验证功能从后台提升到了前端，因为不依赖网络，所以用户体验比较好。
但是由于知名度比较差，知道的人很少，后来由于sum公司的java语言一飞冲天，爆红编程世界，为了跟风，博取知名度，网景公司把livescript 改成javascript. 后来微软眼红网景公司的成就，就发明了jscript。但是正因为此，导致了js的标准不同，所以给个大浏览器厂家带来了很大的麻烦。
为了有一个统一的标准，js被提交到一个ecma组织，也正因为此，后来的js都是采用ecma标准（ECMAScript））
其次js的作用“增强页面的趣味性，响应用户的行为”； 特点（弱解释脚本语言，可以被浏览器直接解析 不需要编译）
js的输出，有两种：
1.控制台输出（console.log()）不会对文档造成影响
2.文档中输出 document.write("xxxx") 会对文档造成影响
简单了解一下javaEE的基础知识
什么是JAVAEE?
主要是面向企业级开发(基础的概念，实际上远远不止如此)，对于我们来说
主要还是从事B/S架构的开发。
软件结构的分类：
C/S架构的开发(客户端到服务器的开发):
例如:吃鸡、QQ、LOL(有实体的应用客户端)
特点:
1.有客户端、必须要安装客户端程序
2.要进行客户端的升级，除了服务器进行代码的更新，客户端也必须
重新安装或者在线进行升级。
B/S架构的开发(浏览器到服务器的开发):
例如:淘宝、天猫、腾讯网、网页游戏
特点:
1.不需要安装任何的实体客户端，只需要一个浏览器(内核)即可
2.要进行客户端升级，只需要服务器进行代码更新，客户端不需要进行任何操作
其实，现在太部分的企业采用都是B/S架构(并不是说C/S比较少)
两者来说，他们在各自的领域应该是怎么样的?
C/S:消耗的是你的系统资源(CPU/GPU/内存)，所以运行的速度会比较流畅
而且对于图层渲染来说，B/S架构是永远达不到C/S架构的地步，适合做有动画效果
、启动速度快等等软件
B/S:无法直接获取你的系统资源，所有的系统资源的调配其实是由浏览器来做的
但是，浏览器本质是上也是基于C/S，B/S不适合特大型的实体软件(游戏开发)
简单了解网页的源来！
1.什么是前端？
1.前端其实就是将设计师设计好的效果图，通过网页的形式展现给客户
2.什么是网页?
2.网页是由图片、文字、链接、视频、音乐、输入框、表单等组成
3.WEB标准
HTML: 结构标准 相当于建房子的地基和框架,相当于人的身体
CSS: 表现标准 相当于房子的装修，相当于妹子化妆
JS: 行为标准 相当于房子里面只智能家居，相当于妹子跳舞
4.浏览器
浏览器的内核(渲染引擎):也就是浏览器所采用的引擎，这个渲染引擎决定了你的网页的
显示方式以及排版布局等等相关信息(遵循标准)
IE/谷歌/欧朋/火狐/苹果(这样就会造成浏览器兼容的问题)
5.html
xhtml1.0 W3C推荐的版本 2000年发布
xhtml2.0 因为改变太大，最终胎死腹中
HTML4.0 W3C推荐的版本1997年12月
HTML5 2004年提出，2006年开始火爆，而且这个版本跟之前所有的版本都不同，改变太大
而且是一个完全新的团队在做(火爆的主要原因还是因为移动端)。
HTML:超 文本 标记 语言
文本:说明HTML是由文本组成
超:说明HTML是由超链接组成
标记语言:说明HTML是使用标记进行组合的(解释性语言，由浏览器进行解释执行)
6.HTML怎么写？
标准结构:
//文档声明(告诉浏览器以什么标准来执行下面的代码)
// HTML的根标签 所有的HTML都必须写在根标签里面
//HTML的头部标签,里面的内容不显示在浏览器主体，一般用于设置、导入等相关文件
// HTML的主体标签，里面的所有内容会直接的显示在浏览器
7.HTML的标签分类:
单标签:
双标签:
可单可双:
包含关系:
并列关系:
8.HTML的开发工具:
1.记事本(推荐使用)
2.DW(,给设计师用的 很老)
3.sublime(专业级开发，插件式安装 缺什么补什么吗，很好用)
4.webstorm(很牛逼，界面非常好看 但是收费，而且太智能)
5.Hbuilder(你们必须得支持，国产的，而且是Java写的 非常适合H5的开发，用着很舒服)
9.HTML的基础标签
9.1 文字标签
文字加粗:
文字斜体:
下划线:
删除线:
注意:上面多个实现方式，在xhtml1.0版本当中，明确推荐使用后者
因为后者是语义化标签，针对浏览器来说，更加喜爱后者。
9.2 功能标签
换行:
水平线:
9.3 标题标签
~
h6以下的字体均为默认字体，h系列的标签,具备加粗和换行的功能
9.4 段落标签
h6以下的字体均为默认字体，h系列的标签,具备加粗和换行的功能
9.4 段落标签
段落标签,在每一个段落都是单独显示，除了进行分段，他还是一个容器(使用频率非常大)
图像标签:
超链接标签:
点击我到百度
打开方式:
_blank:新开窗口
_self:默认窗口
注意:
如果需要访问的是一个具体路径，你直接写路径就可以了
如果需要访问的是网络上的资源，则需要写上资源的协议名(http://www.baidu.com / ftp://172.18.33.10)
同时，还可以下载指定的压缩文件
列表:
无序列表:
- 林月如
- 胡歌
- 赵丽颖
有序列表:
- 林月如
- 胡歌
- 林月如
- 林月如
- 胡歌
- 林月如
定义列表:
- 橘梨纱最爱的
- 苏绪
- 阿香
- 阿香的
- 苏绪
- 阿香
实例练习:
我的电脑文件
- 我的电脑
- 本地磁盘C
- 我的电影
- 我的香格里拉
- 本地磁盘D
- 我的资料
- 我的全家福
表格:
香格里拉
表格的边框:border="1"
表格的宽度:width="300px"
表格的高度:height="100px"
单元格与单元格之间的间距:cellspacing="0px"
单元格内容与单元格内间距:cellpadding="10px"
水平对齐的方式:align="center"(左/中/右)[如果是table设置，则设置的是表格的对齐的方式]
设置背景颜色:bgcolor="fuchsia"
设置边框的颜色:bordercolor="red"
合并同一个行上的单元格:colspan="2"
合并同一个列上的单元格:rowspan="2"
表格语义化:
-- 表头
-- 表身
-- 表尾
表格语义化写法和普通表格没有任何区别，只不过表格语义化有益于搜索引擎的摘取
网页的常用设置:
表单:
表单的作用:负责数据采集
表单主要分为：表单控件、提示信息、表单域
表单控件:
包含了具体的表单功能，比如按钮、输入框、单选框、复选框、密码框、下拉框等等
提示信息:
一个完整的表单应该包含对于用户的友好提示，或者一些能够对事件进行解释说明的文字
表单域:
其实就相当于一个容器，这个容器包含了所有的控件和提示信息，可以通过定义相关控件
来处理不同的信息，也可以将这些信息发送到服务器后台当中，如果不定义表单域，也就
意味着你这里输入的所有信息是无法发送到服务端。
表单怎么写?
表单域:
action:用于提交表单信息到服务端的某个(脚本)程序
name:你这个表单域的名字，主要用户后端进行获取 前端并没有多大用处
method：你这个表单的提交方式，默认参数为get
get:所有的数据以参数进行提交，所提交的参数会直接显示在你的url(如果是敏感数据或者大容量数据，一般不建议使用get进行提交)
post:适合敏感数据和大容量数据的提交，他提交的方式为实体参数，url并不会直接显示
表单控件:
账号:
密码:
性别:男女
爱好:喝可乐撩妹爱林月如学习JAVA 家庭住址:
请上传文档:
关键字的功能解释：
maxlength="6" 设置输入框的输入长度
name="username" 设置控件的名字,这个参数主要给后端工程师进行调用
value="请输入你的账号" 控件的实际内容，后端工程师所需要的其实就是这个内容
readonly="readonly" 设置控件只读状态(不可编辑)
selected="selected" 用于设置下拉框的默认选项
submit:提交后立即执行到服务器
image:理论上跟submit一致，但是一般只配合js使用
button:普通按钮，没有任何效果，但是用的非常多 一般配合js使用
页面美观——CSS
什么是CSS?
1. CSS是指层叠样式
2. CSS的作用是用于美化HTML页面的中的内容(字体、颜色、高宽、大小)
3. CSS另外的作用就是可以对网页进行布局(CSS+DIV)
CSS的优势?
1.内容与表现分离
2.网页的表现形式高度统一，便于后期维护
3.具备极为丰富的样式，页面美化更加灵活
4.减少网页的代码量，增加网页的浏览速度 可以节省网络带宽
5.用于独立于页面的CSS,有利于搜索引擎的收录
CSS如何去写？
选择器:就是你要选择谁，然后改变什么
CSS的导入方式:
内部样式:
位置:
格式:
特点:
适合同一个页面的效果实现，其他页面无效
行内样式:
位置:所需要实现的标签内
格式:
特点:
适合某一个标签的样式修改
外部样式:
独立创建一个css文件，这个文件里面不需要写style,直接写样式即可
1.在head当中，
2.在head当中的style当中,@import url("css/style_demo.css" );
一般来说只会使用第一种，第二种几乎不用，因为link标签是属于xhtml的
而@import属于css2.1的规则，如果浏览器不支持@import，也就意味着你的样式无效
如果你使用的是link进行导入，先加载CSS样式，然后再去显示整个网页
如果你使用的@import，是先加载网页，再去显示CSS样式
适合多个页面共享一个CSS样式
样式表的优先级:
行内样式表 > 内部样式表 > 外部样式表
一般来说，我们只会使用外部样式表
格式:
选择器{
属性:属性值;
}
选择器分类:
基础选择器:
标签选择器:
标签名{
属性:属性值;
}
注意:属性值后的分号，你可以不写的 但是W3C的标准是必须要写的，而大部分
浏览器都遵循了W3C的标准，如果不写 可能会有部分浏览器无法使用。
特点:
一旦符合规则的标签，全部会实现同样的CSS效果
类选择器:
类选择器
.类名{
属性:属性值;
}
特点:
所有符合类名的标签，都会实现同样的效果
类名不能以数字开头
ID选择器:
ID选择器我
#ID名{
属性:属性值;
}
特点:
所有符合ID名的标签，都会实现同样的效果
但是，在同一个页面当中，标签不能出现同名的ID(js会出现问题)
选择器的优先级:ID选择器 > 类选择器 > 标签选择器
实例练习：
望庐山瀑布:
诗正文使用14px字体，颜色为绿色
水调歌头:
标题为红色，字体大小为18px，
正文第一段字体大小为12px,字体为红色
第二段字体颜色为黑色，字体大小为12px
如梦令:
使用标签选择器设置标题字体大小为20px
页面当中所有段落的文字为16px
使用类选择器设置译文和正文内容字体颜色为绿色
想办法将译文字体颜色改变为蓝色
复合选择器:
指两个及两个以上的选择器进行组合使用。
交集选择器:
标签选择器+类(ID)选择器{
属性:属性值;
}
特点:既要满足是否使用了某个标签选择器，也要满足是否使用了某个类或者ID选择器(也就说明标签选择器和类或者ID选择器必须同时满足)
后代选择器:
选择器+空格+选择器{
属性:属性值;
}
特点:无隔代限制，必须包含嵌套关系，例如p标签下面的span标签
子代选择器:
选择器>选择器{
属性:属性值;
}
特点:子代必须是父类的直接子代，不能存在隔代关系
并集选择器:
选择器,选择器,选择器,选择器,选择器,选择器{
属性:属性值;
}
特点:所有的选择器都实现同一个效果。
CSS继承性的问题:
html -> head ->title
body ->h1
p
ul -> li -> ol ->li ->ul
div
如果存在嵌套关系，父元素的属性发生了改变，子元素也会随之改变，
但是h标签无法继承父元素的字体大小，a标签无法继承父元素的颜色
文本样式:
background: firebrick;
/*设置字体样式*/
color: khaki;
/*设置水平对齐方式*/
text-align:center;
/*文字的首行缩进*/
text-indent:2em;
/*文本的样式修饰 一般只用下划线和取消下划线*/
text-decoration:underline;
字体样式:
/*文字大小*/
font-size:20px;
/*文字样式*/
font-family:"宋体";
/*文字风格*/
font-style:oblique;
/*文字粗细*/
font-weight:bold;
/*字体连写 字体风格 字体粗细 字体大小 样式(顺序不能乱)*/
/*font:oblique bold 36px "微软雅黑";*/
超链伪类:
/ *鼠标悬浮所触发的样式*/
.baidu:hover{
color: thistle;
font-size:10px;
}
/*当超链接被访问之后的链接（鸡肋）*/
.wangyi,
.baidu:visited {
color: darkcyan;
font-size: 50px;
}
/*当鼠标点击当中所触发的样式*/
.tencent:active{
color: green;
}
/*未访问之前的颜色*/
.tencent:link {
color:deepskyblue;
font-size: 180px;
}
布局的使用
CSS+DIV
用途:
div+css是现在主流的web设计模式
div主要的作用:
对网页进行布局
对网页内容进行对应的排版
div一般配合CSS，并且设置高和宽，否则无意义。
颜色的表示形式:
三原色:rgba(46,61,73,.4)
进制:#000000
单词:red
背景颜色:background-color:red;
图片背景:background-image: url(img/timg.jpg);
背景重复方式:background-repeat:no-repeat;
repeat-x:沿着x轴平铺
repeat-y:沿着y轴平铺
no-repeat:图像不平铺
repeat:图像平铺
图像大小:background-size: 50%;
图像定位:
background-position-y:沿着y轴移动
background-position-x:沿着x轴移动
移动方式:
y%/x%:依照百分比来移动
ypx/xpx:依照像素移动
x轴:left/center/right
y轴:top/center/bottom
背景连写:颜色/路径/x轴/y轴/平铺方式
background: red url(img/timg.jpg) 250px 150px no-repeat;
了解发展史
W3C:HTML 结构标准 / CSS 表现标准 / JavaScript 行为标准
世界上第一款浏览器 94年网景(Netscape Communications Corporation)公司开发。
95年和sun公司开发出Java
网景和sun进行了深度的合作 java+script= javascript
2003年之前，js其实很少有人使用，因为js就是垃圾广告的代名词。
2004年，一家伟大的公司彻底改变了js的命运，这就公司就谷歌，因为谷歌推出了一种
技术，这种技术一直沿用至今，仍然都是目前主流的技术(AJAX)
ajax:异步加载
认识js：
1.js是什么?
js一个可以嵌入到HTML网页当中，是基于对象和事件驱动的脚本语言
2.js的特点?
1.对于用户有非常良好的交互性
2.具备非常强的安全性(对于用户)，JS没有任何的权限可以访问你的系统资源和磁盘
3.是跨平台，因为是基于浏览器的
3.js能做什么?
1.js能够实时动态的修改你的CSS和你的HTML代码
2.能够动态的校验数据
4.js的组成
DOM(文档对象模型)
BOM(浏览器对象模型)
5.怎么去使用js?
1.行内
2.内部
alert('我被加载了');
3.外部
JS代码放在哪儿？
原则上,你JS放任意位置都没问题，但是在不影响功能的前提下，建议越晚加载越好
二:JS的基本语法
typeof获取当前数据的类型
js当中的原始数据类型:
number:数字
string:字符串类型
boolean:布尔类型
null:空类型
underfind:未定义
number/string/boolean 伪数据类型(等同于java的自动拆装箱)
类型转型:
number/boolean类型转成string
toString();
string/boolean转number
parseInt();
parseFloat();
string转成number parseInt(x) 字符串必须开头包含数字，最后的结果就是开头的数字
强制类型转换:
Boolean(),强转布尔
数字如果转成布尔,false即0 true即1
字符串如果转成布尔，空内容即false,有内容及true
Number()
布尔转数字，true即1 false即0
字符串转数字，不能转
引用数据类型
java:Object ob = new Object();
js:var ob = new Number();
运算符:
赋值运算:
var x = 5;
算数运算:
+ - * /(操作跟java一致，你们不让我讲)
逻辑运算:
&& ||
比较运算:
< > <= >= != == ===
全等:需要数据类型和数据值完全匹配
三元运算:
3 > 2 ? 3 : 2;
void运算:
点击我跳转
类型运算符：
typeof:获取数据类型
instanceof:判断某一个数据是否为某种数据类型
逻辑语句:
1.if
if(x > 5){
alert("大于");
}
2.if else
if(x > 5){
alert("大于");
}else{
alert('小于');
}
3.switch(){
case "css":
alert("xxx");
break;
default:
alert("xxx");
}
4.for
for(var a = 0;a < 5;a++){
alert(a);
}
5.for in
var arr = [1,56,1,5,"s"];
for(s in arr){
//alert(s);//索引编号
alert(arr[s]);
}