标签 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文件在操作那个idhjdict_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规范

首先,您应该将稳定的技术和新兴技术分开。最稳定且可用于网站的三个规范是GeolocationCanvasSVG。像 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,然后再控制样式.
我要学习了啊!