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>

前端之html基础演示的更多相关文章

  1. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  2. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  3. 第三篇:web之前端之JavaScript基础

    前端之JavaScript基础   前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript ...

  4. 好程序员web前端分享HTML基础篇

    好程序员web前端分享HTML基础篇,最近遇到很多新手,都会问,如果要学web前端开发,需要学什么?难不难学啊?多久能入门之类的问题?那么今天好程序员就先来给大家分享一下web前端学习路线:HTML基 ...

  5. 老师的blog整理 .网络编程部分 .网络编程部分 前端部分 django基础部分

    老师的blog整理 .网络编程部分 .网络编程部分 前端部分 django基础部分   老师的blog整理 python基础部分: 宝哥blog: https://www.cnblogs.com/gu ...

  6. 前端05 /js基础

    前端05 /js基础 昨日内容回顾 css选择器的优先级 行内(1000) > id(100) > 类(10) > 标签(1) > 继承(0) 颜色 rgb(255,255,2 ...

  7. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  8. 前端见微知著JavaScript基础篇:你所不知道的apply, call 和 bind

    在我的职业生涯中,很早就已经开始使用JavaScript进行项目开发了.但是一直都是把重心放在了后端开发方面,前端方面鲜有涉及.所以造成的一个现象就是:目前的前端知识水平,应付一般的项目已然是足够的, ...

  9. 初学者入门web前端:C#基础知识:函数

    入行前端对函数的掌握程度有可能直接影响以后工作的效率,使用函数可以高效的编写编码,节省时间,所以我整理了C#中最基础的函数知识点,虽然我在学习中 遇到很多问题,但是只要能够解决这些问题,都是好的. 一 ...

随机推荐

  1. 如何为应用选择最佳的FPGA(下)

    如何为应用选择最佳的FPGA(下) How to select an FPGA board? FPGA板的选择在很大程度上受FPGA本身的影响,也受整个板的特性和性能的影响.们已经在上面的章节中讨论了 ...

  2. MySQL泛泛而谈(3W字)

    下面对于MySQL进行相关介绍,文档的内容较为基础,仅仅设计操作,少量原理,大佬请绕道哦. 废话少说,开冲! 一.MySQL架构介绍 1-MySQL简介 概述 MySQL是一个关系型数据库管理系统,由 ...

  3. 牛客网论坛最具争议的Java面试成神笔记,牛客网下载量已突破十万

    程序员内部一直流传这一句话: 面试看牛客 刷题看力扣 牛客网作为国内最牛的程序员面试网站,一直在程序员内部颇负盛名,其中用户更是卧虎藏龙! 有国内一线大厂的企业招聘 还有一些低调的互联网大牛实力就和天 ...

  4. 停车场事故频频,AI 达人将摄像头变身安全卫士

    2021 年 2 月,"新内容 新交互" 全球视频云创新挑战赛启幕.本次大赛由英特尔联合阿里云主办,与优酷战略技术合作,天池平台和阿里云视频云团队共同承办.大赛自开赛以来,吸引了全 ...

  5. 6.11考试总结(NOIP模拟7)

    背景 时间分配与得分成反比,T1 20min 73pts,T2 1h 30pts,T3 2h 15pts(没有更新tot值,本来应该是40pts的,算是本次考试中最遗憾的地方了吧),改起来就是T3比较 ...

  6. kerberos认证协议爱情故事

    0x01.kerberos简介 kerberos是一种域内认证协议,Kerberos的标志是三头狗,狗头分别代表以下角色: Client Server KDC(Key Distribution Cen ...

  7. DDoS攻击的工具介绍

    1.低轨道离子加农炮(LOIC) 1.1 什么是低轨道离子加农炮(LOIC)? 低轨道离子加农炮是通常用于发起DoS和DDoS攻击的工具.它最初是由Praetox Technology作为网络压力测试 ...

  8. 关于tinymce的一些记事

    之前能看的懂一部分英文,但是总是没有全局观,以至于我之前使用tinymce一直都有一些疑问:那就是为什么我在tinymce初始化中添加了比如字体,字体大小等设置按钮,但是为什么在前 台没有办法现实出来 ...

  9. PostgreSQL角色问题

    角色 PostgreSQL使用角色的概念管理数据库访问权限. 根据角色自身的设置不同,一个角色可以看做是一个数据库用户,或者一组数据库用户. 角色可以拥有数据库对象(比如表)以及可以把这些对象上的权限 ...

  10. SpringCloud:路由ZUUL的配置详解

    以下是两种配置文件的配置方式,可以根据需要选取对自己项目有利的配置. 自定义访问路径(path) 配置application.yml文件 #provider-user:是你的微服务模块的名称,及spr ...