网站建设学习（四）——HTML表单标签及转义字符

最新推荐文章于 2023-02-04 09:34:03 发布

QJM1995

最新推荐文章于 2023-02-04 09:34:03 发布

阅读量485

点赞数

文章标签： html 表单转义字符网站

本文链接：https://blog.csdn.net/QJM1995/article/details/86391304

版权

上一篇介绍了各类资源的嵌入问题，这一篇主要介绍表单标签，表单将用户的输入传送到后台，实现网站与用户的交互，作为数据传递表单作用十分巨大，同时本篇介绍了转义字符，因为其数量庞大，因此详细转义字符表在文章末以链接形式展现。

<!--html： hyper text markup language 超文本标记语言

    超级文本：可以对文本进行设计，布局，装饰等等操作
    标记：标签的各种布局，可以进行文本设计，标签包括开始与结束
-->


<!--开始设计一个HTML页面-->

<html>
<!--  标签html：内部包含整个HTML页面，所有的设计均在当前的html标签内部进行-->
    <head>
    <!--整个文件的头部，里面包括一些属性供浏览器识别解析，对用户不可见-->

        <title>标题</title>
        <!--标签title，说明整个页面的标题，最终显示在浏览器加载页面的标签页-->

        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <!--告诉浏览器以utf-8的码表进行解码，防止中文乱码，meta标签是无标签体标签，结束在开始标签后加反斜杠，即空标签-->

        <meta name="keywords" content="html,展示"/>
        <!--展示此网页的关键词，供搜索引擎使用，以“,”分开，其中关键词个数为权重，越多权重越低，一般为3到5个-->

        <meta name="description" content="html编程学习"/>
        <!--网页描述，展示在搜索引擎的网页的索引页面-->
    </head>


    <body>
    <!--整个文件的体，设计元素在这个部分中，最终展示给用户-->

    <!--表单标签主要用于采集用户输入的数据，并提交给后台程序处理，作为前端后台的过渡其作用极其重要-->
        <form action="http://localhost:8080/文件" method="POST">
            <fieldset>
                <legend>提交信息</legend>
                <!--fieldset表单的边框，legend标签显示边框的名称-->
                单行输入：<input type="text" value="默认文本" name="username" size="30"/>
                <!--单行输入文本框，value为文本框内的默认文本，name作为输入文本的参数，最终会传到后台,size表示输入的字数限制--><br/>
                输入密码：<input type="password" name="userPwd"/>
                <!--非明文的文本输入，name作为输入文本的参数，最终会传到后台--><br/>
                性别：<input type="radio" name="gender" value="男"/>男
                    <input type="radio" name="gender" value="女"/>女
                <!--单项选择，name属性使其分配到一个组中实现单选，value值会传送给后台--><br/>
                民族：<input type="checkbox" name="nation" value="汉族"/>汉族
                    <input type="checkbox" name="nation" value="满族"/>满族
                    <input type="checkbox" name="nation" value="蒙古族"/>蒙古族
                <!--多项选择，name属性使其分配到一个组中，value值会一起传送给后台--><br/>
                籍贯：<select name="earth">
                        <option value="北京">北京</option>
                        <option value="上海">上海</option>
                        <option value="广州">广州</option>
                    </select>
                <!--下拉框选择，name属性使其分配到一个组中，value值会传送给后台--><br/>
                籍贯：<input list="earth_one"/>
                    <datalist id="earth_one">
                        <option value="北京">北京</option>
                        <option value="上海">上海</option>
                        <option value="广州">广州</option>
                    </datalist>
                <!--下拉列表，id属性使其分配到一个组中，value值会传送给后台--><br/>
                籍贯：<select name="earth_two">
                    <optgroup label="直辖市">
                        <option value="北京">北京</option>
                        <option value="上海">上海</option>
                    </optgroup>
                    <optgroup label="自治区">
                        <option value="内蒙古">内蒙古</option>
                        <option value="宁夏">宁夏</option>
                    </optgroup>
                <!--成组下拉框选择，name属性使其分配到一个组中，value值会传送给后台--><br/>
                </select>
                <input type="hidden" name="input_id" value="123"/>
                <!--隐藏域，不显示在页面上但依旧会向后台传送value值--><br/>
                多行输入：<textarea rows="10" cols="15" name="text_all"></textarea>
                <!--多行文本输入，rows表示可输入的行数，cols表示可输入的列数,name作为变量会将值传送给后台--><br/>
                <input type="submit" value="登录"/>
                <!--提交按钮，点击后form中的全部数据将会传送到后台，value为其默认显示值-->
                <input type="button" name="YES" value="yes"/>
                <!--普通按钮，以name为变量传递value的值到后台-->
                <input type="reset"/>
                <!--重置按钮，点击后表单所有的数据将会重置为初始状态-->
            </fieldset>
        </form>
        <!--action是提交的地址，即数据提交到的后台，method是提交的方法，分为post以及get等-->
        <!--post不会将数据显示到地址栏同时文件上传没有限制，get显示同时文件限制到1kb-->
        
    <!--转义字符，某些字符作为HTML语言的符号的专用不能直接输入显示，需通过转义才可以正常显示-->
        空格&nbsp;&nbsp;&nbsp;空格&nbsp;&nbsp;&nbsp;空格<br>
        <p>常见字符请参见博客末的链接</p>
    </body>

</html>

网页编程规范参考链接：w3school 在线教程

转义字符对照参考链接：HTML 转义字符

这其中有不合适或者不正确的地方欢迎指正，我的QQ号码：2867221444（乔金明），谢谢，也可以相互交流下，备注信息随意，只要能看得出是开发者或者学习者即可。