四十四：HTML5之HTML5页面布局案例
HTML5新布局的意义：
1.语义化：HTML5可以让更多语义化的结构代码标签代替大量的无异议的div标签
1.这种语义化的特性提升了网页的质量和语义
2.减少了以前用于CSS调用class和id属性
2.对搜索引擎的友好：新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好
HTML5之前的布局
HTML5布局
&nbs ...
HTML5
初始HTML
什么是HTML
HTML ：
Hyper Text Markup Language（超文本标记语言） 发展史
HTML5优势 W3C标准 HTML基本结构
网页基本标签
<!-- DOCTYPE:告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代 ...
HTML5 CSS3银河系星空闪耀网页背景动画特效
HTML5 CSS3银河系星空闪耀网页背景动画特效，运行本效果后，一幅像银河系的星空图展现眼前，远处星空闪耀，星空整体上同样也具有动画效果，可很好的应用于网页背景中，本背景动画的生成依赖Canvas技术，运行时请选择支持Canvas技术的浏览器，IE就免谈了，推荐Chrome。提示：若不能运行，请将代码保存到本地HTML文件中，然后 ...
HTML5
HTML5
学习目标:
了解常用浏览器- 掌握WEB标准- 理解标签语义化- 掌握常用的排版标签- 掌握常用的文本格式化图像链接等标签- 掌握三种列表标签- 掌握表格标签- 掌握表格标签- 掌握表单标签- 掌握H5新增表单和表单属性 typora-copy-images-to: media
# 认识网页
网页主要由文字、图像和超链接等元素构成。当然，除了这些元 ...
HTML5移动端自适应的方法介绍
现在很多项目都需要做响应式或者自适应的来适应我们不同屏幕尺寸的手机，电脑等设备，本文就来为大家介绍一下HTML5移动端自适应的方法。
屏幕自适应方案
介绍方案之前，首先还是交代一下项目背景与需求，毕竟一切方案也不能脱离实际需求。
需求与背景
设备宽度 > 800px， body宽度为800px
320px < 设备宽度 < 8 ...
HTML5 速览
HTML5 速览
一. HTML5 元素分类
HTML赋值文档内容的结构和含义, 内容呈现由css样式控制
元素选用原则
少亦可为多
标记只应该应内容对语义的需要使用. 有条经验法则是: 问问自己打算如何发挥一个元素的语义作用, 如果不能马上答出就不用这个元素
别误用元素
对内容进行标记时, 只宜将元素用于他们原定的用途, 不要创 ...
16个非常有趣的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新，越来越多的开发者也正在加入HTML5阵营，甚至在移动开发上HTML5的地位也是越来越重要了。HTML5中的大部分动画都是通过Canvas实现，因为Canvas就像一块画布，我们可以通过调用脚本在Canvas上绘制任意形状，甚至是制作动画。本文就是收集了很多非常富有创意的一些canvas动画特效例子，这些例子 ...
HTML5标签大全
一、文字备忘之标签
HTML5中新增的标签
<article> 定义文章 <aside> 定义页面内容旁边的内容
<audio> 定义声音内容 <canvas> 定义图形
<command> 定义一个控制按钮 <datagrid> 指树或表格状数据格式中的动态数据 <datalist> 定义一个下拉列表 <details> 定义一个元素的细节 <dialog> 定义会话或人的交谈 <embed> ...
给萌新HTML5 入门指南（二）
本文由葡萄城技术团队原创并首发
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。
上一篇我们已经为大家介绍了HTML5新增的内容和基础页面布局，这篇会继续向大家介绍广义上HTML5中另一个组成部分：JavaScript数据类型。
JavaScript作为一种弱类型语言，最大的特点 ...
给萌新HTML5 入门指南
本文由葡萄城技术团队原创并首发
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。
HTML5的发展改变了互联网技术趋势，前端热度依旧不减，所以对于应用开发人员前端技术也成了必备技能之一，本篇文章的目的是为了帮助萌新的入门指导，也同时希望能为老鸟起到一定查 ...
一篇文章教会你使用HTML5 SVG 标签
【一、项目背景】
SVG 表示可伸缩矢量图形，这是一门用于描述 2D 图形的语言，图形应用使用 XML 编写，然后 XML 由 SVG 阅读器程序呈现。支持三种类型的图形对象：矢量图形形状（例如，由直线和曲线组成的路径），图像和文本。图形对象可以进行分组，样式设置，转换和合成。功能集包括嵌套转换，剪切路径，Alpha蒙版，滤镜 ...
html5
<!--
1. H5不是新语言，而是html第五次重大修改的第五个版本。
2. 首页主流的浏览器都支持H5，（谷歌，火狐，苹果） IE9以上支持H5
3.&nbs ...
HTML5实现微信聊天气泡效果
最近做一个HybridApp，前端有一个群聊的功能，于是就想模仿微信的聊天界面，先看效果图：
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5实现微信聊天气泡效果</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=dev ...
通过HTML5 Video来优化动态GIF
网页中的动态GIF图片是非常受欢迎的，因为它们相比静态图片更生动，相比网页视频更简单。但是GIF图片通常具有较大的体积，就导致网页加载速度变慢，内存使用增加。通过使用html video，可以使浏览器中的GIF图片在减少98%体积的情况下，仍然具有相对较高的质量。
我们注意到这篇文章是Google Web Fu ...
html5 播放 rtsp
目前大多数网络摄像头都是通过 RTSP 协议传输视频流的，但是 html 并不标准支持 RTSP 流。除了 Firefox 浏览器可以直接播放 RTSP 流之外，几乎没有其他浏览器可以直接播放 RTSP 流。Electron 应用是基于 Chromium 内核的，因此也不能直接播放 RTSP 流。
在借助一定工具的情况下，可以实现在 Web 页面上播放 ...
HTML5 实现图片预览和查看原图
html5从一开始就给开发者很多的期待，提供众多新的API，不用再想以前一样，为了实现某个功能写很多的代码。在以前，如果要实现图片预览会怎么做呢，因为为了安全的原因，web端的js是不能读取文件的本地真实路径的，那么只能将图片上传到服务器上，然后再拿到图片的链接，这样才能实现图片预览。而服务器呢，比如有两个文件 ...
【HTML5】HTML5基础
HTML
HTML –pre、font、特殊字符、列表、color属性、width/meta/target属性
文本相关：
pre: 段落文字 保留html源文档的格式(空格,换行,标签)
特殊字符：
空格
商标(™) ™
黑桃心❤ ♥
字体：
基本结构: <font >文字</font>
颜色: color(属性) 属性值 颜色的英文单词或 ...
HTML5中块级元素float浮动总结
1.float属性
在CSS中，任何元素都可以浮动，无论是块级元素还是行内元素，设置浮动后可以设置宽高（width,height）。
值描述
left
元素向左浮动。
right
元素向右浮动。
none
默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit
规定应该从父元素继承 float 属性的值。
HTML5中的块级 ...
简单介绍HTML5 Landmark
最近在进行无障碍相关文档翻译的时候遇到了 landmark 的概念，在网上搜了下发现没有相关的中文资料，因此写一篇博客简单介绍一下。
什么是 Landmark
Landmark 是一种用来表示网页组织结构的方法。通常一个网页可以被切分成几个大块
以一个视频网站为例，网页的最上方是一条banner，左侧是一个导航栏，右侧显示视频。网页可 ...
【译文】纯HTML5捕获音频流和视频流
原文地址：Capturing Audio & Video in HTML5
前言
长期以来音视频捕获一直是web开发的珍宝。多年来，我们不得不依赖浏览器插件（ flash 或者 silverlight ）来完成这个工作.
HTML5完成了救赎。可能并不明显，但是HTML5的兴起带来了大量对这杯硬件的访问。Geolocation(GPS)、Orientation API(加速度计)、WebGL（GPU）和We ...
