0基础学html-1

表单标签

作用：收集用户信息，提交数据给服务器

<form action="1.html" method="get" enctype="">
账号：<input type="text" name="username"><br>
密码：<input type="password" name="pwd"><br>
性别：男<input type="radio" name="sex" value="男">
女<input type="radio" name="sex" value="女">
保密<input type="radio" name="sex" value="保密"><br>
爱好：英雄联盟<input type="checkbox" name="hobby[]" value="英雄联盟">
王者荣耀<input type="checkbox" name="hobby[]" value="王者荣耀">
魔兽世界<input type="checkbox" name="hobby[]" value="魔兽世界"><br>
上传图片<input type="file" name="pic"><br>
隐藏框<input type="hidden" name="hidden" value="123">
提交框<input type="submit">
重置框<input type="reset">
普通框<input type="button" value="登录">
</form>

< form>主要属性：

• action：传参的对象
• method：传参的方式 (get/post)
• enctype：设定上传文件MIME格式

< input>主要属性：

• type：设定标签的样式类型
• text：文本框
• password：密码框
• redio：单选框（单选框必须与标签name属性配合使用）
• checkbox：多选框 file：上传文件选项框
• hidden：隐藏框
• submit：提交按钮
• reset：重置按钮
• button：普通按钮
• tel：电脑端无效果，手机端会自动显示数字键盘
• name：设定标签名称，传参时有特定属性
• value：设定标签的初始值
• minlength：设定输入内容的最小字符长度
• maxlength：设定输入内容的最大字符长度 placeholder：占位符（灰色文字，多用于输入内容提示作用）
• checked：默认选中，布尔值
• readonly：只读，无法修改内容，可以传参，布尔值
• disabled：禁用，无法修改内容，不能传参，布尔值
• required：禁止内容为空，布尔值
• auto_complete：自动保存数据信息，同一个浏览器，同键名默认会有提示实际项目中，需要关闭此功能，防止数据泄露 autocomplete=“off”
• autofocus：光标默认焦点，布尔值

传参必须要有name属性值，单选，多选，隐藏框必须要有value属性值，value对file属性不起作用，如果多个标签传递参数，但是标签name属性的属性值都相同，必须给name属性添加[]，方括号，常见checkbox以及file

label标签

<form>
<!-- 第一种用法 -->
<label>
<input type="checkbox">吃
</label>
<!-- 第二种用法 -->
<input type="checkbox" id="c2">
<label for="c2">
吃
</label>
</form>

• 语法形式1： 将标签与文字都作为标签的内容
• 语法形式2： 将文字作为标签的内容，给标签添加for属性，属性值为关联input标签的id属性值

两种方法区别：
< label>标签，嵌套的内容不同，后期css或者JavaScript执行对象不同

<textarea>文本域
<form action="01.html" method="get">
<textarea name="liuyan" style="resize:none;width:200px;height:100px;">北京</textarea>
</form>

可以换行的文本框
可以通过css样式设置文本域的大小，如果超出范围，显示为滚动条
传参不支持value属性，传递的参数为标签的内容
文本域中所有的输入内容都会作为传参数据，包括源码中的空格，回车等符号也会作为参数
文本域通过右下角可以拖拽改变文本大小，实际项目中，需要通过css样式关闭

style="resize:none;width:200px;height:100px;"

<form action="01.html" method="get">
<input type="text" name="un"><br>
<input type="submint" value="input按钮"><br>
<button>button按<br>钮1</button>
<button type="reset">button按钮2</button2>
<button type="button">button按钮2</button2>
</form>

< button>可以通过设定type属性的不同属性值，实现按钮效果

• type：submit 提交按钮
• reset 重置按钮
• button 普通按钮

< button>标签与< input>标签的优点
显示文字为标签的内容，可以更方便设定各种样式
button按钮功能更加强大
与JavaScript配合更加方便
实际项目中推荐使用button

<form action="01.html" method="get">
    <select name="city">
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
        <option value="3">重庆</option>
        <option value="4">天津</option>
       </select>
  </form>

< select>标签需要与< option>标签配合使用
传参的键名定义在< select>标签中的name属性值
实际项目中，< option>标签需要添加value属性，属性值为从0开始的整数，
作为< option>标签传递的参数，为了数据库的安全性
< select>属性：
size：设定下拉列表框显示数据数量，显示方式从下拉列表变为滚动条
multiple：多选属性，布尔属性
< option>属性：
selected：默认选中，布尔值

下拉列表标签分组

<form action="01.html" method="get">
    <select name="city">
        <optgroup label="城市">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">重庆</option>
            <option value="4">天津</option>
         <optgroup>
         <optgroup label="城市2">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">重庆</option>
            <option value="4">天津</option>
         <optgroup>
       </select>
  </form>

< optgroup>包裹需要分组的< option>标签
< optgroup>标签可以添加label属性，设定分组名称

有序列表

<ol>
    <li>有序列表一</li>
    <li>有序列表二</li>
    <li>有序列表三</li>
    <li>有序列表四</li>
</ol>

< ol>标签必须和< li>标签配合使用
< li>标签必须被< ol>标签嵌套
所有的内容都必须写在一个或多个< li>标签中
属性：

• type:设定样式标记
  • 1，阿拉伯数字样式
  • a，小写英文字母样式
  • A，大写英文字母样式
  • i，小写罗马数字样式
  • I，大写罗马数字样式
• start:标记起始值设定
  • 1，只接受整数形式的内容
  • 2，浮点数只接受整数部分
  • 3，可以是负数
• reversed:倒序显示
  • 布尔属性，不写属性值 IE浏览器不支持此属性

无序列表

<ul>
    <li>无序列表一</li>
    <li>无序列表二</li>
    <li>无序列表三</li>
    <li>无序列表四</li>
</ul>

< ul>标签必须和< li>标签配合使用
< li>标签必须被< ul>标签嵌套
所有的内容都必须写在一个或多个< li>标签中
属性：
type:设定样式标记

• disc，实心圆
• circle，空心圆
• square，实心方块

自定义列表

<dl>
    <dt>北京</dt>
    <dd>上海</dd>
</dl>

< dl>标签需配合< dt>标签或者< dd>标签使用
< dd>标签比< dl>标签缩进显示