Html5入门

最新推荐文章于 2022-09-11 17:42:32 发布

侠客岛的含笑

最新推荐文章于 2022-09-11 17:42:32 发布

阅读量894

点赞数 1

分类专栏： web前端文章标签： html5 javascript socket html css3

本文链接：https://blog.csdn.net/qq_33936481/article/details/73168095

版权

web前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

HTML发展

HTML5 是从Web Applications 1.0 项目发展而来的，由网页超文本技术工作小组
（WHATWG）发起，后被W3C 采纳。HTML5 规范的大部分内容都偏重于处理Web 应用
程序。

Expectation of the future

HTML5 ≈ HTML + CSS + JavaScript + API
WebAPP
- HTML5新增了离线存储，更丰富的表单，js，socket,扩展embed,css3
- 流媒体与多媒体引擎(Audio，Video,Canvas,webgl等等)增强
方便搜索引擎无障碍沟通（SEO）

这些优点毫无例外地帮助H5可以兼容PC,Mac,iPhone,Android(一次开发，多平台使用)

快速迭代（互联网产品大多免费，还有网络效应，后入者抢夺用户难度很大）
减低成本（Web APP 比 Native APP开发成本降低一倍）
导流入口多一些（H5 APP容易）
分发效率高
不过性能相比 Native APP 是差很多的（结合，组装，变形，Hybird APP）
PC+移动=真正的互联网，AR,VR,智能硬件，视频变局，在线教育，泛娱乐

Real change

标签变化（DTD,Add,Delete,Redefine）
页面布局（flex）
属性变化（Input,Form Attr,Link Attr,Other Attr）

标签变化

定义和用法

沿用了HTML的语法(已往过去的语法，是SGML语法的一个子集)，更简洁，更人性化。

早期的分严格，过渡（向下兼容），框架
这里写图片描述

这里写图片描述

DOCTYPE及字符编码
① DOCTYPE：<!doctype html> 必须是第一行html标签之前
② 字符编码：<meta charset="utf-8">
③ 给文档指定语言：<html lang="zh-CN">

快捷键：

html:5 或!：用于HTML5文档类型
html:xt：用于XHTML过渡文档类型
html:4s：用于HTML4严格文档类型

这里写图片描述
DTD（文档类型定义）为什么不再引用了呢？
HTML的DTD中，使用XML（语法）定义html标签规范，比如< a >是一个超链接

新增标签

结构标签

这里写图片描述

（1）section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分；
（2）article：特殊独立区块，表示这篇页眉中的核心内容；
（3）aside：标签内容之外与标签内容相关的辅助信息；
（4）header：某个区块的头部信息/标题；
（5）hgroup：头部信息/标题的补充内容；
（6）figure：独立的单元（多媒体内容），例如某个有图片与内容的新闻块；
（7）nav ：导航链接；
（8）dialog ：对话框；
（9）footer：底部信息。

建议：

header,section,aside,article,footer不要自己嵌套自己
header,section,footer优先级最高
第二级：aside，article，figure，hgroup，nav
第三级：div,figcaption

多媒体标签

这里写图片描述
- < video > 标记定义一个视频
- src
- autoplay
- loop
- controls
- width
- height
- < audio> 标记定义音频内容
- src
- autoplay
- loop
- controls
- < source > 标记定义媒体资源
- < embed >
HTML4时期embed并没有得到W3C的认可


<audio src="../Source/passion.mp3" autoplay="autoplay" loop="-1" controls="controls">您的浏览器也该退休了，是否考虑一下Chrome这样的新鲜血液呢？</audio>
<audio autoplay="autoplay">
    <source src="../Source/passion.mp3" type="audio/mpeg">
</audio>

<video src="../Source/pal4.mp4" controls="controls"></video>
<video controls="controls" width="1024" height="768">
    <source src="../Source/pal4.mp4" type="video/mp4">
</video>

<embed src="../Source/HappyBirthday.swf" width="1024" height="768"></embed>

这里写图片描述

