demo.html-CSDN博客

本文链接：https://blog.csdn.net/a61291/article/details/113695661

<!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') -->
    <!-- &nbsp; 空格 -->
    <!-- &copy; 版权C -->
    <!-- &reg; 商标R -->
    <!-- &trade; 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>