[HTML5] Level up -- Display
html5 -- level Up display
2023-09-14 09:00:54 时间
HTML5 Input type:
Traditionally presentational tags, the i, b, em, and strong tags have been given new semantic meanings:
-
- The i tag represents text in an "alternate voice" or "mood";
- The b tag represents "stylistically offset" text
<p><i>I hope this works</i>, he thought.</p> alternate vocie or mood
<p><b class="lead">The event take place this upcomming Saturday, and over 3,000 people have already registered.</b></p> stylistically offest
-
- The em tag now means "Stress emphasis"
- The strong tag now means "strong importance"
<p>Make sure to sign up <em>before</em> the day of the event, Septmber 16, 2013</p>
<p>Make sure to sign up <em>before</em> the day of the event, <strong>Septmber 16, 2013</strong></p>
main, article, header tag:
<main class="main"> <article class="post"> <header> <h2><a href="/blog/opening-date-announced">Opening Date Announced</a></h2> <p><em>Published on</em>: September 16, 2013</p> </header> <p><b class="article-lead">The Art Gallery will be opening to an <em>invitation-only</em> group of art enthusiasts across the country on <strong>December 1, 2013</strong>.</b></p> <p>The opening of the Art Gallery will coincide with the release of several of Armando Blontio's finest art pieces, including, "Crème de la Crème," which has a mounting anticipation for its debut.</p> <p>As a frequently misrespresented artist, Armando Blontio has struggled to uphold his image amidst the criticism. "I hope to dispel the illusion of my self-centeredness, as seen by my critics, with the Art Gallery opening," said Mr. Blontio.</p> </article> </main>
figure and figcaption
<figure> <img src="armando-blontio.jpg" alt="A Famous Armando Blontio Painting" width="640" height="470" /> <figcaption class="caption">"Crème de la Crème," a famous Armando Blontio painting.</figcaption> </figure>
Time and datetime:
<header> <h2><a href="/blog/opening-date-announced">Opening Date Announced</a></h2> <p><em>Published on</em>: <time datetime="2013-09-16">September 16, 2013</time></p> </header>
List, datalist:
<input type="text" list="categories"/> <!-- Add your datalist here --> <datalist id="categories"> <option value="reviews"> <option value="profiles"> <option value="announcements"> </datalist>
placeholder and autofocus:
<input type="search" placeholder="Search..." autofocus/>
required:
<input type="email" placeholder="Enter your email..." required/>
partten and tel input
<input type="tel" pattern="[0-9]{10}"/>
相关文章
- HTML5实战与剖析之HTMLDocument变化(readyreState属性、兼容模式和head属性)「建议收藏」
- html5里的空心圆柱体,容积及空心圆柱体积.doc[通俗易懂]
- HTML5期末大作业:大学生个人网站设计——我们的班级(7页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html网页制作代码大全 html5网页设计作业代码
- css怎么实现背景图片自适应窗口大小_html5背景图片自适应
- 【HTML5】HTML5 多媒体标签 ② ( 视频标签 <video> | 视频标签常见属性 | autoplay 属性 | controls 属性 | poster 属性 | 设置多个格式视频 )
- 利用html5 canvas绘制圆形发散效果的图形详解编程语言
- 纯HTML5 Canvas实现的饼图详解编程语言
- HTML5 表单元素详解编程语言
- HTML5移动端通用css详解编程语言
- html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案详解编程语言
- html5点击input没有出现光标完美解决方案详解编程语言
- 利用HTML5的CORS特性绕过httpOnly的限制实现XSS会话劫持
- HTML5 WebSocket
- AngularJS中使用HTML5摄像头拍照
- HTML5 Canvas
- CSS3,HTML5和jQuery搜索框集锦
- jQuery结合HTML5制作的爱心树表白动画