黑马程序员技术交流社区
标题: 前端4期基础班学习的主要技术 [打印本页]
作者: 天黑了请闭眼 时间: 2019-4-18 22:04
标题: 前端4期基础班学习的主要技术
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)
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |