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查看网页源代码。

【HTML5校企公益课】第一天的更多相关文章

  1. 【HTML5校企公益课】第二天

    1.上午讲昨天的作业. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  2. 【HTML5校企公益课】第三天

        1.上午2D.旋转变色的... 基本思路就是先写静态画面然后添加动画. <!--告诉浏览器该文件为网页格式--> <html> <!--网页的头部标签--> ...

  3. 【HTML5校企公益课】第四天

    1.上午考试没去.. 2.下午跟不上.. 变色.html <!DOCTYPE html> <html> <head> <meta charset=" ...

  4. 【C语言探索之旅】 第一部分第四课第一章:变量的世界之内存那档事

    内容简介 1.课程大纲 2.第一部分第四课第一章:变量的世界之内存那档事 3.第一部分第四课第二章预告:变量的世界之声明变量 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答 ...

  5. 初始html5,遇到的第一个问题

    1.首先感到html5是html的延续,只是增加了新的标签属性,这是我的第一感觉 2.我写了几行画矩形的canvas入门代码,遇到了不显示问题 3.下面是我写完代码后的问题 刷新后还是这样 4.我的代 ...

  6. 一站式Hadoop&Spark云计算分布式大数据和Android&HTML5移动互联网解决方案课程(Hadoop、Spark、Android、HTML5)V2的第一门课程

    Hadoop是云计算的事实标准软件框架,是云计算理念.机制和商业化的具体实现,是整个云计算技术学习中公认的核心和最具有价值内容. 如何从企业级开发实战的角度开始,在实际企业级动手操作中深入浅出并循序渐 ...

  7. 斯坦福IOS开发第五课(第一部分)

    转载请注明出处 http://blog.csdn.net/pony_maggie/article/details/27706991 作者:小马 因为第五课的内容比較多.分两部分来写. 一 屏幕旋转基本 ...

  8. 斯坦福大学IOS开发课程笔记(第七课第一部分)

    转载请注明出处 http://blog.csdn.net/pony_maggie/article/details/31462099 作者:小马 这节课的内容太多,分两部分介绍.本节课主要是介绍怎样开发 ...

  9. 路飞学城Python爬虫课第一章笔记

    前言 原创文章,转载引用务必注明链接.水平有限,如有疏漏,欢迎指正. 之前看阮一峰的博客文章,介绍到路飞学城爬虫课程限免,看了眼内容还不错,就兴冲冲报了名,99块钱满足以下条件会返还并送书送视频. 缴 ...

随机推荐

  1. 二、Android Studio使用——导入jar包,运行、debug都不是问题

    [新建AndroidStudio工程,lib导入jar包]   我们的项目代码都在app里面,可以看作是一个Model.   src 下面除了我们的代码之外,还有单元测试. 把JAR复制到libs文件 ...

  2. C/C++ 智能指针简单剖析

    导读 最近在补看<C++ Primer Plus>第六版,这的确是本好书,其中关于智能指针的章节解析的非常清晰,一解我以前的多处困惑.C++面试过程中,很多面试官都喜欢问智能指针相关的问题 ...

  3. JQueryiframe页面操作父页面中的元素与方法(实例讲解)

    1)在iframe中查找父页面元素的方法:$('#id', window.parent.document) 2)在iframe中调用父页面中定义的方法和变量:parent.methodparent.v ...

  4. WebKit HTML、CSS、JS

    开发者需要了解的WebKit https://www.infoq.cn/article/webkit-for-developers 开发者需要了解的 WebKit   彭超 2013 年 3 月 18 ...

  5. nodejs(二)

    nodejs第二章节 回调函数 Node.js 异步编程的直接体现就是回调 异步编程依托于回调来实现 例子1:http服务器回调 var http = require(“http”);//引入一个ht ...

  6. luarocks安装以及lfs安装

    一.先安装lua: brew install lua 我本机的安装路径为:/usr/local/Cellar/lua/5.3.4_2 二.安装luarocks 下载luarocks的安装包: http ...

  7. Hdu 2457 DNA repair (ac自己主动机+dp)

    题目大意: 改动文本串的上的字符,使之不出现上面出现的串.问最少改动多少个. 思路分析: dp[i][j]表示如今 i 个字符改变成了字典树上的 j 节点. 然后顺着自己主动机一直转移方程. 注意合法 ...

  8. openssl生成证书server.key server.crt

    Key是私用秘钥,通常是RSA算法 Csr是证书请求文件,用于申请证书.在制作csr文件时,必须使用自己的私钥来签署申,还可以设定一个密钥. crt是CA认证后的证书文,签署人用自己的key给你签署凭 ...

  9. Mybatis框架学习总结-Mybatis框架搭建和使用

    Mybatis介绍 Mybatis是一个支持普通SQL查询,存储过程,和高级映射的优秀持久层框架.Mybatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.Mybatis可以使 ...

  10. (2.4)Mysql之SQL基础——下载与使用测试库

    (2.4)SQL基础——下载与使用测试库 1.查看与下载测试数据库 2.查看安装向导视图 3.安装 [1]安装:解压后用 mysql 命令安装(记得加上set autocommit=1) [2]核验: ...