好了,回到正题;一.html简介HTML——Hypertextmarkuplanguage超文本标记语言
文件的扩展名为.html或.htm
首页：index.htmldefault.html默认页HTML的基本语法标记/标签(元素)双标签格式为:<标签>内容网页页面根元素
头部主体段落标题单标签格式为:<标签>例如：图片
换行
水平线一个最基本的网页构造
一些常用的标签:粗体。bold在网页中，比较重要的文本通过粗体方式显示
倾斜。italic下划线。underline
强调。强调显示文本内容，文字以斜体方式显示
超链接地址可以是网页、图片、文字、压缩包.rarzip、应用程序.exe等任意文件
target属性值_self原窗口本窗口(默认)_blank新窗口_top顶框架_parent父框架
四.表格格式:表格table、tr行、td列/单元格内容
| 姓名 | 身高 | 体重 |
| 张三 | 175CM | 70kg |
特有属性cellspacing单元格间距默认2像素cellpadding单元格边距（边框与内容的间距）设置tr基本属性属性：align水平对齐left/center/right
valign垂直对齐top顶部middle中部bottom底部
bgcolor背景色设置td的基本属性属性：Width、height宽高（单位是像素或%）alignvalign水平对齐、垂直对齐bgcolor背景色background指定背景图片 合并必须是相邻的单元格水平跨度colspan 它的用法是取代 的位置即可 餐饮类型 主要菜系 价格
对表格的行进行分组，注意：thead，tfoot只有一个tbody可以有多个
单元格tdBgcolor=白/浅色五.表单结构:
属性:Name表单名字action=“url”提交地址method提交方式get获取Post传送target新窗口提交输入标签radio单选框checkbox复选框
file文件域
submit提交按钮reset重置按钮
button普通按钮image图像域按钮
Hidden隐藏域文本框
例如：
单选同一组可以设置不同名称错误单选同一组不可以设置不同名称对复选框checkbox属性值：type表单对象类型Checked默认选中
例如：
例如：
Select标签的属性Multiple多选
例如：
普通按钮
性别：
传统html的缺点标记较少，缺少文字间距，段落缩进等标记，美化困难维护困难，修改过程繁琐。网页代码过多，影响网页浏览速度
Css作用例子：链接样式表Css(cascadingstylesheet)层叠样式表
用于控制网页的外观CSS优点使网页代码更少，网页下载更快实现了内容与样式的分离使网站维护更方便、快捷使网页与浏览器的兼容性更好
注释htmlcss/**/CSS的基本语法张飞{身高：185cm；体重：80kg；性别：男；}
css的基本语法:选择器{属性:属性值;…}三部分组成css选择器:也称为选择符，用于选择需要添加样式的元素。基本CSS选择器全局选择器(通用)
用*来表示，代表所有标签
一般用于将所有元素的外边距和内填充清除。*{margin:0;外边距padding:0;内填充}基本CSS选择器标签选择器(元素选择器)--通过元素名选择元素如：body{},ul{},a{}，img{}h2{}p{}等
类别选择器--通过class属性选择元素先定义样式css：.blue{color:blue;}
然后引用：
ID选择器先定义样式：#ab001{color:#ff0000;}然后引用：
用法和class类似，但一个ID选择器只能选定一个元素伪类选择器——作用在超链接的状态上a:link{}点击前默认a:visited{}点击后a:hover{}放上去鼠标滑过a:active{}按下去点击瞬间a:focus{}获取焦点
这是第1行正文内容……
链接样式（外部样式）html文件和css文件分开，是最实用的方法。结构样式分离文字属性Color颜色
font-size:12px;14px字号
字体font-family:楷体，宋体;多个字体用逗号分隔优先使用第一个字体楷体
加粗font-weight100-900bold、bolder加粗normal正常去掉标题h1-h6的加粗
倾斜font-styleitalic斜体normal正常段落属性text-decoration文字装饰Overline上划线Line-through删除线Underline下划线none无去掉超链接下划线
text-align水平对齐Leftcenterrighttext-indent首行缩进像素：24px百分比50%2个字2em负值-100px
Line-height行高行距行高=高度可以让文字垂直居中数值：24px百分比：200%背景背景颜色
Background-image:url(01.jpg)背景图片
Background-repeat背景重复Repeat(默认)平铺no-repeat不重复repeat-x横向重复repeat-y竖向重复背景位置Background-position关键字水平：leftcenterright垂直：topcenterbottombackground-position:righttop;数字background-position:200px100px;水平垂直可混用background-position:50pxtop;
一个值，第二个默认centerbackground-position:left（center）;背景附件background-attachment:fixed固定
不随滚动条移动背景复合属性
background:#cccurl(1.gif)no-repeat100px200px；颜色图片地址重复位置列表样式list-style-type：disc;实心圆circle空心圆square方块decimal数字none无想要样式表现出来，必须将margin：0；padding：；删除
列表图片list-style-image:url(1.jpg)；
列表位置list-style-position：inside/outside；内部外部
列表复合list-style：none或circleurl(1.jpg)inside八.盒模型
division相当于一个容器可以容纳：段落、标题、表格、图片等盒模型-页面所有元素都能看成盒子一个盒子实际占据的宽度和高度由内容+填充+边框+边距组成即content+padding+border+margin内容+填充+边框+边距尺寸属性——盒子模型中指内容的大小Width宽Height高backgiound背景内填充paddingpadding-top:30px;padding-bottom:60px;padding-left:40px;padding-right:20px;padding:30px20px60px40px;上右下左简写：Padding：10px;四边相同10pxPadding：010px;上下左右Padding:10px20px30px;上左右下Padding:10px20px30px40px;上右下左边框borderBorder-width:10px;边框宽度Border-color:#f00;边框颜色Border-style:边框样式solid实线dashed虚线dotted点线复合属性—不可三缺一四边：border:10px#f00solid;底边border-bottom:1pxgreendashed;border-left:none;去掉填充Padding边框与内容的距离边距margin内容与内容的距离margin-topmargin-rightmargin-bottommargin-left:10px;当前元素向右移动
简写：margin：10px;margin：010px;上下左右margin:10px20px30px;上左右下margin:10px20px30px40px;上右下左一个盒子实际占据的宽度和高度由内容+内边距+边框+外边距组成div{width:200px;padding:020px;}200+20*2=240
一个盒子的margin为22px，border为1px，padding为12px，content的宽为220px、高为50px，如果用标准W3C盒子模型解释，这个盒子的宽？？？282px错误：
布局属性float浮动--横向排列none默认Left左Right右
clear清除浮动--元素浮动之后，需要清除浮动NoneLeftRightboth全部块级元素独占一行自动换行divh1—h6pul/liform。。
行内元素（内联）不独占一行不自动换行aspanimgbifontinput..块级元素:自动换行，有宽度和高能嵌套行内元素
默认的显示是display:block;
行内元素:不自动换行，没有宽和高aspan不能嵌套块级元素默认的显示是display:inline;display显示属性：block块状显示inline行内显示inline-block行内块none不显示九.CSS新属性:盒子阴影box-shadow:2px2px5px2px#f00inset;h-shadow水平偏移，可为负值v-shadow垂直偏移可为负值blur模糊值阴影外延值可为负值color颜色值inset：内阴影。默认外阴影
添加多个阴影逗号分隔文字阴影text-shadow:2px2px5px#f00;水平垂直模糊颜色
如颜色省略，阴影颜色为文字颜色文字溢出text-overflow:;clip:裁切，默认值ellipsis省略号(...)
white-space:nowrap;(强制不换行)overflow:hidden;（溢出隐藏）text-overflow:ellipsis;边框圆角border-radius:;1个值5px四个角相同2个值5px10px左上与右下右上与左下3个值5px10px15px左上右上与左下右下4个值5px10px15px20px左上右上右下左下
单独一个角左上border-top-left-radius:30px;盒模型模式box-sizing:;指定盒子宽度高度是否包含元素的padding和bordercontent-box不包括padding，宽高是内容大小。
border-box包括padding宽高是实际大小渐变背景Background:-webkit-linear-gradient(top,orange,black);线性渐变方向起点色终点色方向可为top、bottom、left、right
兼容firefox-moz-linear-gradient(top,red,yellow);兼容chrome-webkit-linear-gradient(top,red,yellow);
audio音频
插入各种多媒体，格式可以是图片，音频，视频，插件等
十一.定位
定位positionstatic静态定位默认relative相对定位absolute绝对定位fixed固定定位（不随滚动条移动）inherit继承相对定位relative相对于自己原来位置偏移指定偏移量：水平leftright垂直topbottom
绝对定位absolute相对于父元素位置偏移指定偏移量：leftrighttopbottom，负值子绝父相