1、基础班第一天html
1.1、Web标准(重点)Web标准不是某一个标准,而是由W3C组织和其他标准化组织制定的一系列标准的集合。 由于各个浏览器的内核不同,所以我们要遵循W3C组织制定的web标准让所有浏览器最终显示的效果完全一致‘’ 01Web 标准构成 构成: 主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。 结构标准HTML:页面的基本结构的搭建; 表现标准CSS:页面的样式美化 行为标准javascript:实现页面的交互 1.2、html的基本结构一对html标签嵌套一对head标签和body标签,head标签嵌套一对title标签,head是给浏览器看的,body是给用户看的; <html> <head> <title>标题</tilte> </head> <body> 网页主体内容 </body> </html> 1.3、HTML常用标签
标题标签h 段落标签p水平线标签hr ,div 和 span标签,换行标签br 链接标签a
2、基础班第2天html
2.1/表格 table
01 表格的主要目的是用来显示特殊数据的 02、一个完整的表格有表格标签(table),行标签(tr),单元格标签(td)组成,没有列的标签 03、<tr></tr>中只能嵌套<td></td> 类的单元格 04、<td></td>标签,他就像一个容器,可以容纳所有的元素 2.2、无序列表 ul
1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。 2. <li>与</li>之间相当于一个容器,可以容纳所有元素。
2.3、有序列表 ol
2.4、自定义列表 dl
2.5、 表单标签
表单作用:表单目的是为了收集用户信息。
表单控件: 包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。 提示信息: 一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。 file:///C:/Users/Romal/AppData/Local/Temp/msohtmlclip1/01/clip_image001.png表单域: 他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。
3、基础班第3天css
1、 CSS的作用:设置网页的样式,美化页面 2、 CSS按照放置的位置可以分为三类:行内样式、内部样式(内联样式)、外部样式 01行内样式:直接将css样式写在标签里<div style=“color: skyblue; ”>龙马,最棒</div> 02 内部样式:将css写在head标签里<style> div { color: skybllue ;} </style> 03 外部样式:直接重新建一个.css文件,然后在html文件里调用这个.css文件 调用方法:在head里写上link标签 <link rel=”” type=”” href=”.css文件路径”/> 行内样式没有实现结构与样式分离,内部样式实现了半分离,外部样式实现了完全分离 3、 CSS的选择器:分为两大类:基础选择器和 复合选择器 基础选择器:标签选择器、类选择器、id选择器、通配符选择器 01、 标签选择器:div { color: skyblue ; } 02、 类选择器: 首先用 . 定义类名称 .skyblue{ color: skyblue; } 然后哪里需要设置样式就在哪里用class来调用 <div class=”skyblue” ></div> 3、基础班第4天css
3.1、 CSS复合选择器
01、 后代选择器(重点)特点:html布局有嵌套关系 概念:后代选择器又称为包含选择器 作用:用来选择元素或元素组的子孙后代 02、 子元素选择器
只能选择嵌套关系的父子关系得到元素,也就是嵌套的第一层元素,一个大于号“>”表示选中子级; 03、 交集选择器直接在标签选择器后面紧跟着书写类选择器或者id选择器即可;
在一堆标签里面单独指定和其他标签样式不一致的方法; 04、 并集选择器(重点)
并集选择器(CSS选择器分组)是各个选择器通过 , 连接而成的,通常用于集体声明。 3.2、CSS 三大特性 CSS层叠性 CSS继承性 CSS优先级(重点)3.3、标签显示模式(display)
行内元素的特点:(重点)(1)相邻行内元素在一行上,一行可以显示多个。 (2)高、宽直接设置是无效的。 (3)默认宽度就是它本身内容的宽度。 (4)行内元素只能容纳文本或则其他行内元素。 块级元素的特点(重点)(1)比较霸道,自己独占一行 (2)高度,宽度、外边距以及内边距都可以控制。 (3)宽度默认是容器(父级宽度)的100%
(4)是一个容器及盒子,里面可以放行内或者块级元素。 行内块元素的特点:(重点)(1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。一行可以显示多个 (2)默认宽度就是它本身内容的宽度。 (3)高度,行高、外边距以及内边距都可以控制。 4、基础班第4天css 盒子模型(Box Model)(重点)所谓盒子模型:就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。 组成内容:实体化宽高 边框:border 内边距:padding 拉开内容到盒子边缘的距离;(类似单元格的 cellpadding)
外边距:margin 拉开盒子与盒子之间的距离;(类似单元格的 cellspacing) 5、基础班第5天css 5.1、浮动:让盒子从普通流中浮起来,让多个块级盒子一行显示; 浮动的特点01 浮:让盒子脱离原来的文档流,漂浮起来; 02漏:盒子浮动之后脱离的标准流原来的位置就空了,下面的盒子会补上来; 03特:a、任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。 /5.2、清除浮动的方法 额外标签法(隔墙法) 使用after伪元素清除浮动 使用双伪元素清除浮动 父级添加overflow属性方法 6、定位详解
定位也是用来布局的,它有两部分组成:定位 = 定位模式 + 边偏移 相对定位(relative) 静态定位(static)
绝对定位(absolute) 固定定位[size=18.6667px](fixed)
|