表单相关标签和属性 语义布局标签 字符实体

1.表单input系列

1.1文本框

<!-- 文本框  type="text" -->
<!-- placeholder   占位符 -->
昵称：<input type="text" placeholder="请输入用户名">

1.2密码框

<!-- 密码框 type="password" -->
<!-- placeholder   占位符 -->
密码：<input type="password" placeholder="请输入用户密码">

1.3单选框

<!-- 单选框 type="radio" -->
<!-- checked  默认选中效果 -->
性别：
    男<input type="radio" name="sex" checked>
    女<input type="radio" name="sex">

实现多选一的效果 必须设置相同的name属性值

1.4多选框

<!-- 多选框 type="checkbox" -->
<!-- checked 默认选中效果-->
爱好：
    敲代码<input type="checkbox" name="hobby" checked>
    打游戏<input type="checkbox" name="hobby">
    rap<input type="checkbox" name="hobby">

必须设置相同的name属性 实现多选效果

1.5文件上传

<!-- multiple  多文件上传-->
<input type="file" multiple>
<!-- 搜索 -->
<input type="search" placeholder="请输入要搜索的内容">
<!-- 数值 输入的只能是数字 -->
<input type="number">
<!-- 颜色 -->
<input type="color">
<!-- 时间 -->
<input type="time">
<!-- 日期 -->
<input type="date">

2.input按钮

<!--提交按钮-->
<input type="submit" value="提交按钮">
<!--重置按钮-->
<input type="reset" value="重置按钮">
<!--普通按钮-->
<input type="button" value="普通按钮">

name每个表单控件都可以有，注意name的属性值不要使用中文、数字

3.button按钮

<!--提交按钮-->
<button type="submit">提交按钮</button>
<!--重置按钮-->
<button type="reset">重置按钮</button>
<!--普通按钮-->
<button type="button">普通按钮</button>

4.下拉列表

<select>
        <option selected>上海</option>
        <!-- selected 默认选中 -->
        <option>北京</option>
        <option>武汉</option>
</select>

select：下拉菜单整体

option：下拉菜单的每一项

selected：默认选中

5.文本域

<!-- placeholder 占位符 -->
<textarea placeholder="请您留言"></textarea>

实际开发关于宽度、高度推荐使用css设置

右下角默认的拖拽用css处理

6.label标签

<form>
 <!-- 方法一 -->
        性别：
        <input type="radio" name="sex" id="nan">
        <label for="nan">
            <img src="./img/man.jpg" alt="">
        </label>
        <label for="nan">男</label>
​
        <input type="radio" name="sex" id="nv">
        <label for="nv">
            <img src="./img/women.jpg" alt="">
        </label>
        <label for="nv">女</label>
        <br>
        <br>
 <!-- 方法二 -->
        性别：
        <label>
            <input type="radio" name="sex">
            <img src="./img/man.jpg">
            男
        </label>
        <label>
            <input type="radio" name="sex">
            <img src="./img/women.jpg">
            女
        </label>
    </form>

lable标签只是为了优化用户体验

推荐使用第二种方法、更简洁

7.没有语义化标签

<div>一行只显示一个 独占一行</div>
<span>一行显示多个</span>

div标签特点：一行显示一个（独占一行）

span标签特点：一行显示多个，如果一行装不下自动折行显示

8.有语义化标签

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

9.字符实体

几个常用的：
    空格   
    小于号 <
    大于号 >
    元    &ren;
    版权  ©