zoukankan      html  css  js  c++  java
  • 前端之html基础演示

    1、本地服务:下载淘宝镜像node.js :https://npm.taobao.org/mirrors/npm ;本次下载的版本是 v10.0.0
    2、下载成功后,到cmd窗口输入 node -v,返回时版本号,npm -v 返回的是版本号
    3、本地安装http-server;
    4、npm install -g http-server ;其中-g 是表示全局安装
    5、cmd窗口输入 http-server即可
     
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="SEO搜索引擎优化,关键词,关键字">
        <meta name="description" content="搜索引擎描述信息;">
        <title>HTML练习演示</title>
    </head>
    <body>
        <h2>无序列表</h2>
        <ul type=circle>
            <li>Huawei</li>
            <li>Oppo</li>
            <li>小米</li>
            <li>苹果</li>
            <li>默认:实芯圆点 disc</li>
            <li>square:方形圆点</li>
            <li>circle:空芯圆点</li>
        </ul> 
        <h2>有序列表</h2>
        <ol type="I">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        <h2>自定义列表</h2>
        <dl>
            <dt>手机品牌</dt>
            <dd>华为手机</dd>
            <dd>荣耀手机</dd>
            <dd>小米手机</dd>
            <dd>Oppo手机</dd>
            <dd>Vivo手机</dd>
            <dd>苹果手机</dd>
        </dl>
        <h2>图片标签</h2>
        <p>
            <a href="javascript:void(0)"><img src="/MM.jpg" alt="甜美清纯可爱美女照片"></a>
        </p>
        <p>
            <a href="https://www.tupianzj.com/meinv/20200519/210719.html"><img src="" alt="甜美清纯可爱美女照片"></a>
        </p>
        <img src="/MM.jpg" alt="甜美清纯可爱美女照片" title="美女照片">
        <h2>表格标签</h2>
        <table border='1'>
            <tr>
                <td>姓名</td>
                <td>体重</td>
                <td>身高</td>
            </tr>
            <tr>
                <td>Teacher</td>
                <td colspan="2">60kg/170</td>
            </tr>
            <tr>
                <td>Tea</td>
                <td rowspan="2">69kg</td>
                <td>175</td>
            </tr>
            <tr>
                <td>iris</td>
                <td>80kg</td>
            </tr>
        </table>
        <h2>表单标签</h2>
        <form action="#" method="get"> <!--默认get请求,这块使用的是POST请求-->
            <label for="user">账号:</label><br>
            <input id="user" type="text" name="user" maxlength="10" placeholder="请输入账号"><br><br>
            <label for="pwd">密码:</label><br>
            <input id="pwd" type="password" name="pwd" placeholder="请输入密码"><br><br>
            性别:
                <!-- rodio表示单选按钮,如同时互斥的话需配置相同的name
                    其中checked表示默认选择
                    label标签:点击某文本也可联动选择某复选框,其中for里面的值一定要是id中的值
                 -->
                <input id="man" type="radio" name="gender" value="man" checked><label for="man">男</label>
                <input id="women" type="radio" name="gender" value="women"><label for="women">女</label><br><br>
            爱好:
                <input id="badminton" type="checkbox" name="badminton"><label for="badminton">羽毛球</label>
                <input id="basketball" type="checkbox" name="basketball"><label for="basketball">篮球</label>
                <input id="football" type="checkbox" name="football" checked><label for="football">足球</label>
                <input id="billiards" type="checkbox" name="billiards" checked><label for="billiards">台球</label>
                <input id="Glof" type="checkbox" name="Golf"><label for="Glof">高尔夫球</label><br><br>
            生日:
                <select name="" id="" size="3">
                    <option value="1990">1990</option>
                    <option value="1991">1991</option>
                    <option value="1992">1992</option>
                    <option value="1993">1993</option>
                    <!-- selected:使用的是默认下拉选择框 -->
                    <option selected value="1994">1994</option>
                    <option value="1995">1995</option>
                    <option value="1996">1996</option>
                    <option value="1997">1997</option>
                    <option value="1998">1998</option>
                    <option value="1999">1999</option>
                    <option value="2000">2000</option>
                </select><br><br>
            <select name="year" id="sel_year">
                <option value="---">请选择</option>
                <option value="2001">2001</option>
                <option value="2002">2002</option>
                <option value="2003">2003</option>
                <option value="2004">2004</option>
                <option value="2005">2005</option>
                <option value="2006">2006</option>
                <option value="2007">2007</option>
                <option value="2008">2008</option>
                <option value="2009">2009</option>
                <option value="2010">2010</option>
            </select>
            <b><font>年</font></b>
            <select name="month" id="sel_month">
                <option value="">请选择</option>
                <option value="01">01</option>
                <option value="02">02</option>
                <option value="03">03</option>
                <option value="04">04</option>
                <option value="05">05</option>
                <option value="06">06</option>
                <option value="07">07</option>
                <option value="08">08</option>
                <option value="09">09</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
            </select>
            <b><font>月</font></b>
            <select name="day" id="sel_day">
                <option value="---">请选择</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
            <b><font>日</font><br><br></b>
            <!-- 此块是使用提交按钮,不会跳转到w3school链接界面,因为是在form表单里面     -->
        <!-- 表单提交: -->
            <a href="https://www.w3school.com.cn/"><input type="submit" value="提交按钮"></a>
        <!-- 表单重置: -->
            <input type="reset" value="重置按钮">
        </form>
    </body>
    </html>
  • 相关阅读:
    ajax封装
    完美运动框架
    表单上传input=file
    面向对象入门
    浅谈javaScript内存
    关于使用iframe的父子页面进行简单的相互传值
    浅谈原生JavaScript的动画和特效
    rem 原理与简介
    移动 web 适配
    jsonp 简单封装
  • 原文地址:https://www.cnblogs.com/Teachertao/p/14287567.html
Copyright © 2011-2022 走看看