标签 html5 下的文章

今天突然想起了沪江日语有个每日一句这样的一个服务,心想把它添加到自己的博客呗,也算是能够每天学一句日语.想法不错吧.

不过比较让我不满意的就是它的最终实现的效果有点难看,很难看在我看来.

首先来看看到底他们是怎么实现的吧.

HTML语言: Codee#22692
<!-- 每日一句JS引用 开始 -->
<span id="hjdict_daily_jp">
<a href="http://dict.yeshj.com" target="_blank" title="沪江小D, 在线词典, 英语学习, 查单词">跟小D每日学口语</a>
</span>
<scripttype="text/javascript" src="http://dict.yeshj.com/js_daily_2.js"></script>
<!-- 每日一句JS引用 结束 –>

你的做法就是在你想要显示它的地方添加这些代码.其实就是关键的那个js文件在操作那个id为hjdict_daily_jp的span标签.然后在span里添加html代码加以显示.

阅读剩余部分

作者：Cameron Laird

转:http://msdn.microsoft.com/zh-cn/ie/hh377875

尽管很多关于 HTML5 的文章都隐藏了这一点，但是 HTML5 更多的是一系列项目，而非完备的单一标准，至少现在如此。HTML5 是多种技术的集合，其中大多数技术都在不断发展。早在 Web 开发社区认识到 HTML4 和关联的 XHTML 有很多不足之处时人们便已开始酝酿 HTML5，这些不足之处包括从小小的句法不连贯到对多媒体演示的支持不足。HTML5 旨在解决广泛的缺陷问题。然而，为了尽快取得最大的进步，HTML5 被分成多个小部分进行标准化：首先是较简单、争议较少的部分，如新的输入定义，然后是更复杂（更有争议性的）的部分，如 WebSockets和视频。

如果您是 Web 开发人员，希望采用新兴标准进行试验，则需要可靠指导告诉您什么最适合您的网站。

稳定的HTML5规范

首先，您应该将稳定的技术和新兴技术分开。最稳定且可用于网站的三个规范是Geolocation、Canvas 和 SVG。像 Chrome、Internet Explorer 9 和 Firefox 等现代浏览器都支持这些规范。以下网站正在使用这些技术：

  1. World's Biggest Pacman
  2. Disney Tron Legacy
  3. The Killers Music
  4. HTML5 Web Camps

或者阅读关于如何为您的网站创建它们的一些技术文章，如：

  1. HTML5 Behind the Scenes of Disney Tron Legacy
  2. How to Create a Location-Aware Page
  3. How to Use Canvas to Create Games

其次，再次退回到将 HTML5 作为一个整体的广泛视图，并且要认识到每个浏览器都以不同的方式进行标准化。例如，即使标准草案仍然处于审查阶段并且可能发生变更，但有些浏览器已经宣传了 IndexedDB的可用性。其他浏览器采用了更为保守的方式。它们可能会冒险“不在”早期采用这些规范，但是开发人员可以确信不断变化的规范不会破坏他们的网站。因此，开发人员应根据其客户使用的浏览器进行试验和测试，选择何时实现这些规范。

阅读剩余部分

