- 浏览: 1242875 次
- 性别:
- 来自: 上海
-
文章分类
最新评论
-
lankk:
lankk 写道事实上,在运行String s1=new St ...
理解String 及 String.intern() 在实际中的应用 -
lankk:
事实上,在运行String s1=new String(&qu ...
理解String 及 String.intern() 在实际中的应用 -
lankk:
同意1楼的说法http://docs.oracle.com/j ...
理解String 及 String.intern() 在实际中的应用 -
raoyutao:
...
jdk 线程池 ThreadPoolExecutor -
hongdanning:
理解了。之前困惑的一些明白了。谢谢分享。
理解String 及 String.intern() 在实际中的应用
基本
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Welcome </title> </head> <body> </body> </html>
新标签 nav section aside article figure 不再是清一色的div
<!DOCTYPE HTML> <html> <head> <title>html5</title> <style> header,section,footer,nav,aside,article,figure{ dispaly:block; border:dashed 1px gray; padding:10px; margin:10px; } </style> </head> <body> <header>header <nav>nav</nav> </header> <section>section <article>article</article> <article>article</article> <article>article</article> <aside>aside</aside> </section> <footer> footer </footer> </body></html>
outline 大纲 check
http://gsnedders.html5.org/outliner/
article aside nav section 属于 sectioning content
h1 h2 ... h6 hgroup 属于 heading content
heading content的内容(<>这就是内容</>)可以产生outline的item
h1 h2 假如处在一个sectioning中是会有层次区别, 但假如他们在一个hgroup里面,那么会自动取h1的值用作outline的item, 不管h1的位置在前还是后
body 是root sectioning
blockquote包住h1可以让h1不产生outline
ps: div不会产生一个section
同时human readable and machine readable的time标签
<time datetime="2010-02-10T13:59:06-08:00" pubdate>02/23/11</time>
和iphone相关的一个
<meta name="viewport" content="width-device-width,maximum-scale=1.0" />
让页面支持多种设备
<!--update based on html5--> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link href="_css/phone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" > <link href="_css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 768px)" > <link href="_css/main.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)" >
video
<video width="420" height="236" controls preload="false"> <source src="_video/explore_promo.mp4" type="video/mp4" codecs='avc1.42E01E, mp4a.40.2'" /> <source src="_video/explore_promo.webm" type="video/webm; codecs='vp8, vorbis"' /> <source src="_video/explore_promo.ogv" type="video/ogg; codecs="theora, vorbis"" /> </video> <video width="420" height="236" poster="_video/poster.jpg" preload="false"> <source type="video/h264" src="_video/explore_promo.mp4" /> <source type="video/webm" src="_video/explore_promo.webm" /> <source type="video/ogg" src="_video/explore_promo.ogv" /> </video>
audio
<audio controls="controls"> <source src="_assets/ex_ca_podcast.ogg" type="audio/ogg" /> <source src="_assets/ex_ca_podcast.mp3" type="audio/mpeg" /> </audio>
canvas
<head> <script type="text/javascript"> function doCanvas() { var my_canvas = document.getElementById("theCanvas"); var myCanvas_context = my_canvas.getContext("2d"); myCanvas_context.strokeRect(0, 0, 300, 225); var chart_bg = new Image(); chart_bg.src = "_images/chart_bg.gif"; chart_bg.onload = function() { myCanvas_context.drawImage(chart_bg,0,0); myCanvas_context.beginPath(); myCanvas_context.moveTo(25,190); myCanvas_context.lineTo(40,180); myCanvas_context.lineTo(90,150); myCanvas_context.lineTo(100,165); myCanvas_context.lineTo(130,90); myCanvas_context.lineTo(150,100); myCanvas_context.lineTo(275,20); myCanvas_context.strokeStyle = "#000"; myCanvas_context.stroke(); myCanvas_context.textAlign = "center"; myCanvas_context.textBaseline = "middle"; myCanvas_context.fillStyle = "#7F7F7F"; myCanvas_context.font = "bold 30px sans-serif"; myCanvas_context.fillText("We're Growing", 155, 100); }; } </script> </head> <body onload="doCanvas();"> <canvas id="theCanvas" width="300" height="225"></canvas> </body>
new input type
<input type="email" /> url, tel // iphone上的safari会根据不同的type 弹出不同的输入框 <input type="number" min="1" max="10" value="1" step="1" /> //自动变成下拉框 chrome支持 与autofocus有冲突 <input type="email" placeholder="example:xxxxxx"/> // input example <input type="email" autofocus="autofocus"/> // 自动聚焦 <input type="range" name="rating" id="rating" tabindex="65" min="1" max="50" value="25" step="5"> //可选进度条 <input type="date" /> //opera 支持 <input type="datetime" /> //opera 支持 <input type="month" /> //opera 支持 <input type="week" /> //opera 支持 <input type="time" /> //opera 支持
web font
@font-face { font-family: 'DragonwickFGRegular'; src: url('../_fonts/dragwifg-webfont.eot'); src: local('!'), url('../_fonts/dragwifg-webfont.woff') format('woff'), url('../_fonts/dragwifg-webfont.ttf') format('truetype'); } #mainContent h1{ font: normal 2.5em "DragonwickFGRegular", Georgia, "Times New Roman", Times, serif; margin: .5em 0 .25em; letter-spacing: -1px; }
字体阴影
#mainContent h2 { text-shadow: 1px 1px 1px #333; filter: dropshadow(color=#333, offx=1, offy=1); }
兼容性检查
www.modernizr.com
<mark></mark>标签 浏览器可以自动着色mark的字段 也可以自己改css 相当于span
发表评论
-
大型网站技术架构 读书笔记
2017-11-29 14:17 1333web 前端 优化 浏览器 减少http请求 合并c ... -
业务unique ID的生成策略分析
2017-02-20 16:31 1043业务unique ID的生产策略分析 需求上 ... -
ServiceLocatorFactoryBean 学习
2016-01-27 14:36 3403今天看一个新项目 ... -
用户注册流程的一个好列子
2015-05-06 15:42 1284最近用了一个app, 《不背单词》, 里面的用户注册很有意 ... -
jvm notes
2014-12-16 15:19 1776运行时数据区 program counter re ... -
window server 2008 task 不执行问题
2014-01-24 10:53 3976要在win2008下设置一个定时任务, .bat执行的任务, ... -
(转)date format
2013-12-04 13:40 1215深入理解Java:SimpleDateFormat安全 ... -
POI excel 触发 公式 计算 删除空白行
2013-04-15 12:44 5127用POI api修改excel 表格数据后, 想触发计算公式 ... -
java 汉字 \u 转换
2012-08-08 13:32 2297import org.apache.c ... -
地址解析api资源
2011-06-28 10:50 1514Search for location What you ... -
cvs 查看个人提交记录
2011-06-23 11:25 8844eclipse的cvs插件不能看自己在整个项目的提交历史 但 ... -
twitter 新 share url
2011-05-27 10:39 1206http://twitter.com/intent/tweet ... -
linkedin share
2011-05-26 16:47 1572分享的时候linkedin 也是去url上抓取信息的 但他和 ... -
facebook share
2011-05-25 20:49 1954通过url share到facebook时 是由faceb ... -
php 字符串 包含 比较 替换
2010-08-30 20:56 5266if(strpos($str, 'ok') !== fals ... -
查看 http 请求
2010-05-25 19:34 1284httpdebugerpro -
evernote 太强大了
2010-03-10 15:42 2107在PC MAC IPHONE ANDROID 上面都有客户端, ... -
open command window here, window xp下的一个好工具
2010-03-09 11:07 1480发现一个windows下的工具,可以让你对着一个文件夹,右键, ... -
用批处理设置jdk和tomcat环境变量
2010-03-05 17:26 2542学过Java编程的人应该知道,都是要设置JDK的环境变量,这个 ... -
java 扰码 RETROGUARD
2010-03-05 16:23 2375RETROGUARD FOR JAVA(tm) OBFUS ...
相关推荐
HTML5学习笔记 HTML5是一种新型的网页标记语言,它提供了许多新的特性和元素,旨在提高网页的可用性、可读性和可访问性。本笔记将对HTML5的基本结构、标记、语义元素、表单、媒体元素和Canvas API进行详细的介绍。 ...
HTML5学习的详细教程,能快速帮助你掌握这门技术。
从给定文件的内容来看,这份HTML5学习笔记重点介绍了HTML5表格、列表和表单元素的使用方法。 知识点一:HTML5表格元素 表格是HTML页面中用于展示数据的常用方式,包括三大基本元素:表格(table)、行(tr)和...
本学习笔记将聚焦于HTML5的基础知识,包括其新特性、元素和最佳实践。 一、HTML5的新特性 1. 语义化标签:HTML5引入了新的语义化标签,如、、、和等,这些标签有助于更好地组织内容,提高可读性和可访问性。 2. ...
个人通过学习HTML 5 总结下来的笔记,只适合入入门。深入某一下技术,比如canvas、websocket等,建议查看协议,并多练习。
这份"HTML5学习笔记前台页面.pdf"涵盖了网站开发的基础知识,包括HTML5的结构、标签使用、CSS、JavaScript以及与服务器相关的技术。 首先,网站开发的基础涉及理解URL网址的构成,它由协议(如HTTP或HTTPS)、域名...
【CSS简介】 CSS,全称为层叠样式表(Cascading Style Sheets),是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的Web标准。...持续学习和实践CSS,将使你能够创建出更具吸引力和功能性的网站。
前端笔记HTML5部分
本笔记主要聚焦于HTML5的一些基本元素和特性,以及CSS中的常见样式规则和技巧,旨在帮助中低级开发者提升技能。 首先,HTML5是超文本标记语言的最新版本,它引入了许多新的语义化标签,如、、等,这些标签使得网页...
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
这是我重新温故时候做的html学习笔记,参考于尚学堂 百战程序员文档里有关键的源码和简要的说明,初学者可以作为参考如果有什么问题可以和我一起交流,大家共同进步还望大佬光顾的时候可以给我提提意见
本篇笔记将深入探讨HTML5的基础知识,帮助初学者快速入门。 一、HTML5概述 HTML5(超文本标记语言第五版)旨在提高互操作性和用户体验,它对浏览器的兼容性进行了优化,减少了对插件的需求,并引入了离线存储、拖放...
HTML的学习笔记HTML的学习笔记HTML的学习笔记HTML的学习笔记 HTML的学习笔记HTML的学习笔记HTML的学习笔记HTML的学习笔记 HTML的学习笔记HTML的学习笔记HTML的学习笔记HTML的学习笔记 HTML的学习笔记HTML的学习笔记...
html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 ...
【标题】"h5前端学习笔记"所涵盖的知识点主要集中在HTML5技术及其在前端开发中的应用。HTML5是超文本标记语言的最新版本,它引入了许多新的元素、API和特性,极大地增强了网页的交互性、可访问性和可用性。 【描述...
前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar ...
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习...