HTML语言中的H1标记是做什么用的？_百度知道
HTML语言中的H1标记是做什么用的？
我想学习HTML语言，请高手朋友提供个视频教程的名字。这个H1标记有什么用途呢？
h6&定义了最大的标题元素;定义了最小的标题元素标题元素由标签&lt。&lt，&h1&h1&到&定义;h6&gt
其他类似问题
html语言的相关知识
按默认排序
其他1条回答
H就是标题大小的标记,H1定义最大的标题。
您可能关注的推广
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁什么是HTML语言?这 语言是做什么用的?_百度知道
什么是HTML语言?这 语言是做什么用的?
提问者采纳
Hypertext Markup Language, 中文也就是超文本链接标示语言。HTML（HyperTextMark-upLanguage）哗攻糕纪蕹慌革苇宫俩即超文本标记语言，是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。 另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现在你看到的就是这种语言写的页面.哈哈. 也许你听说过许多可以编辑网页的软件,事实上,你不需要用任何专门的软件来建立HTML页面；你所需要的只是一个文字处理器（如McrosoftWord\记事本\写字板等等）以及HTML的工作常识。其实你很快就会发现,基础的HTML语言简直容易死了。 HTML只不过是组合成一个文本文件的一系列标签。它们很乐队的指挥,告诉乐手们哪里需要停顿,哪里需要激昂. HTML标签通常是英文词汇的全称（如块引用:blockquote）或缩略语（如“p”代表Paragragh），但它们的与一般文本有区别，因为它们放在单书名号里。故Paragragh标签是&p&,块引用标签是&blockquote&。有些标签说明页面如何被格式化（例如，&p&开始一个新段落），其他则说明这些词如何显示(&b&使文字变粗)还有一些其他标签提供在页面上不显示的信息－－例如标题。 关于标签，需要记住的是，它们是成双出现的。每当使用一个标签－－如&blockquote&,则必须以另一个标签&/blockquote&将它关闭。注意“blockquote”前的斜杠，那就是关闭标签与打开标签的区别。 基本HTML页面以&html&标签开始，以&/html&结束。在它们之间，整个页面有两部分－－标题和正文。 标题词－－夹在&head&和&/head&标签之间－－这个词语在打开页面时出现在屏幕底部最小化的窗口。正文则夹在&body&和&/body&之间－－即所有页面的内容所在。页面上显示的任何东西都包含在这两个标签之中。 那么让我们建立一个简单的范例吧，非常容易的。第一步，当然是要建立一个新的文本文件（记住，如果你在使用比较复杂的文字处理器，就应该用“纯文本”或“普通文本”来保存），将它命名为“xxxx.html”。(随便你起一个什么名字,但记住,要用英文) 然后你可以用浏览器将它打开，你会看见最简单的自己做的页面。 参考资料：
提问者评价
基础的HTML语言简直容易死了?教我啊!
其他类似问题
html语言的相关知识
您可能关注的推广
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁你必须知道的28个HTML5特征、窍门和技术 - javaSamBlog - ITeye技术网站
博客分类：
&div class="iteye-blog-content-contain" style="font-size: 14"&
&p&&span class="s"&//zxx:以下为翻译全文，本着语言生动和本土化之原则，内容有编辑&/span&&/p&
&p&&em&注意：每周有那么几次，此列表会更新一些新的窍门，最终，本文会成为超级有用的资源。&/em&&br&&span class="s"&//zxx:丑话说在前头，我可没功夫更新，所以，即使到您女儿出嫁那天，本文还是28项内容&/span&&/p&
&p&前端的发展如此之迅猛，一不留神，大侠你可能就会被远远地甩在后面了。如果你不想被HTML5的改变/更新搅得不知所措的话，可以把本文的内容作为必须了解的热身课程。&/p&
&h3&一、新的Doctype&/h3&
&div&&span class="s"&//zxx:”doctype”中文意思指“文档类型”&/span&&/div&
&p&仍在使用麻烦的，不可能记得住的XHTML文档类型？&/p&
&div class="zxx_code"&
&pre&&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"&
&&&& "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&/pre&
&/div&
&p&如果是，为什么还在用呢？使用新的HTML5文档类型代替吧。你会活得更久的——正如Douglas Quaid说的&/p&
&div class="zxx_code"&
&pre&&!DOCTYPE html&&
&/pre&
&/div&
&p&我就琢磨着，为了HTML5搞个这厮代码，您可能会对这段代码究竟靠不靠谱表示怀疑。不用担心，如今这是可行的，只有老的浏览器需要一个特定的doctype（文档类型）。浏览器如果不知道doctype，就会很简单的以标准模式对包含的标签进行渲染。所以，妹妹你大胆的向前冲，把小心谨慎都抛到九霄云外，去拥抱新的HTML5文档类型吧。&/p&
&h3&二、图形元素(The Figure Element )&/h3&
&p&看看下面给图片添加的标示：&/p&
&div class="zxx_code"&
&pre&&img src="path/to/image" alt="About image" /&
&span class="tag"&&&/span&&span class="tag-name"&p&/span&&span class="tag"&&&/span&&span&Image of Mars. &/span&&span class="tag"&&/&/span&&span class="tag-name"&p&/span&&span class="tag"&&&/span&
&/pre&
&/div&
&p&文字裹在p标签里，与img标签各行其道，很难让人联想到这就是标题。HTML5通过采用&code&&figure&&/code&元素对此进行了改正。当合&code&&figcaption&&/code&元素组合使用时，我们就可以语义化地联想到这就是图片相对应的标题&/p&
&div class="zxx_code"&
&pre&&figure&
&&& &img src="path/to/image" alt="About image" /&
&&& &figcaption&
&&&&&&& &p&This is an image of something interesting. &/p&
&&& &/figcaption&
&/figure&
&/pre&
&/div&
&h3&三、&small&重新定义&/h3&
&p&还在不久前，&code&&small&&/code&元素被用来创建靠近logo且相关的副标题。这是个很有用的表现元素，但是，现在，这种用法可能就不正确了。&code&&small&&/code&元素已经被重新定义了，指小字，因而更具可用性。试想下你网站底部的版权状态，根据对此元素新的HTML5定义，&code&&small&&/code&可以正确地包裹这些信息。&/p&
&blockquote&
&p&small元素专指“小字”。&/p&
&/blockquote&
&div class="hidden"&本文原地址：&a href="/wordpress/?p=1058"&/wordpress/?p=1058&/a&，来自张鑫旭-鑫空间-鑫生活，访问原出处更多优秀技术文章。&/div&
&div class="hidden"&本文作者：&a href="/"&张鑫旭&/a&，欢迎访问我的个人网站。&/div&
&h3&四、脚本(scripts)和链接(links)无需&span style="font-family: 'Courier New';"&type&/span&
&/h3&
&p&您可能现在仍在给link和script标签增加type属性。&/p&
&div class="zxx_code"&
&pre&&link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /&
&script type="text/javascript" src="path/to/script.js"&&/script&
&/pre&
&/div&
&p&这已经是老黄花菜，非必需品了。这意味着，这些标签都各自指向样式表和脚本。因此，我们可以把type属性一起干掉。&/p&
&div class="zxx_code"&
&pre&&link rel="stylesheet" href="path/to/stylesheet.css" /&
&script src="path/to/script.js"&&/script&
&/pre&
&/div&
&h3&五、引号还是不要引号&/h3&
&div&…这确实是个问题。记住，HTML5不是XHTML，要是你不愿意，你没有必要非得用引号标记包裹你的属性，没有必要非得闭合元素。换句话说，只要你自己觉得舒服，就没有什么对错之分。对于我自己来说就是如此。&/div&
&div class="zxx_code"&
&pre&&p class=myClass id=someId& Start the reactor. &/pre&
&/div&
&p&对此取舍你还得自己拿主意。如果你更倾向于结构化的文档，就算天塌下来，也要把引号牢牢拽在怀里。&/p&
&h3&六、内容可编辑&/h3&
&p&&img title="HTML5内容可编辑 张鑫旭-鑫空间-鑫生活" src="/image/blog/0-08-26_143154.png" alt="HTML5内容可编辑 张鑫旭-鑫空间-鑫生活" width="380" height="129"&&img title="HTML5内容可编辑 张鑫旭-鑫空间-鑫生活" src="/image/blog/0-08-26_143302.png" alt="HTML5内容可编辑 张鑫旭-鑫空间-鑫生活" width="396" height="128"&&/p&
&p&最新的浏览器有个很赞的新属性可以应用到元素上，叫做&code&contenteditable&/code&。顾名思意，就是允许用户编辑元素内容包含的任意文本，包括子元素。类似的用途还有很多，像是简单的待办事项清单应用程序，可大大利用其本地存储的优势。&/p&
&div class="zxx_code"&
&pre&&ul contenteditable="true"&
&&& &li&悼念遇难香港同胞 &/li&
&&& &li&深圳特区30周年&/li&
&&& &li&伊春空难&/li&
&/ul&&/pre&
&/div&
&p&或者，根据前面所学到的一些技巧，我们可以把它写成：&/p&
&div class="zxx_code"&
&pre&&ul contenteditable=true&&/pre&
&/div&
&p&您可以狠狠地点击这里：&a class="a_link" href="/study/201008/html5-content-editable.html" target="_blank"&HTML5内容可编辑demo&/a&&/p&
&h3&七、Email输入(Inputs)&/h3&
&p&如果我们给表单输入框应用名为”email”的type属性，我们可以命令浏览器只允许符合有效的电子邮件地址结构的字符串。没错，内置表单验证即将到来，由于一些显而易见的原因，我们还不能100%依赖内置验证，较旧的浏览器不认识这个”email”型，它们会简单地退回到普通文本框。&/p&
&div class="zxx_code"&
&pre&&form action="" method="get"&
&&& &label for="email"&邮箱:&/label&&input id="email" name="email" type="email" /&
&&& &button type="submit"&确定&/button&
&/form&
&/pre&
&/div&
&p&您可以狠狠地点击这里：&a class="a_link" href="/study/201008/html5-build-in-email-validation.html" target="_blank"&HTML5邮箱内置验证demo&/a&&/p&
&p&&span class="s"&//zxx:经我小测了下，貌似仅在Chrome浏览器下有效果(xp系统)，当输入内容不是合法邮箱格式，点击“确定”按钮是没有反应的；当输入为合法邮箱，点击“确定”按钮才会提交刷新页面。&/span&&/p&
&p&&img title="HTML5邮箱内置验证 张鑫旭-鑫空间-鑫生活" src="/image/blog/0-08-26_170948.png" alt="HTML5邮箱内置验证 张鑫旭-鑫空间-鑫生活" width="304" height="73"&&/p&
&div style=""&目前而言，我们不能依赖浏览器验证，客户端/服务器验证还是必须的。&/div&
&p&还应当指出，当谈到哪些元素和属性支持和不支持时，当前所有的浏览器都有点靠不住的。例如，Opera似乎支持电子邮件验证，但仅在name属性被指定的时候。而且，它不支持占位符属性，这个我们将会在后面学到。底线是不依赖于这种形式的验证…但你仍然可以使用它！&/p&
&div class="hidden"&本文原地址：&a href="/wordpress/?p=1058"&/wordpress/?p=1058&/a&，来自张鑫旭-鑫空间-鑫生活，访问原出处更多优秀技术文章。&/div&
&div class="hidden"&本文作者：&a href="/"&张鑫旭&/a&，欢迎访问我的个人网站。&/div&
&h3&八、占位符(Placeholders)&/h3&
&div&&span class="s"&//zxx:此处内容非直译，有删改&/span&&/div&
&p&Placeholders什么意思呢，就是文本框/文本域空间默认会有个文字提示，获得焦点时，此提示文字消失；失去焦点时如果内容为空，提示文字又出现。如下图所示：&/p&
&div&&img class="alignnone" title="淘宝首页的搜索提示信息 张鑫旭-鑫空间-鑫生活" src="/image/blog/0-06-07_202027.png" alt="淘宝首页的搜索提示信息 张鑫旭-鑫空间-鑫生活" width="520" height="123"&&/div&
&p&&img class="alignnone" title="flickr网站的搜索提示 张鑫旭-鑫空间-鑫生活" src="/image/blog/0-06-07_202641.png" alt="flickr网站的搜索提示 张鑫旭-鑫空间-鑫生活" width="543" height="127"&&/p&
&p&这些表单控件里面显示的些提示性的文字就是占位符。按照以往的做法，我们需要使用一点JavaScript代码实现占位符效果，例如我之前的“&a href="/wordpress/?p=854"&文本框/域文字提示自动显示隐藏jQuery小插件&/a&”一文所展示的。当然，你需要设定一个初始的默认的value值，然后根据输入内容进行判断，从而决定文本框值的改变与否。如果您使用占位符(placeholders)属性，一切就轻松了。&/p&
&div class="zxx_code"&
&pre&&label for="email"&邮箱:&/label&
&input id="email" type="email" placeholder="" size="26" /&
&/pre&
&/div&
&p&根据我的测试，目前仅webkit核心的浏览器支持placeholders属性，像是Chrome5，Safari4，结果如下所示：&/p&
&div&
&img title="Safari HTML5 placeholders属性 张鑫旭-鑫空间-鑫生活" src="/image/blog/0-08-26_180543.png" alt="" width="303" height="81" align="Safari HTML5 placeholders属性 张鑫旭-鑫空间-鑫生活"&&img title="Safari HTML5 placeholders属性 张鑫旭-鑫空间-鑫生活" src="/image/blog/0-08-26_180622.png" alt="Safari HTML5 placeholders属性 张鑫旭-鑫空间-鑫生活" width="286" height="85"&
&/div&
&p&您可以狠狠地点击这里：&a class="a_link" href="/study/201008/html5-placeholders.html" target="_blank"&HTML5占位符Demo&/a&&/p&
&h3&九、本地存储(Local Storage)&/h3&
&div&多亏了本地存储(非正式的HTML5，本着方便归纳的目的)，我们可以让高级浏览器记住我们的编辑后的内容，即使浏览器被关掉或是页面刷新。&/div&
&p&&span class="s"&//zxx:原视频默认展示的是YouTube视频，看不了，所以，这里展示来自另外一个网站的video。建议全屏观看，以看清其中的HTML与JavaScript代码&/span&&/p&
&p&&span class="s"&//zxx:根据视频内容，我自己做了个demo，关于本地存储的。&/span&&/p&
&p&您可以狠狠地点击这里：&a class="a_link" href="/study/201008/html5-local-storage.html" target="_blank"&HTML5本地存储Demo&/a&&/p&
&p&IE8浏览器已经支持了本地存储，如下截图所示：&/p&
&div&&img title="HTML5本地存储IE8下效果 张鑫旭-鑫空间-鑫生活" src="/image/blog/0-08-26_200302.png" alt="HTML5本地存储IE8下效果 张鑫旭-鑫空间-鑫生活" width="353" height="127"&&/div&
&p&尽管显然不支持所有的浏览器，我们可以在Internet Explorer8时，Safari 4和Firefox 3.5下期待此工作方式。请注意，为了弥补旧的浏览器将无法识别本地存储，你应该先测试，以确定window.localStorage是否存在。&/p&
&p&&img title="各个浏览器对HTML5本地存储支持情况一览表 张鑫旭-鑫空间-鑫生活" src="/image/blog/201008/local-storage.jpg" alt="各个浏览器对HTML5本地存储支持情况一览表 张鑫旭-鑫空间-鑫生活" width="550" height="114"&&/p&
&h3&十、语义的Header和Footer&/h3&
&p&那些过往的日子：&/p&
&div class="zxx_code"&
&pre&&div id="header"&
...
&/div&
&div id="footer"&
...
&/div&
&/pre&
&/div&
&p&div嘛，很自然的，没有语义化的结构——即使在应用了id后。现在，通过HTML5，我们可以使用&header&和&footer&元素。以上的代码可以替换成：&/p&
&div class="zxx_code"&
&pre&&header&
...
&/header&
...
&/footer&
&/pre&
&/div&
&blockquote&
&p&它完全适合您有多个页眉和页脚的项目。&/p&
&/blockquote&
&p&尽量不要混淆”header”和”footer”这些元素。他们只是指他们的容器。因此，将博客底部的，例如，元信息放在footer元素内部是说得通的。这同样也适用于header。&/p&
&h3&十一、更多HTML5表单特征(More HTML5 Form Features )&/h3&
&p&通过下面视频学习更多有用的HTML5表单特征：&span class="s"&//zxx:TouTuBe视频，&/span&&/p&
&h3&十二、IE和HTML5(Internet Explorer and HTML5)&/h3&
&p&不幸的是，讨厌的IE浏览器需要动点小手术才能理解新的HTML5元素。&/p&
&blockquote&
&p&所有元素，默认的，都有个inline的display&/p&
&/blockquote&
&p&为了确保所有新的HTML5元素能以block水平的元素正确地渲染，有必要对其做如下定义：&/p&
&div class="zxx_code"&
&pre&header, footer, article, section, nav, menu, hgroup {&
&&& display:&
&/pre&
&/div&
&p&不幸的是，IE仍旧忽略这些样式，因为它不知道这些标签从哪里来的，好比是header元素。幸运的是，有一个简单的解决办法：&/p&
&div class="zxx_code"&
&pre&document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");
&/pre&
&/div&
&p&奇怪的是，这段代码似乎触发IE浏览器。为了更简单将此应用到每个新的应用过程中，雷米夏普(Remy Sharp)创建了一个脚本，通常称为HTML5 shiv。该脚本同样修复了些显示问题。&/p&
&div class="zxx_code"&
&pre&&!--[if IE]&
&script src="/svn/trunk/html5.js"&&/script&
&![endif]--&
&/pre&
&/div&
&div class="hidden"&本文原地址：&a href="/wordpress/?p=1058"&/wordpress/?p=1058&/a&，来自张鑫旭-鑫空间-鑫生活，访问原出处更多优秀技术文章。&/div&
&div class="hidden"&本文作者：&a href="/"&张鑫旭&/a&，欢迎访问我的个人网站。&/div&
&h3&十三、文档某一部分的信息(hgroup)&/h3&
&div&想象一下，在我的网站的标题，我有我的站点的名称，随后立即由一个副标题。虽然我们可以使用一个&h1&和&h2&标签，为其分别创造标记，但是依旧没有（因为HTML4）一个简单的方法来语义上说明了两者之间的关系。此外，一个h2标记的使用提出了更多的问题，在层次结构上，当涉及到其他网页上显示的标题时。通过使用不影响文档的大纲流hgroup元素，我们可以将这些标题组合在一起。&/div&
&div class="zxx_code"&
&pre&&header&
&&& &hgroup&
&&&&&&& &h1& Recall Fan Page &/h1&
&&&&&&& &h2& Only for people who want the memory of a lifetime. &/h2&
&&& &/hgroup&
&/header&
&/pre&
&/div&
&div style=""& &/div&
&h3&十四、必要的属性(Required Attribute )&/h3&
&p&表单允许新的必要属性，用来指定是否需要特殊的input。这取决于你的代码偏好，你可以以下面两种方式之一申明此属性。&/p&
&div class="zxx_code"&
&pre&&input type="text" name="someInput" required&&
&/pre&
&/div&
&p&或者，使用更结构化的方法：&/p&
&div class="zxx_code"&
&pre&&input type="text" name="someInput" required="required"&
&/pre&
&/div&
&p&两种方法都行。有了这个代码，并且浏览器支持此属性，如果“someInput”文本框是空白，则表单不会被提交。下面是一个简单的例子，我们还将添加占位符属性，因为没有理由不这样做。&/p&
&div class="zxx_code"&
&pre&&form action="" method="get"&
&&& &label for="name"&姓名:&/label&
&&& &input id="name" name="name" type="text" placeholder="zhangxinxu" required="required" /&
&&& &button type="submit"&提交&/button&
&/form&
&/pre&
&/div&
&p&您可以狠狠地点击这里：&a class="a_link" href="/study/201008/html5-required-attribute.html" target="_blank"&HTML5必要属性Demo&/a&&/p&
&p&如果input里面内容是空白，则表单提交的时候，文本框会高亮显示。&span class="s"&//zxx:貌似仅在Chrome浏览器下有点小效果&/span&&/p&
&p&&img title="HTML5必要属性 张鑫旭-鑫空间-鑫生活" src="/image/blog/0-08-26_225252.png" alt="HTML5必要属性 张鑫旭-鑫空间-鑫生活" width="348" height="137"&&/p&
&div class="hidden"&本文原地址：&a href="/wordpress/?p=1058"&/wordpress/?p=1058&/a&，来自张鑫旭-鑫空间-鑫生活，访问原出处更多优秀技术文章。&/div&
&div class="hidden"&本文作者：&a href="/"&张鑫旭&/a&，欢迎访问我的个人网站。&/div&
&h3&十五、Autofocus属性&/h3&
&p&同样，HTML5的解决方案消除了对JavaScript的需要。如果一个特定的输入应该是“选择”，或有重点的，默认情况下，我们现在可以利用自动获取焦点属性。&/p&
&div class="zxx_code"&
&pre&&input type="text" name="someInput" placeholder="zhangxinxu" required autofocus&&/pre&
&/div&
&p&有趣的是，虽然我个人更倾向于喜欢XHTML的方法（用引号，等等），写作“autofocus=autofocus”让人感到有点怪。因此，我们将坚持使用单一关键字的方法。&/p&
&h3&十六、Audio支持&/h3&
&p&我们无需再依赖第三方插件区渲染音频。HTML5提供了&code&&audio&&/code&元素，嗯，至少，最终，我们将不必担心这些插件。就目前，只有最近期的的浏览器提供HTML5音频支持。在这个时候，它仍然是一个很好的做法提供一些向后兼容的形式。&/p&
&div class="zxx_code"&
&pre&&audio autoplay="autoplay" controls="controls"&
&&& &source src="file.ogg" /&
&&& &source src="file.mp3" /&
&&& &a href="file.mp3"&Download this file.&/a&
&/audio&
&/pre&
&/div&
&p&Mozilla和WebKit的还没有完全相处，当涉及到音频格式， Firefox会希望看到一个.ogg文件，而WebKit的浏览器支持.mp3扩展。这意味着，至少在现在，你应该创建两个版本的音频。&/p&
&p&当Safari加载页面时，它不会承认.ogg格式，会跳过它并移动到的MP3版本，因此。请注意IE，每往常一样，不支持这些格式，Opera 10和以及以下版本只能使用.wav文件。&/p&
&div class="hidden"&本文原地址：&a href="/wordpress/?p=1058"&/wordpress/?p=1058&/a&，来自张鑫旭-鑫空间-鑫生活，访问原出处更多优秀技术文章。&/div&
&div class="hidden"&本文作者：&a href="/"&张鑫旭&/a&，欢迎访问我的个人网站。&/div&
&h3&十七、Video支持&/h3&
&p&与&code&&audio&&/code&元素很类似，在新的浏览器中也存在Video！事实上，就在最近，&a href="/2010/07/new-way-to-embed-youtube-videos.html" target="_blank"&YouTube宣告了新的HTML5视频嵌入&/a&，当然，是为支持此功能浏览器。因为HTML5的规范没有指定特定的视频编解码器，它留给了浏览器来决定。虽然Safari和Internet Explorer9可以预期支持H.264格式的视频（其中Flash播放器可以播放），Firefox和Opera是坚持开源Theora 和Vorbis格式。因此，当显示HTML5的视频，您必须提供这两种格式。&/p&
&div class="zxx_code"&
&pre&&video controls preload&
&&& &source src="cohagenPhoneCall.ogv" type="video/ codecs='vorbis, theora'" /&
&&& &source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" /&
&&& &p& Your browser is old. &a href="cohagenPhoneCall.mp4"&Download this video instead.&/a& &/p&
&/video&
&/pre&
&/div&
&div style=""&无论是”ogg”格式还是”mp4″格式的视频Chrome浏览器都能正确编码&/div&
&p&还有一个值得注意的一些事情：&/p&
&ol style="margin: 0 padding-left: 30"&
&li&我们技术上不需要来设置type属性，但是，如果我们不这样做，浏览器不得不自己去寻找类型。节省一些带宽，还是你自己声明下吧。&/li&
&li&不是所有的浏览器理解HTML5视频。在资源元素的下面，我们可以提供一个下载链接，或嵌入视频的Flash版本代替。这取决于你。&/li&
&li&controls和preload属性就会在下面提及。&/li&
&li&有方法可以让所有的浏览器支持video标签，具体参见我前面的“&a title="让所有浏览器支持HTML5 video视频标签" href="/wordpress/?p=661"&让所有浏览器支持HTML5 video视频标签&/a&”一文。&/li&
&/ol&
&h3&十八、视频预载(Preload Videos)&/h3&
&p&预载属性不完全是你想的那个样子，虽然，你应该先决定是否要在浏览器预装的视频。是否有必要？或许吧。如果访问者访问一个专门展示了一个视频的页面，你一定要预载的视频，节约参观者等待的一部分时间。影片可以通过设置 preload=”preload”或是简单地添加preload进行预载。我更喜欢后者的解决方案，它少了一点多余的东西。&/p&
&div class="zxx_code"&
&pre&&video preload&&/pre&
&/div&
&h3&十九、显示控制条&/h3&
&p&如果你使用过上面的每一个提到的技术点，你可能已经注意到，使用上面的代码，视频仅仅显示的是张图片，没有控制条。为了渲染出播放控制条，我们必须在video元素内指定controls属性。&/p&
&div class="zxx_code"&
&pre&&video preload controls&&/pre&
&/div&
&p&&img class="imgpad" title="video控制条 张鑫旭-鑫空间-鑫生活" src="/image/blog/201008/video.jpg" alt="video控制条 张鑫旭-鑫空间-鑫生活" width="526" height="277"&&/p&
&p&请注意，不同浏览器渲染出来的进度条的模样都是不一样的。&/p&
&div class="hidden"&本文原地址：&a href="/wordpress/?p=1058"&/wordpress/?p=1058&/a&，来自张鑫旭-鑫空间-鑫生活，访问原出处更多优秀技术文章。&/div&
&div class="hidden"&本文作者：&a href="/"&张鑫旭&/a&，欢迎访问我的个人网站。&/div&
&h3&二十、正则表达式&/h3&
&p&你发现自己多久匆匆编写一些正则表达式验证一个特定的文本。多亏了新的pattern属性，我们可以在标签处直接插入一个正则表达式。&/p&
&div class="zxx_code"&
&pre&&form action="" method="get"&
&&& &label for="username"&姓名:&/label&
&&& &input id="username" name="username" type="text" placeholder="4-10个英文字母" pattern="[A-Za-z]{4,10}" required="required" autofocus /&
&&& &button type="submit"&提交&/button&
&/form&
&/pre&
&/div&
&p&如果你熟悉正则表达式，那么应该清楚&code&[A-Za-z]{4,10}&/code&表示接受4-10位不区分大小写的英文字母。如果浏览器支持pattern属性，则提交表单时，如果文本框中的内容不符合其正则表达式，文本框会高亮显示。如下图所示。&/p&
&p&&img title="HTML5正则表达式 张鑫旭-鑫空间-鑫生活" src="/image/blog/0-08-27_134423.png" alt="HTML5正则表达式 张鑫旭-鑫空间-鑫生活" width="335" height="98"&&/p&
&p&您可以狠狠地点击这里：&a class="a_link" href="/study/201008/html5-regular-expressions.html" target="_blank"&HTML5正则表达式Demo&/a&&/p&
&p&&span class="s"&//zxx:我自己小测了下，貌似目前只在Chrome下有效(win系统)&/span&&/p&
&p&注意到，我们已经开始组合使用这些很棒的属性。&/p&
&p&如果您对正则表达式概念模糊了，可以&a href="/tutorials/javascript-ajax/you-dont-know-anything-about-regular-expressions/" target="_blank"&参见这里&/a&。&/p&
&h3&二十一、属性支持检测&/h3&
&p&如果我们没有方法检测浏览器是否支持这些属性，这些就不能称之为好的属性。恩，不错的观点，事实上我们是有几种方法的，这里我们讨论2个。第一个是利用优秀的&a href="/" target="_blank"&Modernizr&/a&库，或者，我们可以创建和分析这些元素，以确定浏览器的能力。例如，在我们前面的例子，如果我们要确定浏览器是否能使用pattern的属性，我们可以添加一小段JavaScript到我们的页面上：&/p&
&div class="zxx_code"&
&pre&alert( 'pattern' in document.createElement('input') ); &span style="color:"&// boolean &/span& &/pre&
&/div&
&p&事实上，这是一种确定浏览器兼容的常用方法。jQuery库了利用这种伎俩。在上面，我们创建了一个新的input元素，并确定了里面的pattern属性浏览器是否认得。如果是，浏览器则支持此功能。否则，当然就不支持了。&/p&
&div class="zxx_code"&
&pre&&script&
if (!'pattern' in document.createElement('input') ) {
&&& &span style="color:"&// do client/server side validation&/span&
}
&/script&
&/pre&
&/div&
&p&谨记此方法依赖于JavaScript。&/p&
&h3&二十二、mark元素(Mark Element )&/h3&
&p&试想&code&&mark&&/code&元素作为高亮。此标签包裹的字符串应该与用户当前的行动相关联。例如，我在一些博客上搜索“北川景子”，我就可以使用一些JavaScript将当前的每个结果字符串用mark标签包裹。&/p&
&div class="zxx_code"&
&pre&&h3& 搜索结果 &/h3&
&p& 我很喜欢《零秒出手》里面那个拉小提琴的女孩，原来她叫做 &mark&北川景子&/mark&。 &/p&
&/pre&
&/div&
&h3&二十三、什么时候使用div&/h3&
&p&我们有些人开始质问到底何时该使用div。现在我们可以使用header, article, section, 和footer，还有机会使用div…吗？当然可以。&/p&
&blockquote&
&p&div应该用在没有更好的元素的时候。&/p&
&/blockquote&
&p&例如，如果你发现你需要包裹一段代码块在对内容定位处理的包装单元内。不过如果你是包裹一个博客文章，或者，可能是，底部的链接列表，则需考虑分别使用&article&和&nav&元素，因为其更具语义。&/p&
&p&二十四、什么可以开始立即使用&/p&
&p&一直谈论到现在的HTML5要到2022年才能全部完成，许多人完全忽视它，这是个巨大的错误。事实上，有少量的HTML5的功能，我们可以在我们所有的项目中使用！更简单，更干净的代码总是一件好事。在今天的视频快速展示的技巧中，我将告诉你一些可用的选项。&/p&
&p&&span class="s"&//zxx:YouTuBe视频，。&/span&&/p&
&h3&二十五、哪些不是HTML5(What is Not HTML5)&/h3&
&p&那些仅凭自己的假设形象将JavaScript变少的过渡被全部归为HTML5的人是可以理解的，嘿，甚至苹果无意中推动这一想法。对于非开发人员，谁管这个呢，它是一个简单的方法适用于现代网页标准。不过，对于我们来说，尽管它可能只是语义，重要的是要准确理解什么不是HTML5。&/p&
&ol style="margin: 10 padding-left: 30"&
&li&
&strong&SVG:&/strong&不是HTML5，至少5岁了。&/li&
&li&
&strong&CSS3:&/strong&不是HTML5，它是…CSS。&/li&
&li&
&strong&Geolocation:&/strong&不是HTML5.&span class="s ml10"&//zxx:Geolocation（地理位置）：通过HTML 5，您应该能够使Web应用程序可确定您的位置，并为您提供更多的相关信息。&/span&
&/li&
&li&
&strong&Client Storage(客户端存储):&/strong&非HTML5，虽说有一点切合，但被排除在规范之外，原因在于，担忧其作为一个整体，会变得过于复杂。它现在有自己的规范。&/li&
&li&
&strong&Web Sockets:&/strong&不是HTML5，同样的，有着自己的一套准则。&/li&
&/ol&
&p&不管你需求有多大的区别，所有这些技术可以归为现代网络堆栈。事实上，不少这些分支规范的管理着还是同一人。&/p&
&div class="hidden"&本文原地址：&a href="/wordpress/?p=1058"&/wordpress/?p=1058&/a&，来自张鑫旭-鑫空间-鑫生活，访问原出处更多优秀技术文章。&/div&
&div class="hidden"&本文作者：&a href="/"&张鑫旭&/a&，欢迎访问我的个人网站。&/div&
&h3&二十六、data属性(The Data Attribute)&/h3&
&p&我们现在可以很正式地让所有的HTML元素支持自定义属性。然而，以前，我们可能会这样：&/p&
&div class="zxx_code"&
&pre&&h1 id=someId customAttribute=value& 小样，胆儿挺肥的呢 &/h1&&/pre&
&/div&
&p&…校验器会小题大做！但是现在，只要我们以”data”为前缀定义我们的自定义属性，盗版属性立马变成正牌的了。如果你发现你曾经把一个重要的数据附加在诸如class的属性上，可能为了JavaScript之用，那么，本属性将大有帮助啊。&/p&
&p&&strong&HTML片段&/strong&&/p&
&div class="zxx_code"&
&pre&&div id="myDiv" data-custom-attr="My Value"& 巴拉巴拉，lady 嘎嘎 &/div&
&/pre&
&/div&
&p&&strong&检索自定义属性的价值&/strong&&/p&
&div class="zxx_code"&
&pre&var theDiv = document.getElementById('myDiv');
var attr = theDiv.getAttribute('data-custom-attr');
alert(attr); &span style="color:"&// My Value&/span&
&/pre&
&/div&
&p&此属性还可以用在CSS中，例如下面这个有些傻里傻气的CSS文字改变的例子：&/p&
&div class="zxx_code"&
&pre&&strong class="mb10" style="display: inline-"&CSS代码：&/strong&
.data_custom { display:inline- position: }
.data_custom:hover { color: }
.data_custom:hover:after {
&&& content: attr(data-hover-response);
&&& color:
&&& position:
&&& left: 0;
}
&/pre&
&/div&
&div class="zxx_code"&
&pre&&strong class="mb10" style="display: inline-"&HTML代码：&/strong&
&a class="data_custom" data-hover-response="我说过不要碰我！" href="#"&不要碰我，雅蠛蝶~~&/a&
&/pre&
&/div&
&p&如果你的浏览器支持after伪类，以及content的attr属性，则可以看到类似下面的效果(IE8不一样)：&/p&
&p&&img title="CSS与HTML5自定义属性 张鑫旭-鑫空间-鑫生活" src="/image/blog/0-08-27_192547.png" alt="CSS与HTML5自定义属性 张鑫旭-鑫空间-鑫生活" width="338" height="125"&&/p&
&p&要查看上图所示的效果，您可以狠狠地点击这里：&a class="a_link" href="/study/201008/html5-data-custom-value.html" target="_blank"&CSS与HTML5自定义属性demo&/a&&/p&
&p&还有，content属性其实是一个非常强大的属性，由于低版本的IE不支持，所以此属性尚未流行，关于content内容生成技术，可以参见我之前的“&a title="CSS content内容生成技术以及应用" href="/wordpress/?p=739"&CSS content内容生成技术以及应用&/a&”这篇文章。&/p&
&h3&二十七、Output元素&/h3&
&p&正如你可能预料到的，output元素被用来显示部分计算，例如，如果你想显示一个鼠标的位置，或者是一系列数字的总和坐标，这个数据应被插入到output元素中。&/p&
&p&举个简单的例子，当提交按钮被按下，我们用JavaScript将两个数字相加值插入到空的output中。&/p&
&div class="zxx_code"&
&pre&&form action="" method="get"&
&&& &p&
&&&&&&& 10 + 5 = &output name="sum"&&/output&
&&& &/p&
&&& &button type="submit"&计算&/button&
&/form&
(function() {
&&& var f = document.forms[0];
&&& if ( typeof f['sum'] !== 'undefined' ) {
&&&&&&& f.addEventListener('submit', function(e) {
&&&&&&&&&&& f['sum'].value = 15;
&&&&&&&&&&& e.preventDefault();
&&&&&&& }, false);
&&& } else {
&&&&&&& alert('你的浏览器尚未准备好！');
&&& }
})();
&/pre&
&/div&
&p&自己测试了下，貌似现在只有在Opera浏览器下有上佳的效果：&/p&
&div&&img title="HTML5结果输出框 张鑫旭-鑫空间-鑫生活" src="/image/blog/0-08-27_205242.png" alt="HTML5结果输出框 张鑫旭-鑫空间-鑫生活" width="244" height="134"&&/div&
&p&如果您现在使用的是较新版本的Opera浏览器，您可以狠狠地点击这里：&a class="a_link" href="/study/201008/html5-output-element.html" target="_blank"&HTML5结果输出框demo&/a&&/p&
&p&此元素也可以接受一个属性，它反映了输出相关元素的名称，类似label工作原理。&/p&
&div class="hidden"&本文原地址：&a href="/wordpress/?p=1058"&/wordpress/?p=1058&/a&，来自张鑫旭-鑫空间-鑫生活，访问原出处更多优秀技术文章。&/div&
&div class="hidden"&本文作者：&a href="/"&张鑫旭&/a&，欢迎访问我的个人网站。&/div&
&h3&二十八、使用区域input创建滑块(Create Sliders with the Range Input)&/h3&
&p&HTML5引进了&code&range&/code&类型的input。&/p&
&div class="zxx_code"&
&pre&&input type="range"&&
&/pre&
&/div&
&p&最值得注意的是，它可以接收 min, max, step, 和value 属性，等等。虽然现在似乎只有Opera浏览器充分支持这种输入类型，但是当我们可以实际使用时，这将是美妙无比的！&/p&
&p&参见下面的快速演示：&/p&
&p&&strong&第一步：标签&/strong&&/p&
&div&首先，创建标签&/div&
&div class="zxx_code"&
&pre&&form method="post"&
&&& &h4&音量控制&/h4&
&&& &input type="range" name="range" min="0" max="10" step="1" value="" /&
&&& &output name="result"&& &/output&
&/form&
&/pre&
&/div&
&div class="mt20"&&strong&第二步：CSS&/strong&&/div&
&div&下面，我们要使用一点点的样式。我们将使用:before和:after去告知用户我们制定的最大值和最小值。&/div&
&div class="zxx_code"&
&pre&input { font-size: 14 font-weight:& }
input[type=range]:before { content: attr(min); padding-right: 5 }
input[type=range]:after { content: attr(max); padding-left: 5}
output {
&&& display:
&&& font-size: 5.5
&&& font-weight:
}
&/pre&
&/div&
&div class="mt20"&&strong&第三步：JavaScript&/strong&&/div&
&div&最后，我们&/div&
&ul id="ul"&
&li&检测我们的浏览器是否认识range input，如果不，显示提示。&/li&
&li&当用户移动滑块的时候，动态改变output的值。&/li&
&li&监听，当用户离开滑块，插入值，同时本地存储。&/li&
&li&然后，下次用户刷新页面的时候，选择的区域和值会自动地设置成他们最后一次选择。&/li&
&/ul&
&div class="zxx_code"&
&pre&(function() {
&&& var f = document.forms[0],
&&&&&&& range = f['range'],
&&&&&&& result = f['result'],
&&&&&&& cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5;
&&& &span style="color:"&// 检测浏览器是否是足够酷&/span&
&&& &span style="color:"&// 识别range input.&/span&
&&& var o = document.createElement('input');
&&& o.type = 'range';
&&& if ( o.type === 'text' ) alert('不好意思，你的浏览器还不够酷，试试最新的Opera浏览器吧。');
&&& &span style="color:"&// 设置初始值&/span&
&&& &span style="color:"&// 无论是否本地存储了，都设置值为5&/span&
&&& range.value = cachedRangeV
&&& result.value = cachedRangeV
&&& &span style="color:"&// 当用户选择了个值，更新本地存储&/span&
&&& range.addEventListener("mouseup", function() {
&&&&&&& alert("你选择的值是：" + range.value + ". 我现在正在用本地存储保存此值。在现代浏览器上刷新并检测。");
&&&&&&& localStorage ? (localStorage.rangeValue = range.value) : alert("数据保存到了数据库或是其他什么地方。");
&&& }, false);
&&& &span style="color:"&// 滑动时显示选择的值&/span&
&&& range.addEventListener("change", function() {
&&&&&&& result.value = range.
&&& }, false);
})();
&/pre&
&/div&
&p&您可以狠狠地点击这里：&a class="a_link" href="/study/201008/html5-range-input.html" target="_blank"&HTML5 range input炫酷效果demo&/a&&/p&
&p&我的电脑是xp系统，默认主题，在滑块松开后Opera下的效果如下图所示，酷吧：&/p&
&div& &/div&
&p&感谢您的阅读！我们已经讨论了很多，但可能只是触及到HTML5的皮毛，全当抛砖引玉，希望能对您的学习有所帮助！&/p&
&p&&span class="s"&//zxx:以上是翻译/编辑的全部内容，内容已经够多了，我就不多说什么了。&/span&&/p&
&p&原创文章，转载请注明来自&a href="/"&张鑫旭-鑫空间-鑫生活&/a&[&a href="/"&&/a&]&/p&
&/div&
浏览: 167295 次
来自: 北京
请问一下，这个生成的doc文件，打开的时候 咋提示转换文件类型 ...
博主这个程序基本没错，但是你的测试有很大问题，测试的时候 ...
public void testFileCha ...
通过管道拷贝更快