网页前端(11)CSS兼容与HTML新结构标签表单

浏览器样式前缀

为了让CSS3样式兼容,需要将某些样式加上浏览器前缀:

  • -ms- 兼容IE浏览器
  • -moz- 兼容firefox
  • -o- 兼容opera
  • -webkit- 兼容chrome 和 safari
自动添加浏览器前缀

目前的状况是,有些CSS3属性需要加前缀,有些不需要加,有些只需要加一部分,这些加前缀的工作可以交给插件来完成,比如安装: autoprefixer

Sublime text 中安装 autoprefixer 执行 preferences/key Bindings-Users 设置快捷键 { "keys": ["ctrl+alt+x"], "command": "autoprefixer" } 通过此工具可以按照最新的前缀使用情况给样式自动加前缀。


HTML5新结构标签

1、header 页面头部、页眉
2、nav 页面导航
3、article 一篇文章
4、section 文章中的章节
5、aside 侧边栏
6、footer 页面底部、页脚


HTML5 新增表单控件

新增类型:网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索

<label>网址:</label><input type="url" name="" required>


<label>邮箱:</label><input type="email" name="" required>


<label>日期:</label><input type="date" name="">


<label>时间:</label><input type="time" name="">


<label>星期:</label><input type="week" name="">


<label>数量:</label><input type="number" name="">


<label>范围:</label><input type="range" name="">


<label>电话:</label><input type="tel" name="">


<label>颜色:</label><input type="color" name="">


<label>搜索:</label><input type="search" name="">

新增常用表单控件属性:

1、placeholder 设置文本框默认提示文字
2、autofocus 自动获得焦点
3、autocomplete 联想关键词

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容