html5学习测试
2024-08-21 08:02:44
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 4秒后自动转去相应网址 -->
<!-- <meta http-equiv="refresh" content="4; http://www.baidu.com/" /> -->
<title>test output</title>
<style>
//body{ background: navy; color: yellow;}
</style>
</head>
<body>
<form name="main">
<h3>output元素，在firefox中支持得很好</h3>
<output name="result"></output>
<script>
document.forms.main.elements.result.value = "Hello中国";
</script>
</form>
<hr>
<a href="about:blank">baidu</a>
<script>
var a = document.links[0];
a.href="http://www.baidu.com";
a.protocol = "https"; //a.setAttribute("href","http://www.163.com");
a.setAttribute("target","_blank");
</script>
<hr>
<h3>特殊符号</h3>
10±0.01 <br>
注册商标® <br>
度° <br>
元¥ <br>
引号" Hello World. "
<hr>
<strong>鼠标</strong>移上去显示详细<em>abbr</em>：<abbr title="eXtensible Hyper Text Markup Language">XHTML</abbr>
<hr>
<kbd>Enter</kbd>
<hr>
<pre>
<code>
function message(info){
window.alert(info);
}
</code></pre>
<hr>
<blockquote>
天才是99%的汗水+1%的天分！
</blockquote>
<hr>
<table border=1>
<colgroup span="1" style="width:150px;"></colgroup>
<colgroup>
<col span="2" style="width:100px; background:red">
</colgroup>
<colgroup>
<col span="1" style="width:100px; background:#ccff99">
</colgroup>
<colgroup span="1" style="width:150px;"></colgroup>
<thead>x
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>4</td>
</tr>
<tbody>
<tbody>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>4</td>
</tr>
<tr>
<td>9</td>
<td>0</td>
<td>-</td>
<td>=</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>4</td>
</tr>
<tfoot>
</table>
<hr>
<form action="" name="frmTest">
tel: <input type="tel"> <br>
datetime: <input type="datetime"> <br>
range: <input type="range" min="0" max="10" value="5"> <br>
color: <input type="color" name="colorSel"> <input type="button" onclick="alert(frmTest.colorSel.value)"> <br> optgroup示例:
<select name="selOptGrp" id="">
<optgroup label="娱乐">
<option value="film">电影</option>
<option value="film">音乐</option>
</optgroup>
<optgroup label="运动">
<option value="football">足球</option>
<option value="basketball">蓝球</option>
</optgroup>
</select>
<br>
<datalist id="mylist">
<option value="film">电影</option>
<option value="film">音乐</option>
<option value="football">足球</option>
<option value="basketball">蓝球</option>
</datalist>
提示: <input type="text" name="mysport" list="mylist"> <br>
progress: <progress max="100" value="20"></progress>
</form> <h3>menu test fail:</h3>
<div style="border:1px solid red; width:400px; height:300px; word-wrap:break-word; word-break:break-all;" draggable="true" contextmenu="mymenu">
Hello World, This is great!
Hello World, This is great!Hello World, This is great!Hello World, This is great!
</div>
<menu id="mymenu" type="toolbar" label="someth">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</menu>
</body>
</html>
最新文章
- MySQL 主从复制
- AgileEAS.NET SOA 中间件Web运行容器管理功能已全部开源，欢迎大家下载、使用、反馈
- JS组件系列——使用HTML标签的data属性初始化JS组件
- 个人博客作业Week2
- android wifi ANR问题分析总结
- c++游戏服务器编程学习笔记（一）TCP/IP
- Centos 6 之samba 搭建
- LeetCode——Find Median from Data Stream
- 【转】编写Chrome扩展程序
- 【枚举+数学】【HDU1271】整数对 难度：五颗星
- Set Matrix Zeroes -- LeetCode
- [转]FFMpeg框架代码阅读
- UIAlertControl的使用对比与UIAlertView和UIActionSheet
- vue项目使用 prerender-spa-plugin 预渲染
- 【原创】大叔经验分享（13）spark运行报错WARN Utils: Service 'sparkDriver' could not bind on port 0. Attempting port 1.
- iOS字符串自动计算文本的宽和高
- 怎么用js编写1——100的质数？
- Yii1自定义 CGridView 中的操作按钮中 CButtonColumn 选项
- mySQL安装与基础配置
- 【Java深入研究】1、object类