[华为云在线课程][零基础学HTML5][学习笔记]

举报
John2021 发表于 2022/01/12 22:22:31 2022/01/12
【摘要】 1,HTML5介绍 HTMLHTML - HyperText Markup Language中文:超文本标记语言作用:编写网页组成:标签HTML5是HTML的第五个版本HTML5简称为H5 HTML5HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。HTML5简单易学,是下一代HTML的标准。HTML ...

1,HTML5介绍

HTML

  • HTML - HyperText Markup Language
  • 中文:超文本标记语言
  • 作用:编写网页
  • 组成:标签
  • HTML5是HTML的第五个版本
  • HTML5简称为H5

HTML5

  • HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。

  • HTML5的设计目的是为了在移动设备上支持多媒体。

  • HTML5简单易学,是下一代HTML的标准。

  • HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。

  • HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。

  • <!doctype> 声明必须位于 HTML5 文档中的第一行

  • HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。

  • HTML5 中的一些有趣的新特性:

    • 用于绘画的 canvas 元素
    • 用于媒介回放的 video 和 audio 元素
    • 对本地离线存储的更好的支持
    • 新的特殊内容元素,比如 article、footer、header、nav、section
    • 新的表单控件,比如 calendar、date、time、email、url、search
  • HTML5的优势

    • 丰富的功能(音频与视频,地址位置,本地存储,离线存储)
    • 兼容性
    • 统一了规范

Web开发

  • 网站开发就是Web开发中的一种
  • 前端开发与后端开发
  • H5技术属于前端开发的范畴
  • Web前端开发工程师
  • H5工程师成为了招聘市场上的香饽饽

移动前端开发

  • 大量移动设备的普及
  • 移动前端开发正变得越来越重要
  • H5技术在移动前端开发领域大放异彩
  • H5成为泛指整个前端领域的代名词

开发工具

  • 浏览器:Chrome
  • 编辑器:Visual Studio Code

2,HTML5常用元素

  • 新元素=新标签
  • 常用元素(常用标签)
  • 作用:语义化
  • 页面的主体结构
  • 网页=头部+身体+尾部
  • header元素:表示页面的头部(每一个小的区域也可以有自己的header)
  • main元素:表示网页中的主要内容(一个页面中只有一个)
  • footer元素:表示页面的尾部
  • nav元素:表示页面导航区域(可以有多个)
  • article元素:表示页面中的文章或文档区域(内部可以有自己的header和footer)
  • aside元素:表示页面的侧边栏或者广告栏
  • section元素:表示页面中的一个区域,强调分块,有一定独立性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个H5页面</title>
</head>
<body>
<header>
    <nav></nav>
</header>
<main>
    <article>
        <header></header>
        <p></p>
        <footer></footer>
    </article>
    <aside>
        <img src="" alt="">
    </aside>
    <section>
        <img src="" alt="">
    </section>
</main>
<footer></footer>
</body>
</html>

3,音频与视频

音频

  • audio标签(双标签)
  • src属性:要播放的音频文件的地址
  • controls属性:添加播放控制条
  • width属性:设置宽度(在css中来控制)
  • height属性:设置高度(在css中来控制)
  • muted属性:静音
  • loop属性:是否循环播放
  • preload属性:控制音频数据是否预加载(值为none,metadata,auto)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audio</title>
    <style>
        audio {
            width: 800px;
            height: 100px;
        }
    </style>
</head>
<body>
<section>
    <audio src="./helloworld.mp3" controls loop>
        您的浏览器不支持audio标签
    </audio>
</section>
</body>
</html>

视频

  • video标签(双标签)
  • src属性:用法同audio标签
  • width属性:用法同audio标签
  • height属性:用法同audio标签
  • controls属性:用法同audio标签
  • muted属性:用法同audio标签
  • preload属性:用法同audio标签
  • loop属性:用法同audio标签
  • autoplay属性:自动播放(前提是在静音模式下才能生效)
  • poster属性:设置视频封面图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>video</title>
    <style>
        video {
            width: 800;
            height: 400px;
        }
    </style>
</head>
<body>
<section>
    <video src="./helloworld.mp4" controls>
        您的浏览器不支持video标签
    </video>
</section>
</body>
</html>

4,CSS3

CSS

  • 全称:Cascading Style Sheets
  • 中文:层叠样式表
  • W3C的CSS工作组
  • 作用:美化页面
  • 前端技术的三大基石:HTML,CSS,JavaScript

