• 要求
• • 挑战
  • 说明
  • 内容
• 实现
• • 下载
  • 输入内容查看源代码
  • 随心所欲更改
  • 自测
  • 最后

要求

挑战

很多刚接触互联 的人其实都是从浏览器开始的。作为 络时代的标识性软件和主要载体，浏览器似乎无所不能，从文本、图片、视频，到博客、微博、代码托管，从电商、 交、LBS再到团购，它全都可以呈现在用户面前。这些都是怎么办到的呢br> 现在很多移动端应用，甚至智能电视上压根就没有使用浏览器，但好像也有和浏览器同样的界界面，同样的体验，这些又是怎么实现的呢/p>

说明

浏览器其实是互联 编程技术的载体，其中又以HTML、CSS、JavaScript这三项为主。HTML定义了浏览器中各种元素的分类和用途，CSS定义了Web页面的布局和外观，而JavaScript可以动态创建页面，使 页能够响应用户的点击、拖拽等各种事件，
可以处理表单，给用户更好的体验。

内容

实现

下载

打开刚刚下载的文件，进入lang文件夹，找到zh-CN的文件，打开一看，果然是对应的中文

随即在html中引入该js文件并使用

输入内容查看源代码

可以看到，每一行的内容被加到了p标签里面，所以实现了换行，图片则是通过img标签，以base64编码的形式显示出来

随心所欲更改

接下来就可以用我们之前学过的知识对内容进行各种更改
在源代码模式下，给第一行内容居中，给第二行内容换颜色，给第三行改变字体大小，设置图片显示大小

自测

• HTML5为了使img元素可拖放，需要增加什么属性/li>
• HTML5哪一个Input类型可以选择一个无时区的日期选择器/li>
• CSS盒子模型中的Margin、Border、Padding都是什么意思/li>
• 说出至少五种常见HTML事件

答：

1. 需要增加draggable 属性，并将其设置为 true
2. type=”datetime-local”即可选择一个无时区的日期和时间
3. margin是外边距，border是边框，padding是内边距
4. 最常见的应该就是关于鼠标的事件了，onclick（鼠标点击事件），onmouseover（鼠标划过事件），onmouseout（与上一个对应，鼠标划出事件），onmousedown（鼠标按下还未松开），onmouseup（与上一个对应，鼠标松开），还有onkeydown（键盘按下事件），onload（浏览器页面加载完成的事件）

最后