Web应用标签

这里写图片描述

meter（颜色：黄色，绿色）
- value 显示值
- min
- max
- low 最佳范围
- high
- optimum最佳值
progress
- value
- max

<meter value="220" min="20" max="380" low="200" high="240" optimum="220"></meter>
<meter value="0.75">75%</meter>

<progress value="30" max="100"></progress>
<progress max="100"></progress>

这里写图片描述

<input placeholder="请选择您喜欢的手机品牌" list="phoneList" />
<datalist id="phoneList">
    <option value="iPhone">iPhone</option>
    <option value="Samsung">Samsung</option>
    <option value="Huawei">Huawei</option>
    <option value="hTC">hTC</option>
    <option value="Meizu">Meizu</option>
</datalist>

<details open="open">
    <summary>树下的猫</summary>
    <p>我是一只坐在树下的貓，每天我都坐在树下，看花花世界，人海茫茫……
我每天都会做相同的梦，梦里看到一位公子，身患重病，危在旦夕。公子身边有一名女子，她的眼里尽是关切和深深的依恋。</p>
</details>

这里写图片描述

menuitem和command标签有可能被放弃，因为奇葩
menu在HTML4.01的时候给否掉了

丑逼华丽升级高富帅
这里写图片描述

<meun type="toolbar">
    <li>
        <menu label="File">
            <button type="button">New...</button>
            <button type="button">Open...</button>
            <button type="button">Save...</button>
        </menu>
    </li>
    <li>
        <menu label="Edit">
            <button type="button">Cut...</button>
            <button type="button">Copy...</button>
            <button type="button">Paste...</button>
        </menu>
    </li>
</meun>

其他标签

这里写图片描述

<p>我们来<ruby>夼<rp>(</rp><rt>Kuang</rt><rp>)</rp></ruby>一个话题。</p>

这里写图片描述

<p>妈妈叫我回家的时候顺路买一盒<mark>牛奶</mark>，需要很新鲜的那种。</p>

<form oninput="totalPrice.value=parseInt(price.value)*parseInt(number.value)">
    <input type="text" id="price" value="5000">
    *<input type="number" id="number" value="1">
    =<output name="totalPrice" for="price number"></output>
</form>

放弃标签(不主张，别忘了是向下兼容的)

结构与表现分离
iframe
acronym首字母缩写

这里写图片描述

重定义标签

这里写图片描述

属性类型

新增属性

input

input
- email （移动端输入界面猴头和点的出现）
- url
- number（电脑端智能识别数字0-9-+.e）
- range
- Date picker
  - Datetime（S，O）和Datetime-local(S,O,C).火狐和IE都不支持
- search
- color
- tel

这里写图片描述

date:<input type="date" name="date"><br>
month:<input type="month" name="month"><br>
week:<input type="week" name="week"><br>
time:<input type="time" name="time"><br>
datetime:<input type="datetime" name="datetime"><br>
datetime-local:<input type="datetime-local" name="datetime-local"><br>

这里写图片描述

Date Pickers Input移动端
这里写图片描述

这里写图片描述

<input type="range" name="range" min="1" max="10">（流式数值选择器）

<input type="search" name="search">多了一个清空插符号

<input type="color" name="color"> 颜色选择框，适用文本编辑器

表单属性

表单属性
- autocomplete
- autofocus
- multiple
- placeholder
- required

链接属性

< link > sizes
< base > target
< a > 超链接

<form action="up.html" autocomplete="on">默认就是on
    <input type="text" name="text">
    <input type="email" name="email" autocomplete="off">
    <input type="submit">
</form>

其他属性

script
ol
html
style(嵌入式快发)

H5页面布局

这里写图片描述

H5展望

这里写图片描述

Video-API
- 六个方法
- 三十个属性
- 二十二个事件

重写播放器(js)，使其更美观

html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Video-API</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<script defer="defer" type="text/javascript" src="js/index.js"></script>
</head>

