< ! DOCTYPE html>
< html>
< head>
< meta charset= "utf-8" >
< title> 菜鸟教程 ( runoob. com) < / title>
< ! -- 为搜索引擎定义关键词 -- >
< meta name= "keywords" content= "HTML, CSS, XML, XHTML, JavaScript" >
< meta name= "description" content= "免费 Web & 编程 教程" >
< meta name= "author" content= "Runoob" >
< meta http- equiv= "refresh" content= "30" > < ! -- 每30 秒钟刷新当前页面 -- >
< ! -- 链接样式表 -- >
< link rel= "stylesheet" type= "text/css" href= "mystyle.css" >
< style type= "text/css" >
body { background- color: green}
p { color: blue}
< / style>
< / head>
< body>
< ! -- 导航 -- >
< nav>
< a href= "/html/" > HTML < / a> |
< a href= "/css/" > CSS < / a> |
< a href= "/js/" > JavaScript< / a> |
< a href= "/jquery/" > jQuery< / a>
< / nav>
< ! -- 网页布局1 -- >
< div id= "container" style= "width:500px" >
< div id= "header" style= "background-color:#FFA500;" >
< h1 style= "margin-bottom:0;" > 网页布局< / h1> < / div>
< div id= "menu" style= "background-color:#FFD700;height:200px;width:100px;float:left;" >
< b> 菜单< / b> < br>
HTML < br>
CSS < br>
JavaScript
< nav>
< a href= "/html/" > HTML < / a> < br>
< a href= "/css/" > CSS < / a> < br>
< a href= "/js/" > JavaScript< / a> < br>
< a href= "/jquery/" > jQuery< / a> < br>
< / nav>
< / div>
< div id= "content" style= "background-color:#EEEEEE;height:200px;width:400px;float:left;" >
< ul> < ! -- 无序列表 -- >
< li> 项目< / li>
< li> 项目< / li>
< / ul>
< ol> < ! -- 有序列表 -- >
< li> 第一项< / li>
< li> 第二项< / li>
< / ol>
< dl>
< dt> 项目 1 < / dt>
< dd> 描述项目 1 < / dd>
< / dl>
< / div>
< div id= "footer" style= "background-color:#FFA500;clear:both;text-align:center;" >
版权 © runoob. com< / div>
< / div>
< ! -- 网页布局2 -- >
< hr>
< table width= "500" border= "0" >
< tr>
< td colspan= "2" style= "background-color:#FFA500;" >
< h1> 网页布局2 < / h1>
< / td>
< / tr>
< tr>
< td style= "background-color:#FFD700;width:100px;vertical-align:top;" >
< b> 菜单< / b> < br>
HTML < br>
CSS < br>
JavaScript
< / td>
< td style= "background-color:#eeeeee;height:200px;width:400px;vertical-align:top;" >
< form action= "demo_form.php" method= "post/get" >
< input type= "text" name= "email" size= "40" maxlength= "50" >
< input type= "password" >
< input type= "checkbox" checked= "checked" >
< input type= "radio" checked= "checked" >
< input type= "submit" value= "Send" >
< input type= "reset" >
< input type= "hidden" >
< select>
< option> 苹果< / option>
< option selected= "selected" > 香蕉< / option>
< option> 樱桃< / option>
< / select>
< textarea name= "comment" rows= "60" cols= "20" > < / textarea>
< / form>
< / td>
< / tr>
< tr>
< td colspan= "2" style= "background-color:#FFA500;text-align:center;" >
版权 © runoob. com< / td>
< / tr>
< / table>
< h1 style= "text-align:center;" > 这是第一个标题< / h1>
< font size= "6" > 这是6 号字体文本< / font>
< h2 style= "text-align:center;" > 这是第二个标题< / h2>
< font size= "5" > 这是5 号字体文本< / font>
< h3 style= "text-align:center;" > 这是第三个标题< / h3>
< font size= "4" > 这是4 号字体文本< / font>
< p id= "demo" style= "background-color:yellow;" > 我的第一个段落。< / p>
< p>
这是一个电子邮件链接：
< a href= "mailto:someone@example.com?Subject=Hello%20again" target= "_top" >
发送邮件< / a>
< / p>
< p style= "font-family:arial;color:red;font-size:20px;" >
这个< br> 段落< br> 演示了分行的效果
< / p>
< hr> < ! -- 横线 -- >
< form>
First name: < input type= "text" name= "firstname" > < br>
Last name: < input type= "text" name= "lastname" >
< / form>
< form>
Password: < input type= "password" name= "pwd" >
< / form>
< form>
< input type= "radio" name= "sex" value= "male" > Male< br>
< input type= "radio" name= "sex" value= "female" > Female
< / form>
< form>
< input type= "checkbox" name= "vehicle" value= "Bike" > I have a bike< br>
< input type= "checkbox" name= "vehicle" value= "Car" > I have a car
< / form>
< form name= "input" action= "html_form_action.php" method= "get" >
Username: < input type= "text" name= "user" >
< input type= "submit" value= "Submit" >
< / form>
< hr> < ! -- 横线 -- >
< table border= "1" >
< tr>
< td> row 1 , cell 1 < / td>
< td> row 1 , cell 2 < / td>
< / tr>
< tr>
< td> row 2 , cell 1 < / td>
< td> row 2 , cell 2 < / td>
< / tr>
< / table>
< hr> < ! -- input -- >
< form action= "demo-form.php" >
选择你喜欢的颜色: < input type= "color" name= "favcolor" > < br>
< input type= "submit" >
< / form>
< form action= "demo-form.php" >
生日: < input type= "date" name= "bday" >
< input type= "submit" >
< / form>
< form action= "demo-form.php" >
生日 ( 日期和时间) : < input type= "datetime" name= "bdaytime" >
< input type= "submit" >
< / form>
< hr>
< img src= "/images/logo.png" width= "258" height= "39" / > < br>
< a href= "https://www.runoob.com" > 这是一个链接< / a> < br>
< a href= "https://www.runoob.com/html/html-links.html#tips" >
访问有用的提示部分< / a> < br>
< a href= "http://www.example.com/" > < img src= "URL" alt= "替换文本" > < / a>
< ! -- 在新窗口打开文档 -- >
< a href= "https://www.runoob.com/" target= "_blank" rel= "noopener noreferrer" > 访问菜鸟教程! < / a>
< hr> < ! -- 视频 -- >
< div style= "text-align:center" >
< button onclick= "playPause()" > 播放/ 暂停< / button>
< button onclick= "makeBig()" > 放大< / button>
< button onclick= "makeSmall()" > 缩小< / button>
< button onclick= "makeNormal()" > 普通< / button>
< br>
< video width= "320" height= "240" controls>
< source src= "movie.mp4" type= "video/mp4" >
< source src= "movie.ogg" type= "video/ogg" >
你的浏览器不支持 video 标签。
< / video> < br>
< / div>
< hr> < ! -- 音频 -- >
< audio controls>
< source src= "horse.ogg" type= "audio/ogg" >
< source src= "horse.mp3" type= "audio/mpeg" >
您的浏览器不支持 audio 元素。
< / audio>
< hr> < ! -- 矢量图像五角星 -- >
< svg xmlns= "http://www.w3.org/2000/svg" version= "1.1" height= "190" >
< polygon points= "100,10 40,180 190,60 10,60 160,180"
style= "fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" / >
< / svg>
< hr> < ! -- 定义画布 -- >
< canvas id= "myCanvas" width= "200" height= "100" style= "border:1px solid #d3d3d3;" >
< / canvas>
< script>
x= document. getElementById ( "demo" )
function myFunction ( )
{
if ( navigator. geolocation)
{
navigator. geolocation. getCurrentPosition ( showPosition) ;
}
else
{
x. innerHTML= "该浏览器不支持获取地理位置。" ;
}
}
function showPosition ( position )
{
x. innerHTML= "纬度: " + position. coords. latitude +
"<br>经度: " + position. coords. longitude;
}
var c= document. getElementById ( "myCanvas" ) ;
var ctx= c. getContext ( "2d" ) ;
ctx. beginPath ( ) ;
ctx. arc ( 95 , 50 , 40 , 0 , 2 * Math. PI ) ;
ctx. stroke ( ) ;
< / script>
< button type= "button" onclick= "myFunction()" > 点击这里获取地理位置< / button>
< / body>
< / html>
< ! DOCTYPE html>
< html>
< head>
< meta charset= "utf-8" >
< title> 网页布局< / title>
< / head>
< body>
< ! -- 定义导航链接的部分 -- >
< nav>
< a href= "/html/" > HTML < / a> |
< a href= "/css/" > CSS < / a> |
< a href= "/js/" > JavaScript< / a> |
< a href= "/jquery/" > jQuery< / a>
< / nav>
< ! -- 描述了文档的头部区域，即页眉 -- >
< article>
< h1> Internet Explorer 9 < / h1>
< p> Windows Internet Explorer 9 ( 缩写为 IE9 ) 在2011 年3 月14 日21 : 00 发布。< / p>
< / article>
< ! -- 标签定义文档中的节 -- >
< section>
< h1> WWF < / h1>
< p> The World Wide Fund for Nature ( WWF ) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. < / p>
< / section>
< ! -- 标签定义文档中的节 -- >
< section>
< h1> WWF 's Panda symbol< / h1>
< p> The Panda has become the symbol of WWF . The well- known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF . < / p>
< / section>
< p> My family and I visited The Epcot center this summer. < / p>
< ! -- 标签定义页面主区域内容之外的内容（比如侧边栏） -- >
< aside>
< h4> Epcot Center< / h4>
< p> The Epcot Center is a theme park in Disney World, Florida. < / p>
< / aside>
< ! -- 标签规定独立的流内容（图像、图表、照片、代码等等 -- >
< figure>
< img loading= "lazy" src= "img_pulpit.jpg" alt= "The Pulpit Rock" width= "304" height= "228" >
< figcaption> Fig1. - The Pulpit Pock, Norway. < / figcaption>
< / figure>
< ! -- 描述了文档的底部区域，即页脚 -- >
< footer>
< p> Posted by: Hege Refsnes< / p>
< p> < time pubdate datetime= "2012-03-01" > < / time> < / p>
< / footer>
< / body>
< / html>
< ! DOCTYPE html>
< html>
< head>
< meta charset= "utf-8" >
< title> HTML5 本地存储之Web Storage篇< / title>
< / head>
< body>
< div style= "border: 2px dashed #ccc;width:320px;text-align:center;" >
< label for = "sitename" > 网站名 ( key) ：< / label>
< input type= "text" id= "sitename" name= "sitename" class = "text" / >
< br/ >
< label for = "siteurl" > 网 址 ( value) ：< / label>
< input type= "text" id= "siteurl" name= "siteurl" / >
< br/ >
< input type= "button" onclick= "save()" value= "新增记录" / >
< hr/ >
< label for = "search_phone" > 输入网站名：< / label>
< input type= "text" id= "search_site" name= "search_site" / >
< input type= "button" onclick= "find()" value= "查找网站" / >
< p id= "find_result" > < br/ > < / p>
< / div>
< br/ >
< div id= "list" >
< / div>
< script>
loadAll ( ) ;
function save ( ) {
var siteurl = document. getElementById ( "siteurl" ) . value;
var sitename = document. getElementById ( "sitename" ) . value;
localStorage. setItem ( sitename, siteurl) ;
alert ( "添加成功" ) ;
}
function find ( ) {
var search_site = document. getElementById ( "search_site" ) . value;
var siteurl = localStorage. getItem ( search_site) ;
var find_result = document. getElementById ( "find_result" ) ;
find_result. innerHTML = search_site + "的网址是：" + siteurl;
}
function loadAll ( ) {
var list = document. getElementById ( "list" ) ;
if ( localStorage. length> 0 ) {
var result = "<table border='1'>" ;
result += "<tr><td>key</td><td>value</td></tr>" ;
for ( var i= 0 ; i< localStorage. length; i++ ) {
var sitename = localStorage. key ( i) ;
var siteurl = localStorage. getItem ( sitename) ;
result += "<tr><td>" + sitename+ "</td><td>" + siteurl+ "</td></tr>" ;
}
result += "</table>" ;
list. innerHTML = result;
} else {
list. innerHTML = "数据为空……" ;
}
}
< / script>
< / body>
< / html>
< ! DOCTYPE HTML >
< html>
< head>
< meta charset= "UTF-8" >
< title> 数据库< / title>
< script type= "text/javascript" >
var db = openDatabase ( 'mydb' , '1.0' , 'Test DB' , 2 * 1024 * 1024 ) ;
var msg;
db. transaction ( function ( tx ) {
tx. executeSql ( 'CREATE TABLE IF NOT EXISTS LOGS (id unique, log)' ) ;
tx. executeSql ( 'INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")' ) ;
tx. executeSql ( 'INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")' ) ;
msg = '<p>数据表已创建，且插入了两条数据。</p>' ;
document. querySelector ( '#status' ) . innerHTML = msg;
} ) ;
db. transaction ( function ( tx ) {
tx. executeSql ( 'SELECT * FROM LOGS' , [ ] , function ( tx, results ) {
var len = results. rows. length, i;
msg = "<p>查询记录条数: " + len + "</p>" ;
document. querySelector ( '#status' ) . innerHTML += msg;
for ( i = 0 ; i < len; i++ ) {
msg = "<p><b>" + results. rows. item ( i) . log + "</b></p>" ;
document. querySelector ( '#status' ) . innerHTML += msg;
}
} , null ) ;
} ) ;
< / script>
< / head>
< body>
< div id= "status" name= "status" > 状态信息< / div>
< / body>
< / html>
< ! DOCTYPE html>
< html manifest= "demo_html.appcache" >
< head>
< meta charset= "UTF-8" >
< title> 离线访问以及获取服务器更新< / title>
< / head>
< body>
< script src= "demo_time.js" >
< / script>
< p id= "timePara" > < button onclick= "getDateTime()" > 获取日期和时间< / button> < / p>
< p> < img src= "logo.png" width= "336" height= "69" > < / p>
< p> 尝试打开 < a href= "tryhtml5_html_manifest.htm" target= "_blank" > 这个页面< / a> , 在离线的状态下重新载入这个页面，页面也可以访问。< / p>
< h1> 获取服务端更新数据< / h1>
< div id= "result" > < / div>
< ! -- 从服务器获取更新数据 -- >
< script>
if ( typeof ( EventSource) !== "undefined" )
{
var source= new EventSource ( "demo_sse.php" ) ;
source. onmessage = function ( event )
{
document. getElementById ( "result" ) . innerHTML+= event. data + "<br>" ;
} ;
}
else
{
document. getElementById ( "result" ) . innerHTML= "抱歉，你的浏览器不支持 server-sent 事件..." ;
}
< / script>
< / body>
< / html>
< ! DOCTYPE html>
< html>
< head>
< meta charset= "utf-8" >
< title> 音频以及视频< / title>
< / head>
< body>
< ! -- 插入html文件-- >
< object width= "100%" height= "500px" data= "snippet.html" > < / object>
< object height= "50" width= "100" data= "horse.mp3" > < / object>
< p> 如果你无法听到该音频，那么可能你的电脑或浏览器不支持该文件格式。< / p>
< p> 或者你没有打开扬声器。< / p>
< audio controls>
< source src= "horse.mp3" type= "audio/mpeg" >
< source src= "horse.ogg" type= "audio/ogg" >
Your browser does not support this audio format.
< / audio>
< ! -- HTML5 < audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 < embed> 元素-- >
< audio controls height= "100" width= "100" >
< source src= "horse.mp3" type= "audio/mpeg" >
< source src= "horse.ogg" type= "audio/ogg" >
< embed height= "50" width= "100" src= "horse.mp3" >
< / audio>
< video width= "320" height= "240" controls>
< source src= "movie.mp4" type= "video/mp4" >
< source src= "movie.ogg" type= "video/ogg" >
< source src= "movie.webm" type= "video/webm" >
< object data= "movie.mp4" width= "320" height= "240" >
< embed src= "movie.swf" width= "320" height= "240" >
< / object>
< / video>
< / body>
< / html>
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