001 <!doctype html>
002 <html>
003   <head>
004       <meta charset="utf8">
005       <title>html5 test</title>
006       <!--
007         <link type="text/css" ref="stylesheet" href="html5.css">
008         -->
009 <style>
010 body{
011 background-color:#CCCCCC;
012 font-family:Geneva,Arial,Helvetica,sans-serif;
013 margin:0px auto;
014 max-with:900px;
015 border:solid;
016 border-color:#FFFFFF;
017   
018 }
019 header
020 {
021   display:block;
022   background-color:#F47D31;
023   color:#FFFFFF;
024   text-align:center;
025 }
026
027 header h2
028 {
029   margin:0px;
030 }
031 h1
032 {
033   font-size:72px;
034   margin:0px;
035 }
036 h2
037 {
038   font-size:24px;
039   margin:0px;
040   text-align:center;
041   color:#F47D31;
042 }
043 h3{
044   font-size:18px;
045   margin:0px;
046   text-align:center;
047   color:#F47D31;
048
049 }
050
051 h4
052 {
053   color:#F47D31;
054   background-color:#fff;
055   -webkit-box-shadow:2px 2px 20px #888;
056   -webkit-transform:rotate(-10deg);
057   -moz-box-shadow:2px 2px 20px #888;
058   -moz-transform:rotate(-10deg);
059   position:absolute;
060   padding:0px 150px;
061   top:50px;
062   left:-120px;
063   text-align:center;
064
065 }
066
067
068 footer{
069   clear:both;
070   display:block;
071   background-color:#F47D31;
072   color:#FFFFFF;
073   text-align:center;
074   padding:15px;
075
076 }
077 footer h2
078 {
079   font-size:14px;
080   color:white;
081 }
082
083 section
084 {
085 display:block;
086 width:50%;
087 float:left;
088
089 }
090
091 artical
092 {
093   background-color:#eee;
094   display:block;
095   margin:10px;
096   padding:10px;
097   -webkit-border-radius:10px;
098   -moz-border-radius:10px;
099   border-radius:10px;
100   -webkit-box-shadow:2px 2px 20px #888;
101   -webkit-transform:rotate(-10deg);
102   -moz-box-shadow:2px 2px 20px #888;
103   -moz-transform:rotate(-10deg);
104 }
105
106
107 artical header
108 {
109   -webkit-border-radius:10px;
110   -moz-border-radius:10px;
111   border-radius:10px;
112   padding:5px;
113 }
114 artical footer
115 {
116   -webkit-border-radius:10px;
117   -moz-border-radius:10px;
118   border-radius:10px;
119   padding:5px;
120 }
121 artical h1
122 {
123 font-size:18px;
124 }
125
126
127 #container
128 {
129 background-color:#888;
130 }
131 nav{
132   display:block;
133   width:25%;
134   float:left;
135 }
136 nav h3
137 {
138   margin:15px;
139   color:white;
140   
141 }
142 nav a:link,nav a:visited
143 {
144   display:block;
145   border-bottom:3px solid #fff;
146   padding:10px;
147   text-decoration:none;
148   font-weight:bold;
149   margin:5px;
150 }
151
152 nav a:hover{
153   color:white;
154   background-color:#F47D31;
155 }
156
157
158 aside{
159   display:block;
160   width:25%;
161   float:left;
162
163 }
164 aside h3
165 {
166   margin:15px;
167   color:white;
168 }
169 asidep
170 {
171   margin:15px;
172   color:white;
173   font-weight:bold;
174   font-style:italic;
175 }
176
177
178 /* links */
179 a{ color:#F47D31;}
180 a:hover{ text-decoration:underline;}
181 </style>
182
183   </head>
184   <body>
185       <header>
186           <h1>header</h1>
187           <h2>subtitle</h2>
188           <h4>HTML5 Rocks!</h4>
189           
190       </header>
191       <div id="container">   
192           <nav>
193               <h3>Nav</h3>
194               <a href="#">Link1</a>
195               <a href="#">Link2</a>
196               <a href="#">Link3</a>
197           </nav>
198           <section>
199               <artical>
200                   <header>
201                       <h1>Artical Header</h1>
202                   </header>
203                   <p>this a artical in section and artical tag.</p>
204                   <footer><h2>Artical Footer</2></footer>
205               </artical>
206               <artical>
207                   <header>
208                       <h1>Artical Header</h1>
209                   </header>
210                   <p>this a artical in section and artical tag.</p>
211                   <footer><h2>Artical Footer</2></footer>
212               </artical>
213           </section>
214           
215           <aside>
216               <h3>Aside</h3>
217               <p>this is a aside.</p>
218           </aside>
219           <footer>Footer</footer>
220       </div>
221   </body>
222 </html>

在换了wordpress team的theme 之后看了看源码。发现已经把html5的很多标签都加了进去。或者早就发生的事情我才发现。愧啊！看来作为一个自称对web前段感兴趣的我来说真是落伍了啊！下面是本站的navigator。

-----

在http://www.w3school.com.cn上看了一个demo。
真的很简单啊。

然后显示就是按照我们以前或者现在的形式,用到了ul,然后再控制样式.
我要学习了啊!