前端备课记录

day1.

一.前端开发所需要的基础技术：
html5 :最高版本的html语言
css3： 样式表，与html5结合在一起，实现的页面高大上，具有现代感
javascript ：脚本语言，作用与Html,css结合在一起，实现页面的各种动态效果，ajax技术等
jquery

bootstarp 核心css 用来美化界面，提供了很多经常修饰界面的元素，包括响应式布局，适用于手机端,pc端界面
easyUI js 框架 ，提供了直接可用的组件
react js框架
vue js框架

二.初识HTML
a.HTML(英文 Hyper Text MarkUp Language的缩写) 中文为超文本标签语言，主要是通过HTML标签对网页中的文本，图片，声音等内容进行描述。
使用前端代码生成器Hbuilder

建立pages目录，pages目录下建子目录：css,img,js,page

新建Index.html 页面，讲述HTML骨架，HTML有自己的语言语法骨架格式：

b.标签的嵌套关系

外面为父，里面为子

2.标签的并列关系

c.排版标签
排版标签主要是和css搭配使用，显示网页结构的标签，是网页布局最常用的标签

(1) 标题标签
单词缩写：head 头部，标题
为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即

标题标签语义：作为标题使用，并且依据重要性递减

基本语法格式如下:
标题文本

注意：h1 标签以为重要，尽量少用，不要动不动就向你扔一个h1,一般h1 都是给logo使用
两个标签皆可以让字体加粗，现在更流行使用strong

(2) 段落标签,独占一行
单词缩写：paragraph 段落
在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是

文本内容

是HTML文档中最常见的标签，在默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行

换行标签：让后面的内容在下一行出现，标签语法
加不加斜杠无所谓

水平线标签：

---

标签里可以加颜色属性，color; 长短属性，width=“里面填像素”

div span标签

div span;
div:会独占一行，层就是盒子，作用是用来放其他元素的

span:不会独占一行

图片标签：

超链接标签：用来跳转至其他的页面，href属性指示跳转到的页面
target表示页面出现的位置，_self表示在当前页签出现, _blank 表示新开页签出现，默认是_self

锚点定位

预排版：

锚是用来标识页面中的一个位置，有了这个锚可以实现同一页面不同页面的跳转

二.相对路径与绝对路径

1.相对路径
图像文件和HTML文件位于同一文件夹：只需要输入图像文件的名称即可，如
2.图像文件位于HTML文件的下一级文件夹：输入文件夹和文件名，之间用 “/” 隔开，如
3.图像文件位于HTML文件的上一级文件夹，在文件名前面加"…/",如果是上两级，则需要"…/…/",以此类推，如

2.绝对路径
“D:\web\img\logo.gif” ,或者完整的网络地址，例如 “http://www.itcast.cn/images/logo.gif”

三.列表标签

列表标签又称为清单，分为有序和无序

为无序清单

称为有序清单

四.表格标签（复杂）

表格是复杂标签，一个表格由多个标签组成，各标签又有自己的属性，也可以实现单元格的合并与拆分，表格单元格可以放置其他元素

表格标签的开始与结束 表格行的开始与结束 一行有多个单元格

合并单元格属性:colspan,跨几列 ，就写几
跨行标签：rowspan 跨几行就写数字几

性别选项框，radio 具有互斥性
爱好选项框 checkbox

文字文本框 属性

页面框架

,它可以把整个网页划分为或垂直的多个部分，每个部分都对应一份网页