html基础

form表单

form表单 标签 是所有标签最核心的标签之一
常用属性
name:表单名称
action:表单数据提交的地方（通常是后台的网址或文件名）
method:表单数据提交的方式（get post）

<form name="studentInfo" action="http://baidu.com" method="get">
<input type="text" name="userName" placeholder="请输入您的姓名" />
<input type="submit" />
</form>

表单元素

1. input:
   type ->
   • text单行文本输入框，默认type类型就是text；
     属性：placeholder提示 name命名 minlength 最少输入字符个数 maxlength最大多输入字符个数 disabled（失效） readonly只读 value默认值 pattern( 正则匹配)

     <form action="/example/html5/demo_form.asp" method="get">
     国家代码：<input type="text" name="country_code" pattern="[A-z]{3}"
     title="三个字母的国家代码" />
     <input type="submit" />
     </form>

• password:密码框
  属性：与text一样

• email

• submit

• radio：单选按钮，通常两项以上
  常用属性：name、value、checked
  (checked{boolean})

  <input type="radio" name="sex" checked>男
  <input type="radio" name="sex">女
  name相同表示同一组 的单选框，必须有，单选框才能生效，一组中只能有一个checked

• checkbox:复选框，可以用来选择1项或多项
  常用属性：name、value、checked
  (checked{boolean})

  <input type="checkbox" name="sex" checked>男
  <input type="checkbox" name="sex">女

• file:文件上传

• button：普通按钮，通常用他去调用脚本代码
  常用属性：value disabled

• submit：提交按钮，用来将表单数据提交到后台

  • 常用属性：value disabled

• image：图片按钮，用法与button一样。有一个特殊属性：src(用来加载提示图片，用它替换value)，具有刷新效果，它有提交功能，与submit的功能一样

  <input type="image" name="image" src="/files/2917/fxlogo.png" width="50" title="刷新">

• reset：重置按钮，将输入的表单所有组件输入的内容还原为初始状态。

  • 常用属性：value disabled
    2. textarea
       文本域，主要用于输入大批量的内容
       常用属性：name、id、cols列数、rows行数、placeholder、minlength、maxlength、required、value

       <textarea name="" id="" cols="30" rows="10">备注</textarea>

3. select：下拉选择框
   option selected 默认被选中

   // form 是块标签，label和select是行内标签
   // for 可以不写，如果写了，是关联解释下面的select是关联谁的 譬如 for="sex"，for要跟关联的select的id一一对应起来
   // multiple 可以实现多选
   <label for="">性别：</label><select  id="">
   <option value="0">男</option>
   <option value="1">女</option>
   <option value="2">未知</option>
   <select>
   <label for="course">选课：</label><select  id="course" multiple size="2" >
   <option value="0">语文</option>
   <option value="1" selected>数学</option>
   <option value="2">物理</option>
   <option value="2">化学</option>
   <select>
   autocomplete
   一个 DOMString，为 用户代理 提供自动填充功能的线索。 关于该值的完整列表以及如何使用自动填充的详细信息，请参阅 HTML 自动完成属性。
   autofocus
   这个布尔值属性能够让一个对象在页面加载的时候获得焦点。一个文档中只有一个对象可以有这个属性。
   disabled
   这个布尔值的属性表示用户不能与该表单控件交互。如果没有声明这个属性，则从它的父元素继承，例如 fieldset；如果没有父元素设置了 disabled 属性, 那么默认该表单对象可用。
   form
   <select> 所关联的<form> (它的"表单拥有者")。其值必须是在同一文档中的 <form> 元素的id（如果没有设置这个属性， <select> 元素则与其任何存在的祖先 <form> 元素关联）。
   这个属性让你将 <select> 元素与文档中任意位置的 <form> 元素相关联，而不仅仅是包含 <select> 元素的 <form> 元素。这个属性还可以覆盖元素的祖先 <form> 元素。
   multiple
   这个布尔值属性表示列表中的选项是否支持多选。没有声明该值时，一次只能选中一个选项。声明这个属性后，大多数浏览器都会显示一个可滚动的列表框，而非一个下拉菜单。
   name
   该属性规定了控件的名称。
   required HTML5
   一个布尔值属性，表示必须选中一个有非空字符串值的选项。
   size
   如果控件显示为滚动列表框（如声明了 multiple），则此属性表示为控件中同时可见的行数。浏览器不需要将选择元素呈现为滚动列表框。默认值为 0。

4. button:普通按钮，具有提交功能。可以单独使用，不用写在form元素中。如果写在form中，有提交功能。

table

table>tr2>td{neirong$}3 + tab
在vscode可直接生成代码块

<table>
    <tr>
        <td>neriong1</td>
        <td>neriong2</td>
        <td>neriong3</td>
    </tr>
    <tr>
        <td>neriong1</td>
        <td>neriong2</td>
        <td>neriong3</td>
    </tr>
</table>

表格属性

border：是指表格框宽 1 （不要使用这个属性, 该属性已废弃）
width：设置表格宽度 400 60%
align：设置表格对齐 left right center (已不赞成使用，用css margin-left 、margin-right 为 auto ( 或者 margin 设置为 0 auto 替换)
cellpadding:设置单元格与文本之间的间距 2
cellspacing:设置像素间隔 0

跨行跨列

rowspan：跨行
colspan：跨列
Emmet语法（提高开发效率）：
table[border=1 width=500]>tr3>td{neirong$$}3
valign（废弃 Note: Do not use this attribute as it is obsolete in the latest standard: use the CSS vertical-align property instead. ）
align（废弃 To achieve the same effect as the left, center, right or justify values, apply the CSS text-align property to the element.）

ps：
th会自动加粗和居中

完整表格还报错 caption标题 thead表头 tbody表体 tfoot表尾

table>(caption{studut})+(thead>tr>th*4)+(tbody>tr*3>td*4)+(tfoot>tr>td[colspan=4])

标签属性

标签属性分为通用属性、自用属性和自定影属性

通用属性

id
class
style
title

自定义标签属性：通常用于传值或用于图片懒加载等内容

合适：data-*