<!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 日

❤感谢耐心看完,觉得文章不错的话,可以点个赞~或者请作者喝杯咖啡~ヾ(◍°∇°◍)ノ゙❤