[华为云在线课程][零基础学HTML5][学习笔记]
【摘要】 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)