<body>
<video id="video" controls="" preload="none" poster="images/poster.png">
    <source id="mp4" src="trailer.mp4" type="video/mp4">
    <p>你的用户代理不支持HTML5视频元素。</p>
</video>
<div id="buttons">
    <button class="large awesome" onclick="load();">load()</button>
    <button class="large awesome" onclick="play();">play()</button>
    <button class="large awesome" onclick="pause();">pause()</button>
    <button class="large awesome" onclick="currentTimePlusTen();">currentTime+=10</button>
    <button class="large awesome" onclick="currentTimeMinusTen();">currentTime-=10</button>
    <button class="large awesome" onclick="currentTimeFifty();">currentTime=50</button>
    <br>
    <button class="large awesome" onclick="playbackRatePlusPlus();">playbackRate++</button>
    <button class="large awesome" onclick="playbackRateMinusMinus();">playbackRate--</button>
    <button class="large awesome" onclick="playbackRatePlus();">playbackRate+=0.1</button>
    <button class="large awesome" onclick="playbackRateMinus();">playbackRate-=0.1</button>
    <br>
    <button class="large awesome" onclick="volumePlus();">volume+=0.1</button>
    <button class="large awesome" onclick="volumeMinus();">volume-=0.1</button>
    <button class="large red awesome" onclick="volumeMuted();">muted=true</button>
    <button class="large red awesome" onclick="volumePlay();">muted=false</button>
</div>
</body>

</html>

video { display: block; width: 1024px; height: 600px; margin: 0 auto; padding: 0; border: 1px solid black; background-color: black; }
#buttons { text-align: center; }
button { font-family: 'Arial', Helvetica, Verdana, sans-serif; }
.awesome { font-weight: bold; line-height: 1; position: relative; display: inline-block; padding: 5px 10px 6px; cursor: pointer; text-decoration: none; color: #fff; border-bottom: 1px solid rgba(0, 0, 0, .25); border-radius: 5px; background: #222; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); text-shadow: 0 -1px 1px rgba(0, 0, 0, .25); }
.awesome:hover { color: #fff; background-color: #111; }
.large.awesome { font-size: 14px; padding: 8px 14px 9px; }
.red.awesome { background-color: #e33100; }
.blue.awesome { background-color: #2daebf; }
.blue.awesome:hover { background-color: #007d9a; }
.red.awesome:hover { background-color: #872300; }

function init() {
    document._video = document.getElementById("video");
};
document.addEventListener("DOMContentLoaded", init, false);

function load() {
    document._video.load();
};
function play() {
    document._video.play();
};
function pause() {
    document._video.pause();
};
function currentTimePlusTen() {
    document._video.currentTime += 10;
};
function currentTimeMinusTen() {
    document._video.currentTime -= 10;
};
function currentTimeFifty() {
    document._video.currentTime = 50;
};
function playbackRatePlusPlus() {
    document._video.playbackRate++;
};
function playbackRateMinusMinus() {
    document._video.playbackRate--;
};
function playbackRatePlus() {
    document._video.playbackRate += 0.1;
};
function playbackRateMinus() {
    document._video.playbackRate -= 0.1;
};
function volumePlus() {
    document._video.volume += 0.1;
};
function volumeMinus() {
    document._video.volume -= 0.1;
};
function volumeMuted() {
    document._video.muted = true;
};
function volumePlay() {
    document._video.muted = false;
};

Local Storage离线缓存
- 在线APP 边使用边下载离线缓存
  - 离线 APP 下载完离线缓存使用

费力气写了居然没人看，求意见，哪写的不好啊

侠客岛的含笑

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Html5入门

HTML发展Expectation of the futureHTML5 ≈ HTML + CSS + JavaScript + APIWebAPP HTML5新增了离线存储，更丰富的表单，js，socket,扩展embed,css3流媒体与多媒体引擎(Audio，Video,Canvas,webgl等等)增强方便搜索引擎无障碍沟通（SEO）这些优点毫无例外地帮助H5可以兼容PC,M
复制链接

扫一扫

专栏目录