表单标签、语义化标签

在表单标签中，如果要实现按钮重置（清空）、提交等动作，需要根据实际情况用 <form action=""> ··· </form>（表单域）将所有需要的表单标签包裹起来，不然一些按钮操作无法起作用

//action是提交的地址，用不到可以不写，建议写着，不给值，放这就行
<form action="">
    ···

    ···

    ···
</form>

一、Input

type：种类（text、password……）

placeholder：占位符（在未填写时显示在文本框内的提示文字，输入字符则消失）

1. 文本框

<!-- 文本框： -->
<input type="text" placeholder="请输入···">

2. 密码框

<!-- 密码框： -->
<input type="password" placeholder="请输入密码">

3. 单选框

<!-- 单选框： -->
<input type="radio" name="chose">1
<input type="radio" name="chose">2
<input type="radio" name="chose" checked>3

name：属性名称（相同名称的单选框可分为一组，同组的单选框只能选中其中一个） 

checked：默认选中（写在哪个单选框里，则默认为勾选状态）

4. 多选框

<!-- 多选框： -->
<input type="checkbox" name="yes">1
<input type="checkbox" name="yes" checked>2
<input type="checkbox" name="yes">3

name： 属性名（在复选框中，相同名称为一组，但仅作名称使用，与单选框不同）

checked：默认选中

5. 上传文件

<!-- 提交： -->
<input type="file" multiple>

multiple： 多文件上传（点击上传后弹出文件资源管理器，按住Ctrl+鼠标左键可选择多个文件）

6. 普通按钮

<!-- 普通按钮 -->
<input type="button" value="普通按钮">

value：按钮上面显示的文字，下同，根据情况自定义，比如可以写 "点我" 

7. 重置按钮

<!-- 重置按钮 -->
<input type="reset" value="重置按钮">

8. 提交按钮

<!-- 提交按钮 -->
<input type="submit" value="提交按钮">

二、Button 按钮

1. 普通按钮

<button>按钮</button>
<button type="button">普通按钮</button>

2. 提交按钮

<button type="submit">提交按钮</button>

3. 重置按钮

<button type="reset">重置按钮</button>

三、Select 下拉菜单

<select>
    <option>巨神峰</option>
    <option>太阳圆盘</option>
    <option>虚空之地</option>
    <option selected>恕瑞玛</option>
</select>

selected：默认选项 

四、Textarea 文本域

<textarea cols="30" rows="10"></textarea>

cols：文本域可见宽度

rows： 文本域可见的行数

五、Lable 

lable标签的作用：

在上述的各种表单标签中，以单选框为例，单选框显示出来是一个圆形选择框以及对应的文字（比如：O 男   O 女）。

那么问题在于，鼠标点击圆形框可以选中，点击到 “男” 这个字符上，则不会选中，而lable标签的作用就是，将 “O” 和 “男” 联系起来，这样点击到 “男” 这个字符上也可以选中。

简单理解就是增大鼠标对于单选框的点击范围。同理，除了单选框之外，其他的比如文本框，密码框等等也是一样的。

//以下为两种  lable标签 的使用方式
//第一种：id 选择
    //第一步，在文本框中添加一个id属性
    //第二步，在该单选框的后面，写一个 <lable> "单选框的内容" </lable>
    //第三步，在lable中 写一个for，对应的是 id 的值
<input type="radio" name="num" id="1">    <label for="1">1</label>


//第二种：包裹
    //直接将lable标签包裹在 单选框 外面即可
<label><input type="radio" name="num">2</label>

六、语义化标签

1. 有语义标签

HTML5新版本推出的有语义标签，这些标签的显示特点和 div 一样，就是多了一层含义，比如写一个网页，头部用<div>，侧边栏用<div>，啥都用<div>，而如果头部用<header>，侧边栏用<aside>，会显得更加严谨，规范

<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>侧边栏</aside>
<section>网页区块</section>
<article>文章</article>

2. 无语义标签

少使用无语义标签有助于SEO的优化

<div>div标签</div>
<span>span标签</span>

七、实体字符

&nbsp;   是空格字符

空         格