Html基础
1. 环境搭建
编辑器环境
轻量级的编辑
sublime(emmet插件)
vscode *
2) 浏览器环境（测试）
firefox
google chrome
opera safari
ie8+ 兼容性
2. hello world
编写代码 -> 运行测试 -> 交付（部署）【网站】
1） 部署在tomcat中( 动态服务器- 慢)
tomcat/webapps/
hello.html
2) 部署在静态服务器（apache/nginx）
阿里云（ubuntu16.04）
jdk
mysql
apache
/var/www/html
tomcat
3. html结构
超文本标记语言
超级文本（文本,超级链接,图片，视频，音频...）
html主体结构
doctype声明
HTML5:
<!DOCTYPE html>
HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!--源信息 -->
<meta charset="UTF-8">
</head>
<body>
<!--可以显示在网页中的内容-->
</body>
</html>
xml
标签是可以自定义的
html
所有的标签都是内置的
<h1>一级标题</h1>
语法
html由各种元素组成，一个元素通常包含开始标签，结束标签，内容
在开始标签中可以添加属性
<div class="content" id="one">
<span>hello world</span>
</div>
属性
1) 核心属性：id、title、style、class
绝大多数元素都具备的属性
2) 特有属性
某些元素中特有的属性
a
href
target
img
src
width
height
4. html那些事
Java
编译型语言
.java -> .class -> jvm
隶属于sun/oracle公司的，有具体的公司及团队维护，所有的标准oracle说了算，jvm也是oracle开发的
语法升级 拉姆达
jvm升级（解释java代码）
效果升级
springboot写完代码之后如何部署
1) 打包成为war,直接抛在tomcat/webapps，war就会自动解压
2) 打包成为jar,直接运行jar(内置了tomcat)
html
解释型语言
.html -> 浏览器
网页编程标准，w3c
h4 -> h5
语法升级
废弃掉 strong frameset ...
新增 header article section...
解释器
火狐，谷歌，欧朋...
容错性非常棒
效果升级
5. 标签
标签含义
如何使用标签(语义)
默认样式重置 h1
1) 块级别标签
作用：搭建网页的结构
特点：宽度默认占满父元素,高度默认由内容决定,宽高可以自定义
<div>
<ul>
<li></li>
</ul>
</div>
div 【容器】无意义的块元素（无招胜有招）
h1~h6 标题
p 段落
ul>li 【容器】列表
ol>li 【容器】列表
dl>dd,dt 【容器】列表
<div class="content">
<div class="wrap">
<h1 class="header"></h1>
<div class="products">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
2) 行级别标签
作用：填充网页
特点：默认宽高由内容决定；宽高无法指定；所有的行内元素可以共享一行空间;行内元素内部一般不允许嵌套子元素，只允许放文本
span 无意义的行内元素
a 超链接
href
target
img 图片
src
alt 当图片找不到的时候的文本替代
strong b em i sub sup d ...
<span>hello</span>
<a href="">百度一下</a>
6. css入门
三要素：
1) html (网页骨架) 块 ，行 （table/form）
2) css（页面装饰，布局，动画过渡效果）
原则：对于动画效果能用css实现的绝对不用js
3) Javascript（树莓派）
动态DOM, 类似于jstl
数据交互
如何在html中使用css(3种方式)
1) 嵌入在标签内部
将css代码写在了html中，较为混乱
复用性较低
好处：优先级高，简单直接（修改别人代码的时候，weex rn）
2) 集中嵌入在style标签中
3) 将css独立写在外部的css文件中，并且通过link导入进来
适用于企业级开发
css语法
选择器 {
/*规则*/
color:#ffffff;
background-color:pink;
}
7. css选择器 (jQuery选择器)
1) 核心选择器
用法：选择较大范围
1. 标签（元素）选择器
div {}
h1 {}
2. id选择器
#one {}
<div id="one">one</div>
<div id="two">two</div>
3. class选择器
.first {}
<div id="one" class="first">one</div>
<div id="two" class="first">two</div>
<div id="three" class="first">one</div>
<div id="four" class="second">two</div>
<p id="five" class="first">p</div>
词穷！！！
4. 并且选择器
div.first {}
p#five {}
5. 或者选择器
div,.first {}
6. 普遍选择器
*
2) 层次选择器【一般不超过5层】
1. 子代选择器
.top_nav > ul > li
选中class为top_nav的元素的直接后代ul元素的直接后代li元素
2. 后代选择器
.top_nav li
3. 下一个兄弟选择器
.top_nav li + *
4. 之后所有兄弟选择器
.top_nav li ~ *
3) 过滤器
对已经选择到的元素进行过滤
1. 属性过滤器
selector[name] 已选择到的元素具有name属性
selector[name=v] 已选择到的元素具有name属性，并且name属性的值为v
selector[name^=v] 已选择到的元素具有name属性，并且name属性的值以'v'开头
selector[name$=v] 已选择到的元素具有name属性，并且name属性的值以'v'结尾
selector[name*=v] 已选择到的元素具有name属性，并且name属性的值中包含了'v'
2. 伪类过滤器
以:开头的
selector:first-child 过滤出已选择元素中的是第一个孩子的元素
selector:last-child
selector:nth-child(2) 过滤出已选出元素中的 是第n个孩子的元素
selector:nth-child(even)过滤出已选出元素中的 为偶数的元素
selector:nth-child(odd)同上条...为奇数数的元素
selector:nth-child(3n+1)可以放表达式
selector:only-child 选中下 是独生子的元素
selector:not(selector) 选中下 不是独生子的元素
...
selector:hover 光标放上去时
selector:active 点击时的
selector:visited 已访问过的
selector:focus 聚焦时
3. 伪元素过滤器
可以产生出来一个虚拟元素（行内元素）
以::开头的
div::before {
}
div::after {
}
<div>
::before
<p>one</p>
<p>two</p>
::after
</div>
8. 规则
字体
网络字体（字体图标可）
文本
列表
盒子
背景
9. css布局
…
407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
