|
学习前段也有20多天了，在这里分享一下这几天的学习笔记！Web标准的组成（重点） Web标准不是一个标准是一系列的标准： 结构标准（html） ---- 搭建页面的结构 表现标准/样式标准（css）---- 页面样式的美化 行为标准（javascript）--- 实现页面的交互效果 HTML的结构（重点）一对html标签里面嵌套一对head标签（给浏览器解析用的）和body标签（用户看的），head标签里面还嵌套了一对titlie标签（用户可以看见的） Html标签的关系• 嵌套关系 --- 后代关系，嵌套关系可以多层嵌套不单是两层； • 并列关系 --- 兄弟关系
div和span（重点）div标签布局标签，主要是布局用的大标签，也是主要标签; 特点：没有语义，独占一行； span标签布局标签，不用来做主要布局，一般放特殊效果的文字或者小图标； 特点：没有语义，一行共存多个； 图像（图片）标签图像标签 --- img ，单标签 <img />,可以配合src属性将图片引入html页面，<img src=“图片路径” /> 超链接a超链接：实现页面之间的跳转，a标签，双标签； <a href=”#”></a> 相对路径相对路径又分为：同级路径、下级路径、上级路径 同级路径文件（html文件和css文件）和目标文件在同一个目录文件下面平级存在，我们可以直接书写目标文件名称（如果是图片就直接书写图片名称） 下级路径：文件（html文件和css文件）和存放目标文件的父级是平级存在，我们可以先书写目标文件的父级名称+/+目标文件名称 绝对路径以web站点根目录为参考基础的目录路径，其实一般分为两种情况： 01、带有盘符的路径，坚决不能使用， 例如：“D:\web\log.gif”; 02、完整的网络地址，可以使用，只要网络资源一直存在， 例如： http://www.itcast.cn 锚点定位作用：实现页面内部的跳转 分两步实现锚点链接： 第一步：找目标，想要跳转到的位置添加id=”id名称” 第二步：设置锚点按钮，超链接a， <a href=”#id名称”>跳转到目标</a> base标签base标签可以统一设置超链接a的打开方式,书写在<head></head> 之间； <base target=“_blank”> 表格表格的结构：一对table标签嵌套tr标签，tr标签嵌套td标签； table表示表格整体，tr表示行，td表示单元格（列）； 列表列表分为：无序列表、有序列表、自定义列表 无序列表结构：ul嵌套li标签，li的个数不定，按照设计稿需求进行设置； 注意：01、<ul></ul>中只能嵌套<li></li> 02、无序列表的所有默认样式我们都不用，后期会用css来进行设置 自定义列表：dl嵌套dt和dd标签，dt表示描述标题，dd描述的内容； 表单完整的表单的组成提示文本、表单、表单域（总体的提交数据的标签）组成 表单的作用搜集用户信息，并且提交到后台 input控件输入的意思，可以更改type属性的属性值来指定不同的控件类型； 还有对应的name、value、size等几个属性； Input表单属性01、value 默认值，没有交互效果 --- value=” 请输入您的名字”/、02、placeholder占位符 html5的新属性，有交互效果 --- placeholder="请输入您的名字" 03、name 给当前的数据起一个名字，让后台工作人员调用 常见的input表单控件文本框：input的type取值为text 可以设置value属性设置默认的值，<input type=“text” value=“默认值” /> Input按钮组控件普通按钮：<input type=“button” value=“普通按钮” /> 必须要自己设置value值； 提交按钮：<input type=“submit” />； 可以设置自己的value值也可以用默认的； 重置按钮：<input type=“reset” />；可以设置自己的value值也可以用默认的； 图片按钮：<input type=“image“ src=”图片路径” /> src属性必须书写查找图片路径； 文件域：<input type=“file” /> 上传文件使用； select下拉列表
一对select标签嵌套多对的option标签
如果option有selected=“selected”表示默认选中； <select> <option selected="selected">北京</option> <option>上海</option> </select> form表单域标作用在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。 默认属性：action=“url地址” ----- 用于指定接收并处理表单数据的服务器程序的url地址。 method=“ 提交方式” ---- 取值 get/post，get是明文提交，post是密文提交； name=“名字” 设置不同的取值名称用于后台提交； Css的作用Cascading Style Sheets，简称层叠样式表，主要是用来进行页面的版面布局和外观样式的美化； 使用css的原理能够将结构html和样式css分离书写，简化代码，提高可阅读性； css的书写位置分为3类：行内式、内嵌式（内部样式）、外部链接式 Css属性书写语法属性：属性值； Css样式书写格式：选择器 { 属性1:属性值1; 属性2:属性值2; …… } 选择器：指定CSS样式作用的HTML对象（要更改样式的标签），花括号内是对该对象设置的具体样式。 行内式直接在标签的开始标签身上添加一个 style=“”属性，然后在引号里面书写css属性和属性值即可、。 注意：行内样式没有实现结构和样式分离，尽量不用： 例如：<div style=“color:pink; font-size:16px;”>我是行内样式</div>; 内部样式（内嵌式）：书写在head标签里面，title标签下面，以一对style标签包裹，实现了结构和样式的半分离； 外部链接使用外部链接的好处：实现了结构和样式的完全分离，代码简介，可读性强； 使用外部链接的步骤01 新建：.css格式的css文件，直接书写选择器以及css样式； 02 引用：利用link标签引入新建的css文件，要配合link的三个属性 rel关系，type文件类型 （可以省略），href文件路径； 三种链接方式的使用总结行内样式表 内部样式表 外部样式表 Css选择器Css选择器的分类Css选择器分为两类：基础选择器和高级选择器（复合选择器） 基础选择器：标签选择器（html选择器）、类选择器、ID选择器 复合选择器：后代选择器、并集选择器、指定标签选择器 CSS选择器作用选择标签的，把想要选择的元素标签选择出来。 标签选择器：以标签名称命名的选择器，可以把将页面中所有的同类元素全部选中，所以实际工作中标签选择器不推荐大家使用； 类选择器（重点）类选择器定义类选择器使用有一个过程： 01 定义： 在css里面用点“ . ” + 类名称 +{ css键值对 } 进行样式定义; 02 调用：在html里面哪个标签需要，就在开始标签敲空格class=“类名称”进行调用； 类选择器的命名规则：不能用纯数字、数字开头的、中文命名； 但是可以用数字结束。 类选择器特殊用法（多类名）一个标签身上只能使用一个class，如果想要调用多个类名我们可以在一个class里面直接以空格隔开直接书写另一个类名称即可； 例如：<div class=“red font100”>一个元素调用多个类名</div> ID选择器（了解）id选择器的定义使用id选择器使用有一个过程： 01 定义： 在css里面用 “ # ” + id名称 +{ css键值对 } 进行样式定义; 02 调用：在html里面哪个标签需要，就在开始标签敲空格id=“id名称”进行调用； id选择器的命名规则：不能用纯数字、数字开头的、中文命名； 类选择器和id选择器的区别：类选择可以重复使用，只要样式一致就可以重复的使用同一个类名称； id选择器是唯一的不能重复使用，一个id名称一个页面只能出现一次； 5、文字控制属性文字颜色 colorColor取值a、直接写英文单词yellow，red等等 b、16进制表示#aabbcc或者#abc c、rgb（）如rgb（0，0，0） d、rgb（）如rgba（0,0,0,0.5）a为透明度 文字大小 font-size 文字字体 font-family取值可以取一个或者多个，如果取多个值要用英文的逗号隔开，表示先找第一个字体如果没有就往后面查找，依次类推； 如果是汉语的文字要用引文状态的引号引起来； 字体加粗 font-weight如果要用数字来表示加粗或者不加粗，千万不能书写单位px； 字体样式(风格) font-style实际开发中我们很少让文字倾斜，但是我们会让倾斜的i和em不倾斜； 文本水平居中 text-align: center;text-align文本居中控制，取值：left、right、center； text-align让文字在父级盒子里面居中显示； 文本的行高 line-height line-height取值为数字+px单位，可以设置文字行与行之间的距离； 如何量取设计稿的行高？从第一行文字的开始到第二行文字的开始就是行高 实际工作中一般只用：font:文字大小 字体； 文本线条装饰 text-decoration text-decoration:none;没有线 text-decoration：underline；下划线 text-align: center; 详解注意：想要元素利用text-align: center;居中显示，必须要有一个父级盒子； 复合选择器复合选择器就是把基础选择器组合起来使用 后代选择器（重点工作中常使用）后代选择器的html结构是有嵌套的后代关系（父子级），css书写的时候 一个空格表示了后代关系 子元素选择器只能选择嵌套关系的父子关系得到元素，也就是嵌套的第一层元素，一个大于号“>”表示选中子级； 通俗说:不管后代嵌套了多少层，我们只选择第一层子级元素； 并集选择器（重点）样式一致的盒子如果单独设置样式需要书写多次，我们可以把样式相同的盒子只写一个样式，用英文的逗号隔开即可； 一个逗号表示并集关系； 好处：使用并集选择器书写代码可以节约代码量，重复的代码只写一遍； 链接伪类选择器链接的伪类四种状态： a:link 未访问的链接（访问前） a:visited 已访问的链接（访问后） a:hover 鼠标移动到连接上（鼠标经过） a:active 选定的链接（按下鼠标的时候） 注意：以上的顺序不能颠倒； 实际工作中我们不需要将四个伪类状态都书写，如果4个都要写顺序不能乱； 实际应用（重点一定要会写）
设置一个总体的a的样式，表示所有状态的样式一致，然后单独设置鼠标经过a:hover 的样式；
标签显示模式（重点要理解）实际开发的时候有的需要独占一行，有的需要一行放多个，所以把标签的显示模式分为以下三种： 块级元素：自己独占一行； --- 代表标签 div、h标签 行内元素：一行可以共存多个；--- 代表标签 span 、a 行内块元素：一行可以共存多个； --- 代表标签 img 、 input 块级元素(死记硬背)特点：独占一行，设置宽高能够生效，也可以控制外边距和内边距； 默认的宽度是父级的100%； 是一个容器盒子，里面可以放行内或者块元素； 注意：p标签是块级元素，但是p标签里面不能放div标签； 同理h标签（标题标签）dt等都是文字类块级标签，里面尽量不能放其他块级元素； 常见的块级元素：div/p/h1-h6/ul/li/dl/dt/dd 行内元素(死记硬背)特点：01、一行可以共存多个，设置宽高不生效，一般宽高是自己本身的内容撑开； 02、行内元素里面最好只放文本或者其他的行内元素； 常见的行内元素：a span u s del strong em i ins 等； 注意：超链接里面不能嵌套超链接； 特殊情况a标签里面可以放块级元素，但是最好给a转换成块级模式； 行内块元素：一行共存多个，默认宽高由内容撑开，但是可以控制固定的宽度和高度和外边距，内边距； 一句话总结：行内块元素可以一行共存多个，能够设置宽高并且生效； 三种显示模式相互转换将元素转化为块级元素：display:block; 将元素转化为行内元素：display:inline; 将元素转化为行内块元素：display:inline-block; 实体化三属性（重要滴很）宽 width 高 height 背景 background 注意：这三个属性属于我们布局的中流砥柱，只要这三个值设置好了，我们书写的网页就很少出现兼容问题； background属性背景颜色background-color：background-color取值是具体的色值 background-color: #0ff; 背景图片background-image：background-image取值是url(图片路径) background-image: url(img/03.jpeg); 背景平铺background-repeat：background-repeat 取值： 平铺：repeat 不平铺：no-repeat X轴平铺：repeat-x Y轴平铺：repeat-y 图片定位background-position：background-position:X坐标（水平方向） Y坐标（垂直方向）； 注意：如果使用方向英文只写一个值另外一个值就默认居中，所以两个值建议都写； 精确取值background-position:X坐标（水平方向） Y坐标（垂直方向） 背景图片固定：background-attachment:fixed; 背景图片定位是咩有父级的； 背景的复合写法background:背景颜色 url（） 平铺方式 是否固定 X轴 Y轴； 注意：属性值没有书写顺序，没有的属性可以省略不写； 实际工作中建议大家使用复合写法； 背景颜色半透明background：rgba(0,0,0,透明度); • R红色 g绿色 b蓝色 a透明度小数点前面的0可以不写； • 注意：设置了背景颜色透明是不会影响盒子里面的内容的透明度的； Css的三大特性分为：层叠性（覆盖性）、继承性、优先级； 层叠性（覆盖性）层叠性（就近原则）：如果一个标签书写的样式重叠冲突了，后写的css样式会把先写的样式覆盖掉，样式不冲突的话就不会层叠； 继承性有一些css属性子级是可以继承父级的，一般文字控制属性都会被继承，a标签除外，需要单独设置； 注意：除了文字属性，其他属性基本上都不能继承 盒子模型盒子模型组成 内容： 实体化宽高和里面的文字图片等等 边框： border 内边距： padding 拉开内容到盒子边缘的距离； 外边距： margin 拉开盒子与盒子之间的距离； 边框border（死记硬背）边框的综合写法边框的宽度：border-width:3px; 边框的样式：border-style:solid; 常用的线条样式：solid实线 dashed虚线 dotted点线 边框的颜色： border-color:red; 综合写法：border:边框宽度 边框样式 边框颜色； 设置不同方向的边框border-方向英文如果只写border表示四个方向的边框都有，也可以利用 “ – 方向英文”来设置不同方向的边框： 方向英文：left/right/top/bottom/center border:3px solid #ccc; 四个边框都有 border-left:3px solid #ccc; 左边框 border-right:3px solid #ccc; 右边框 border-top:3px solid #ccc; 上边框 border-bottom:3px solid #ccc; 下边框 Csss设置细线表格（死记硬背）table,th,td{ border:1px #ccc solid; border-collapse:collapse; } border-collapse:collapse;合并相邻的边框 注意：如果整个页面只有一个table我们直接写table样式，如果有多个我们可以给table设置一个父级用后代选择器去书写； Padding相关设置（不同方向的设置）：margin外边距作用：拉开盒子和盒子之间的距离margin相关设置让盒子居中的条件01 盒子的显示模式必须为块级元素 02 盒子必须要有固定的宽度 03 利用margin：上下 auto；/ margin：auto；/ margin-left:auto; margin-right:auto; 注意：上下的值可以自定义设置，如果没有设置为 margin:0 auto; 浮动：浮动布局的原理应用让元素脱离文档流，进行页面效果的布局； 作用：让多个盒子水平排列一行显示实现网页布局，盒子左右对齐，最早是用来实现文字环绕文字； 属性：float取值：left right none（不浮动默认就是） 浮动的特点浮：浮动之后的元素脱离了标准流； 漏：盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来； 特1、浮动之后的盒子的显示模式会更改为行内块元素的特点； 2、浮动之后的元素之间的没有缝隙的，紧贴在一起，顶部对齐； 3、如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行； 4、常见布局（重点一定要会写）CSS精灵技术好处• 使用css精灵技术可以减少对服务器的请求次数； 原理可以将多个小图标合并成一张图片，成为css精灵图或者css雪碧图； 精灵图的使用精髓• Css精灵图的技术核心：精确测量每一个小图标的大小和位置，然后设置图片定位的X轴和Y轴的位置； • background:url(图片路径) no-repeat -X轴 -Y轴； • background-position: -X轴 -Y轴; 一句话总结：就是背景图片的定位位置设置 由于前段基础班课程还没结束，帖子字数要求上限，因此到这里就结束了！
| 
收藏
淘帖
踩
