html
2016-06-23 13:58
363 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html</title>
</head>
<body>
<a id="top">首部</a>
<p>html段落。</p>
<a href="http://www.baidu.com">链接到百度</a>
<p>html元素与属性推荐用小写字母。</p>
<hr/>
<!-- 这是一个注释 -->
<b>粗体bold</b>
<i>斜体italic</i>
<sub>下标subscript</sub>
<sup>上标superscript</sup>
<strong>替换加粗标签</strong>
<em>替换斜体标签</em>
<hr>
<h6>缩写和首字母缩写</h6>
<abbr title="etcetera">etc.</abbr>
<br/>
<acronym title="World Wide Web">WWW</acronym>
<p>文字方向This paragraph will go left-to-right.</p>
<p><bdo dir="rtl">此例演示如何改变文字的方向This paragraph will go right-to-left.</bdo></p>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<hr>
<a href="http://www.runoob.com/" target="_blank">访问菜鸟教程!新窗口打开页面</a>
<br/><br/>
<a href="http://www.runoob.com/html/" target="_blank">访问菜鸟教程!请始终将正斜杠添加到子文件夹。</a>
<br/><br/>
<p>创建图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img src="smiley.gif" alt="HTML 教程" width="32" height="32">
</a>
</p>
<a href="http://www.runoob.com/" target="_top">点击这里，跳出框架，本页内打开!</a>
<br/><br/>
<p>
这是一个电子邮件链接：
<a href="mailto:someone@example.com?Subject=邮件%20标题" target="_top">发送邮件，空格使用 %20 代替
</a>
</p>
<p>
这是另一个电子邮件链接：
<a href="mailto:someone@example.com?cc=someoneelse@example.com;other@example.com&bcc=密件抄送@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
</p>
<hr/>
<h6>HTML 表格</h6>
<table border="1" cellpadding="5" cellspacing="0">
<caption>表格标题</caption>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>data11</td>
<td>data12</td>
<td>data13</td>
</tr>
<tr>
<td>data21</td>
<td>data22</td>
<td>data23</td>
</tr>
</tbody>
</table>
<br/>
<h6>html列表</h6>
<ul style="list-style-type:square">
<li>coffee</li>
<li>tea</li>
</ul>
<ol type="A">
<li>coffee</li>
<li>milk</li>
</ol>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<div>
div块级元素：div 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 table 元素进行文档布局不是表格的正确用法。table 元素的作用是显示表格化的数据。
</div>
<div>
<span>span内联元素：span元素可用于为部分文本设置样式属性</span>
</div>
<h6>html表单和输入</h6>
<form name="input" action="http://www.baidu.com/" method="get" accept-charset="utf-8">
文本域：<input type="text" name="text" size="30"><br/>
密码：<input type="password" name="password" size="32"><br/>
单选按钮：<br/>
<input type="radio" name="sex" value="male">Male<br/>
<input type="radio" name="sex" value="female">Female<br/>
复选框：<br/>
<input type="checkbox" name="vehicle" value="bike">Bike <br>
<input type="checkbox" name="cehicle" value="car">Car <br>
<input type="submit" value="提交" ><br>
下拉列表：<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fait</option>
<option value="audi" selected>Audi</option>
</select><br>
文本框：<br>
<textarea name="textarea" rows="10" cols="30">
文本框
</textarea><br>
按钮<br>
<input type="button" value="Hello world!"><br>
</form>
<hr>
<iframe src="html01.html" name="iframe01"></iframe>
<p><a href="http://www.baidu.com" target="iframe01">baidu.COM</a></p>
<!-- html 注释 -->
<br/>
<a href="#top">访问首部</a>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>html</title>
</head>
<body>
<a id="top">首部</a>
<p>html段落。</p>
<a href="http://www.baidu.com">链接到百度</a>
<p>html元素与属性推荐用小写字母。</p>
<hr/>
<!-- 这是一个注释 -->
<b>粗体bold</b>
<i>斜体italic</i>
<sub>下标subscript</sub>
<sup>上标superscript</sup>
<strong>替换加粗标签</strong>
<em>替换斜体标签</em>
<hr>
<h6>缩写和首字母缩写</h6>
<abbr title="etcetera">etc.</abbr>
<br/>
<acronym title="World Wide Web">WWW</acronym>
<p>文字方向This paragraph will go left-to-right.</p>
<p><bdo dir="rtl">此例演示如何改变文字的方向This paragraph will go right-to-left.</bdo></p>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<hr>
<a href="http://www.runoob.com/" target="_blank">访问菜鸟教程!新窗口打开页面</a>
<br/><br/>
<a href="http://www.runoob.com/html/" target="_blank">访问菜鸟教程!请始终将正斜杠添加到子文件夹。</a>
<br/><br/>
<p>创建图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img src="smiley.gif" alt="HTML 教程" width="32" height="32">
</a>
</p>
<a href="http://www.runoob.com/" target="_top">点击这里，跳出框架，本页内打开!</a>
<br/><br/>
<p>
这是一个电子邮件链接：
<a href="mailto:someone@example.com?Subject=邮件%20标题" target="_top">发送邮件，空格使用 %20 代替
</a>
</p>
<p>
这是另一个电子邮件链接：
<a href="mailto:someone@example.com?cc=someoneelse@example.com;other@example.com&bcc=密件抄送@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
</p>
<hr/>
<h6>HTML 表格</h6>
<table border="1" cellpadding="5" cellspacing="0">
<caption>表格标题</caption>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>data11</td>
<td>data12</td>
<td>data13</td>
</tr>
<tr>
<td>data21</td>
<td>data22</td>
<td>data23</td>
</tr>
</tbody>
</table>
<br/>
<h6>html列表</h6>
<ul style="list-style-type:square">
<li>coffee</li>
<li>tea</li>
</ul>
<ol type="A">
<li>coffee</li>
<li>milk</li>
</ol>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<div>
div块级元素：div 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 table 元素进行文档布局不是表格的正确用法。table 元素的作用是显示表格化的数据。
</div>
<div>
<span>span内联元素：span元素可用于为部分文本设置样式属性</span>
</div>
<h6>html表单和输入</h6>
<form name="input" action="http://www.baidu.com/" method="get" accept-charset="utf-8">
文本域：<input type="text" name="text" size="30"><br/>
密码：<input type="password" name="password" size="32"><br/>
单选按钮：<br/>
<input type="radio" name="sex" value="male">Male<br/>
<input type="radio" name="sex" value="female">Female<br/>
复选框：<br/>
<input type="checkbox" name="vehicle" value="bike">Bike <br>
<input type="checkbox" name="cehicle" value="car">Car <br>
<input type="submit" value="提交" ><br>
下拉列表：<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fait</option>
<option value="audi" selected>Audi</option>
</select><br>
文本框：<br>
<textarea name="textarea" rows="10" cols="30">
文本框
</textarea><br>
按钮<br>
<input type="button" value="Hello world!"><br>
</form>
<hr>
<iframe src="html01.html" name="iframe01"></iframe>
<p><a href="http://www.baidu.com" target="iframe01">baidu.COM</a></p>
<!-- html 注释 -->
<br/>
<a href="#top">访问首部</a>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- HTML5调用摄像头实例
- Powershell 创建炫丽美观的Html报表
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- 又被事件冒泡坑了一把，这次要彻底弄懂浏览器的事件流
- 通过Mootools 1.2来操纵HTML DOM元素
- jQuery Html控件基本操作(日常收集整理)
- WEB标准网页布局中尽量不要使用的HTML标签
- Flash 与 html 的一些实用技巧
- html工作中表格<tbody>标签的使用技巧
- HTML 向 XHTML1.0 兼容性指导
- C#自写的一个HTML解析类（类似XElement语法）
- 没有文件大小限制并免费的PDF到HTML转换工具
- JavaScript与HTML结合的基本使用方法整理
- Ruby编写HTML脚本替换小程序的实例分享
- css实现气泡框效果(实例加图解)
- html链接与文本标签们
- html活用软字符连接符