概述
<!DOCTYPE html><!-- 声明为 HTML 文档 -->
<html><!-- HTML 页面的根元素 -->
<head>
<!-- 包含了文档的元数据; 你可以插入脚本（scripts）, 样式文件（CSS） -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"><!-- 协议标头 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><!-- 手机 -->
<!--
name属性值 :
viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。
content属性值 :
width:可视区域(viewport)的宽度，值可为数字或关键词device-width
height:可视区域(viewport)的高度
intial-scale:初始缩放比例，也即是当页面第一次 load 的时候缩放比例，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0:允许用户缩放到的最大比例。1.0将禁止用户放大到实际尺寸之上。
minimum-scale=1.0:允许用户缩放到的最小比例。1.0将禁止用户放大到实际尺寸之上。
user-scalable:用户是否可以手动缩放，no / 0 禁止缩放
-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <!-- 手机页面必要 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="viewport" content="width =device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> <!-- 不允许缩放 -->
<meta charset="utf-8"> <!-- 声明编码 charset="utf-8" 中文网页需要,否则乱码 -->
<title>网页标题</title>
<meta name="keywords" content="关键词">
<meta name="description" content="描述">
<meta name="author" content="作者 Luke">
<base href="http://www.runoob.com/images/" target="_blank"> <!-- 该标签指定了页面上所有链接的默认URL & 打开方式 -->
<meta http-equiv="refresh" content="60"> <!-- 每60秒后刷新当前页面 -->
<!--<meta http-equiv="refresh" content="52; url=www.baidu.com"> <!- - 每52秒后跳转页面 -->
<meta name="format-detection" content="telephone=no" /> <!-- 禁止自动把数字转化为拨号链接 -->
<meta name="format-detection" content="email=no" /> <!-- 禁止自动把文字转化为邮箱链接 -->
<meta name="format-detection" content="adress=no" /> <!-- 禁止自动把文字转化为地址链接 -->
<link href="/css/CSS MyStyle.css" type="text/css" rel="stylesheet" /> <!-- <link> 链接外部(CSS)文件 <link> -->
<style>
body {
background-color: white;
}
h1 {
color: red;
}
p {
color: blue;
}
</style><!-- 本地样式(CSS) -->
</head>
<body onload="load()">
<!-- 可见的页面内容 页面加载完毕后出发执行脚本函数 -->
<hr /><!-- 杂记 ------------------------------------------------------------------------------------------ -->
<!-- HTML 折叠 -->
<details>
<summary>A Few of my Favorite Things</summary>
<p>Raindrops on roses and whiskers on kittens</p>
<p>Cream colored ponies and crisp apple strudels</p>
<p>Wild geese that fly with the moon on their wings</p>
<p>Coffee</p>
</details>
<a href="#C1">文本目录</a><br />
<a href="#link">链接</a><br />
<a href="#img">图片</a><br />
<a href="#table">表格</a><br />
<a href="#iframe">iframe</a><br />
<a href="#script">script</a><br />
<a href="http://www.runoob.com/try/try.php?filename=tryhtml_link_locations&basepath=0" target="_blank">在当前页面链接到指定位置</a> <br />
<a href="https://c.runoob.com/codedemo/2808" target="_blank">文本过长自动... +CSS</a> <br />
<!-- 注释 -->
<!-- "ABC" == 'ABC' (当原字符有双引号时，例如 A"B"C 那么-> 不可以"A"B"C", 可以 'A"B"C') -->
<!-- 空格 -->
<!-- © 版权C -->
<!-- ® 商标R -->
<!-- ™ TM -->
<br /><!-- 换行 -->
<hr /><!-- 水平线 -->
<!-- <bgsound>
-->
<hr /><!-- 文本 ------------------------------------------------------------------------------------------ -->
<div>
<embed src="/i/helloworld.swf" /><!-- 播放动画/视频/音频 -->
<!--<audio autoplay="autoplay" controls="controls" loop="loop" preload="auto" src="http://antiserver.kuwo.cn/anti.s?format=aac|mp3&rid=54944316&type=convert_url&response=res">
你的浏览器版本太低，不支持audio标签
</audio>-->
<audio controls>
<source src="http://antiserver.kuwo.cn/anti.s?format=aac|mp3&rid=56193479&type=convert_url&response=res" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
<dialog open>This is an open dialog window</dialog>
<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>
<p>段落</p>
<header>标签定义文档或者文档的一部分区域的页眉</header>
<b>bold 加粗文本</b> <br />
<strong>家畜</strong> <br />
<i>italic 斜体文本</i> <br />
<em>倾斜</em> <br />
<big>这个文本字体放大</big> <br />
<small>这个文本是缩小的</small> <br />
<del>删除线</del> <br />
<ins>下划线</ins> <br />
这是 <sub>下标</sub> 和 <sup>上标</sup><br />
<bdo dir="rtl">--> 从右到左显示 --></bdo> <br />
<q>块，自加双引号</q>
<dfn>定义项目</dfn><br />
<code>计算机输出</code> <br />
<kbd>键盘输入</kbd> <br />
<tt>打字机文本</tt> <br />
<samp>计算机代码样本</samp> <br />
<var>计算机变量</var> <br />
<abbr title="注解:59">59</abbr> <br />
<acronym title="卢细几">LXJ</acronym> <br />
<blockquote cite="http://www.worldwildlife.org/who/index.html">缩进块.</blockquote>
<address>地址，然并卵，结尾自带换行...</address>
<pre>
pre 标签
保留空行和 空格
</pre>
</div>
<hr /><!-- 链接 ------------------------------------------------------------------------------------------ -->
<div>
<h2><a id="link">链接</a></h2>
<a href="http://www.hao123.com" target="_blank">普通链接</a><br /><!-- target="_blank"：在新窗口打开 target="_top"：原界面置顶打开 -->
<a href="http://www.runoob.com/html/html-tutorial.html">图片链接<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a><br />
<a href="tel:10010">拨打电话10010</a>
<a href="mailto:920800319@qq.com?Subject=Hello%20again" target="_top">发送邮件</a><br />
<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">发送邮件2</a><br />
</div>
<hr /><!-- 图片 ------------------------------------------------------------------------------------------ -->
<div>
<h2><a id="img">图片</a></h2>
<!-- 建议：慎用图片 -->
<!-- alt 属性用来为图像定义一串预备的可替换的文本 -->
<img src="/images/logo.png" width="258" height="39" /><br />
<img src="eg/拖动/chrome.gif" alt="Google Chrome" width="33" height="32"><br /><!-- 相对路径 -->
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"><br /><!-- usemap:图像映射 -->
<map name="planetmap">
<!-- 图像地图标签 -->
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <!-- 图像地图中的可点击区域 点击后跳转链接href="sun.htm"-->
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</div>
<hr /><!-- 表格 ------------------------------------------------------------------------------------------ -->
<div>
<h2><a id="table">表格</a></h2>
<!-- <table>表格 -->
<!-- <tr>一行 -->
<!-- <th>标题单元格 -->
<!-- <td>单元格 -->
<!-- 单元格里面可以放标签 -->
<!-- <colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚 -->
<table border="1" cellpadding="10" cellspacing="0">
<!-- border="1":边框1像素 单元格边距 单元格间距 -->
<caption>表格标题</caption>
<tr><th width="59px">标题 宽度</th><th>Name</th><th>Value</th></tr>
<tr><td>1</td><td colspan="2">2</td></tr>
<tr><td>3</td><td colspan="2">4</td></tr>
<tr><td rowspan="2">5</td><td>6</td><td>7</td></tr>
<tr><td><ul><li>1</li><li>2</li><li>3</li></ul></td><td>9</td></tr>
</table>
</div>
<hr /><!-- 列表 ------------------------------------------------------------------------------------------ -->
<div>
<h2><a id="list">列表</a></h2>
<!-- 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等 -->
<h3>无序列表</h3>
<ul style="list-style-type:disc" |style="list-style-type:circle" |style="list-style-type:square">
<!-- 圆点|空心圆点|正方形 -->
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h3>有序列表 + 嵌套</h3>
<ol type="1" start="50" |type="A" |type="I">
<br type="1" start="50" 按数字value排序 从50开始、type="A" ：按照大写字母排序、type="I" ：按照罗马数字排序 />
<li><p>Coffee</p></li>
<li>
Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ol>
<h3>自定义列表</h3>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</div>
<hr /><!-- <div> ------------------------------------------------------------------------------------------ -->
<div>
<h2><a id="div">div</a></h2>
<div>块级容器</div>
<span>内联容器</span>
<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</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">内容在这里</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">版权 ? runoob.com</div>
</div>
</div>
<hr /><!-- 表单 ------------------------------------------------------------------------------------------ -->
<form name="this_form" action="提交到哪里：demo-form.php" method="get/post" enctype="application/x-www-form-urlencoded / multipart/foem-data" target="目标打开方式：_blank(新窗口打开)/_parent(父容器打开)/_seif(本身打开)/_top(当前页面打开)">
<!-- 点击"提交"按钮，表单数据将被发送到服务器上的"demo-form.php" 使用Get方式发送 -->
<!-- http://www.runoob.com/try/demo_source/demo-form.php?txt1=默认值&sex=Female&vehicle=Che -->
<fieldset>
<!-- 外框 -->
<legend>外框标题:</legend>
文本框：<input type="text" name="txt1" value="默认值" placeholder="提示语" maxlength="最大字符数"><br 文本输入框的默认宽度是20个字符 />
搜索框：<input type="search" name="user_search" placeholder="Search W3School" maxlength="最大字符数" />
密码框：<input type="password" name="txt2" maxlength="最大字符数"><br />
单选按钮(默认选中)：<input type="radio" name="sex" value="man" checked="checked">Man<br />
复选框(默认选中)：<input type="checkbox" name="vehicle" value="Che" checked="checked">I have a vehicle<br />
按钮：<input type="button" value="按钮" onclike="单击事件"><br />
提交按钮：<input type="submit" value="提交" /><br submit专门用于提交表单的button />
重置按钮：<input type="reset" value="重置"><br />
图像域：<input type="image" src="图像地址"><br />
文件域：<input type="hidden" value="重置"><br />
隐藏域：<input type="file"><br />
文本域：<textarea rows="行数" cols="长度">文本域(多行文本)</textarea><br />
下拉列表：<select name="selectList">
<option value="volvo">Volvo</option>
<option value="saab" selected>Saab</option> <!-- 默认选中 -->
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select><br />
</fieldset>
</form>
<!-- 发邮件 -->
<form action="MAILTO:920800319@qq.com" method="post" enctype="text/plain">
<fieldset>
<!-- 外框 -->
<legend>发邮件</legend>
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</fieldset>
</form>
<hr /><!-- 其他 ------------------------------------------------------------------------------------------ -->
<h2><a id="iframe">iframe</a></h2>
<!-- 框架 src=另一个页面的地址(相对/绝对) 宽度 高度 移除边框 -->
<iframe src="https://www.baidu.com" name="iframe_a" width="800" height="300"></iframe>
<p><a href="https://www.hao123.com" target="iframe_a">hao123</a></p> <!-- 单击链接会在iframe中打开网页 -->
<hr /><!-- script ------------------------------------------------------------------------------------------ -->
<h2><a id="script">script</a></h2>
<!-- <noscript> -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script><!-- 引用脚本: jQuery包/框架 -->
<script>
function load() {
alert("onload 常用在 <body> 中，一旦完全加载所有内容（包括图像、脚本文件、CSS 文件等），就执行一段脚本。");
}
$(function () {
//初始化
alert('hello world');
})
window.onload = function () { //指示页面包含图片等文件在内的所有元素都加载完成。
//初始化
alert('see you again');
}
</script>
</body>
</html>
最后
以上就是温暖雨为你收集整理的demo.html的全部内容，希望文章能够帮你解决demo.html所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复