HTML的组成<!DOCTYPE html><!-- 文档头申明 --><meta charset="UTF-8"><!-- 解析规范（大管家） -->head: meta[keywords,description,author],title,link,script.stylecss-正文css的正文/* */html-正文 <!-- html的正文 -->css的引入有四种一、行间款式 写法：在标签中，写一个style的属性,例如：style="..."，在引号当中写css款式 劣势：优先级最高 劣势：不是人写的代码二、外部样式表写法：在head标签中，写一个style的标签，在style标签中通过选择器来管制款式通过选择器进行对标签的款式操作三、内部样式表 1.新建一个css的文件 2.在head标签中写一个link标签， 写法： <link rel="stylesheet" href="门路"> 用来关联1个css文件，在css文件中，通过选择器来管制款式 长处：利于扩大，利于保护 毛病：须要申请服务器。四、@importcss款式的优先级：引入行间款式 > id选择器 > class选择器 > 标签名选择器css-background背景色彩 background-color: 英文单词，十六进制，rgb() 背景图片 background-image:url("门路") 舒适小提示：门路不要写错了，否则不显示 背景平铺 background-repeat: repeat-x x轴平铺 repeat-y y轴平铺 no-repeat 不平铺 背景定位 background-position:x轴地位 y轴地位; 第一值为X轴地位 能够承受含糊的值如：left center right 也能够承受具体的数值：如：100px 第二只为Y轴地位 能够承受含糊的值如：top center bottom 也能够承受具体的数值：如：100px 例子： background-position:100px 35px; 或 background-position:right bottom; 复合写法 background:color image position repeat;css-边框border 边框，算标签页面的宽度边框形态：solid(实线) dashed(虚线) datted(点线)边框通明 border:10px solid transparent; css-圆角圆角 border-radius:具体数值一个值代表4个角两个值代表两条对角线，第一个值代表左上/右下，第二个值代表右上/左下三个值，第一个值代表左上，第二个值代表右上/左下，第三个值代表右下四个值，从左上开始，顺时针顺次安顿，第一个值左上，第二个值是右上，第三个值右下，第四个值是左下css-内边距padding 内边距，算标签在页面的宽度css-外边距margin 外边距，不算标签在页面的宽度margin的小性子1.父级的第一个子级的margin-top会穿透父级解决办法： 1.给父级加边框 2.overflow:hidden 3.不要用margin-top,用父级的padding-top2.兄弟之间的margin-top和margin-bottom会叠压盒模型 标签在页面中具体的地位页面的宽度:border-left + padding-left + width + padding-right + border-right页面的高度:border-yop + padding-top + height + padding-bottom + border-bottom 标签类型一、块标签 个性： 1 独占一行 2 默认宽度是父级的100% 3 反对所有的css款式 权重最大的标签是：title 在head标签中，权重最重的标签，为10. 1、div 史上最罕用的标签 写法<div></div> 语义：无意义 权重：无 2、h1-h6 题目标签 写法：双标签 <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> 3、p标签 4、 ul ol li二、内联标签内联标签分为： 内联标签 内联块标签个性：同类型的标签在同一排内容撑开宽高 不反对宽高，不反对margin和padding 1、span 无意义 无权重 2、strong 强调 强调作用 默认款式：font-weight 3、em 链接 链接作用舒适提醒1.href="..." 中的网址肯定记得加http://2.在新页面关上，要在标签中增加一个target属性，值为_blank；例如：<a href="http://www.baidu.com" target="_blank"></a>三、内联块标签个性： 1.同类型的标签排在同一排 2.内容撑开宽高 3.反对所有的css款式 4.代码换行被解析,解析宽度和父级的字体大小无关 img 图片标签 写法:<img src="门路" alt="图片说明"> 语义：图片 权重：alt利于搜索引擎优化标签类型的转化 display block 转为块标签 inline 转为内联标签 inline-block 转为内联块标签 none 显示为无 字体大小 font-size:具体数值;行高 line-height:具体的数值; 示意文字中一行的高度（高低居中）测量方法，从一行文字的顶端，量到下一行文字的顶端文字字体 font-family: 'simsun' 宋体 'simhei' 黑体 'Microsoft yahei' 微软雅黑 'kaiti' 楷体字体歪斜 font-style: italic 歪斜 normal 不歪斜文本款式（字体的粗细） font-weight:具体的数值(100 ~ 900)/ bold/bolder 例子:font-weight:100;文本款式的复合写法 font:style weight size/line-height family ; 舒适小提示： font的设置，必须蕴含 font-size、line-height和font-family，否则不失效 例如： font:20px/40px "simhei";文本对齐 text-align:; left 默认值 左对齐 center 两头对齐 right 右对齐首行缩进 text-indent:具体的数值/2em; 具体的数值就是偏移多少数值 2em,是指缩进两个字符字符间隙 letter-spacing:具体的数值; 舒适提醒：数值能够是正数；单词间隙 word-spacing:具体的数值; 舒适提醒：数值能够是正数；文本款式的继承问题 父级设置的文本款式，子级会享受父级的文本款式，就是继承 只有a标签的文字色彩设置例外，a标签的文字色彩须要独自设立色彩。浮动float 飘起来 left right浮动的个性1.浮动元素排在同一排2.浮动元素内容撑开宽高3.浮动元素反对所有的css款式4.脱离文档流 解决脱离文档流的形式为清浮动（4种清浮动的形式） 1.父级浮动 弊病：整个页面都会飘起来，margin居中会生效 2.给父级加高，子级有多高，父级就多高 弊病：不利于扩大 3.给父级加overflow:hidden;（hidden【暗藏】；scroll【呈现滚动条】） 弊病：裁刀，子级超出的内容全副干掉 4.标签清浮动 clear left ：标签左侧不容许呈现浮动元素 right：标签右侧不容许呈现浮动元素 both：标签两侧不容许呈现浮动元素5.晋升层级半级定位 position:relative 绝对于原地位的左上角，不会让出原来的空间 个别状况下会作为，脱离规范文档流父级来应用 position:absolute 相对定位【页面的左上角定位，脱离规范文档流父级】 position:fixed 固定定位【个别用来定广告位】z-index 只能用在脱离了规范流的元素中【position】float:文字围绕图片table 内部表格构造 thead 表格头部 tr行 th头部单元格【默认状况下，文本程度，垂直对齐，文本加粗】 tr td内容单元格 tbody tfoot鼠标悬浮 ：hover ：first-child第一个子元素 ：last-child最初一个子元素 ：nth-child(n）第几个子元素 ：nth-child(2n）偶数个元素 ：nth-child(2n-1）奇数个元素空格 后辈选择器 >子元素选择器 +第一个相邻兄弟 ~所有兄弟ftp:文件的上传下载服务器/空间：阿里，景安【文件夹】域名 www一级域名 二级域名 SEM:百度竞价，花钱的 SEO：优化，不花钱，代码，文件，服务器，内部文字【外链】品牌的关键词，行业的关键词 keywords: description: h1：题目单标签：<img/> <br/> <hr/> <mata/><link/>双标签：html body head h1~h6 p a i ul li ol strong em span div dt dd dl b u sup subform表单，用来做数据的提交，跟后盾交互 mathod: get【地址栏传输数据；电商网站；字符串】 post【暗藏的模式传递；传输明码；file，能够传输大文件】 action 属性，定义连贯的门路；如果不写，跳转到以后门路；input 输出元素 type 类型辨别 text 单行文本 placeholder 提醒文本，输出文本之后会主动隐没 maxlenth 最大长度 name 传输数据的键【重要的，必须增加】 password 明码框【cols列[宽]，row行[高]】 textarea 多行文本 radio 单选按钮【所有的按钮的name值必须统一[性别]】 checkbox 多选按钮【name值必须统一】 select option 下拉菜单 file浏览框 reset 重置按钮 button一般按钮 submit 提交按钮 value 提醒文本按钮的readonly和disabledreadonly 只读，能够提交数据disabled 不容许，禁止 不能够提交数据border-radius ：%或者px圆角box-shadow 背景暗影 box-shadow: 程度暗影的地位 垂直暗影的地位 含糊度 暗影的尺寸，内外部暗影【默认为outside】，内暗影inside分类：单层暗影，多层暗影，内暗影，外暗影图片设置暗影：外暗影，不能设置内暗影text-shadow 文本暗影语法 text-shadow：x,y,blur,color背景突变 指定两个以上的色彩进行适度分类： 线性突变：linear-gradient 径向突变：radial-gradient 反复线性突变：repeating-linear-gradient 反复径向突变：repeating-radial-gradient线性突变语法：background：linear-gradient（方向，color1，color2）径向突变语法：background：-webkit-radial-gradient(center,shape【circla圆形，ellipse椭圆】,size,color1,color2) shape示意径向突变的形态，默认状况下是椭圆的浏览器的兼容性： -o- Opear欧朋 -webkit- Safari Chrome -moz- Firefox火狐 -ms- IE浏览器默认状况下：方向为从上到下before和after 伪元素选择器iframe 内联框架varify 验证码opacity 图片，文本通明overflow 溢出background-Origin 背景图片地位background-clip 背景剪切伪类： ：hover ：focus ：active伪元素： first-letter：第一个文本 first-line：第一行 before 在元素后面插入元素 after 在元素的前面插入元素伪类： a:link 【未拜访的链接】蓝色 a:visited【已拜访过的链接】紫色 a:hover【鼠标滑过链接】没有色彩 a:active【已选中的链接】红色iframe 在一个html页面中增加另一个html（内联框架）<iframe name="" src="" frameborder="0|1" scrolling="no|auto|yes"><iframe/>name:规定iframe的名称src：规定iframe 中显示文档的URLscrolling:规定是否在iframe 中显示滚动条white-space: nowrap;【不让文本换行】overflow：hidden【溢出暗藏】text-overflow：ellipsis;【增加省略号】雪碧图 借助工具transition:过渡过程（不兼容的，须要加上浏览器前缀）transition：属性，破费的工夫，速度，提早transition-property: 规定利用过渡的css属性的名称（width height background transform）transition-duration:定义过渡成果。默认是0（2 ，3）transition-timing-function：规定过渡成果的工夫曲线。默认是ease（ease由慢到快 再由快到慢，linear匀速，ease-in由慢到快，ease-out先快后慢，ease-in-out中间慢）transition-delay：规定过渡成果何时开始。默认是0s。transform：rotate(0deg)；旋转0度deg为正值时，顺时针负值，逆时针缩放：scale（x，y）[x,y别离代表x轴y轴]x是倍数，1为不缩放；大于1 放大；小于1放大能够为负值，如果x为负值，沿着x轴翻转如果y轴为负值，沿着y轴翻转如果都为负值则沿着中心点翻转x,y的值为倍数，不能用px歪斜：skew(x,y)100.本期的教程到了这里就完结了啦,让咱们一起致力走向巅峰!