前端学习一（html）

工具选择，虽然同事的测开教程用的工具是Hbuilder，但是网上看到的目前比较受欢迎的是vscode

参考菜鸟html5教程：https://www.runoob.com/html/html-tutorial.html

一、安装vscode

下载地址：

安装过程：https://www.cnblogs.com/csji/p/13558221.html

家里安装的vscode，公司安装的Hbuilder，感觉都可以

二、常用标签

<!DOCTYPE html>
<html>
    <!-- 页面的头部信息 -->
    <head>
        <meta charset="utf-8">
        <title>我的第一个html页面</title>
    </head>
    <!-- 页面的主体内容 -->
    <body>
        <!-- 标题标签h1到h6 -->
        <h3>标题标签</h3>
        <!-- 段落标签p -->
        <p>这是一个段落</p>
        <!-- 分割线hr -->
        <hr />
        <p>2020年10月7日至10月26日期间，刘某某来到重庆市北碚区某菜市场，多次盗走被害人翁某某在此经营的摊位上的蔬菜。
            <!-- 换行 -->
            <br>
            2020年10月7日至10月26日期间，刘某某来到重庆市北碚区某菜市场，多次盗走被害人翁某某在此经营的摊位上的蔬菜。
        </p>

        <!-- 块标签 -->
        <div style="width: 200px;height: 200px;background: cadetblue;">div001</div>
        <div style="width: 200px;height: 200px;background-color: azure;">div002</div>
        <!-- span行内块，不会自动换行 -->
        <h3>一二<span style="background-color: blue;">三四</span>五</h3>
        <span>span002</span>
        <span>span003</span>


        <a href="https://www.baidu.com">百度</a>
        <br>
        <a href="https://www.baidu.com">
            <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="加载失败时的名字" width="100"
                height="100">
        </a>
        <!-- 无序列表 -->
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
        <!-- 有序列表 -->
        <ol>
            <li>1</li>
            <li>2</li>
        </ol>
        <!-- 表格 
        tr 表格行
        th 表头列
        td 内容列--> 
        <table border="0" cellspacing="" cellpadding="">
            <tr>
                <th>name</th>
                <th>python</th>
                <th>java</th>
            </tr>
            <tr>
                <td>小明</td>
                <td>精通</td>
                <td>熟悉</td>
            </tr>
            <tr>
                <td>小丽</td>
                <td>精通</td>
                <td>精通</td>
            </tr>
        </table>
        <!-- iframe元素会包含另一个文档的内联框架 -->
        <iframe src="https://www.baidu.com" width="500" height="600"></iframe>
        <iframe src="https://www.taobao.com" width="500" height="600"></iframe>
        <!-- audio 音频
        video 视频-->
        <audio controls="controls"></audio>
        <video width="800" height="240" controls="controls"></video>

    </body>
</html>

三、表单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html表单</title>
    </head>
    <body>
        <!-- 表单form
         action 表单提交地址
         method 表单提交的方法-->
        <!-- input
          type: text-明文  password-密码  submit-提交按钮  radio-单选  checkbox-复选  file-文件
          name：指定该数据传递的参数名，每一组radio和checkbox的name需要一样-->
        <form action="" method="get">
            <!-- lable 点击会触发被绑定的控件
             for 填入被绑定控件的id-->
            <label for="lable">账号：</label>
            <input type="text" name="u" id="lable" value="" />
            <br>
            密码： <input type="password" name="p" id="" value="" />
            <br>
            记住密码：<input type="radio" name="status" id="" value="1" />
            <br>
            性别：男<input type="radio" name="sex" id="" value="nan" />
            性别：女<input type="radio" name="sex" id="" value="nv" />
            <br>
            技能：
            python<input type="checkbox" name="skill" id="" value="python" />
            java<input type="checkbox" name="skill" id="" value="java" />
            <br>
            <br>
            上传头像<input type="file" name="pic" id="" value="" />
            <br>
            <br>

            <!-- 用于点击事件 -->
            <!-- <input type="button" name="" id="" value="按钮" /> -->
            <!-- <br> -->
            <!-- 重置表单 -->
            <input type="reset" name="" id="" value="重置" />
            <br>
            <!-- 隐藏表单域，不会在页面上显示，但会放到表单中传递给后端 -->
            <input type="hidden" name="token" id="" value="123456" />
            <br>
            个人介绍
            <!-- 文字段落输入框 -->
            <textarea rows="2" cols="100" name="info"></textarea>
            <br>
            <!-- 下拉框选择，级联选择需要js -->
            <select name="city">
                <option value="sh">上海</option>
                <option value="bj">北京</option>
                <option value="sz">深圳</option>
                <option value="gz">广州</option>
            </select>
            <br>
            <!-- 以图片作为按钮 -->
            <!-- <input type="image" name="" id="" value="" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"/> -->
            <input type="submit" name="" id="" value="提交" />
            <br>
        </form>
    </body>
</html>

 

posted @ 2021-10-17 22:37  whitewall  阅读(70)  评论(0)    收藏  举报