三个层次HTML 超文本标记语言——结构CSS 层叠样式表——表现javaScript 脚本语言——行为单标签 <标签名/> 引入一个**直接用双标签 <标签名></标签名> 当做一个有意义的容器用 标题标签 h1 - h6 如<h1>标题</h1> 段落文字标签 <p>段落</p>格式标签 <br/><hr/>预格式标签 <pre></pre>、<xmp></xmp> 两者区别： <xmp> <h1></h1> 454534 sfds fdsf </xmp> <pre> <h1></h1> </pre>实体符号：< < 或 <> > 或 >空格 或 HTML注释： <!-- --> 作用： 1、隐藏代码 2、提示作用 3、划分区域元素的分类块级元素：自占一行 从上往下排列 如：<p></p>行内元素：不自占一行 从左往右排列 行元素转换成块元素用 display：block 块元素并列同一行加 float：left可变元素99999999999999语意化 分区域 画色块分区类标签————块级<div></div> 块级容器分区类标签————行级<span></span> 行级容器功能类标签图片 <img src="" />超链接 <a href=""></a>元素的属性和属性值 1、特有的属性和属性值 <a href=""></a> href 引用 <img src="" /> img 引入 2、通用的 style <div style="样式名：样式值；样式名：样式值；"></div> id <p id="id名">本段指定了id的属性</p> class <h1 class="类名">Header 1</h1>内联样式插入 颜色（字体、背景、边框） 框高（宽度、高度） style="font-size: 22px;" 设置字体大小 style="color: red;" 设置字体颜色 style="text-indent: 2em;" 设置首行缩进 style="line-height:2;" 设置行距 style="text-align: center;" 水平居中--------------------------------------------------------------------------------选择器：遥控器内嵌式：写在head里面标签选择器：<style> p{ color:red; font-size:30px; } </style><body> <p>变成30像素红色文字</p></body> --------------------------------------------------------------------------------id选择器：当有多个p标签就使用id，只能出现一次#para1{ text-align:center; color:red;} <body> <p id="para1">Hello World!</p></body>--------------------------------------------------------------------------------类选择器：class选择器，可以在多个元素中使用.color red{ color:red;}.font-size-50px{ font-size: 50px;}<body> <div class="color-red font-size-50px">我们都要变颜色</div> <p class="color-red">我们都要变颜色</p> <span class="color-red">我们都要变颜色</span></body>--------------------------------------------------------------------------------加载顺序以最后一个为准选择器的权重内联样式style="" 1000(最大）id选择器 100类选择器 10元素选择器 1优先法则（相同选择器）1、权重大的优先2、后来者居上3、指定大于继承4、!important最大(大于内联样式) p{ color: blue!important; }世界五大主流浏览器谷歌、IE、FF浏览器（firefox浏览器）、Safari浏览器（苹果浏览器）、opera浏览器（欧朋浏览器）浏览器内核 渲染引擎 解析、排版、渲染CSS Reset* 通配符（所有的元素） *{ margin: 0; padding: 0; }--------------------------------------------------------------------------------CSS Backgrounds背景(简写属性，顺序为background:#ffffff url('img_tree.png') no-repeat right top;) background-color:red; 设置元素的背景颜色。 background-image:url('图片地址'); 把图像设置为背景。 background-repeat:no-repeat;(不平铺) 设置背景图像是否及如何重复。 background-attachment:fixed; 背景图像是否固定或者随着页面的其余部分滚动。 background-position:right top; 设置背景图像的起始位置。-------------------------------------------------------------------------------CSS 文本格式 文本的对齐方式 text-align:center; 居中对齐 text-align:right; 居右对齐 text-align:left; 居左对齐 text-align:justify; 每一行被展开为宽度相等，左，右外边距是对齐 文本修饰 text-decoration:none;去除下划线 文本转换 text-transform:uppercase; 全为大写字母 text-transform:lowercase; 全为小写字母 text-transform:capitalize; 单词首字母大写 文本缩进 text-indent:50px; 首行缩进50个像素 文本间隔 letter-spacing:10px; 字符与字符之间的间隔 line-height:200%; 行与行之间的间隔 word-spacing:30px; 单词之间的空白间隔 文本阴影 text-shadow: x轴 y轴 羽化程度 颜色; text-shadow: 0px 5px 5px red;--------------------------------------------------------------------------------CSS 链接样式 a超链接的详细介绍 <a href="网址、链接地址"target="目标" title="说明">被链接内容</a> a超链接的特有样式 a{ text-decoration：none； 去掉下划线 } a超链接的四种状态 未访问 a:link{} 已访问 a:visited{} 鼠标悬停 a:hover{} 正被点击 a:active{} 顺序规则 a:hover 必须跟在 a:link 和 a:visited后面 a:active 必须跟在 a:hover后面--------------------------------------------------------------------------------CSS 列表样式 列表的语法 有序列表 无序标签 列表项 1.第一项 ·第一项 <ul> 2.第二项 ·第二项 <li>列表项内容</li> 3.第三项 ·第三项 <li>列表项内容</li> 4.第四项 ·第四项 <li>列表项内容</li> 5.第五项 ·第五项 <ul> <ol></ol> <ul></ul> 设置列表项标志的类型 list-style-type:none 去除列表前的小圆点 list-style-type:circle; 小圆点显示 list-style-type:square; 方框显示 list-style-type:upper-roman; 罗马数字显示 list-style-type:lower-alpha; 英文字母显示--------------------------------------------------------------------------------CSS 表格标签 <table></table> 行<tr></tr> 列<td></td> 合并行：<td rowspan="2"></td> 合并列：<td colspan="5"></td> 对齐方式 <table> <tr> <td>姓名</td> <td>张三</td> </tr> </table> 表格边框 border：像素（1px） 样式（solid） 颜色（black） 合并缝隙：border-collapse: collapse--------------------------------------------------------------------------------CSS 盒子模型 margin外边距（border边框（ padding内边距（ 内容content 宽width、高height））） 最终元素的总宽度计算公式是这样的： 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 元素的总高度最终计算公式是这样的： 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距--------------------------------------------------------------------------------CSS 边框 border：像素（1px） 样式（solid） 颜色（black） top 方向 solid 实线 dotted点状 dashed虚线 double双线 合并缝隙：border-collapse: collapse boder-style属性用来定义边框的样式 border-width 属性为边框指定宽度-------------------------------------------------------------------------------css注释 /* */块元素左右居中用 margin: 0 auto; margin: 0px 0px 0px 0px ;(上右下左)图片的排序行元素（inline）转换为块元素（block）display：block；高级属性--inline-block上下居中line-height: 200px;利用行距盒子怪异模式box-sizing: border-box;浮动float.day{ float:left;}overflow: hidden;1、将外边距合并2、溢出隐藏--------------------------------------------------------------------------------关系选择器（后面所有标签） 找兄弟： 用~（波浪线）链接 如：div~p{color:red;} 找相邻兄弟： 用+（加号）链接 如：div+p{color:red;} 找后代： 用 （空格）链接 如：div空格p{color:red;} 找儿子： 用>（>）链接 如：div>p{color:red;}消失的CSS属性 1、完全隐藏 display: none; display: block; 2、占位隐藏 visibility:hidden; visibility: visible; 3、完全透明 opacity: 0; opacity: 1;--------------------------------------------------------------------------------表单标签 <form action="要提交的地址" method="get"></form> action="" 提交到哪去？要提交的地址 method="get" 提交方式："post/get"form之input控件 input表单标签元素 <input name="" type="text" placeholder="密码" value=""/> name="" 元素的名称=“如用户名” 必写字段 在单选和复选 type="text" 类型=“text”text：文本框 password：密码 radio：单选框(checked="checked"默认被选中) checkbox：复选框 submit：提交按钮 reset：重置带边框表单 <form action=""> <fieldset> <legend>Personal information:</legend> //边框上面加字 <fieldset>元素的标题 Name: <input type="text" size="30" ><br> E-mail: <input type="text" size="30"><br> Date of birth: <input type="text" size="10"> </fieldset> </form>下拉菜单（直接选中222） <select> <optgroup label="Swedish Cars"> // 定义选项组 <option>111</option> <option selected>222</option> <option>333</option> </select>格子布局 div布局代替table布局行居中方法 text-align:center; line-height: 100px;块居中方法 .box{ width: 400px; height: 500px; background-color: blue; position: relative; } .erzi{ width: 100px; height: 100px; background-color: red; position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; } <div class="box"> <div class="erzi"></div> </div> 清除浮动方法 .baba{ /*1、给父元素固定高度*/ height: 102px; /*2、overflow: hidden;*/ overflow: hidden; } /*3兼顾兼容的清除浮动方法*/ .clearFloat:after{ content: ""; display: block; visibility: hidden; height: 0; clear: both; } .clearFloat{ zoom: 1; }定位 相对定位（相对自己以前的位置） position: relative; 绝对定位（相对父集(0,0)点） position: absolute; 固定定位 position: fixed; 层重叠顺序（y越大越在上） z-index: y;wrap part head part main center 广告区域 banner banner-1 banner-2 banner-2-item i1 banner-2-item i2 banner-2-item i3 banner-1 学习用品 study-title h3、p study-table left right r1 r2 part service part foot--------------------------------------------------------------------------------圆角 border-radius: 20%; border-radius：20px左上 40px右上 60px右下 80px左下;渐变 线性渐变 上下渐变 background: linear-gradient(red,yellow); 左右渐变 background: linear-gradient(to left,red,yellow);--------------------------------------------------------------------------------transform-style: preserve-3d;三维-------------------------------------------------------------------------------字体样式 字体大小 font-size: 15px; 字体样式 font-family:"黑体" 字体加引号如宋体 加粗 font-weight:bold; 去掉加粗 font-weight:normal; 斜体 font-style:italic; 字体对齐： text-align:left 左对齐 right右对齐 center居中 文本颜色 color: #FFFFFF; 下划线 text-decoration:underline 文字间距 text-indent:20px 首行缩进 letter-spacing:8px; 两字间距 line-height:20px; 两行间距-------------------------------------------------------------------------------
