本文介绍了HTML表单的组成，包括表单域、表单控件和提示信息，深入讲解了`input`、`label`、`select`和`textarea`等元素的用法。此外，还探讨了HTML5的新特性，如语义化标签、多媒体标签（`audio`和`video`）以及新增的`input`类型和表单属性。最后，分享了前端面试中关于CSS盒子模型和BFC的知识点。
欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。
致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨
目录
一、表单组成
二、H5提高
三、每日面试题
以后每篇博客都会分享两道前端面试题
一、表单组成
表单相当于我们在网页中需要输入提交的信息表，比如注册页面，表单是网页开发中非常常用的，所以我们必须要掌握
表单组成： 表单域+表单控件+提示信息
表单域: 包含表单的元素的区域，就是表单的范围
HTML中，<form></form>标签用于定义表单域，表单信息都填写在form里面，form会把它范围内的表单元素提交给服务器
/** 语法规范 **/
<form action="url地址" method="提交方式" name="表单域名称">
</form>
表单控件: 用户在表单中输入或选择的内容控件，比如我们在注册页面输入的用户名、邮箱、密码等
input标签：input是一个单标签，在表单控件中也是用的最多的
书写为：<input type="属性值"/>
type的属性值有：
<form action="">
<!-- -->
用户名：<input type="text"><br>
密 码：<input type="password"><br>
手机号：<input type="number"><br>
邮 箱：<input type="email"><br>
提 交：<input type="submit"><br>
</form>
input 属性：
- name属性
- value属性：主要给后台人员使用,就是获取对应的type的值
- checked属性：单选按钮和复选框可以设置checked属性，效果为默认选中某个按钮
- maxlength属性：规定输入字符串最大长度
label标签： 为input标签元素定义标注；用于绑定一个表单元素，当点击label标签内的文本时，浏览器会自动将光标转到或选择对应的表单元素上，增加用户体验
语法：for和id值要一致，
<label for="sex">男</label> <input type="radio" name="sex" id="sex" />
select表单元素：让用户选择的场景，并想节约空间时，可以将多余的选项折叠起来
语法：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
文本域：<textarea>，双标签，用于大量输入文本
属性：实际中不会用，cols=“每行中的字符数”，rows=“显示的行数”
二、H5提高
这里主要讲一些针对以前不足增加的新标签、表单、表单属性等，使代码更简洁
** 新增的语义化标签： **
<body>
<header>头部标签</header>
<nav>导航标签</nav>
<article>内容标签</article>
<section>定义文档某个区域</section>
<aside>侧边栏标签</aside>
<footer>尾部标签</footer>
</body>
注意！这种是针对搜索引擎的，可以使用多次，在IE9中需要将这些元素转换为块级元素
** 新增的多媒体标签 **
<!-- 音频 -->
<audio src="文件地址" controls="controls"></audio>
<!-- 视频 -->
<video src="文件地址" controls="controls"></video>
audio常用属性：
这里要注意！：
音频和视频标签使用方式基本一致，只是浏览器支持情况不同；
谷歌浏览器把音频和视频的自动播放禁止了；
我们可以给视频标签添加muted属性来静音播放视频，音频不可以（可以通过JavaScript解决）；
视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性
** 新增的input类型**
** 新增的表单属性 **
我们可以通过以下方法改变placeholder的颜色：
input::placeholder {
color:#333;
}
三、每日面试题
一、如何理解CSS盒子模型
标准盒子模型：宽度=内容的宽度（content）+border+padding
低版本IE盒子模型：宽度=内容宽度（content+border+padding）
二、什么是BFC
BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
形成BFC的条件：
- 浮动元素，float除none以外的值
- 定位元素，position（absolute，fixed）
- display为以下其中之一的值inline-block，table-cell，table-caption
- overflow除了visible以外的值（hidden，auto，scroll）
BFC的特性：
- 内部的Box会在垂直方向上一个接一个的放置。
- 垂直方向上的距离由margin决定
- bfc的区域不会与float的元素区域重叠。
- 计算bfc的高度时，浮动元素也参与计算
- bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
本期到这里就结束了，感谢阅读！有问题留言，及时回复
- 下期：还没有想好HHHHHH
- 点赞加关注，持续更新实用技巧、热门资源、软件教程等
- 有任何 软件 影视 教程资源 考证资料等需求留言即可
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
