欢迎加入前端技术营!如果你也是前端学习者或者对前端有学习的想法,那就跟着我一起从零开始进击前端。
致力于尽可能详细且简洁的介绍前端知识、自己的捷径,也是学习路上的记录。欢迎探讨
以后每篇博客都会分享两道前端面试题
表单相当于我们在网页中需要输入提交的信息表,比如注册页面,表单是网页开发中非常常用的,所以我们必须要掌握
表单组成: 表单域+表单控件+提示信息
表单域: 包含表单的元素的区域,就是表单的范围
HTML中,标签用于定义表单域,表单信息都填写在form里面,form会把它范围内的表单元素提交给服务器
/** 语法规范 **/
<form action="url地址" method="提交方式" name="表单域名称">
form>
表单控件: 用户在表单中输入或选择的内容控件,比如我们在注册页面输入的用户名、邮箱、密码等
input标签:input是一个单标签,在表单控件中也是用的最多的
书写为:
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 属性:
label标签: 为input标签元素定义标注;用于绑定一个表单元素,当点击label标签内的文本时,浏览器会自动将光标转到或选择对应的表单元素上,增加用户体验
语法:for和id值要一致,
select表单元素:让用户选择的场景,并想节约空间时,可以将多余的选项折叠起来
语法:
<select>
<option>选项1option>
<option>选项2option>
<option>选项3option>
select>
文本域:,双标签,用于大量输入文本
属性:实际中不会用,cols=“每行中的字符数”,rows=“显示的行数”
这里主要讲一些针对以前不足增加的新标签、表单、表单属性等,使代码更简洁
** 新增的语义化标签: **
<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的条件:
BFC的特性:
本期到这里就结束了,感谢阅读!有问题留言,及时回复