//缩写
<abbr title="Professor">Prof</abbr>
//首字母缩写
<acronym title="National Aeronautics and Space Administration">NASA</acronym>
//邮箱链接
<a href="mailto:homer@example.org">homer@example.org</a>
//引用
<cite>A Brief History of Time</cite>
//定义
<dfn>black hole</dfn>
//强调
<em>think</em>
<strong>Beware:</strong>
//水平线
<hr />
//删除线
<del>worst</del>
//插入线
<ins>best</ins>
//回车
<br />
//引用
<blockquote cite="http://en.wikipedia.org/wiki/Winnie-the-Pooh">
<p>Did you ever stop to think, and forget to start again?</p>
</blockquote>
//字中间划线
<s>Was $995</s>
//上标
<sup>th</sup>
//下标
<sub>1</sub>
//自定义列表
<dl>
<dt>Sashimi</dt>
<dd>Sliced raw fish that is served with condiments such as shredded daikon radish or ginger root, wasabi and soy sauce</dd>
<dt>Scale</dt>
<dd>A device used to accurately measure the weight of ingredients</dd>
<dd>A technique by which the scales are removed from the skin of a fish</dd>
<dt>Scamorze</dt>
<dt>Scamorzo</dt>
<dd>An Italian cheese usually made from whole cow's milk (although it was traditionally made from buffalo milk)</dd>
</dl>
//新打开一页
<a href="http://www.imdb.com" target="_blank">
//alt 图片加载不出来时给的提示,title图片提示
<img src="images/quokka.jpg" alt="Quokka (Setonix brachyurus)" title="Individual Chocolate Cakes" />
//图像标签,图像标题
<figure>
<img src="images/otters.jpg" alt="Photograph of two sea otters floating in water" />
<br />
<figcaption>Sea otters hold hands when they sleep so they don't drift away from each other.</figcaption>
</figure>
//表格
<table>
<thead>
<tr>
<th width="150"></th>
<th scope="col" colspan="2" >Withdrawn</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" >45</th>
<td rowspan="2">60</td>
<td>80</td>
</tr>
<th>80</th>
<td>90</td>
</tbody>
<tfoot>
<tr>
<th>80</th>
<td>90</td>
<td>90</td>
</tr>
</tfoot>
</table>
//按钮,表单
<form action="http://www.example.com/add.php">
<button><img src="images/add.gif" alt="add" width="10" height="10" /> Add</button>
<input type="hidden" name="bookmark" value="lyrics" />
</form>
//多选框
<form action="http://www.example.com/profile.php">
<p>Please select your favorite music service(s):
<br />
<input type="checkbox" name="service" value="itunes" checked="checked" /> iTunes
<input type="checkbox" name="service" value="lastfm" /> Last.fm
<input type="checkbox" name="service" value="spotify" /> Spotify
</p>
</form>
//下拉列表
<form action="http://www.example.com/profile.php">
<p>What device do you listen to music on?</p>
<select name="devices">
<option value="ipod">ipod</option>
<option value="radio">Radio</option>
<option value="computer">Computer</option>
</select>
</form>
//表单集合, 文本框,邮箱框,label包裹
<fieldset>
<legend>Your Details:</legend>
<label>Name: <input type="text" name="name" size="30" maxlength="100"></label><br />
<label>Email: <input type="email" name="email" size="30" maxlength="100"></label><br />
</fieldset><br />
//label for用法
<label for="hear-about">How did you hear about us?</label>
<select name="referrer" id="hear-about">
<option value="google">Google</option>
<option value="friend">Friend</option>
<option value="advert">Advert</option>
<option value="other">Other</option>
</select>
//单选框
<label><input type="radio" name="rating" value="yes" /> Yes</label>
<label><input type="radio" name="rating" value="no" /> No</label>
<label><input type="radio" name="rating" value="maybe" /> Maybe</label>
//textarea框
<textarea rows="4" cols="40" id="comments"></textarea>
//提交按钮
<input type="submit" value="Submit review" />
//选择文件
<input type="file" name="user-song" value="Upload"/><br />
(这个文字是各个浏览器不一样的,Chrome是“选择文件”,FireFox是“浏览”。。因为这个是一个浏览器内部的决定,无法更改。想要改的话就弄一个隐藏的file input,显示的是一个常规的input和一个button,这样直接修改button的名称就可以了,然后button的click指向隐藏的file的excute之类,再将file中的路径名贴到常规input上来,简单来说就是模仿一个。
<input id='showSrc' type='text' /><input type='button' value='Brows' OnClick='javascript:$("#hiddenFile").Click();'/>
<input id='hiddenFile' type='file' OnChange='javascript:xxx();' />
再决定OnChange函数同步路径到'showSrc',hiddenFile的隐藏可以在document.ready时用$('#hiddenFile').hide)
//h5 日期输入框 输入框提示词 placeholder
<input id="username" type="date" name="depart" placeholder="Enter keyword"/>
//h5表单验证 required需要填写,密码输入框
<input type="password" name="password" id="password" required="required" />
//h5搜索框
<input type="search" name="search" />
//url输入框
<input type="url" name="website" />
//图片按钮
<input type="image" src="images/subscribe.jpg" width="100" height="20" />
//多选框
<select name="instruments" size="3" multiple="multiple">
<option value="guitar" selected="selected">Guitar</option>
<option value="drums">Drums</option>
<option value="keyboard" selected="selected">Keyboard</option>
<option value="bass">Bass</option>
</select>
//注释
<!-- start of introduction -->
<h1>Current Exhibitions</h1>
<h2>Olafur Eliasson</h2>
<!-- end of introduction -->
//网页信息
<meta name="description" content="Telephone, email and directions for The Art Bookshop, London, UK" />
<meta name="keywords" content="installation, art, opinion" />
//加入搜索引擎,不加入页面的其他链接
<meta name="robots" content="nofollow" />
<meta http-equiv="author" content="Jon Duckett" />
//不缓存当前页面
<meta http-equiv="pragma" content="no-cache" />
//指定缓存页面的过期时间,
<meta http-equiv="expires" content="Fri, 04 Apr 2014 23:59:59 GMT" />
//内联部分
<span class="gallery">Tate Modern</span>
//内联模块
<iframe src="http://maps.google.co.uk/maps?q=moma+new+york&output=embed" width="450" height="350" frameborder="0" scrolling="no">
</iframe>
//flash文件swf播放
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
//id#bird的地方防止,最低播放版本8.0.0“”
<script type="text/javascript">swfobject.embedSWF("flash/bird.swf", "bird", "400", "300", "8.0.0");</script>
//播放MP3
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {mp3: "audio/test-audio.mp3"};
swfobject.embedSWF("flash/player_mp3_1.0.0.swf", "music-player", "200", "20", "8.0.0", flashvars, params);
</script>
//播放flash电影
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {
movie:"../video/puppy.flv" };
swfobject.embedSWF("flash/osplayer.swf", "snow", "400", "345", "8.0.0", flashvars, params);
</script>
//h5播放音频
<audio src="audio/test-audio.ogg" controls autoplay>
<p>This browser does not support our audio format.</p>
</audio>
//h5播放视频
<video src="video/puppy.mp4"
poster="images/puppy.jpg"
width="400" height="300"
controls
loop>
<p>A video of a puppy playing in the snow</p>
</video>
//flash、多格式H5视频兼容方式
<script type="text/javascript" src="swfobject/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {movie: "../video/puppy.flv"};
swfobject.embedSWF("flash/osplayer.swf", "snow", "400", "320", "8.0.0", flashvars, params);
</script>
<video poster="images/puppy.jpg" width="400" height="320" controls="controls">
<source src="video/puppy.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
<source src="video/puppy.webm" type='video/webm;codecs="vp8, vorbis"' />
<div id="snow">
<p>You cannot see this video of a puppy playing in the snow because this browser does not support our video formats.</p>
</div>
</video>
//兼容MP3格式
<audio controls autoplay>
<source src="audio/test-audio.ogg" />
<source src="audio/test-audio.mp3" />
<p>This browser does not support our audio format.</p>
</audio>
//h5标签
header, section, footer, aside, nav, article, figure, figcaption {
display: block;}
html-查漏补缺
最新推荐文章于 2024-07-13 15:41:17 发布