学习HTML第三天

一、表单标签（form）

• 基本结构与元素
  • form：属于块级元素，可独占一行显示，能直接设置宽度高度。
  • input：属于行内块元素，可在同一行显示，能直接设置宽度高度。
  • 常见的 input 类型包括文本输入框（type = "text"）、密码输入框（type = "password"）、数字输入框（type = "number"）、日期选择框（type = "date"）、时间选择框（type = "time"）、颜色选择框（type = "color"）、按钮（type = "button"）、提交按钮（type = "submit"）、重置按钮（type = "reset"）、单选框（type = "radio"，需和 name 属性搭配使用）、复选框（type = "checkbox"）、文件选择框（type = "file"，可添加multiple属性选择多个文件）等。例如： 

<form action="http://47.92.204.130:3000/api/admin/login" method="POST">
    <div><input type="text" placeholder="请输入账号" name="admin_email"></div>
    <div><input type="password" placeholder="请输入密码" name="admin_pwd"></div>
    <div><input type="submit" value="登录"><input type="reset" value="重置"></div>
</form>

• 表单属性

  • action：填写服务器接口地址。
  • method：填写请求方法（POST/GET）。

• 其他要点

  • 点击 form 标签中的提交按钮会刷新页面并跳转。
  • 一些属性含义：
    • checked：在单选框、复选框中表示默认勾选。
    • selected：在下拉菜单中表示默认选中。
    • disabled：表示禁止输入、禁止选择。

• 下拉菜单（select）

  • 使用option标签构建选项，disabled可禁用选项，selected可设置默认选中。例如：

<select name="province">
    <option value="0" disabled>请选择省份</option>
    <option value="1">广东省</option>
    <option value="1">浙江省</option>
    <option value="1" selected>福建省</option>
    <option value="1">湖北省</option>
</select>

• label 标签
  • label标签的for属性对应input标签的id属性，点击描述文本可使输入框获取焦点。例如：

    <label for="username">用户名:</label><input type="text" id="username">

二、文本输入域标签（textarea）

• 可以通过placeholder属性设置占位符提示信息。例如：

<textarea class="text - box" placeholder="有什么新鲜事想分享给大家？"></textarea>

三、框架标签（iframe）

基本使用

• 通过a标签的target属性和iframe标签的name属性关联，点击a标签的链接可在iframe框架中显示相应页面。例如：

  <div class="wrapper">
      <div class="left">
          <a target="container" href="./web/one.html">页面1</a>
          <a target="container" href="./web/two.html">页面2</a>
          <a target="container" href="./web/three.html">页面3</a>
      </div>
      <div class="right">
          <iframe class="ifr" name="container" src="./web/one.html" frameborder="0"></iframe>
      </div>
  </div>

• iframe 属性
  • src：填写页面地址。
  • name：作为框架名称、容器名称。

四、转义字符 / 实体字符

• 如¥、©、>、<等，在 HTML 中用于表示特殊字符。例如：

  <div class="layout">&yen; &copy; &gt; &gtcc; &lt; &ltcc;</div>

 五、补充

1、input 属性

• name：作为控件名称。
• value：定义输入框的值，如value = ""。
• placeholder：用于设置占位符。
• type：指定 input 的控件类型。
• disabled：可禁用可交互的表单控件。
• readonly：使表单只读。
• hidden：用于隐藏元素。
• checked：让控件处于默认选中状态。
• autofocus：页面刷新时自动聚焦该表单控件，一个文档中只能有一个对象使用此属性。
• autocomplete：用于表单自动填充，可设置为 on/off。
• pattern：当 input 元素 type 为 password、text、tel 时，用于匹配有效 value 的模式。
• alt：当 type = image 时，出于可访问性考虑设置。
• accept：当 type = "file" 时，用于控制上传文件类型，如accept = ".ppt"。
• step：range 类型和 number 类型中，数值递增递减的步长，如step = "2"。
• min 和 max：range 类型和 number 类型中，可控制最大和最小值（超出范围有提示），如min = "0" max = "100"。
• minlength 和 maxlength：分别表示输入框输入的最小长度和最大长度，小于最小长度有提示，超过最大长度无法输入。

2、input 元素

• type 属性的常用类型
  • text：单行文本输入框，如<input type = "text">。
  • number：数字框，如<input type = "number">。
  • password：密码框，如<input type = "password">。
  • button：普通按钮，需设置value来描述按钮，如<input type = "button" value = "按钮描述">。
  • submit：提交按钮，如<input type = "submit">。
  • reset：重置按钮，如<input type = "reset">。
  • radio：单选框，需和 name 属性搭配使用，name 属性相同为同一组控件，如<input type = "radio">。
  • checkbox：复选框，如<input type = "checkbox">。
  • file：文件域，如<input type = "file">。
  • hidden：隐藏域，如<input type = "hidden">。
  • image：图片类型的提交按钮，需设置src，如<input type = "image" src>。
  • email：邮件输入框，如<input type = "email">。
  • tel：电话输入框，如<input type = "tel">。
  • search：搜索输入框，如<input type = "search">。
  • range：滑块，需设置value，如<input type = "range" value = "">。
  • url：链接输入框，如<input type = "url">。
  • color：颜色选择框，如<input type = "color">。
  • date：日期选择框，如<input type = "date">。
  • time：时间选择框，如<input type = "time">。
  • datetime - local：日期和时间的本地写法，如<input type = "datetime - local">。
  • month：月份选择框，如<input type = "month">。
  • week：周选择框，如<input type = "week">。