前端新手一周学习心得：HTML基础与表单构建-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_63339311/article/details/121056839

前端第一周学习感悟

学习总结
- 重要知识点
- - 我的网页

学习总结

本周通过观段落看html实例和视频，我学习到了标题，段落，表单，表格，列表，链接等的写法。并对html有了初步的了解。在制作网页的过程中，我收获了很多，相信在以后的学习中我可以让自己的技术进一步提高。

重要知识点

form:HTML中表单可以用来搜集用户各种类型的输入信息。表单实际上是包含表单元素的区域，在这个区域中的各种元素的输入信息最终都将通过表单提交到程序脚本中。例如常见的有用户登录、注册、发布文章等等，都是通过表单提交到动态程序进行处理的。本节主要讲述表单和表单的元素，关于如何提交表单信息到动态程序，将在以后的程序语言课中再来讲述。表单的区域是使用<form>标签定义表单的范围，在<form></form>中的元素的值会被通过这个表单提交到对应的地址中。输入信息一般表单内多以使用<input>标签收集用户的输入信息，其输入类型是由type决定的。多数情况下被用到的表单标签是输入标签（<input>）

  form：标签属性
  action:请求路径。
  method:请求方式。
  get:默认值

提交的数据追加在请求路径上。数据格式k/v,追加是使用?连接之后每一对数据使用&连接。
因为请求路径长度有限，所有GET请求提交的数据有限。
post:在这里插入代码片`

提交的数据不再请求路径上追加(及在这里插入代码片不显示在地址栏上)
提交的数据大小不显示。
input标签属性:
input标签用于获得用户输入信息,type属性值不同,搜集方式不同。最常使用的标签。

type属性中的取值：

-text:文本框,单行的输入字段,用户可在其中输入文本,默认宽度为20个字符。

html

       radio:单选框。单选框要加上属性name表示是一个组的，属性中的值要一样，这样才会是单选框的效果。如果想自动选中加上属性checked。

       submit:提交按钮。提交表单，提交到action指定的路径。

       checkbox复选框。

       file:文件上传组件,提供"浏览"按下可以选择需要上传的文件。

       hidden：隐藏字段。数据还会发送给服务器，但浏览器不进行显示。

       reset:重置按钮。将表单恢复到默认值。

       image :图形提交按钮,常用于与JavaScript结合使用。

       name属性：
       
              如果需要表单数据提交到服务器，必须提供name属性值，服务器通过属性值获得提交数据。
              
       value属性:
                  设置input标签的默认值。submit和reset为按钮显示数据
                  
        size属性:大小。

        checked属性:单选框和复选框自动选中。

        readonly属性:是否只读。

        disabled属性:是否可用。

        maxlength:允许输入的最大长度。

       下拉标签select

       name属性:发送给服务器的名称。

       multple属性:不写默认单选,取值'multple'表示多选。

       size属性：多选时，可见选项的数目。
       
       select标签子标签option标签：

       selected:自动勾选当前列表。

       value：发送给服务器的取值。

       文本域标签textarea

       clos属性:文本域的列数。

       rows:文本域的行数

   按钮标签button

        <button type="button|reset|submit">按钮标签一般很少使用,提供"普通|重置|提交"功能,不同的浏览器默认值也不同。

注意

    复选框、单选框以及下拉框,其中的属性name不是提交到后台
的键值,属性name的作用是分组,表示是一个组的, 提交的键值是
value属性。其他的name属性则是提交到后台的键值。
value 属性为 input 元素设定值。
对于不同的输入类型，value 属性的用法也不同：
type=”button”, “reset”, “submit” - 定义按钮上的显示的文本
type=”text”, “password”, “hidden” - 定义输入字段的初始值
type=”checkbox”, “radio”, “image” - 定义与输入相关联的值
注释： 和 中必须设置 value 属性。
注释：value 属性无法与 一同使用。

语法

name是控件的名称（多个控件可以取同一个名称），value是控件的值；
并不是所有控件的value都会显示出来，比如 checkbox, radio, hidden；
定义控件的 name和value 就可以在服务器上获取这个控件和它的值；
没看到 submit 的name，并不表示浏览器忽略了它的 name，在提交之前它也被浏览器定义了 name，在服务器上一样可以得到它的 name 和 value；
控件不定义name/value也可以显示，只是为了方便在服务器接收和区别，才定义它的 name/value，当然按钮的 value 不光是存放它的值，也用来显示。

我的网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    html
    <title>恋爱问答</title>
</head>
<body>  
    <h6>青春不常在，抓紧谈恋爱</h6> 


 <table width="700">
     <!-- 第一行 -->
   

```html
 <tr>           <td>性别: </td>
    
        <td><input type="radio" name="sex" id="nan"> <label for="nan">男</label> 
            <input type="radio" name="sex" id="nv">  <label for="nv">女</label>
        </td>
    </tr>

 
    <tr>
       <td>生日:</td>
       <td>
         <select>
             <option>--请选择年份--</option>
             <option>2002</option>
             <option>2003</option>
         </select>
     <select>
         <option>--请选择月份--</option>
         <option>1</option>
         <option>2</option>
     </select>
     <select>
         <option>--请选择日份</option>
         <option>6</option>
         <option>9</option>
     </select>    
      </td>
      </tr>
     <!-- 第三行 -->
     <tr>
          <td>所在地区</td> 
         <td><input type="text" value="河南安阳"></td>
     </tr>
     <!-- 第四行 -->
     <tr>
         <td>婚姻状况:</td>
         <td>
             <input type="radio" name="marry"> 未婚 <input type="radio" name="marry"> 已婚 <input type="radio" name="marry"> 离婚
         </td>
     </tr>
     <!-- 第五行 -->
     <tr>
         <td>学历:</td>
         <td><input type="text"></td>
     </tr>
     <!-- 第六行 -->
     <tr>
         <td>喜欢的类型：</td>
         <td>
           <input type="checkbox" name="love" > 妩媚的
           <input type="checkbox" name="love" > 可爱的
           <input type="checkbox" name="love" > 小鲜肉
           <input type="checkbox" name="love" > 老腊肉
           <input type="checkbox" name="love" > 都喜欢
         </td>
     </tr>
     <!-- 第七行 -->
     <tr>
         <td>自我介绍</td>
         <td>
             <textarea ></textarea>
         </td>
     </tr>
     <!-- 第八行 -->
     <tr>
         <td></td>
         <td>
             <input type="submit" value="免费注册">
         </td>
     </tr>
     <!-- 第九行 -->
     <tr>
         <td></td>
         <td>
             <input type="checkbox" checked="checked"> 我同意注册条款和会员加入标准
         </td>    
     </tr>
     <!-- 第十行 -->
     <tr>
         <td></td>
         <td>
             <a href="#">我是会员，立即登录</a>
         </td>
     </tr>
     <!-- 第十一行 -->
     <tr>
         <td></td>
         <td>
             <h5>我承诺</h5>
             <ul>
                 <li>年满18岁,单身</li>
                 <li>抱着严肃的态度</li>
                 <li>真诚寻找另一半</li>
             </ul>
         </td>
     </tr>
    </table>
</body>
</html>