网页结构：结构层，表示层，行为层
<!doctype html>：用什么样的方式，标准解释，不区分大小写
www：万维网
html：由标记标签组成的描述性语言
<h1></h1>
<p>自带外边距</p>不能嵌套
强制换行<br/>
<hr>
<b>加粗</b>
不能换行的称为内联元素（行元素），反之称为块元素
<strong></strong>更强调
<em></em>倾斜
<i></i>
<img src="../（返回上级目录）/i/1.jpg" width="100">行内块元素（有宽高）
alt="pic"图片加载出现问题，对搜索引擎提高
title="pic"鼠标经过提示
<a href="网址路径">chrome</a>
邮箱 mailTo:a.163.com
主题 #main 锚点跳转到（id=main）
a.html#footer跳转到a页面的底部
<head></head>里的title不能省略
无语义化标签：
<div></div>做布局，可重复桥套，所有标签都可称为容器，块元素（换行自动），可以嵌套其他任意标签
<span></span>对部分内容设置，行元素代表
列表：
无序列表<ul></ul>，不允许随意插入其他标签
列表项<li>可嵌套其他</li>黄色：外边距，绿色：内边距，蓝色：内容
有序列表<ol></ol>
定义列表<dl></dl>
列表项<dt></dt>
<dd><dd>对<dt>解释说明，自带外边距
表格:
<table></table>至少有一行一列
border=""边框（1/0）
cellspacing="0"去除边框间距
cellpadding="0"去除内边距
width=""
<caption></caption>表格标题，居中，显示在表格外面，上面
<thead></thead>表头
<tr>行</tr>
列名<th></th>自带加粗居中样式
<td>单元格</td>
colspan=""跨列属性
align="right"向右对齐
rowspan=""合并单元格/跨行
<tbody></tbody>主体
<tfooter></tfooter>表尾
表单：
<form></form>
action=""获取到提交的数据
method=""提交方式 get:不安全 post:不暴露信息，safe
<input type="" name=""* value="默认值/对应值"/>接受输入
type="text"文本框 "password"密码框 "radio"单选框（name名保持一致）"checkbox"复选框 "button"按钮 "reset"重置
"submit"提交
（input+内容 input+内容）
<select></select>下拉框
<option></option>选择内容
CSS(层叠样式表，定义html内容在浏览器内的显示样式)
引入方式：
1.外部引入： link(head<></>中) rel="stylesheet" type="text/css" href="位置" @import(style中) @import.url("style.css");
@import是CSS提供的语法，只有导入样式表的作用
link是HTML提供的标签，还可以定义rss,rel连接属性等
加载页面时，link导入的css被同时加载，@import引入的css将在页面加载完毕后被加载（无样式闪烁问题fouc）/link放在页面底部
@import时CSS2.1才有的语法，故在IE5+才能识别
link作为html元素，不存在兼容性问题
2.内部样式： <style></style>
3.内联样式：只对当前标签使用 选择符{属性：值} 例如：p{color:red;}
优先级：321>>>
选择器：
1 标签 <div> div{}
10 类 <div class="a"> .a{}
100 id(唯一) <div id="a"> #a{}
0 通配符 *{}(所有标签)
10 后代 <div class="a"> <p><p></p></p></div> .a p{}所有p .a>p{}子元素p
群组选择器 <h2></h2> <h3></h3> h2,h3{}相同样式
10 伪类 <div class="a"><p> p <span></></></> .a:{}
.a:hover{}鼠标经过时 块元素不指定宽度默认父盒子的宽度
.a p:hover span{}
.a:before{}
.a:after{} content:""*
.a :first-child{}后代的第一个元素
.a div:first-child{}后代的第一个子元素，是div的变化
.a>p:first-child{}伪类子选择器
.a>:nth-child(2){}第二个子元素
.a :nth-child(2){}第二个元素
.a ul li:nth-child(2n){} box里的ul里的li的第偶数个
无穷 import
1000 行内样式 <div style="background-color: orange">
背景样式：
background-color 颜色
background-image 图片
background-position 图片位置
background-repeat 图片重复
background-attachment:scoll/fixed 图片定位
简写
background:#ffoooo url(bg01.jpg) no-repeat fixed center
自带默认标签：去除默认样式
body,h1,h2,h3,h4,h5,h6,p,ol,ul,dl,dd{
morgin:0;
padding:0;
}
*{}全部处理，耗费性能
a标签的四个状态（顺序不可变）
a:link,a:visited（4）{
color:red;
}
a:hover{
color:blue;
}
a:active{
color:orange;
}
只有块元素和行内块元素能识别宽width高height
display:inline;转换为行元素
inline-block转为行内块元素，默认局底部对齐
block 转为块元素
none 看不到，不占据空间
vertical-align:top;垂直对齐方式向上对齐
去除图片上下小间隙转换为块元素
给.body父值设置font-size=0,给子值.box设置font-size!=0
设置字体间距
隐藏元素：
display:none;
visibility=hidden;看不见但是有占据空间
opacity:0;透明度=0
设置高度=0;
overflow=hidden;溢出隐藏
滚动条：
.main{overflow:scroll; height=200px}
.list{height=1000px}
<div class="main">
<div class="list"></>
</>
overflow:scroll;(外面盒子)
overflow-x:hidden;(水平方向去掉)
CSS样式
基本样式： 宽，高，鼠标样式，透明度，可见样式，移除隐藏
字体样式：
字体；font-family
字号：font-size
字的样式：font-style
字的粗细：font-weight
字的颜色：color
简写：font: 20px "微软雅黑"
文本属性：
行高：line-height 单行文字的垂直居中
文本修饰：text-decoration
(a标签)none去除 line-through穿过 overline上方
缩进：text-indent ：2em
字符间距：letter-spacing ：5px(一般标题)
空白间距：word-spacing：2px
英文大小写：text-transform：（首）capitalize/uppercase/lowercase
文字水平对齐方式：text-align center left right justify(两端)
文本所在行高垂直对齐方式：vertical-align middle top bottom
CSS盒模型
所有的标签都是一个容器（盒子）
外边距》边框》填充（内边距）》内容
{
width: 200px;
height: 200px;
background-color: red;
padding: 40px 30px 20px 50px;(↑→↓←)
padding-top(bottom,left,right):(后浪覆盖前浪)
border: 10px solid实线(dashed虚线) blue;
border(lift)
border-style:solid solid solid solid
border-image: none;
margin:50px 20px 10px 60px
margin: 0 auto;水平居中
box-sizing:border-bos;ie盒模型（整体不动，缩小内容）
}
实际占用空间都加到一起
元素分类
<input type="text" style="width:300px;">
块级元素
1.每个块元素都从新的一行开始，并且其后的元素也另起一行。<br/>
2.元素的高度，宽度，行高及顶部和底部边距都可设置
3.元素的宽度在不设置的情况下，是它本身父容器的100%(和父容器的宽度一致)
<div> <p> <h1>~<h6> <ul> <ol> <dl> <address>
<blockquote> <form>
行内元素
1.和其他元素都在一行上；
2.元素的高度，宽度，行高及顶部和底部边距不可设置
3.元素的宽度就是它包含的文字或图片的宽度，不可改变
<a> <span> <br/> <i> <em> <strong> <label>
行内块元素
1.和其他元素都在一行上
2.元素的高度，宽度，行高及顶部和底部边距都可设置
<img> <imput> select textarea button iframe
display:inline block inline-block none(隐藏)
样式初始化
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{
margin:0;
padding:0;
list-style:none;
}
.fl{
float:left;(向左浮动)
}
.fr{
float:right;
}
.clear(清除浮动):after{
content:"";
display:block;
clear:both;
}
浮动原理
1.浮动元素脱离文档普通流，漂浮在普通流之上的
2.浮动元素依然按照其在普通流的位置上出现，然后尽可能 的根据设置的浮动方向向左或向右浮动，知道浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它
3.浮动会产生块级框（相当于设置了 display：block），二不管该元素本身是什么
清除浮动的方式
在浮动块结尾加上一个块级元素.clear{clear:both;}
使用伪类（推荐） ul:after{content:"";display:block;clear:both;}
给父级元素设置高度 ul{height:100px}
如果浮动元素的父级也是浮动元素那么父级会自动给子元素清除浮动(父级元素脱离文档流会影响后面的元素)
浮动特点
只能向左/右浮动
浮动不占据空间
将行元素转换为块元素
文字围绕浮动元素
(浮动元素换行时确保高度一致，否则会发生页面空白的情况)
浙公网安备 33010602011771号