zoukankan      html  css  js  c++  java
  • 【HTML5校企公益课】第一天

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

  • 相关阅读:
    flock对文件锁定读写操作的问题 简单
    hdu 2899 Strange Fuction(二分)
    hdu 2199 Can you solve this equation? (二分)
    poj 3080 Blue Jeans (KMP)
    poj 2823 Sliding Window (单调队列)
    poj 2001 Shortest Prefixes (trie)
    poj 2503 Babelfish (trie)
    poj 1936 All in All
    hdu 3507 Print Article (DP, Monotone Queue)
    fzu 1894 志愿者选拔 (单调队列)
  • 原文地址:https://www.cnblogs.com/xkxf/p/6682623.html
Copyright © 2011-2022 走看看