HTML(5)
关注
分享
扫一扫
文章平均质量分 50
刘小妞
遇见更好的自己---前端小白的成长历程，学的越多，发现自己越无知
展开
-
html基础总结
1.HTML：超文本标记语言2.标记类型：单标记与双标记3.文档结构： 网页的开始和结束表示网页文件的头部信息，如标题，搜索引擎关键字，主要是针对搜索引擎表示网页文件的标题表示网页文件的主题部分，针对用户的Doctype:定义文档原创 2016-03-02 22:05:33 · 403 阅读 · 0 评论 -
HTML5表单属性
1.<form> <input> autocomplete属性 form或input应该有用自动完成的功能。当用户在自动完成域开始输入时，浏览器应该在该域中显示填写的选项。 点击刷新后的效果图 <form action="demo-form.php" autocomplete="on"> First name:<input type="text" name="fname"><br> L原创 2016-06-14 16:56:42 · 693 阅读 · 0 评论 -
HTML5 语义元素
语义元素：能够清楚的描述其意义给浏览器和开发者。 无语义：<div> <span> 语义元素实例：<form> <table> <img> 1.section元素 定义文档中的节，比如章节，页眉，页脚或文档的其他部分。<section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is....</p></section>原创 2016-06-14 17:16:22 · 434 阅读 · 0 评论 -
HTML5 Web存储
HTML5 web存储是一个比cookie更好的本地存储方式。 使用HTML5可以在本地存储用户的浏览数据。之前的本地存储使用的是cookies，但是web存储更加安全快速，这些数据不会被保存在服务器上，这些数据只用于用户请求网站数据，它也可以存储大量的数据，不影响网站的性能。 数据以 键/值 对存在，web网页的数据只允许该网页访问使用。 1. localStorage和 sessionSt原创 2016-06-14 17:35:30 · 489 阅读 · 0 评论 -
HTML5 应用程序缓存
通过创建cache manifest文件，可以轻松的创建web应用的离线版本。（web应用可进行缓存，并可在没有因特网连接时进行访问） 优势： 1.离线浏览–用户可在应用离线时使用它们 2.速度–已缓存资源加载的更快 3.减少服务器负载–浏览器只从服务器下载更新过或者更改过的资源 1.Cache Manifest基础 如果需要用应用程序缓存，在文档<html>标签中包含manifest属原创 2016-06-14 19:42:46 · 584 阅读 · 0 评论 -
HTML5 Web Workers
web worker 是运行在后台的javascript，不会影响页面的性能 当在HTML页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。 web worker是运行在后台的javascript，独立于其他脚本，不会影响页面的性能。web worker在后台运行时，可以做任何事情：点击，选取内容。 1.实例 <p>计数： <output id="result"></output><原创 2016-06-14 20:00:28 · 572 阅读 · 0 评论 -
HTML5 服务器发送事件（server-sent events）
HTML5服务器发送事件允许网页获得来自服务器的更新 1.接收服务器发送事件通知 一直更新时间<h1>获取服务端更新数据</h1><div id="result"></div><script>if(typeof(EventSource)!=="undefined"){ var source=new EventSource("demo_sse.php");//创建一个对象原创 2016-06-14 20:10:11 · 974 阅读 · 0 评论 -
HTML5 WebSocket
WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。 在WebSocket API中，浏览器和服务器只需要做一个握手动作，然后浏览器和服务器之间就形成了一条快速通道，两者之间就直接可以数据相互传递。 浏览器通过javascript向服务器发出简历WebSocket的连接请求，连接建立以后，客户端和服务器端就可以通过TCP连接直接交换数据。 当你获取Web Soc原创 2016-06-14 21:38:39 · 392 阅读 · 0 评论 -
HTML状态码大全（301,404,500等）
这些状态码被分为五大类： 100-199 用于指定客户端应相应的某些动作。 200-299 用于表示请求成功。 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。 400-499 用于指出客户端的错误。 （自己电脑这边的问题） 自己电脑这边的问题） 500-599 用于支持服务器错误。 （对方的问题） 对方的问题）一些常见的状态码为： 200 - 服转载 2016-06-20 18:45:03 · 10872 阅读 · 0 评论 -
HTML5中Web Storage
cookie可以在客户端保存诸如用户名等简单的用户信息，主要的问题： 大小：cookie的大小被限制在4KB 带宽：cookie是随着HTTP事务一起被发送的，因此会浪费一部分带宽 复杂性：要正确的操纵cookie是困难的HTML5中的Web Storage就是在Web上存储数据的功能。Web Storage又分为两种：sessionStorage: 将数据保存在session对象中。所谓原创 2016-12-16 14:56:05 · 460 阅读 · 0 评论 -
HTML5 离线应用程序
HTML5中，新增了一个API，利用本地缓存机制，为离线的Web应用程序开发提供了可能。为了能够让Web应用程序在离线状态的时候也能正常工作，必须把所有构成Web应用程序的资源文件，诸如HTML文件，CSS文件，JavaScript脚本文件放在本地缓存中，当服务器没有和网络连接时，也可以利用本地缓存中的资源文件来正常运行Web应用程序。1.本地缓存和浏览器缓存的区别 本地缓存是为整个Web应用程序原创 2016-12-16 17:34:23 · 2121 阅读 · 0 评论 -
HTML5 文件API
1.FileList对象和file对象 FileList对象表示用户选择的文件列表。在HTML5中，通过multiple属性，file控件内允许一次放置多个文件。控件内的每个用户选择的文件都是一个file对象，而FileList对象则为这些file对象列表，代表用户选择的所有文件。 file对象有两个属性，name属性表示文件名，lastModifiedDate属性表示文件的最后修改日期。<in原创 2016-12-20 17:35:44 · 1001 阅读 · 0 评论 -
HTML5表单元素
新的表单元素：<datalist> <keygen> <output> 1.datalist元素 规定输入域的选项列表，datalist属性规定form或input域应该拥有的自动完成的功能。当用户在自动完成域中开始输出时，浏览器应该在域中显示填写的选项。 <form ><input list="browsers" name="browser"><datalist id="browsers原创 2016-06-14 13:34:09 · 520 阅读 · 0 评论 -
HTML5中新的input类型
1.color用在input字段，主要用于选取颜色<input type="color" name="favcolor">2.date允许从一个日期选择器选择一个日期<input type="date" name="bday">3.datetime允许选择一个日期（UCT时间）<input type="datetime" name="bdaytime">4.datetime-local选择一个日期和原创 2016-06-14 11:06:24 · 943 阅读 · 0 评论 -
hr 标签的使用
标签可以产生一条分割线，并且可以设置颜色，位置，粗细 今天在使用hr标签的时候出现了问题，在网页中每个横线的显示是一样的，转成pdf格式之后，本来蓝色的线条，有的显示为蓝色，有的显示为灰色，放大后颜色一样，但是有一个灰色的边框。 原因：hr是一个块级元素，本身有默认的边框，颜色为灰色。（1）可以通过高度首先设为0 然后设置边框的颜色 这样就不会出现灰色边框 hr{ height:0px;原创 2016-03-23 17:29:06 · 3122 阅读 · 0 评论 -
如何把自己用html写的简历导出成为pdf格式
设计并实现了一份精美的简历，导出来的时候却出来了各种问题，pdf的格式全部乱了今天终于找到了一种完美的办法：1.首先用谷歌浏览器打开自己的html简历。2.右键选择打印3.保存 （格式完全一样，不会乱的呦！）PS:有页眉页脚和背景图形的选项页眉页脚会显示日期，title，和文档的地址，简历中不需要，所以这个可以去掉不选。‘背景图形不选择彩色的可能会变成黑白的，所以这么原创 2016-03-23 17:30:17 · 10042 阅读 · 1 评论 -
使用HTML和CSS实现大白
今天动手实现了一下大白<!doctype html><html><head><meta charset="utf-8"><title>Baymax</title><style>body { /*设置背景为渐变色*/ background-size:100% 100%; background: linear-gradient(#9FE8F7,#2C9FF2);原创 2016-04-15 20:50:50 · 1119 阅读 · 0 评论 -
html标签复习--2016.6.13
1.链接<a href="http://www.baidu.com">百度首页</a>2.图像 html的属性应该始终被包括在引号内，双引号是常用的，但是单引号也没有问题。<img src="../images/1.jpg" width="200" height="200">3.<b>对文本格式设置，粗体<i>文本格式为斜体通常会使用<strong>替换加粗标签<b>,<em>替换<i>使用原创 2016-06-13 20:16:54 · 411 阅读 · 0 评论 -
HTML5简介
1.HTML5的设计目的是为了移动设备上支持多媒体，是下一代HTML标准。 HTML5中一些有趣的新特性： 用于绘画的canvas元素 用于媒介回放的video和audio元素 对本地离线存储的更好的支持 新的特殊内容元素，比如article,footer,header,nav,section 新的表单控件：比如：calendar,date,time,email,url,search原创 2016-06-13 21:25:53 · 455 阅读 · 0 评论 -
html5--canvas学习
HTML5 canvas 元素用于图形的绘制，canvas 标签只是图形容器，您必须使用脚本(通常是JavaScript)来绘制图形。 1.创建一个画布//设置大小和边框<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>2.使用JavaScript来绘制图像 <sc原创 2016-05-30 22:02:47 · 748 阅读 · 0 评论 -
HTML5 MathMl
HTML5可以在文档中使用MathMl元素。对应的标签是<math>...</math> MathMl是数学标记语言，是一种基于xml的标准，用来在互联网上写数学符号和公式。 1. <math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <msup><mi>a</mi><mn>2</mn></ms原创 2016-06-13 22:03:33 · 2677 阅读 · 0 评论 -
HTML5内联SVG
1.SVG是可伸缩矢量图形（Scalable Vector Graphics）,用于定语网络的矢量图形，使用XML格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失。 优势： 与其他图像格式相比（jpeg和gif）1.图像通过文本编辑器来创建和修改2.图像可以被搜索，索引，脚本化或压缩3.可伸缩的4.图像在任何分辨率下呗高质量的打印5.图像质量不下降的情况下被放大2.SVG与原创 2016-06-13 21:57:51 · 2613 阅读 · 0 评论 -
HTML5拖动
1. <style type="text/css">#div1, #div2 <!--定义两个装图片的盒子的大小和位置-->{float:left; width:100px; height:35px; margin:10px;border:1px solid #aaaaaa;}</style><script>function allowDrop(ev){ev.preventDefau原创 2016-06-14 09:49:00 · 472 阅读 · 0 评论 -
HTML5地理定位(Geolocation)
html5中使用getCurrentPosition()方法获得用户的位置 <p id="demo">点击按钮获取您当前坐标：</p><button onclick="getLocation()">点我</button> <!--点击触发获取位置的函数--><script>var x=document.getElementById("demo");//function getLocatio原创 2016-06-14 10:15:08 · 444 阅读 · 0 评论 -
HTML5 Video和Audio
1.视频 video提供了播放，暂停和音量空间来控制视频。 标签之间插入的内容是提供给不支持video元素的浏览器显示的。 video元素支持多个source元素，source元素可以连接不同的视频文件，浏览器使用第一个可识别的格式。<video width="320" height="240" controls> <source src="movie.mp4" type="video/m原创 2016-06-14 10:34:42 · 524 阅读 · 0 评论 -
根据PSD登陆页面设计稿切图制作HTML网页全过程
切图的目的是把PSD设计稿转换为HTML页面。记得自己当时学习切图时，网上切图相关的文章是不少，但是大都是讲怎么使用切片工具把一张图片分割成多张图片，然后存储为Web使用格式，并且都比较简单和零碎，并不能满足我的要求。因此只能自己不断尝试，今天分享给大家“如何根据PSD设计稿通过PS切图和DIV+CSS布实现HTML页面”，希望能帮助到大家。实例:下面通过一个简单的登陆页面PSD设计稿转载 2017-02-16 15:18:04 · 27740 阅读 · 5 评论