本课学习内容

HTML与CSS

HTML

HTML是什么？
- HTML是一种标记语言而非编程语言
HTML怎么写
- 使用标签
- 标签必须闭合
- 常用标签：
  
  ``标题
  <p>段落
  <a>超链接
  <img>图片
  <button>按钮
  ......
- 有序列表<ol><li></li></ol>
- 无序列表<ul><li></li></ul>
- 自定义列表<dl><dt><dd>
HTML标签
- 每个标签都具有自己的属性，这些属性跟标签的功能、样式息息相关。
- 在查询每个标签的属性时，建议自己使用试试（大部分属性都能见名知意）

CSS

CSS是什么？
- CSS 指的是层叠样式表* (Cascading Style Sheets)
- CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS能做到的事
- CSS主要用来设计网页的样式，美化网页；它不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
- CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS的三种使用方法
- 行内CSS：在标签内部使用 [style=“ ”]
- 内部CSS：在<code class="prettyprint" > 中的标签中编写。
- 外部CSS：在文件外部使用.css文件，然后在html文件中引入。
定位方法
- 使用id和class。只要在标签中定义它们的id或class就能这样获取到他们。id用#，class用。
- 使用标签名。
- 混合使用也可。
层叠顺序
- 页面中的所有样式将按照以下规则"层叠"为新的"虚拟"样式表，其中第一优先级最高:
- 行内样式
- 外部和内部样式表
- 浏览器默认样式
- 因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

作业驱动的学习

将鼠标放到图片上时图片会变大

提示：css鼠标事件

收到提示后，上网搜索学习了一下，发现可以利用onmouseover事件

于是顺利解决了作业的第一个问题。

但与此同时，又产生了一个新的问题：script又是什么呢？

又是好奇的我又搜索了一下，发现script又涉及到了JavaScript

于是我自己编辑了一个bigImg和normalImg函数来帮助图片放大与缩小

<script>
        function bigImg(x)
        {
            x.style.height="400px";
            x.style.width="600px";
        }

        function normalImg(x)
        {
            x.style.height="200px";
            x.style.width="300px";
        }
        </script>

于是，作业要求1被我顺利解决

实现图片分页显示

提示：onclick事件

起初奇思妙想的我并没有去学习onclick事件，而是突然想到了另一个解决方案：

换页可以通过超链接实现啊！

于是先是运用了以下方法

<a href="Page1.html">第1页</a>
    <a href="Page2.html"><b>第2页</b></a>

~~我真是个天才~~

看到提示后决定尝试了一下onclick事件，最终同时保留了两者。

<button onclick="mySwitch()">上一页←</button>
    <script>
        function mySwitch() {
            window.location.href='Page1.html';
        }
    </script>

最终顺利完成了作业

一些感受

一开始看到作业是非常惊讶的，因为课上并没有涉及JS的讲解，所以好多内容都需要自己上网搜索学习，于是有点畏难情绪，也抱怨了一下。

但是自己真正去搜索学习是很有成就感的一个过程，尤其是一个个问题被自己解决、打完代码后去测试网页，都很让人投入其中。

洋洋洒洒写了好多字，快赶上作文了/(ㄒoㄒ)/~~ 如有问题欢迎指正，也乐于收到大家的建议。

刘一达

软件园学生在线

【第一次前端培训】作业驱动的学习