1.W3C 标准由结构,表现,行为三部分组成 W3C的嵌套规范: 1)块级元素可以包含行级元素或块级元素,但行级元素只能包含行级元素; 2) p,h1-h6,dt标签中只能包含行级标签,不能再包含块级标签; 3)块级元素与块级元素并列,行级与行级并列。| 2.项目开发时,项目文件和目录名中不能出汉字和空格之类的其他符号,文件和目录名一般以字母或下划线开头_ 目录名:taobaopro imahes/img/pic video music file web/sites... 文件名:index.html(首页) product.html(产品页) order.thml(订单页) 全部小写可加下划线 文件和目录名一般以字母或下划线开头_,其后可以出现字母,数字,下划线。。。 1.HTML是一种超文木标记语言,它不属于编程语言。 2.HTML5是2014后推出的,它是公认的下一代web语言,是重要的网络推手。 3.HTML具有简易性、可扩展性、平台无关性和通用性等特点。 4.网页分为静态和动态两种。 5.五大主流浏览器:IE(Edge), FireFox,Chrome,Opera, safari6.浏览器内核由渲染引擎和JS引擎两部分组成。 内核:Trident(IE), Gecko(FireFox), Webkit(safari/chrome),Blink(chrome/opera)国内大多数浏览器采用的双核驱动(Trident&Webkit或Trident&Blink> 移动端: iphoe/ipad采用的是webkit内核,android4.4以下版木采用的webkit内核,而4.4以上:版本采用是blink内核。 7.常用的专业开发工具有: sublime,HBuilder, vscode,Atom, Webstorm 8.一个网页页面基本组成: <html> <head></head> <body></body> </html> 9.标签分块级和行级(内联)两种。 块级独占一行,识别宽高,如果不设置,宽度为整行宽度,高度为内容实际的高度; 行级不独占一行,不能设置宽高,宽高分别为内容实际的宽高; 块级标签可以通过设置样式: display:inline;转换为行级标签,而行级标签可以通过设置样式: display:block;转换为块级标签 学过的块级标签有: div,p,h1-h6,ul,ol,pre,table,address等 行级标签: span,a,b,strong,i,em,sup,sub img属于行级块标签。相当于执行了display:online-block;操作。 10.在开发过程中,尽量要使用语义化标签。
day2
标签签名,标签属性和文本三部分组成(注意:单标签没有文本内容) 2.标签属性是对标签的一种描述方式。 3.标签属性分通用属性,自有属性和自定义属性。 4.通用标签:所有标签都有的属性(除<br/>标签外)。 通用标签有: id:用来给标签取一个唯一的名称。id名称在一个网页中必须是唯一的 class:用来给标签取一个类名。 style:用来设置标签的行内样式。 title:当鼠标移到该标签,所显示的提示内容。 5.用户自定义标签属性:通常用来传值或图片的懒加载等方面。 格式:data-*(*表示任意的,通常是个单词) <img data-src="图片路径" alt="提示文字" /> <p data-id="goodsid">...</p> 6.table表格,主要用于呈现格式化数据。 表格是由行和列组成。 格式<table> <tr> 行 <th></th>表头 :th表头的意思 自动居中 加粗 起说明作用。 <td></td>表体 列 ... </tr> 行 ... </table> 7.table表格属性: border:设置表格边框 width :设置表格宽度 align:设置表格对齐(left(默认)/center/right) cellpadding:设置单元格文本与边框的距离 cellspacing:设置单元格边框的间距 8.跨行/跨列属性主要用来绘制复杂表格。还得删减! rowspan:跨行 clospan:跨列 table[border=1 with=500 align=center]>tr*3>td{内容区$$}*3 valign:垂直对齐(top/middle/bottom) 9.完整表格组成:caption(标题)、thead(表头)、tbody(表体)、和tfoot(表尾)四部分组成。 10.form表单标签是所有标签最核心标签之一。他是实现前后段交互的一个重要标签。 常用属性: name:表单名称 action:表单数据提交的地方(通常是一个后台文件名(.jsp/.php/.asp/.aspx/.py等)/网址)。如果是#,表示提交到的当前文件下。 method:前端提交数据到后端的方法,主要有:get(提交的数据会暴露)和post(提交的数据不会暴露),默认的是get. 11.表单元素分为: 1>input类(标签):主要用来输入,选择或发出指令。 type:text/password/radio/checkbox/file/button/image/submit/reset a.text:单行文本输入框 type=“text”可以不写默认值。 属性:placeholder(提示)、name(命名)、value(初值)、minlength和maxlength(最少、最多输入的字符个数)、disabled(失效)、readonly(只读) pattern(正则匹配)、 b.password:密码框 属性与text一样 c.radio:单选钮,通常是两项以上。常用的属性有:name(必须要有)、value/checked(默认选中)、disabled(失效)、readonly(只读) d.checkbox:复选框,可以用来选择0项、1项或多项。常用的属性有:name(必须要有)value/checked(默认选中)、disabled(失效)、readonly(只读) e.file:文件上传按钮 f.button:普通按钮 发送指令 通常用它去执行脚本代码,它有提交功能和submit功能一样。 常用的属性有:value(按钮的标题)、disabled(失效) g.image:图片按钮 用法和button完全一样。有一个特殊属性src(用来加载提示图片,用它替换了value) h.submit:提交按钮,用来将表单数据提交到后台。 常用属性:value(按钮的标题)、disabled(失效) j.reset:重置按钮,将表单所有组件输入的内容全部清空还原为初始状态。 常用属性:value(按钮的标题)、disabled(失效) <input type="text" name="test" placeholder="请输入一行文字" disabled="disabled"><br> <input type="text"/> 定义供文本输入的单行输入字段 <input type="password"/> 定义密码字段 <input type="submit"/> 定义提交表单数据至表单处理程序的按钮 <input type="image"/> 定义图片提交按钮 <input type="radio"> 定义单选按钮 checked{boolean} 属性为选中状态,true为选,false为未选中 <input type="checkbox"> 定义复选框 checked{boolean} 属性为选中状态,true为选,false为未选中 <input type="button"> 定义普通按钮 <input type="reset"> 定义重置按钮 <input type="file"> 定义文件框 2>textarea类 文本域(也可以叫多行文本框),主要用于输入大批量的内容。 常用属性:name/id/cols列数/rows行数/placeholder/minlength/maxlength/required(必须输入)/value 3>select类 下拉列表框,默认用于下拉列表框。用option呈现每一个选项。 multiple属性:表示可以实现多选,这时的下拉列表框变成了列表框。 size:最多显示的行数 4>button类 普通按钮,具有提交功能,可以单独使用,不写在form元素中;如果写在form中有提交功能。 12.iframe:框架集,是用来将多个网页文件组合成一个文件 常用属性: name属性∶规定框架的名称。 框架名 src属性︰规定在框架中显示的文档的URL。 引入的外部的html文件 scrolling属性∶设置滚动条。 滚动条(yes/no/anto(内容超过自动加滚动条)) width属性: iframe设置宽度。 (%/px) height属性: iframe设置高度。 (%/px) frameborde江属性:设置框架边框。是否有边框(1/0) marginheiht:框架离顶部和底部的距离 (%/px) marginwidth:框架离左右的距离 (%/px) 注意: 在实际开发中尽量减少使用iframe,因为破坏了前进和后退功能,且不利于SEO(搜索引擎优化) div布局也可以是实现相同的效果。 day3
1.CSS层叠样式表,美化网页:使用CSS可以让结构HTML与表现CSS分离。 2.CSS基本语法:选择器 { 属性:属性值; } 3....css的引用方式:行间样式、内部样式、外部样式、导入外部样式。 行间样式:直接在标签上写样式 内部样式:在文件内部书写样式 <style type=“text/css”> 样式内容 </style> 外部样式:<1>先创建一个CSS文件; <2>再用link标签引入这个文件,link:css+tab。 导入外部样式:<1>先创建一个css文件; <2>在style标签中用@import导入这个样式文件。 以上四种CSS引用方式的区别: 行间样式只作用当前标签,而内部样式作用于当前文件,外部文件可以被多个html文件引用。 在实际项目开发中最多使用外部样式! 外部样式分为link引入和import引入两种方式。 1.link是XHTML标签,除了加载css外,还可以定义RSs等其他事务;@import属于CSs范畴,只能加载css。 2>link引用css时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。 3.link是XHTMIL标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。 4>link支持使用Javascript控制DoM去改变样式;而@import不支持。 4....CSS选择器分类: 1.*:匹配html中所有元素。(注意*号 的性能比较差因为它要匹配所有元素,所以在开发时不建议使用) 2.标签选择器:用来匹配所对应的标签。 3.类选择器:用来匹配class命名的标签。 .类名 4.id选择器:用id命名的标签。 id必须唯一不允许重复出现 #id 5.派出选择器:根据上下文来确定选择的标签 6.伪类选择器:(后面说) 7.伪元素选择器 5.选择器的分组 让多个选择器(元素)具有相同的样式,一般用于设置公共样式。 6.选择器的继承 子元素可以继承父元素的样式,反之不可以。 7....样式权重 !important(10000)>内联样式(1000)>id选择器(100)>类、伪类和伪元素选择器(10)>标签选择器(1) 8....CSS字体 1.font-size; 字号 px像素,%相对于父元素的大小 2.font-family; 字体 3.font-style; 样式 normal正常 italic斜体 oblique倾斜的字体 4.font-weight; 加粗 normal正常 bold粗体 bolder比bold粗 ,lighter比normal细 {100-900}定义由粗到细的字符 5.font-height; 行高 字体最低端与字体内部顶端之间的距离 6.color: 文字的颜色 name rgb(r>0-255 g>0-255 b>0-255) 16进制写(以#号开头,后跟6位(#rrggbb)或3位(#rgb)16进制数) 7.text-decoration; 文字修饰 normal正常 underline下划线 line-through贯穿线 overline上划线 8.text-align; 文本对齐方式 left center right 9.text-transform; 字母大小写 none默认 capitalize将每一个单词的第一个字母转换成大写 uppercase转换成大写 lowercase转换成小写 10.text-indent; 文体缩进 首行缩进{number+px}字符 {number+em}像素 tip:font复合属性: font:font-style font-variant font-weight font-size/line-height font-family; 注意属性值的位置顺序,按照顺序去写。 除了font-size和font-family之外,其他任何一个属性值都可以省略。 font-variant:文本修饰 normal/small-caps(让大写字母变得小一些)/ 9....CSS背景 1.background-color:背景色(transparent/color) 2.background-image:背景图(none/url) 3.background-position:背景图像铺排方式(repeat/no-repeat/repeat-x/repeat-y) 4.background-position:设置对象的背景图像位置(x-number/top/center/bottom)(y-number/left/center/right) 5.background-attachment:背景图像滚动位置(scroll/fixed) 6.background:设置背景的复合写法。 background:color image repeat attachment position body{background: #fff url("beijing/222.jsp") no-repeat fixed center center} 10....CSS伪类选择器 伪类:专门用来表示元素的一种特殊状态。 常用的伪类选择器: 1. a标签的伪类: a:visited:已被访问的状态。 a:link:未访问状态 a:hover:鼠标悬停状态。 a:active:用户激活。 2.focus 获得焦点(input鼠标点击单选框 单选框变颜色) 3.first-child(第一个)/:last-child(最后一个)/:nth-child(number )(第number个) 11.属性选择器(用的较少) [属性名]:包含有指定属性名的元素(常用) [属性名=值]:属性名的值为指定值的元素(常用) [属性名~=值]:属性名的值包含指定值的元素 [属性名^=值]:属性名的值以指定值的开头的元素 [属性名$=值]:属性名的值以指定值的结尾的元素 12....关系选择器 a.空格:后代选择器 b.>:只选择儿子元素 c.+:兄弟选择 13....CSS伪元素 1>CSS伪元素和伪类的区别: css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分。 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。 它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称为伪类。 伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说,我们可以通过:before来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。 2>伪元素&伪类的特点: 伪元素和伪类都不会出现在源文档或者文档树中 伪类允许出现在选择器的任何位置,而一个伪元素只能跟在选择器的最后一个简单选择器后面 伪元素名和伪类名都是大小写不敏感的 有些伪类是互斥的,而其它的可以同时用在一个元素上。(在规则冲突的情况下,常规层叠顺序决定结果)。 3>before/:afeter/:first-letter/:frest-line:前面可以是1个冒号也可以是双冒号 ::selection/::placeholder/::backdrop:前面只能是双冒号
day4
1.什么是浮动? 浮动就是让块级标签不独占一行。目的(使用场景):把块级标签元素可以排在一行上。 float: left/right/none(默认,不浮动)/inherit(从父元素上继承float值) .box 2.浮动的原理:就是让元素脱离文档流,不占用标准流。 3.浮动后后面的元素不管是块级还是行级元素不会显示在下一行。 4.清除浮动:让后面的元素自动调用到下一行。 方法:添加空标签,并设置样式:clear:both; clear:left; 清除左浮动 clear:right;清除右浮动 clear:both;清除全部 clear:none;左右浮动都不清除 在要清除浮动的父级添加样式:overflow:hidden; (首选方法) overflow:hidden;超出部分隐藏,也可以用来实现清除浮动。 在要清除浮动的元素的父级添加伪元素,并设置样式: .父元素:after { content: ""; display: block; clear:both; } 注意:在实际项目开发中我们一般首选第2种方案。 6.CSS盒子模型 每一个元素就是一个盒子,一个盒子由外边距margin(外边距)、border(边框线)、padding(内边框)、content(内容)组成 IE的盒子中的content又由padding和content组成。 区别外边距和内边距是以边框区别的。 系统默认外边距为8px。 1、外边距margin:值边框线之外的距离。 margin:可用来设置任意一个边的边距,可以带1到4个参数。 1个:表示上下左右都有这样的外边距 2个:表示上下 左右外边距 3个:表示上 下 左右 4个:表示上 右 下 左 margin-left:左边距 margin-right:右边距 margin-top:上边距 margin-bottom:下边距 display:block 将行级标签转为块级标签 2、内边距padding:元素的文本内容与边框之间的距离。它的用法和margin一样。 3、边框border border-width:边框的宽度。 border-style:边框的样式。 none:默认值,无边框。 solid:定义实线边框。 double:定义双实线边框。 dotted:定义点状线边框。 dashed:定义虚线边框。 border-color:边框颜色 边框简写{width style color} 复合写法:border:border-width border-style border-color这些没有位置之分 盒子的真实尺寸 盒子宽度=width+padding左右+border左右 盒子高度=height+padding上下+border左右 4、display属性:用来设置元素的显示方式。 属性值: none:不显示元素 block:块显示,在元素前后设置换行符。目的:将行级标签准换为块级标签(因为行级标签不识别宽高,而块级标签识别,准换后,行级标签也可以设置宽高了) inline:行内显示,将块级标签转换为行级标签。 宽高自适应 inline-block:将块级或行级标签转换为行内块级标签。 5、table样式 table一般不用来布局,主要用来个格式化数据。 属性: width:宽度 height:高度 border-collapse:collapse:单线边框 border:边框线 td,tr属性: width:宽度 height:高度 border:边框线 text-align:文本左右对齐(left(默认)/center/right) vertical-align:文本垂直对齐(top/middle(默认)/bottom) 7.列表样式 不是描述性的文本的任何内容都可以认为是列表。比如:菜单、商品列表等。 a.列表类型 无序列表ul 有序列表ol 用户自定义列表dl ul和ol的列表项都是用li表示的,而dl是又一个dt和一个或多个dd组成的。 dl一般用来设定一个定义,比如名词解释。dt:标题,dd:描述,用来对dt的内容进行解释说明的。 b.样式(用来修饰标识类型) list-style-image:用图像表示标识 list-style-position:标识的位置(inside/outside(默认值)) list-style-type:标识类型 简写: list-style:list-style-image: list-style-position: list-style-type: list-style的值可以任意顺序列出,而且可以任意省略,只要提供有个值,其他都自动为默认。 list-style-type的属性值: a.无序 disc(默认值)/circle/square实心圆 空心圆 实心矩形框 b.有序 decimal/decimal-leading-zero/lower-roman/upper-roman/lower-alpha/upper-alpha/ lower-greek/lower-latin/upper-latin...... 有序和无序: none 取消 用的最多 取消前面标识符 8.轮播图 作用:主要用于产品的展示或公司相关的宣传。 组成: a.轮播的组图(至少两张以上,不能太多) b.控制器 c.计数器 《重要》 day5
第五天相当重要呀!!! 1、定位(position) 2、网站整体布局 3、BFC 4、IFC 1、1.定位(position) 设定元素在文章的位置。 使用非常频繁 会将标签(元素)转换为块级。 2、2.定位的分类(属性值)《重点》 a.static:静态定位, 默认值,没有定位,不能设定偏移值(left/top/right/bottom)会占用标准流(文档流) b.relative:相对定位 会占用标准流(文档流),它会出现在文档流中它该出现的位置。可以设置偏移值改变他的位置。它相对于自身所在的位置做偏移。 c.absolute:绝对定位 脱离文档流 ,相对于body做偏移。 绝对定位一般和相对定位结合使用,它相对的父级是relative定义的元素做偏移。 relative的元素必须是absolute的父级。在项目开发中,一般用relative+absolute结合使用。 d.fixed:固定定位 脱离文档流 ,相对于浏览器窗口左上角(0,0)做偏移,它与relative设定的对象没有关系,也就是说他跟父级的定位没有任何关系。 一般在开发中用来固定导航栏。 3、z-index 值越大 就在最上层 当多个元素添加绝对定位,元素将会叠加在一起,使用z-index可以设置元素显示的层次。 文档流默认的z-index的值为0。 绝对定位用 用在static和relative元素上将无效。 4、网站的开发策略:先整体在局部,自顶向下,逐步细化。 a.双飞翼布局:由三列组成,两端固定,中间自适应。 会叠加 双飞翼布局的优点︰ (1)兼容性好,兼容所有主流浏览器,包括万恶的IE6。 (2)因为在DOM中center_panel在三列结构的最前面,因此可以实现主要内容的优先加载。 b.圣杯布局: 由三列组成,两端固定,中间自适应。外观与双飞翼布局一样。 布局时与双飞翼比增加了定位和偏移设置。 不会叠加 c.侧边栏固定布局 1.两栏布局《重点》 左侧固定,右侧自适应 左侧自适应,右侧固定 左右都固定 2.三栏布局《重点》 a)左侧固定,中间自适应,右侧固定 b)左侧自适应,中间和右侧固定 c)左侧和中间固定,右侧自适应 6、BFC&IFC FC:Fomatting Context(格式上下文)。它是CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。分为:BFC和IFC。 1)BFC:块级格式上下文 a)形成BFC的条件 i)浮动元素(float除none以外的值> ii)定位元素(position(absolute/fixed)) iii) display(值为inline-block/table-cell/table-caption时) iv) overflow(值为hidden/auto/scroll时) b)BFC特性(规则) i)内部的盒子会在垂直方向上一个接一个的放置 ii)垂直方向上的距离会叠加值由最大margin决定(如果不要叠加,就需要将该盒子变成一个独立的盒子) iii)BFC的区域不会float元素区域重叠 iv)计算BFC的高度时,浮动元素也参与计算 v)BFC就是页面上的一个独立的容器,容器里面的子元素不会影响到外面的元素 c)BFC的作用 i)解决margin重叠的问题<添加独立BFC> ii)解决浮动高度塌陷的间题<在父级添加overflow:hidden> iii)解决侵占浮动元素的问题<添加overflow:hidden清除浮动> 2)IFC:内联(行级)格式上下文 a)形成IFC的条件 i)font-size ii)line-height iii)height iv)vertical-align b)IFC特性(规则) i)IFC的元素会在一行中从左至右排列 ii)在一行上的所有元素会在该区域形成一个行框 iii)行宽的高度为包含框的高度,高度为行框中最高元素的高度 iv)浮动的元素不会在行框中,并且浮动元素会压缩行框的宽度 v)行框的宽度容纳不下子元素时,子元素会换下一行显示,并且会产生新行框 vi)行框的元素内遵循text-align和vertical-align(顶端对齐) 容器的高度:/height = line-height + vertical-align