2022/1/3（第一次用掘金）

从今天开始写博客从基础开始总结学习

内容

• 表单标签及属性
• 语义化布局标签
• 字符实体

表单标签

input系列

• 文本框 type="text"
• 占位符:placeholder

<input type="text" placeholder="占位符" name="取名称" value="写内容">

• 密码框 type="password"
• 占位符:placeholder

<input type="password" placeholder="占位符" name="取名称" value="写内容">

• 单选框 type="radio"
• 实现多选一的效果 必须设置相同的name属性值
• 默认选中 checked

<input type="radio" name="取名称" value="写内容" checked>

• 多选框 type="checkbox"
• 默认选中 checked

<input type="checkbox" name="取名称" value="写内容" checked>

• 文件上传 type="file"
• multiple 多文件上传

<input type="file" name="取名称"  multiple>

• 搜索 type="search"
• 占位符:placeholder

<input type="search" name="取名称"  placeholder="占位符">

• 数值 type="number"

<input type="number" name="取名称" >

按钮组

• 提交按钮 type="submit"

<input type="submit" name="取名称" value="写内容" >

• 重置按钮

<input type="reset" name="取名称" value="写内容" >

• 普通按钮 type="button" 后期配合js使用

<input type="button" name="取名称" value="写内容" >

-所有表单控件都必须放到form表单域里面才可以生效

<form action="">
	  表单控件
          input系列 
          button按钮
          下拉列表
 </form>

hutton

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

• 推荐写法:

<button>按钮</button>

select（下拉列表）

<select>
    <option>下拉列表的每一项</option>
    <option selected>默认选中</option>
    ....
</select>

• 示例代码:

<!-- 
        select:下拉菜单整体
        option:下拉菜单的每一项
        下拉菜单属性
            selected 默认选中
     -->
     所在城市:
 <select>
        <option>上海</option>
        <option>北京</option>
        <!--  selected 默认选中 -->
        <option selected>武汉</option>
        <option>深圳</option>
     </select> 

文本域

应用场景：留言板 评论 每日反馈

自我介绍<textarea name="" placeholder="自我介绍"></textarea>

label标签

使用方法1：

• 使用label标签把内容（如：文本）包裹起来
  

• 在表单标签上添加id属性
  

• 在label标签的for属性中设置对应的id属性值
  

使用方法2:

• 直接使用label标签把内容（如：文本）和表单标签一起包裹起来
  

• 需要把label标签的for属性删除即可
  

示例代码:

性别:
    <input type="radio" name="sex" id="nan">
    <label for="nan">男</label>
    <input type="radio" name="sex" id="nv">
    <label for="nv">女
    </label>
    
    <!-- 爱好:
    <label>
        <input type="checkbox" name="">敲代码
    </label> -->    

语义化标签

无语义化标签

<div>独占一行</div>
<span>一行显示多个,装不下自动折行</span>

-有语义化标签

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

以上标签是html5新增标签 有兼容性问题,支持ie9以上浏览器 移动端布局常用

字符实体

空格:
	 
大于号:
	>
小于号:
	<