[华为云在线课程][零基础学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
HTML
  • 点赞
  • 收藏
  • 关注作者

评论（0）

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

全部回复

上滑加载中

设置昵称

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

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

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

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入