CSS发展史

  • 1996年W3C正式推出CSS1
  • 1998年W3C正式推出CSS2
  • 2007年W3C正式推出CSS2.1

CSS3

  • 新增选择器,例如:nth-child(n) nth-last-child(n) nth-of-type(n) nth-last-of-type(n)
  • 新增文字效果,例如:text-shadow
  • 新增calc函数
  • 新增transform
  • 新增transition
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css3 demo</title>
    <style>
        p:nth-child(1) {
            color: red;
        }
    </style>
</head>
<body>
<section>
    <article>
        <p>第一段文字</p>
        <p>第二段文字</p>
        <p>第三段文字</p>
    </article>
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css3 demo</title>
    <style>
        /* p:nth-child(3)
        {
            color: red;
        } */
        p:nth-of-type(1) {
            color: aqua;
            text-shadow: 5px 5px 5px gray;
            font-size: 30px;
        }

        .left {
            display: inline-block;
            background: yellow;
            width: 100px;
        }

        .center {
            display: inline-block;
            background: green;
            /* calc函数内部每个数值和符号之间一定要分隔开,否则无法起效 */
            width: calc(100% - 400px);
            /* 错误 */
            /* width: calc(100%-400px); */
        }

        .right {
            display: inline-block;
            background: pink;
            width: 300px;
        }

        .box {
            width: 100px;
            height: 100px;
            background: red;
            /* transform: translate(100px,100px); */
            /* transform: scale(0.5, 0.5); */
            /* transform: rotate(45deg); */
            /* transform: skew(45deg); */
            transform: width 500s linear 0s;
        }

        .box:hover {
            width: 500px;
        }
    </style>
</head>

<body>
<section>
    <article>
        <p>第一段文字</p>
        <p>第二段文字</p>
        <div>你好啊</div>
        <div>你好啊</div>
        <p>第三段文字</p>
    </article>
</section>
<section>
    <span class="left">左100</span><span class="center">中 充满</span><span class="right">右300</span>
</section>
<section>
    <div class="box"></div>
</section>
</body>
</html>

5,综合案例

华为手机商城

  • 电商网站
  • 移动端
  • 移动端浏览器访问
  • HTML5技术
  • 卖手机
  • 手机详情页
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华为手机商城详情页</title>
    <style>
        html, body, figure {
            /* 为了避免浏览器自己增加默认的样式,首先手动归零 */
            /* 浏览器会给HTML标签添加一些初始CSS样式。 */
            margin: 0px;
            padding: 0px;
        }

        header {
            height: 44px;
            line-height: 44px;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
        }

        video {
            width: 100%;
            border-radius: 10px;
        }

        h1 {
            text-align: center;

        }

        .price {
            display: inline-block;
            color: red;
            font-size: 20px;
            height: 40px;
            line-height: 40px;
            padding-left: 10px;
        }

        button {
            float: right;
            color: white;
            font-size: 14px;
            height: 40px;
            line-height: 40px;
            width: 100px;
            text-align: center;
            border: none;
        }

        .buy {
            background-color: red;

        }

        .car {
            background: orange;
        }

        .title {
            font-weight: bold;

        }

        ol {
            margin: 10px 0px;
        }

        article {
            padding: 10px;
        }
    </style>
</head>
<body>
<header>
    Mate 40 Pro
</header>
<main>
    <section>
        <video src="https://..mp4" controls muted preload="auto">您的浏览器不支持video标签</video>
    </section>
    <section>
        <h1>Mate 40 Pro 8 + 256GB</h1>
    </section>
    <section>
        <div class="price">
            <del>¥7999</del>
        </div>
        <div class="price">¥6999</div>
        <button class="buy">立即购买</button>
        <button class="car">加入购物车</button>
    </section>
    <section>
        <article>
            <div class="title">手机详情:</div>
            <ol>
                <li>屏幕</li>
                <li>镜头</li>
                <li>快充</li>
                <li>电池容量</li>
                <li>支持无线充电</li>
            </ol>
        </article>
    </section>
    <section>
        <figure>
            <img width="100%" src="phone.png" alt="">
        </figure>
        <figure>
            <img width="100%" src="phone.png" alt="">
        </figure>
        <figure>
            <img width="100%" src="phone.png" alt="">
        </figure>
    </section>
</main>
<footer>
</footer>
</body>
</html>
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。