1、HTML和CSS概述？ 常用浏览器：IE chrome 火狐 Safari Opera
什么是HTML？页面-内容-结构
根据W3C的定义，HTML指的是超文本标记语言（Hyper Text Markup Language) 用于定义文档的内容结构（W3C万维网联盟，是国际最著名的标准化组织）
2、W3C创始人Tim Berners-Lee-蒂姆·伯纳斯·李 万维网的发明人和万维网联盟的主任
3、根据W3C定义，CSS全称Cascading Style Sheets页面表现的基础，可以控制布局，控制元素的渲染，用于定义HTML文档的样式，外文全称：层叠样式表
HTML5 2008年html5草案发布，2012年形成稳定版本
HTML5中的变化 标签： 1.doctype,meta 2.新增语义化标签和属性 3.去掉了纯展示性的标签<font><center><s> 4.添加了canvas 、 video 、audio 、 本地存储 、 拖拽 语法： 1.标记不区分大小写，推荐小写 2.空标记可以不闭合:<img> 3.属性值可以不添加引号，推荐双引号 4.属性值中包含true和false可以省略
4、HTML注释
HTML注释的书写形式<!--注释内容--><!-- 注释快捷键ctrl+/ -->
HTML注释主要用于描述代码功能
浏览器解析HTML代码时会忽略注释内容
5、什么是HTML元素？
<!-- 元素、标记、标签都是一个东西 -->
6、HTML元素的组成部分
起始标记<h3>元素内容</h3>结束标记 h3元素名 起始标记里头含属性
单标记<img> <br>换行 <link> <hr>横线 <input> <meta>
<!-- shift+alt+f格式化文档 -->
标记名，属性，元素内容共同决定了一个元素的内容和行为
7、空元素——没有元素内容和结束标记的元素，或称为自闭和元素
例如img元素<img src="" alt="">img写图片元素 src写图片路径 alt图片加载失败显示
8、元素的层次结构
一个元素的内容中可以包含其他元素，形成嵌套的层次结构
元素关系： 父子关系：若A直接包含B，A是B的父元素，B是A的子元素 祖先和后代关系：若A直接或间接包含B，A是B的祖先元素，B是A的后代元素 兄弟关系：若A和B拥有同一个父级，A和B互为兄弟关系
9、元素分类
块级元素 一个元素独占一行，宽高可设，会自动换行 h元素 p元素
行内元素 多个元素在一行显示，宽高自动，不会自动换行 a img
1.可替换元素：元素内容由属性值决定 <img> <input> 2.不可替换元素：内容由元素内容直接展示 <p> <h1>
10、DIV元素
他是一个非常常见的元素
他没有任何意义
他仅仅只是表示一个容器
11、语义结构化元素（HTML5出来）语义化标签
header用于表示页面或某个区域的头部
nav用于表示导航栏
aside用于表示跟周围主题相关的附加信息
article用于表示文章或其他可独立页面存在的内容
section用于表示一个整体的一部分主题
footer用于表示页面或某个区域的脚注
优点：每块区域含义清晰
有利于SEO
帮助特殊设备
12、编辑器
ATOM VS coad
13、<!DOCUMENT HTML>
第一行功能：告知浏览器以哪个版本来解析HTML元素，必须放置于第一行
标注接下来的功能是文档声明定义 document文档 type类型
DOCTYPE缺失会导致Quirks mode"怪异模式",正常模式是Almost standard mode"准标准模式"
安装浏览器，用于执行代码 安装编辑器，用于编写代码 vs code强大的插件功能
flex
1、容器和项目
容器：父元素
项目：子元素
2、主轴：默认情况下，水平向右
交叉轴：默认情况下，水平向下
3、创建弹性布局display: flex;
所有项目默认在一排显示
若项目总宽度超过容器宽度，不会自动换行，会把项目等比例压缩1
4、自动换行
flex-wrap: wrap;flex-wrap: nowrap
5、justify-content属性（主轴方向布局）
justify-content属性定义了项目在主轴上的对齐方式。
flex-start | flex-end | center |space-between | space-around;space-evenly
space-between项目和项目之间距离相等，项目与容器之间距离为0
space-around项目与容器之间距离是项目与项目之间距离的一半
space-evenly项目与容器之间距离和项目与项目之间距离相等
交叉轴
align-items属性定义项目在交叉轴上如何对齐。
align-items: flex-start | flex-end | center | baseline | stretch flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
display：inline-block(行内块盒子，同时具有行内元素和块级元素的特点)
text-align:center（内容水平居中）
Line-height（内容垂直居中）取值与元素的高相同
解决图片排版产生的3PX间隙 vertical-align:top;font-size font-weight  空格 text-decoration: none;隐藏文本装饰 隐藏盒子
visibility:hidden隐藏盒子（会保留元素的位置）
display:none隐藏盒子（不会保留元素的位置）
行内块
display:inline-block 可设宽高，多个元素可在一排显示
行内元素padding和magin上下方向不生效
行高和高相同时文本会垂直居中：line-height=height
雪碧图--图片拼合技术
定视口
<a href=""><span class="sprite"></span>首页</a> span是行内元素
.sprite{
width: 20px;
height: 20px;(定视口)
display: inline-block;(行内块)
background-image: url("img/ia_100000031.png");
background-position: -22px -2px;
行内元素
多个元素在一行显示，不会自动换行，宽高自动
块级元素
一个元素独占一行，会自动换行，宽高可设
文本元素
strong和b标签效果相同，语义不同 em标签和i标签效果相同，语义不同;em能增加在搜索引擎中的权重
abbr缩写:自动添加点虚线
<abbr title="Hyper Text Markup Language">HTML</abbr>
pre预格式化
应用场景：数学公式、化学公式
效果：保留文本中的空格和回车
<pre>
1 2
+ 3 1
————————
4 3
</pre>
扩展
<time>10:00</time> <p>今日票房<span>60</span>万</p> <p><span>弱</span><span>中</span><span>强</span></p>
a标签连接功能
1.页面连接
2.锚点
3.功能连接
<!-- 锚点 -->
<a href="#first">到顶部</a><a href="#second">到中部</a><a href="#end">到底部</a> <a href="" id="first">顶部</a> <section><p></p></section> <a href="#first">到顶部</a><a href="#second">到中部</a><a href="#end">到底部</a> <a href="" id="second">中部</a> <section><p></p></section> <a href="#first">到顶部</a><a href="#second">到中部</a><a href="#end">到底部</a> <a href="" id="end">底部</a> 定点元素可换<h>
控制隐藏标签
display:block 此元素将显示为块级元素，此元素前后会带有换行符 display：none 这个属性是将元素设置成无，在网页中不占任何的位置。 visibility:hidden 这个属性是设置元素不可见，在网页中还是占据着相应的位置
功能连接 打开外部程序
<a href="tel:1388316155">给我打电话</a> <a href="mailto:zeki224@aliyun.com">给我发邮件</a>
跳转路径
<a href="" target="blank" target="self"></a>
target——self在当前标签页直接打开
——blank在新的标签页打开
相对路径
./当前路径 ../跳出当前文件夹 /进入下一级文件夹
绝对路径
书写格式：协议//域名/目录 eg:http://meyerweb.com/eric/tools/css/reset/reset.css
两种路径对比 使用站外资源时推荐用绝对路径 使用站内资源时推荐用相对路径
编码特殊字符
书写格式为：&实体名称；或 &#实体编号 常见实体字符： 空格 < 小于符号 <； > 大于符号 > & 并且符号 & © 版权符号 ©； 上标：<sup></sup> ® 注册符号 ® 下标:<sub></sub>
伪类选择器
选中父元素的第一个子元素
article>p:first-child{
color:red
}
p：first-child{
color:red
}
第一个元素如果不是p元素则不生效
选中父元素最后一个子元素
p：last-child{
color:red
}
最后一个元素不是p元素则不生效
选中父元素的第n个子元素（n从0开始增加）
1.具体数字n
2.an+b，a和b是具体数字
3.关键字 odd(奇数)、even（偶数）
！注意：若兄弟元素名不同，可能无法选中
article>p:nth-child(3){
color:red
}
article>p:nth-child(3n+1){
color:red
}
article>p:nth-child(odd){
color:red
}
article>p:nth-child(even){
color:red
}
计数时不筛选类型
nth-of-type先筛选类型
article>p:nth-of-type(even){
color:red
}
扩展：
选中前三个子元素？nth-child(-n+m)
article>p:nth-child(-n+3){
color:red
}
否定伪类选择器
除了第五个其他的P元素加颜色
article>p:not(:nth-child(5)){
background-color:red;
}
a标签配套伪类选择器 love=>hate使用顺序不能变
:link 未访问时的颜色，当href属性有值时才生效
:visited 访问后的颜色
:hover 鼠标移入、悬停时的颜色
:active 鼠标点击时的颜色
eg a:link{
color:blue
}
text-decoration:none隐藏下划线 <del>删除线</del> text-decoration:overline上划线 text-decoration:underline上划线 text-decoration:line-through删除线
aside{
height: 30px;
width: 30px;
background-color: blueviolet;
}
aside:hover{
width: 100px;
height: 30px;
transition: linear 2s;当鼠标悬停时两秒内匀速变化颜色
}
article{
width: 200px;
height: 200px;
border: black 1px solid;
}
article>q{
display: none;
}
article:hover q{
display: block;
}
鼠标进入区域显示内容，不进去则隐藏
