Html
定义：HTML是超文本标记语言（Hyper Text Markup Language），是一种用于描述网页文档的标记语言。拓展名：.html和.htm，但是index.html和index.htm是不同的两个文件。
作用：快速写网页
HTML语言的结构特点
1.HTML是一个个成对的标签组成的，标签对中的第一个标签是开始标签，第二个是结束标签。
2.HTML标签是有尖括号保卫的关键词。
<div></div>
3.少量的标签单个出现。没有结束标签
<img/><input/></br><meta>
4.标签之间是可以相互嵌套的。
HTML的版本
现在用到的是 html4.0.和HTML5
HTML标签
<html>
<head>
<titile>
<meta><!--(设置网页关键字，设置编码，设置网站内容，有利于seo)-->
<link>
<script>
<body>
<div><!--布局用的块-->
<img><!--引入图片 图片热点-->
<p> <!--段落标签-->
<a> <!--连接标签 锚点-->
<h1>-<h6> <!--标题标签-->
<ul> <li> <!--列表标签-->
<span> <!--行内标签，没有什么样式-->
<table> <tr><td>
<em>
<strong>
<br/>
表单标签
<form action method>
<input type=’text,radio,checkbox,button,hidden,password,submit,reset,file’>
<select>
<textarea>
<label>
标签的分类
块级标签：也叫块元素
----独占一行。可设置宽高，行高以及顶和底边距。不设置宽的情况下， 是它本身父级的100%。
内联标签：也叫行内元素，
<div>、<p>、<table>、<ul>、<li>、<ol>、<h1>-<h6>
---和其它元素在一行上，不能设置宽高，行高及顶部距离。宽度就是它包含的 文字或图片的宽度，不可改变
<a><span><em><i><strong><b>
内联块标签：也叫内联块元素
--同时具备内联元素和块元素的特点。和其它元素在一行，元素的高宽、行高及顶和底边距都可以设置。
<img>、<input>
标签类型的转换
转换成块标签：
display:block;
转换成行内标签：
display:inline;
转换成内联块标签：
display:inline-block
div和table布局的区别
用div布局html渲染时，是加载一行渲染一行。
用table布局html渲染时，是等表格结构及数据都加载完成之后，才渲染出来，现在主要用于数据展示类的布局。
css样式表
Css:层叠样式表，Cascading Style Sheets的缩写，我们常说的css样式就是样式表简称。它的主要功能是美化网页。
扩展名为.css
功能：美化网页统一站风格
分类及引入方式：
1､内部样式：在head标签里<style></style>时
2､行内样式：写在html的标签行里。
3､外链样式：写在以.css为扩展名的文件里，
3.1通过link标签引用：
<link type=“text/css” rel=“stylesheet” href=“css的url路径”/>
3.2通过@import标签引用
@import url(css文件的路径名) 不推荐使用它
网络慢样式加不进来
Html是网页的结构，css是网页的表现，javascript是网页的行为。
Css代码解析图
Css选择器
Id选择器 # 一个id名字在一个页面中只能用一次
Class选择器 . 一个名字页面中可以出现多次
标签选择器 标签名tag div span img ul li ….
通配 *
子类选择器 以空格隔开 div ul li
组选择器 以逗号隔开 div,ul,li
伪类选择器 :link :visited :hover :active
CSS样式
背景：背景颜色 background-color
背景图片 background-image
背景图片是否平铺 background-repeat
背景图片定位 background-position
背景图片固定 backgroundd-attachment
文本 ：文本缩进 text-indent
文本对齐：text-align
文本修饰线 text-decoraction
字体：字体：font-family
字体大小 font-size
字体粗细 font-weight
字体倾斜 font-style
A连接 · a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方 所有标签都能用
a:active
列表 列表图片 list-style-image 列表点的样式 list-style-type
Css属性推荐书写顺序
选择器名称｛
位置/显示隐藏；
大小；
文字系列；
背景/边框；
其它(动画类)
｝
盒子模型
Padding 内边距 边框到内容的距离
Margin 外边距 一个元素的边框到另外一个元素的边框的距离
Border 边框 边框大小 border-width
边框颜色 border-color
边框样式 border-style
Div+css布局概念
用div将整个网页分成一部分一部分，并且填充css样式和标签的过程
Padding : 上 右 下 左
Padding :上 左右 下
Padding: 上下 左右
Margin同上
定位
相对定位：position:relative相对本身
绝对定位：position:absolute绝对定位
-相对带relative的父级，如果没向上级查找直到body
固定定位：position:fixed固定定位
-相对于窗口
浮动产生的问题
浮动产生的问题:
子元素进行浮动，父元素没有设高度的情况下，高度没了，这种情况叫高度塌陷。
解决：
1、万能清除浮动
.clearfix:after{ content:" . ";
clear:both；
display:block；
height：0;
overflow:hidden；
visibility：hidden;
}
2、给父级加{position:relative;overflow:hidden}
3、给父级设置高
Border-radius
Border-radius：一个值时是四个角
50%圆
两个值 （上左 下右）（上右 下左）
三个值 上左 上右 下左 下右
四个值 上左 上右 下右 下左
