<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="关键字,key,用英文逗号定义。">
<meta name="description" content="定义网页描述内容">
<meta name="author" content="定义作者">
<meta http-equiv="refresh" content="30"><!--每30秒刷新一次页面-->
<title>实例教程1</title>
<link rel="shortcup icon" href="./images/headimg_dl.jpg"><!--定义标签的图片-->
<base href="" target="_blank" /><!--描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签默认链接-->
<link rel="stylesheet" type="text/css" href="./css/style.css"><!--引用外部资源的关系，通常用于链接到样式表-->
<style type="text/css">
body{
background-color: rgb(123,165,23);
}
</style>
</head>
<body>
<script type="text/javascript">定义了客户端脚本文件</script>
<h1>我的第一个html实例标题</h1>
<p>我的第一个段落</p>
<img src="./images/headimg_dl.jpg" />
<p>这是段落</p>
<h1>一号标题</h1>
<h2>二号标题</h2>
<h3>三号标题</h3>
<p>以此类推，至六号标题</p>
<p>其中1号最大，六号最小</p>
<p>其中1号作为最重要的，二号次要的，再其次是号
以此类推</p>
<a href="https://www.warhut.cn">这是一个链接</a>
<p>
以下适用于大多数html元素的属性：
class 为html元素定义一个或多个类名（classname）（类名从样式文件引入）<br />
id 定义元素的唯一id <br />
style 规定元素的行内样式（inline style）<br />
title 描述了元素的额外信息（作为工具条使用） <br />
</p>
<h2>水平线</h2>
<hr />
<p>html注释</p>
<!-- 这是一个注释 -->
<p>注释内容在上面</p>
<hr />
<p>html分行<br />是是是<br />哈哈哈<br /></p>
<b>加粗</b>
<strong>加粗 着重意思</strong>
<i>斜体</i>
<em>斜体</em>
<big>放大</big>
<small>缩小的</small>
啊啊<sub>下标</sub>
啊啊<sup>上标</sup>
<pre>
这是 一个 文本
可以空行，还 有空 格控制
pre 标签
</pre>
<abbr title="谁日你啊">我</abbr>
<acronym title="谁草你啊">我</acronym>
<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。
仅对于 IE 5 中的 acronym 元素有效。
对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
<p>该段落文字从左到右显示</p>
<p><bdo dir="rtl">该文字从右到左显示。</bdo></p>
<ins>插入字体</ins>
<del>删除字体</del>
<code>定义计算机代码</code>
<blockquote>定义长的引用，比如说百度是啥啥啥，不带引号，但是带格式的引用</blockquote>
<q>定义段的引用，带双引号的引用</q><br />
<cite>定义引用、引证，带下划线的引用</cite><br />
<dfn>定义一个定义项目
fuck
</dfn>
<a href="https://www.warhut.cn">定义一个超链接</a>
<p>带跳转属性的链接</p>
<a href="https://www.warhut.cn" target="_blank">跳转至新窗口打开</a>
<a href="#tips">跳转至有用的提示部分</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a id="tips">这是有用的提示部分</a>
<p>图片链接的作用</p>
<a href="https://www.warhut.cn" target="_blank" title="这是一个图片链接"><img src="./images/headimg_dl.jpg" / alt="图片信息"></a>
<p>跳出框架？</p>
<a href="https://www.warhut.cn" target="_top;_blank">点击这里!</a>
<p>创建一个电子邮件</p>
<a href="mailto:[email protected]" target="_top" title="电子邮件的方式">联系我</a>
<p style="color: red; margin-left: 20px;">这是一个带样式的标签</p>
<p style="background-color: red;">带背景颜色</p>
<p style="font-family: 幼圆;">字体</p>
<p style="text-align: center;">居中对齐的文本</p>
<hr />
<img src="./images/headimg_dl.jpg" height="20px" width="20px" alt="这是图片信息，当图片无法显示时，会显示此文本" title="这是鼠标放上去会显示的信息" />
<p>html表格</p>
<table border="1">
<tr>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td colspan="2">这个是一个单元格</td>
</tr>
<tr>
<td rowspan="3">第二个单元格</td>
<td>第二个单元格</td>
<td>第二个单元格</td>
<td>第二个单元格</td>
</tr>
<tr>
<td rowspan="3">第二个单元格</td>
<td>第二个单元格</td>
<td>第二个单元格</td>
<td>第二个单元格</td>
</tr>
<tr>
<td rowspan="3">第二个单元格</td>
<td>第二个单元格</td>
<td>第二个单元格</td>
<td>第二个单元格</td>
</tr>
</table>
<p>无须列表</p>
<ul>
<li>这是一个列表</li>
<li>这还是一个列表</li>
</ul>
<p>有序列表</p>
<ol>
<li>有序列表</li>
<li>有序列表2</li>
</ol>
<p>自定义列表</p>
<dl>
<dt>啊啊啊</dt>
<dd>= 但</dd>
<dt>啊啊啊2</dt>
<dd>= 但2</dd>
</dl>
<p>块元素</p>
<div>这是一个块元素的div</div>
<span>span没有特殊的定义，可以根据css来设置样式，</span>
<p>使用div来布局</p>
<div id="container" style="width: 500px">
<div id="header" style="background-color: #FFA500;">
<h1 style="margin-bottom: 0;text-align: center;">主要的网页标题</h1>
</div>
<div id="menu" style="background-color: #FFD700;height: 200px;width: 100px;float: left;">
<b>菜单</b><br />
HTML<br />
CSS <br />
JavaScript<br />
</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;">
版权 @ www.warhut.cn
</div>
</div>
<p>html表单</p>
<div id="from">
<form name="get" action="https://www.warhut.cn/" method="get">
<input type="text" name="id" /><br />
<input type="password" name="pwd" /><br />
<input type="radio" name="sex" />男人<br />
<input type="radio" name="sex" />女人<br />
<input type="checkbox" name="vehicle" />选择<br />
<input type="submit" value="Submit">
</form>
</div>
<p>简单的下拉列表</p>
<form action="">
<select name="cras">
<option value="1">产品1</option>
<option value="1">产品2</option>
<option value="3" selected>产品3</option>
<option value="1">产品4</option>
</select>
</form>
<p>带边框的表单</p>
<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>
<p>带文字的表单</p>
<form action="https://www.warhut.cn">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>
<p>带有复选框的表单</p>
<form action="https://www.warhut.cn" method="get">
<input type="checkbox" name="vehicle[]" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle[]" value="Car" checked="checked"> I have a car<br>
<input type="submit" value="提交">
</form>
<p>带单选框的表单</p>
<form action="https://www.warhut.cn" method="get">
<input type="radio" name="sex" value="Male"> Male<br>
<input type="radio" name="sex" value="Female" checked="checked"> Female<br>
<input type="submit" value="提交">
</form>
<h3>发送邮件到 [email protected]:</h3>
<form action="mailto:[email protected]" method="post" enctype="text/plain">
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="重置">
</form>
</body>
</html>
最后修改：2021 年 04 月 10 日
© 允许规范转载
赞赏作者
感谢看完，可以点个赞~请作者喝杯咖啡~ヾ(◍°∇°◍)ﾉﾞ❤
2 条评论
支持。୧(๑•̀⌄•́๑)૭
嘻嘻