HTML学习
来源：互联网 发布：科密x1考勤机导出数据 编辑：程序博客网 时间：2024/06/05 18:19
前端开源项目
- 开发环境
Idea：https://www.jetbrains.com/idea/download/download-thanks.html?platform=windows
激活：http://intellij.mandroid.cn/
- 注释
<!--- ... ---->- !DOCTYPE 声明
!DOCTYPE声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本，HTML5 不是基于 SGML，因此不要求引用 DTD,HTML5 中仅规定了一种.<!DOCTYPE html>text标记
结构化标记：用来描述标题和段落的元素。
1标题
HTML的标题有六个等级，用
<h1>-<h6>来定义。h1：主标题（最重要的），然后h2（次重要），再其次是h3，以此类推。标题有两种用途：- 生成粗体或者大号文本
- 呈现文档结构很重要的因素。搜索引擎使用标题为网页结构和内容编制索引，用户可以通过标题来快速浏览你的网页。
2 段落
<p>表示，默认浏览器在显示段落时会另起一行，并与后续段落保持一定的距离。- 3 加粗
<b>表示 - 4 斜体
<i>表示 - 5 上标
<sup>表示 - 6 下标
<sub>表示，也是空元素 - 7 换行
<br/>表示 - 8 主体间分割线，用
<hr/>表示
- 语义化标记：表达特定含义的标记，它们不影响网页的结构，却为页面添加了额外的信息。例如在句子中加入强调内容，表明引用、或者表明是一个缩写词的全称等等。
- 强调
<strong>在阅读时会加强语气，在浏览器显示中为加粗。<em>起强调作用，在阅读时会加强语气，在浏览器显示为斜体。
- 引用
- 长引用
<blockquote表示，通常浏览器显示会加缩进，可以用site属性来表明引用来源。 - 短引用
<q>表示，可以用site属性来表明引用来源，IE浏览器不支持，尽量回避。
- 长引用
- 缩写和首字母缩写词
- 用
<abbr>表示。 - title属性可以拼写响应词汇的完整形式。
- 用
- 引文：用
<cite>来表示引用来源，斜体显示。 - 定义：
<dfn>表示一些新术语的定义，斜体显示，有的则原样显示。
- 强调
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Text Learning Demo</title></head><body><!--- 结构化标记示例 start---><br/><br/><h1 align="center">Text Demo</h1><hr/><p>A paragraph consists of one more sentences that from a self-contained unit of discourse. The start of a paragraph is indicated by a new line </p><p>Text is easier to understand when it is split up into units of text. For example, a book may have chapters.chapter can have subheadings. Under each heading there will be one or more paragraphs.</p><h2>Examples</h2><p>On the 4<sup>th</sup> of September, we will learn about <b>E=MC<sup>2</sup></b></p><p>The mout of CO<sub>2</sub> in the atmosphere grew by <strong>2ppm</strong> in 2009.</p><p>This an example show how to make a word appear <i>italic</i>.</p><!--- 结构化标记示例 end---><hr/><!--- 语义化标记示例 start---><p>This toy has many small pieces and is <strong>not suitable for children under five years</strong>.</p><p><em>Beware: </em>Pickpockets operate in this area.</p><p>hahaha<blockquote cite="http://en.wikipedia.org/wiki/Winnie-the-Pooh"><p>Did you ever stop to think.and forget to start again?</p></blockquote></p><blockquote cite="http://en.wikipedia.org/wiki/Winnie-the-Pooh"><p>Did you ever stop to think.and forget to start again?</p></blockquote><p>As A.A. Milne said. <q>Some people talk to animals. Not many listen though.That's the problem.</q></p><p><abbr title="Professor">Prof</abbr> Stephne Hawking is a theoretical physicist and cosmologist.</p><p><cite>A Brif History of Time</cite>by Stephne Hawking has sold over ten million copies worldwide.</p><p>A <dfn>black hole</dfn> is a region of space from which nothing,ot even light can escape.</p><!--- 语义化标记示例 end---></body></html>- 列表
HTML提供了三种列表形式：
- 有序列表：为每个项目编号的列表。
<ol>创建有序列表。<li>列表中的项目。- 项目符号样式（如数字、字母、罗马数字等），
<ol>type属性- CSS的list-style-type属性
- lower-roman
- upper-roman
- decimal，如1、2等等。
- decimal-leading-zero，如01、02等等。
- lower-alpha，如a、b等等。
- upper-alpha，如A、B等等。
- 无序列表：以点状项目符号开头的列表。
<ul>创建无序列表。<li>列表中项目。- 项目符号样式（如圆形、正方形等等），
ul的type属性- CSS的list-style-type属性
- circle
- square
- disc
- none
- 项目符号大小
- 随字体大小变化，CSS属性font-size设置。
- 项目图像
- CSS的list-style-image属性，属性值以url开头
- 呜呜呜，图像的大小怎么设置？
- 定义列表：以一系列术语以及其定义组成的列表。
<dl>创建定义列表。<dt>包含被定义的术语。<dd>包含定义。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Text Learning Demo</title> <style type="text/css"> #olistDemo{ list-style-type: upper-alpha; } #ulistDemo{ list-style-type: square; font-size: 20px; } #uimglist{ list-style-image: url("../img/star.svg"); margin: 160px; } </style></head><body><h1 align="center">List Demo</h1><hr/><!--- list demo start---><!---有序列表---><p >Fruits</p><ol id="olistDemo"> <li>Banana</li> <li>Apple</li> <li>Pear</li></ol><!--- 无序列表 ---><p>Fruits</p><ul id="ulistDemo"> <li>Banana</li> <li>Apple</li> <li>Pear</li></ul><!---定义列表 start---><dl> <dt>Sashimi</dt> <dd>Sliced raw fish that is served with condiments such as shredded daikon radish or ginger root, wasabi and soy sauce</dd> <dt>Scale</dt> <dd>A device used to accurately measure the weight of ingredients</dd> <dd>A technique by which the scales are removed from the skin of a fish</dd> <dt>Scamorze</dt></dl><!---添加项目图片---><p >Fruits</p><ul id="uimglist"> <li>Banana</li> <li>Apple</li> <li>Pear</li></ul><hr/><!--- list demo end---></body></html>- 标签
- HTML全属性
<a>定义标签，也称anchor（锚点）元素，它既可以用来链接到外部地址实现页面跳转也可以链接到当前页面的部分。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标签</title></head><body><a href="http://www.baidu.com">点击打开百度</a><a href="LoaclFile.html">打开本地连接</a></body></html>LoaclFile.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Local</title></head><body><p> Welcome ！</p></body></html>- 视频
- 支持的视频格式
当前，video支持三种视频格式：
Ogg ：带有Theora视频编码和Vorbis音频编码的Ogg文件
MPEG：带有H.264视频编码和ACC音频编码的MPEG 4文件
WebM：带有VP8视频编码和Vorbis音频bain吗的WebM文件 - 视频格式转化
- 将MP4转化为Ogg
- 工具ffmpeg： http://ffmpeg.zeranoe.com/builds/
- 将MP4转化为Ogg格式的文件
进入ffmpeg-20160119-Git-cc83177-win64-static\bin
输入命令：ffmpeg -i 57b560893cd39.mp4 -acodec libvorbis 57b560893cd39.ogg
- 将MP4转化为Ogg
- DOM Document 对象
- DOM对象
- 属性
- 全局属性
- 事件属性
- Video 对象
- 支持的视频格式
简单的调用实例
<video src="57b560893cd39.mp4" width="320" height="240" controls="controls"> Your browser does not support this video tag. </video>Safari不支持ogg格式，提供MP4供Safari播放
<!---Safari do not support ogg format,but mp4 is supported---> <video width="320" height="240" controls="controls"> <source src="57b560893cd39.ogg" type="video/ogg"> <source src="57b560893cd39.mp4" type="video/mp4"> Your browser does not support this video tag. </video>Video 对象的使用实例
<!---Video 对象的使用实例---> <!---autoplay 自动播放---> <video id = "myVideo" width="320" height="240" controls="controls" autoplay="autoplay" style="margin-top: 15px;"> <source src="57b560893cd39.ogg" type="video/ogg"> <source src="57b560893cd39.mp4" type="video/mp4"> Your browser does not support this video tag. </video> <p id="demo"></p> <button onclick="getDuration()">计算时长</button> <button onclick="reload()">从头播放</button> <button onclick="bigger()">放大</button> <button onclick="smaller()">缩小</button> <!--- 视频播放完成才可以计算时长 ---> <script> var id = document.getElementById("myVideo"); function getDuration() { var x = document.getElementById("myVideo").duration; document.getElementById("demo").innerHTML = x; } function reload() { var x = document.getElementById("myVideo"); x.load(); } function bigger() { id.width +=50; id.height +=50; } function smaller() { id.width -= 50; id.height -= 50; } </script>- 音频
- 音频格式
- Ogg Vorbis
- MP3
- Wav
- 音频格式
<audio controls="controls"> <source src="song.mp3" type="audio/mpeg"> <source src="song.ogg" type="audio/ogg"> Your browser does not support the audio element.</audio>- 拖拽
网上最经典的示例
<!DOCTYPE html><html lang="en"><head> <style type="text/css"> #place {width:198px; height:66px;border:2px solid #aaaaaa;} </style> <script type="text/javascript"> function allowDrop(event) { event.preventDefault(); } function drag(event) { event.dataTransfer.setData("Text",event.target.id); } function drop(event) { event.preventDefault(); var data=event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); } </script> <meta charset="UTF-8"> <title>拖放示例</title></head><body><div id="place" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br/><img id="img" src="57b5608e7a7ca_1024.jpg" draggable="true" width="80" height="60" ondragstart="drag(event)"></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽</title> <style> #drag_source{ width: 100px; height: 100px; background-color: green; border-radius: 12px; text-align: center; line-height: 100px; color: yellow; } #drag_target{ width: 200px; height: 200px; background-color: beige; border: 2px dashed darkgoldenrod; margin: -100px 12px 12px; float: right; } #drag_target h1{ text-align: center; color: brown; margin: 6px 0; font-size: medium; } </style></head><body onload="init()"><div id="drag_source" draggable="true"></div><div id="drag_target"><h1>拖拽目标区域</h1></div><script type="text/javascript"> function init() { var source = document.getElementById("drag_source"); var target = document.getElementById("drag_target"); source.addEventListener("dragstart",function (event) { var dt = event.dataTransfer; dt.effectAllowed='all'; dt.setData("text/plain","源对象拖入") },false); target.addEventListener("drop",function (event) { var dt=event.dataTransfer; var text = dt.getData("text/plain"); target.innerHTML +="<p>" + text + "</p>"; event.preventDefault(); //关闭默认处理，否则目标元素拒绝接收被拖放元素 event.stopPropagation(); //停止事件传播 },false); } //设置整个页面不执行默认处理，否则拖放处理不能实现。因为页面是优于其他元素接收拖放的 document.ondragover =function (event) { event.preventDefault(); } document.ondrop=function (event) { event.preventDefault(); }</script></body></html>- 图像
<img>定义图像，使用src属性指向图片的具体地址。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图像</title></head><body><img src="xmind_file.ico" width="80" height="60"></body></html>-画布
canvas元素用来在网页上绘制图形，HHTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>画布示例</title></head><body><canvas id="mycanvas" width="320" height="240" style="border: 2px solid #605000"></canvas><script type="text/javascript"> var id = document.getElementById("mycanvas"); var mtext = id.getContext("2d"); //填充颜色 mtext.fillStyle="#60F000" mtext.fillRect(0,0,320,240); //在矩形中绘制对角线 mtext.moveTo(0,0); mtext.lineTo(320,240); mtext.moveTo(320,0); mtext.lineTo(0,240); mtext.stroke(); //绘制圆形 mtext.fillStyle="#F05000" mtext.beginPath(); mtext.arc(160,120,50,0,Math.PI*2,true); mtext.closePath(); mtext.fill(); //绘制渐变色 var grad=mtext.createLinearGradient(0,0,320,240); grad.addColorStop(0,"#FF0000"); grad.addColorStop(1,"#00F080"); mtext.fillStyle=grad; mtext.fillRect(120,0,80,90) mtext.fillRect(120,150,80,90) //添加图片 var img=new Image(); img.src="icecream.svg"; img.width=80; img.height=60; mtext.drawImage(img,120,90,80,60);</script></body></html>Web 存储
HTML5提供了两种在客户端存储数据的新方法
- localStorage：无时间限制的数据存储
- sessionStorage：针对一个session的数据存储。sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
之前这些是有cookie完成的，cookie的缺点是不适合存储大量数据，因为他们由每个服务器的请求来传递，使得速度很难而且效率不高。HTML 5中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据时，它在不影响网站的性能的情况下，使存储大量的数据成为可能。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。在HTML 5中使用JavaScript来存储和访问数据。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Web Location</title></head><body><div id="result"></div><!--- localStorage demo---><script type="text/javascript"> //localStorage demo //Check whether the browser support if(typeof (Storage) != "undefined"){ localStorage.setItem("lastname","TestDemo"); document.getElementById("result").innerHTML = localStorage.getItem("lastname"); }else{ document.getElementById("result").innerHTML ="Sorry,your browser do not support web storage"; } if(localStorage.pagecount){ localStorage.pagecount = Number(localStorage.pagecount) + 1; }else { localStorage.pagecount = 1; } document.write("Local Storage demo. Visit : " + localStorage.pagecount + " time(s)."); //Session Storage demo. if(sessionStorage.pagecount){ sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1; }else { sessionStorage.pagecount = 1; } document.write("Session Storage demo. Visit : " + sessionStorage.pagecount + " time(s).\n");</script><br/><br/><br/><br/><br/><br/><p>Local Storage demo。 刷新页面，计数器增长，即使关闭浏览器，计数器次数仍然会增长</p><p> Session Storage demo。 刷新页面，计数器增长。关闭浏览器窗口计数器被重置。</p></body></html>应用程序缓存(Application Cache)
HTML5通过cache manifest文件来创建web应用的离线版本
- 优势
- web应用可以进行缓存，可以在没有因特网连接时进行访问
- 离线浏览：用户可以在离线时使用它们。
- 速度：已缓存资源加载得更快
- 减少服务器负载：浏览器将只从服务器下载更新过或更改过的资源。
- 浏览器支持情况
- 除了Internet Explorer，所有主流的浏览器均支持。
Manifest文件
manifest文件是简单的文本文件，它告知浏览器被缓存的内容以及不缓存的内容。
- CACHE MANIFEST：在此标题下列出的文件将在首次下载后进行缓存
- NETWORK：在此标题下列出的文件需要与服务器连接，且不会被缓存。
- FALLBACK：在此标题下列出的文件规定，当页面无法访问时回退页面，（比如404页面）
- 优势
何时更新缓存
- 用户清空浏览器缓存
- manifest 文件被修改（参阅下面的提示）
- 由程序来更新应用缓存
- 注意事项
- 一旦文件被缓存，浏览器会继续展示已缓存的版本，即使修改了服务器上的文件，为保证浏览器更新缓存，亲更新manifast文件。
- 浏览器对缓存数据的容量限制可能不太一样。
demo 敬请期待web worker
当HTML页面执行脚本时，页面状态不可响应，直到脚本完成，web worker是运行在后台的JavaScript，>独立于其他脚本，不会影响页面的性能，您可以继续做任何您愿意做的事情，比如点击、选取内容等等，>而此时web worker则在后台运行。
- 浏览器支持情况
- 除了Internet Explorer,其他的主流浏览器均支持。
- 浏览器支持情况
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Web Worker</title></head><body><p>计数：<output id="counter"></output></p><button onclick="start_web_worker()">开始 Web Worker</button><button onclick="stop_web_worker()">停止Web Worker</button><br/><br/><script> var web_worker ; function start_web_worker() { if(typeof (Worker) != "undefined"){ if(typeof (web_worker) == "undefined"){ web_worker = new Worker("web_worker_demo.js"); } web_worker.onmessage = function (event) { document.getElementById("counter").innerHTML = event.data; } }else { document.getElementById("counter").innerHTML = "Sorry,your browser does not support web worker." } } function stop_web_worker() { web_worker.terminate(); }</script></body></html>//web_worker_demo.jsvar i = 0;function timedCount() { i = i + 1; postMessage(i); setTimeout("timedCount()",1000);}timedCount();服务器发送事件
HTML5服务器发送事件(server-sent event)允许网页获得来自服务器的更新。
- Server-Sent事件
- 单向消息传递
- 网页自动获取来自服务器的更新。例如，Facebook/Twitter更新，估计更新、新博文、赛事结果等。
- EventSource对象用于接收服务器发送事件通知。EventSource的对象
- 浏览器支持概况
- 除了Internet Explorer，其他的主流浏览器均支持。
- Server-Sent事件
demo 待更新- 表单
- input类型
HTML5提供了更多的表单输入类型，这些新特性提供了更好的输入控制和验证。- color : 主要用于选取颜色
- date pickers
- date : 从一个日期选择器选择日、月、年。
- datetime：选择时间、日、月、年（UTC 时间）。
- datetime-local : 选择时间、日、月、年 (本地时间).
- month : 选择月、年
- time : 类型允许你选择一个时间（包含小时、分钟）。
- week： 类型允许你选择周和年。
- email : 用于应该包含 e-mail 地址的输入域。
- number 类型用于应该包含数值的输入域。
- 属性
- max : 规定允许的最大值
- min : 规定允许的最小值
- step : 规定合法的数字间隔
- value : 规定默认值
- 属性
- range 类型用于应该包含一定范围内数字值的输入域，显示为滑动条。
- 属性
- max : 规定允许的最大值
- min : 规定允许的最小值
- step : 规定合法的数字间隔
- value : 规定默认值
- 属性
- search : 类型用于搜索域，比如站点搜索或 Google 搜索。
- url : 用于应该包含 URL 地址的输入域,提交表单时，会自动验证 url 域的值。
- input类型
<!---从拾色器选择一个颜色--->请选择颜色：<input type="color" name="favcolor"><br/><!--- date 类型允许从一个日期选择器选择一个日期 --->请选择日期：<input type="date" name="mdate"><br/><!--- datetime 类型允许你选择一个日期（UTC 时间）--->输入UTC日期 <input type="datetime" name="mdatetime"><br/><!--- datetime-local 类型允许你选择一个日期和时间 (无时区)-->无时区日期 <input type="datetime-local"><br/><!--- email 类型用于应该包含 e-mail 地址的输入域 --->请输入Email <input type="email" name="memail"><br/>选择月与年<input type="month" name="mmonth"><br/>请输入(0到100)<input type="number" max="100" min="0" step="10"><br/>滑动条实现 <input type="range" name="mrange" min="0" max="100" step="10"><br/>搜 索 域 <input type="search" name="msearch"><br>电话 号码 <input type="tel"><br/>时间控制器 <input type="time"><br/>URL 地 址 <input type="url"><br/>选择周和年 <input type="week"><br/>表单元素
datalist
datalist元素规定输入域选项列表,该属性规定 form 或 input 域应拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应在该域中显示填写的选项。
keygen
keygen元素提供一种验证用户的可靠方法，keygen标签规定用于表单的密钥对生成器字段。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
- output
output元素用于不同类型的输出，比如计算或脚本输出
<!--- input 列表属性与datalist元素绑定---> <input list="browsers"><datalist id="browsers"> <option value="Internet Explorer"></option> <option value="Firefox"></option> <option value="Chrome"></option> <option value="Opera"></option> <option value="Safari"></option></datalist><form action="" method="get"> 用户 <input type="text" name="username"> 加密 <keygen name="security"></keygen> <input type="submit"></form><form oninput="x.value=parseInt(mrange.value)+parseInt(mnumber.value)">0 <input type="range" id="mrange" value="50">100+ <input type="number" id="mnumber" value="50"> =<output name="x" for="a b"></output></form>- 1 PHP环境搭建 - 工具：eclipse、XAMPP - java：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html - eclipse：https://www.eclipse.org/downloads/download.php?file=/oomph/epp/oxygen/R/eclipse-inst-win64.exe - xmapp：https://www.apachefriends.org/zh_cn/download_success.html - 问题 - 安装wamp，出现VCRUNTIME.dll丢失 解决方法：https://jingyan.baidu.com/article/1612d500b1b79de20e1eee8a.html - 创建PHP工程，新建PHP文件```echo 'hello world';``` - 运行axmpp打开apache服务器 - 运行需要在xampp安装目录下xampp/htdocs目录下,可以通过以下两种方式来运行： - 将php文件copy到xampp/htdocs下，在浏览器中输入localhost/php文件名，另外，验证xampp安装成功的方式是，打开浏览器，输入localhost，回车，显示XAMPP页面，表示安装OK。 - 将eclipse工程配置到xampp/htdocs目录，操作步骤：打开elipse->File->Switch Workspace,输入xampp/htdocs，重启之后，右键就可以直接运行php文件- 2
阅读全文
0 0
- 【HTML】HTML学习笔记
- 学习html
- Html学习
- html 学习
- HTML学习
- HTML学习
- HTML学习
- Html学习
- html学习
- HTML学习
- html学习
- 学习Html
- html学习
- 学习html
- html学习
- html学习
- html学习
- HTML 学习
- hdu 1217 Arbitrage
- 《笨办法学python》加分习题24——我的答案
- 大数据学习3：hadoop编译和伪分布式部署
- python 字典 dict.get的用法
- 全力以赴做一些事情
- HTML学习
- 设备共享iSCSI
- 写 安卓游戏脚本
- ARM中的PC与R15
- requests库入门-1-安装requests库
- 面试题总结之windows/linux内存管理
- maven的环境配置及在Eclipse里的配置
- 多核CPU配合负载均衡可以这样用，为老板省点钱
- 补码——为cpu运算产生的补码
