第1章 前端开发初体验

首先新建一个html文件，内容：

搞笑段子：咬不动

和朋友去饭店吃饭，要了一盘红烧肉，结果发现怎么咬都咬不动，我顿时就火了，把服务员叫过来喊道：你们这肉怎么咬都咬不动，把你们经理叫来。服务员说：叫我们经理干啥啊，你都咬不动，他能咬得动啊！

如果在php服务器的环境中，会乱码（直接浏览器打开不会乱码）

只需要添加下面的代码就不再乱码：

<meta charset="utf-8">

为了区分标题和内容，我们使用h3,p标签分别表示包裹标题和段落，使用br标签进行换行

此时内容的展现就比较明显了

 使用css样式表美化：

标题改为褐色，居中，字体20px

段落添加一个类属性text ，类属性相当于一个钩子，使得我们可以在页面找到这个元素

设置段落的css样式：

颜色：灰色 行距：1.5em 中文习惯在段落前空两格

最后面的段落也空两格 需用标签包裹，不能用诸如span之类的行内标签

继续美化：使用div区块包裹

div 宽度400 高度250

边框 1px 实线 红色

内边距 15px

背景 黄色

黄色背景很丑，我们使用背景图片替换

给图片也设置一个宽度和高度

图片尺寸 400px 250px

不允许重复

 此时可以看到图片没有充满整个div

为什么？因为此时div的宽度和高度已经不是400 250了  因为设置了内边距，上下左右内边距都是15px所以背景的宽高都要加30

因此设置css样式为：

宽度 430 高280

 去除红色边框线，边框加圆角，

加阴影：水平垂直10像素 扩散10像素 颜色 灰色

CSS3盒子阴影语法

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；

http://cd.itheima.com/news/20210810/161027.html

浏览器查看：

如果想让其居中，div样式设置外边距： 0 auto

 二 JavaScript脚本的作用

想实现这样的效果：鼠标移入移出标题与用户有交互效果

使用javascript实现

设置一个鼠标悬停事件，鼠标放在标题上时，字体变粗，颜色变为绿色

此时存在的问题：鼠标悬停后变为绿色，移出后没有变为原来的颜色褐色

再定义一个鼠标移出事件

此时便能实现移入移出的交互效果：

 代码规范化，添加标题，将css放入head标签中，javascript脚本需放在文档最后，因为页面代码从上到下执行，js操纵的是页面元素，需在页面元素之后

总结：

前端课程主要有三部分内容组成:

1. 使用HTML标记语言写的主体结构与内容

2. 使用CSS规则写的页面元素显示样式

3. 使用JavaScript脚本语言写的交互脚本代码

什么脚本呢? 脚本的本意就是拍戏用的剧本,剧本上会把演员说的每一句话,以及什么时候说,全部写清楚,

也就是剧情的详细步骤,换成开发用的脚本,可以把演员想像成页面元素,其实就是一组组的标签及里面的内容,他们什么时候上场,应该出现在什么地方,全部写清楚。

目前,前端的脚本语言已经统一,也是唯一的前端脚本编程语言: JavaScript

 最终效果：咬不动