网络安全-学习web开发-列表、标签

html 复制代码

<body>
     <form action="">
        <p>
           用户名：<input type="text">
           </p>
          </form>
     </body>

得到的效果就是这样

解释一下

form是容器的意思，相当于输入框的容器，你可以理解为输入法

然后p换行嘛

然后到了input，输入的意思，type则是类型的意思，text则是内容

但是这里他会给你自带一个框框

通过type类型的变动，可以扩展很多功能

重要属性

value：这个是用户输入的值，也可以用来设置输入框默认显示的内容。属性值由你自己定义，比如你写了一个 abc，打开网页什么都不做，输入框里就会显示 abc。它最大的用处是在提交表单时，把用户填的内容真正发送给服务器------没有 value 的输入框，用户输入的内容同样会被提交，但 value 可以帮我们预设一个初始值，或者在按钮上显示文字。

placeholder：它的作用相当于一个提示词，告诉用户这里该填什么，一旦开始输入提示文字就消失了。属性值同样是自定义内容，常见于「请输入密码」「请输入手机号」这类引导文案。需要注意的是，placeholder 只是提示，不会被当作真正的值提交，所以不能拿它代替 value。

两者的区别可以简单记成一句话：value 是「框里真正的内容」，placeholder 是「框里的灰色提示」。下面这张图就是 placeholder 的效果示意，应该很好理解。

html 复制代码

<body>
     <form action="">
        <p>
           密码：<input type="password" placeholder="请输入密码">
           </p>
          </form>
     </body>

这里就是用了 type 的类型去改变输入框的作用了：把 type 从 text 换成 password，输入的内容就会被替换成一个个小圆点，旁边的人看不到你输的是什么。

它就会变成上面这样了。可以看到输入框里显示的是圆点而不是明文，同时 placeholder 的提示文字依然正常显示，说明这两个属性是可以搭配使用的。

腾讯的做法

如果这个时候你把 password 改成 text，你就可以看到明文，密文无法复制，明文可以。这也说明前端做的「隐藏」只是视觉上的遮挡，真正的安全性要靠后端加密和 HTTPS 传输来保证，不能只依赖 type=password。

单选框-radio

让你做单选的东西。单选框的特点是：一组选项里同一时间只能选中一个，选中新的，旧的会自动取消。

html 复制代码

<body>
    <form action="">
       <p>
         性别：
         <input type="radio" name='sex'>男
         <input type="radio" name='sex'>女
         <input type="radio" name='sex'>保密
       </p>
         </form>
    </body>

多选框-checkbox

html 复制代码

<body>
     <form action="">
        <p>
          爱好：
          <input type="checkbox">运动
          <input type="checkbox">绘画
          <input type="checkbox">音乐
          <input type="checkbox">阅读
          <input type="checkbox">其他
        </p>
          </form>
     </body>

textarea-文本区域

他是一个双标签，一个文本级别签

属性值呢分别是下面的

placeholder：占位符

cols是列数

rows是行数

html 复制代码

<body>
    <form action="">
       <p>
     自我介绍：
     <textarea row="3" cols="10" pleacholder="请输入自我介绍"></textarea>
       </p>
         </form>
    </body>

其实到了这里可以发现，他很多都是需要结尾包含在里面的

比如<代码></代码>里面是内容去包在里面就像开始结束那样

然后前面说过的P是分段，placeholder是提示词，都可以用

然后可以发现，右下角是有个可以拉扯的，这是自带的

如果不想要这个允许用户随意拉扯的框，那么则加上style去取消

html 复制代码

<textarea rows"4" cols="50" style="resize:none"></textarea>

这样通过style去实现即可

下拉选择菜单

需要同事用到select和option

select是选择的意思，理解为外面的框

option是选项的意思，理解为你给多少个选项

html 复制代码

<body>
       <p>
       籍贯：
         <select>
            <option>北京</option>
              <option>上海</option>
                <option>广州</option>
                  <option>深圳</option>
         </select>
       </p>
         </form>
    </body>

注释

html 复制代码

如果有学过linux就知道注释是在配置文件里面#
但是在html里面则是
<!-- 内容 -->
这样才是注释，也可以作为备注为了后续代码的维护者提供的支持
注释是不会出现在浏览器的

这个是在vscode里面的示意图

div和span

div用于分割跨度大跨度，用于布局切割的多

span用于小区域小跨度，用于文字的多

就看怎么用了