1、搭建基本的开发环境。学校电脑用的是浏览器是Chrome，编辑器是HBuilder。
2、初步介绍HTML5的Web项目基本结构。
css：样式表
img：存放图片
js：存放脚本文件
.html：网页
3、上午进行了一下初步尝试，内容基本可以用下面的代码概括：
<!-- 这个是注释，快键键ctrl+/ --> <!-- 被注释的代码不会被执行 --> <!-- 定义文档类型为HTML文档 --> <!DOCTYPE html> <!-- html标签理解为根标签、家 --> <html> <!-- 头 用于定义文档的头部 --> <head> <meta charset="UTF-8"> <title>我的第一个文件。</title> <!-- css 样式表 --> <!-- 当前页面的所有样式都要写在style标签中！输入st回车就可以 --> <style type="text/css"> /*这个是css的注释方式*/ /*想给一个标签设置样式，必须先找到这个标签，如何找到标签呢？根据标签的名字*/ h6 { font-size: 34px; color: red; background: yellow; } h1 { color: red; } h4 { background-color: green; } /*通过id找到标签*/ /*#one 叫做id选择器，注意使用的时候前面要加上一个#号键*/ #one { color: blue; } </style> </head> <!-- 身体 用于定义文档的内容 --> <body> <!--超链接--> <a href="https://www.baidu.com"> 点击进入百度 </a> <!-- 输入h2回车 --> <!-- h便签为文档标签，定义文档的标题。 --> <h1>这是我的网页</h1> <h2>好困想睡觉</h2> <h3>我想睡觉！！！</h3> <h4>真的好困</h4> <h5>想睡觉</h5> <h6>这是我的网页</h6> <h1 id="one">我也是h1标签，我希望我的颜色是蓝色的</h1> <!--id 是唯一的，为了区分不同的标签--> </body> </html>
4、下午介绍了一下常用标签：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常用的标签。</title> <style type="text/css"> span { background-color: yellow; /*将行元素转换成行内块元素*/ display: inline-block; width: 100px; height: 50px; /*字体文本左右居中*/ text-align: center; /*上下居中*/ line-height: 50px; /*设置边框*/ border-radius: 15px; } p { background-color: yellow; color: rgb(1, 1, 1); } /* 监听鼠标是否移动到标签上。 hover 美[ˈhʌvər]vi. 盘旋; 徘徊; 犹豫; */ span:hover { /*当鼠标移动到标签上触发的事件：改变字体的颜色*/ color: red; cursor: pointer; } p:hover { background-color: red; } </style> </head> <body> <!-- 标签可以分两大类： 第一大类为行元素。 第二类为块元素 --> <!-- span 文本标签 span+tab 行元素（懂事的）：自己能用多少就用多少，用不完的留给下一个标签使用--> <span>欢迎</span> <span>大家</span> <!-- br 为换行标签，空的段落标签也可以换行。--> <br> <span>来听</span> <span>公益课</span> <!-- p 段落标签 块元素（霸道的）：即使自己用不完也不会留给其他标签。--> <p>欢迎</p> <p>大家</p> <p>来听</p> <p>公益课</p> <!-- div标签 --> <div>DIV标签 也是块标签，span和div是最常用的！</div> <!--span*9+tab--> <span>秒杀</span> <span>优惠劵</span> <span>闪购</span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </body> </html>
5、作业：
<!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title></title> <style type="text/css"> span { /*字体*/ font: "微软雅黑"; font-size: 33px; /*将行元素转换成行内块元素*/ display: inline-block; width: 187px; height: 166px; /*字体文本左右居中*/ text-align: center; /*上下居中*/ line-height: 121px; /*设置边框*/ border-radius: 17px; } #one { color: red; background: green; } #one:hover { color: red; background: yellow; cursor: pointer; } #two { color: yellow; background: orange; } #two:hover { color: red; background: yellow; cursor: pointer; } #three { color: blue; background: pink; } #three:hover { color: red; background: yellow; cursor: pointer; } </style> </head> <body> <span id="one">秒杀</span> <span id="one">优惠券</span> <span id="one">闪购</span> <br /> <span id="two">拍卖</span> <span id="two">服装城</span> <span id="two">京东超市</span> <br /> <span id="three">生鲜</span> <span id="three">全球购</span> <span id="three">京东金融</span> </body> </html>
6、当然，最大的收获其实是学会使用各种快捷键、还有通过F12查看网页源代码。