【HTML5校企公益课】第一天

最新推荐文章于 2020-12-25 19:58:53 发布

bangtuo9862

最新推荐文章于 2020-12-25 19:58:53 发布

阅读量60

点赞数

原文链接：http://www.cnblogs.com/xkxf/p/6682623.html

版权

本文介绍了HTML5 Web项目的结构，包括css、img、js目录的用途，以及.html文件的基本构成。通过实例代码展示了注释、文档类型声明、html根标签、head与body标签的使用。同时，讲解了HTML常用标签如span、p、div的区别，以及如何通过CSS进行样式设置，包括字体大小、颜色、背景、行内块元素显示等。

摘要由CSDN通过智能技术生成

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>