HTML/HTML5笔记

使用pre来对文本进行预格式化：

<!DOCTYPE html>
<html>
<head> 
<meta charset="GDK"> 
<title>BiuBiuBiu</title> 
</head>
<body>

<pre>
      春望
    [唐] 杜甫
  国破山河在，城春草木深。
  感时花溅泪，恨别鸟惊心。
  烽火连三月，家书抵万金。
  白头搔更短，浑欲不胜簪。
</pre>

</body>
</html>
View Code

 

计算机输出文本：

<!DOCTYPE html> 
<html>
<head> 
<meta charset="GDK"> 
<title>Biubiubiu</title> 
</head>
<body>

<code>计算机输出</code>
<br />
<kbd>键盘输入</kbd>
<br />
<tt>打字机文本</tt>
<br />
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
<br />

<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>

</body>
</html>
View Code

 

邮件链接

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>

<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

</body>
</html>
View Code
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>

<p>
这是另一个电子邮件链接：
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
</p>

<p>
<b>注意:</b> 单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。
</p>

</body>
</html>
View Code

 

style元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>

<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>

</html>
View Code

 

背景颜色

<!DOCTYPE html>
<html>

<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>

</html>
View Code

 

字体样式，大小等

<!DOCTYPE html>
<html>

<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>
View Code

 

创建图像映像

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>

<p>点击太阳或其他行星，注意变化：</p>

<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
  <area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
  <area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>

</body>
</html>
View Code

 

创建图片链接

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
</head>
<body>

<p>创建图片链接:
<a href="http://www.w3cschool.cn/html/html-tutorial.html">
<img src="/statics/images/course/smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

<p>无边框的图片链接:
<a href="http://www.w3cschool.cn/html/html-tutorial.html">
<img border="0" src="/statics/images/course/smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

</body>
</html>
View Code

 

div标签

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
</head>
<body>

<p>这是一些文本。</p>

<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>

<p>这是一些文本。</p>

</body>
</html>
View Code

 

span标签

<!DOCTYPE html>
<html>
<body>

<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我得父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>

</body>
</html>
View Code

 

单选按钮

<!DOCTYPE html>
<html>
<body>

<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

<p><b>注意：</b> 当用户点击一个单选按钮时，它就会被选中，其他同名的单选按钮就不会被选中。</p>

</body>
</html>
View Code

 

复选按钮

<!DOCTYPE html>
<html>
<body>

<form action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

</body>
</html>
View Code

 

简单下拉列表

<!DOCTYPE html>
<html>
<body>

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>
View Code

 

预选下拉列表

<!DOCTYPE html>
<html>
<body>

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>
View Code

 

文本框

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool 在线教程(w3cschool.cn)</title> 
</head>
<body>

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

</body>
</html>
View Code

 

按钮

<!DOCTYPE html>
<html>
<body>

<form action="">
<input type="button" value="Hello world!">
</form>

</body>
</html>
View Code

 

定义计算结果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
</head>
<body>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

<p><strong>注意:</strong>  Internet Explorer 不支持 output 标签。</p>

</body>
</html>
View Code

 

div网页布局

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:800px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:700px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © w3cschool.cn</div>

</div>
 
</body>
</html>
View Code

 

table网页布局

<!DOCTYPE html>
<html>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>

<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
Content goes here</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright  © w3cschool.cn</td>
</tr>
</table>

</body>
</html>
View Code

 

网页中显示网页（去除边框）

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
</head> 
<body>

<iframe src="//www.w3cschool.cn/" width="200" height="200" frameborder="0">
 <p>您的浏览器不支持  iframe 标签。</p>
</iframe>

</body>
</html>
View Code

 

插入一段脚本（对于不支持的浏览器给予提示）

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
</head> 
<body>

<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

<p>不支持 JavaScript 的浏览器会使用 noscript 元素中定义的内容（文本）来替代。</p>
 
</body>
</html>
View Code

 

网页中包含HTML文件（object）

<!DOCTYPE html>
<html>
<body>

<object width="100%" height="500px" data="/statics/demosource/snippet.html"></object>
 
</body>
</html>
View Code

 

网页中包含图片

<!DOCTYPE html>
<html>
<body>

<object data="/statics/images/w3c/logo.png"></object>
 
</body>
</html>
View Code

 

网页中包含音频

<!DOCTYPE html>
<html>
<body>

<object height="50" width="100" data="/statics/demosource/horse.mp3"></object>
<p>If you cannot hear the sound, your computer or browser doesn't support the sound format.</p>
<p>Or, you have your speakers turned off.</p>


</body>
</html>
View Code

 

网页中包含HTML文件（embed）

<!DOCTYPE html>
<html>
<body>

<embed width="100%" height="500px" src="/statics/demosource/snippet.html">

</body>
</html>
View Code

 

网页中包含图片

<!DOCTYPE html>
<html>
<body>

<embed src="/statics/images/w3c/logo.png">

</body>
</html>
View Code

 

网页中包含音频

<!DOCTYPE html>
<html>
<body>

<embed height="50" width="100" src="/statics/demosource/horse.mp3">
<p>If you cannot hear the sound, your computer or browser doesn't support the sound format.</p>
<p>Or, you have your speakers turned off.</p>
</embed>
</body>
</html>
View Code

 

使用mp3

<!DOCTYPE html>
<html>
<body>

<audio controls>
  <source src="/statics/demosource/horse.mp3" type="audio/mpeg">
  <source src="/statics/demosource/horse.ogg" type="audio/ogg">
  Your browser does not support this audio format.
</audio>

</body>
</html>
View Code

 

使用雅虎播放器

<!DOCTYPE html>
<html>
<body>

<p><a href="/statics/demosource/horse.mp3">Play mp3</a></p>
<p><a href="/statics/demosource/liar.wav">Play wav</a></p>

<script src="//mediaplayer.yahoo.com/latest"></script>

</body>
</html>
View Code

 

视频播放

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls>
  <source src="/statics/demosource/movie.mp4"  type="video/mp4">
  <source src="/statics/demosource/movie.ogg"  type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>

</body>
</html>
View Code
<video width="320" height="240" controls> 
<source src="forrest_gump.mp4" type="video/mp4"> 
<source src="forrest_gump.ogg" type="video/ogg"> 
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" 
label="English"> 
<track src="subtitles_no.vtt" kind="subtitles" srclang="no" 
label="Norwegian"> 
</video>
View Code

 

图片拖放程序

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title>
<style type="text/css">
#div1, #div2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
    ev.preventDefault();
}

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="/statics/images/w3c/logo.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>
View Code

 

地理位置查询

<!DOCTYPE html>
<html>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="纬度: " + position.coords.latitude + 
  "<br>经度: " + position.coords.longitude;    
  }
</script>
</body>
</html>
View Code
posted @ 2019-03-03 21:45  Hk_Mayfly  阅读(261)  评论(0)    收藏  举报