前端知识库(lizh)
  • README
  • Bugs
    • 前端调试随笔
    • 浏览器常见问题概览
    • 浏览器兼容问题概览
    • HTML常见问题概览
    • CSS常见问题概览
    • JS常见问题概览
    • 移动端兼容性问题概览
    • 微信小程序开发
    • NodeJs常见问题概览
    • Mac常见问题概览
    • 微信开发遇坑指南
    • Npm包常见问题概览
    • 其他问题汇总
  • Css探索系列
    • CSS基础知识
    • CSS常见问答
    • CSS常见问答02
    • CSS应用示例
    • CSS应用示例02
    • 由Z Index引发的层叠上下文思考
    • 由浮动塌陷引发的块级格式上下文思考
    • CSS探索系列 Flex布局
    • CSS探索系列 Margin
    • CSS探索系列 Auto关键字
    • CSS探索系列 Gradient
    • CSS探索系列 Line Height
    • CSS探索系列 元素居中
    • CSS探索系列 动画
    • 为什么使用PostCSS处理CSS?
    • 重新认识伪类与伪元素
    • 自定义表单伪元素样式
    • 如何理解Css中的Display属性
    • 视口和软键盘对视口的影响
    • 关于Css
  • Frontend
    • 00 关于Web前端
    • 01 前端知识概览
    • 02 常用前端库概览
    • 基础 00 前端常见问题01
    • 基础 01 浏览器缓存
    • 基础 02 浏览器工作原理
    • 基础 03 谈谈前端跨源问题及解决方法
    • 进阶 01 Web性能优化
    • 进阶 02 搜索引擎优化(SEO)
    • 进阶 03 前端模块化编程
    • 进阶 04 规范代码:Linter、Prettier、EditorConfig
    • 进阶 11 前端自动化测试
    • 高级 01 前端安全
    • Vue2.X原理篇
    • Vue3初步了解及迁移指南
    • 重读Vue教程
    • React17.X原理篇
    • 你必须知道的React问题
    • 重读React教程
    • 聊一聊Cookie的一些问题
    • 如何理解HTTP响应的状态码
    • HTTP的历史演变及概述
    • Webpack4.X原理篇
    • Webpack基础入门篇
    • Webpack构建优化篇
    • TypeScript使用指南
    • 代码规范
      • 前端规范
      • HTML
      • CSS
      • JS
  • Html探索系列
    • HTML基础知识
    • HTML基础知识02
    • HTML常见问答
    • HTML经典实践用例
    • HTML元素的宽高及位置详解
    • Video元素的使用和常见问题总结
    • Html探索系列 Meta标签
    • DOCTYPE:文档类型与浏览器模式
    • DHTML(动态网页)简介
    • HTML标签详解
    • HTML布局的几种方式
    • HTML全局属性
    • 关于Html
  • Js探索系列
    • 基础知识
    • 常见问答
    • 应用示例
    • 趣味示例
    • 基础篇 05 AJAX
    • 基础篇 06 Window对象
    • 基础篇 07 Error、JSON、Math、Console对象
    • 基础篇 08 History、URL、Screen、Navigator、Location对象
    • 基础篇 09 文档对象模型(DOM)
    • 基础篇 10 Document对象
    • 基础篇 11 Element对象
    • 基础篇 12 Event对象
    • 基础篇 13 键盘、鼠标、触摸事件
    • 基础篇 15 CSS对象模型(CSSOM)
    • 进阶篇 01 Prototype对象和继承
    • 进阶篇 02 Promise对象
    • 进阶篇 07 迭代器(Iterator)
    • 进阶篇 08 Generator和Async函数
    • 进阶篇 09 JavaScript异步编程
    • Date对象和日期时间字符串格式
    • Canvas基础入门篇
    • Canvas进阶篇
    • SVG基础入门篇
    • 四种判断数据类型方法的优缺点
    • 深入理解JavaScript的浅拷贝和深拷贝
    • 谈谈JavaScript的作用域和上下文
    • 复制内容到剪贴板
    • 关于Javascript
  • NodeJs
    • 关于Node.Js
    • Node.Js:三种调试方法
    • Npm包管理器简介及一些机制
    • NPM:Package.Json详解(中文)
    • NPM:从零开始,开发一个软件包
    • NPM:常用命令
    • Node.Js:Fs(文件系统)
    • Node.Js:Global(全局变量)
    • Node.Js:HTTP
    • Node.Js:Module(模块)
    • Node.Js:Path(路径)
    • Node.Js:Readline(逐行读取)
  • Research
    • 极细边框(1px边框)实现方式
    • 如何监控前端异常?
    • H5页面跳转和刷新
    • Web主题切换和个性化定制方法总结
    • Vue SSR(服务端渲染)的简单实现
    • 基于Create React App打造代码规范化的React+Ts项目
    • H5可视化编辑
    • Web常用功能
    • Javascript加密混淆
    • Vue如何导入TypeScript
    • 移动端PDF预览
    • 纯CSS绘制箭头
    • 网站性能测量和优化方法
  • Tech
    • GOOGLE浏览器的搜索技巧
    • Curl的用法指南
    • Sublime3插件篇
    • Charles安装及使用
    • Nginx基础使用
    • 排序算法(Javascript)
    • 代码整洁之道(摘录笔记)
    • Java的24种设计模式与7大原则
    • 观察者和发布订阅模式
  • Tools
    • Git
      • Git基础教程
      • Git常见问题
    • Gitbook
      • Gitbook入门篇
      • Gitbook插件篇
      • Gitbook进阶篇
由 GitBook 提供支持
在本页
  • html5的新特性
  • 渐进增强和优雅降级的定义
  • label 和 input 标签之间的特性
  • 页面锚点偏移

这有帮助吗?

  1. Html探索系列

HTML基础知识02

html5的新特性

HTML5 是最新的 HTML 标准,是专门为承载丰富的 web 内容而设计的,并且无需额外插件。HTML5 是跨平台的,被设计为在不同类型的硬件(PC、平板、手机、电视机等等)之上运行。

一些有趣的新特性

  • 新的文档类型(DOCTYPE)声明;

    <!DOCTYPE html>
  • 新的属性语法;

    <input type="text" value="John Doe" disabled> <!--不需要指定属性值-->
    <input type="text" value=John Doe> <!--不需要引号-->
    <input type="text" value="John Doe"> <!--双引号-->
    <input type="text" value='John Doe'> <!--单引号-->
  • 拖拽释放(Drag and drop)API;

  • 语义化更好的内容标签:header、nav、footer、aside、article、section;

  • 新的元素:canvas、svg、audio、video;

  • 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;

  • HTML5 提供新的 API:localStorage、sessionStorage;

  • 新的表单控件:calendar、date、time、email、url、search;

  • 新的技术:webworker、websocket、Geolocation;

IE6~8 支持通过 document.createElement 方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签, 浏览器支持新标签后,还需要添加标签默认的样式。

当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架。

删除的一些元素

acronym、applet、basefont、big、center、dir、font、frame、frameset、noframes、strike、tt 等。

渐进增强和优雅降级的定义

**渐进增强:**针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

**优雅降级:**一开始就根据高版本浏览器构建完整的功能,然后再针对低版本浏览器进行兼容。

label 和 input 标签之间的特性

label 标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。

label 和 input 标签配对方法有两种:

  • 将 input 标签嵌套在 label 标签 中(隐式)。

  • 将 lable 标签的 for 属性与到 input 标签的 id 属性关联(显式)。

<!-- 隐式 -->
<label> 
  Name:
  <input type="text" name="name" />
</label>

<!-- 显式 -->
<label for="name">Name: </label>
<input type="text" id="name" name="name" />

注意: 带有 type="submit" 或 type="button" 的 input 标签不需要 label 标签,但是所有其他 input 标签,包括 textarea、select 标签,都最好有 label 标签。

label 和 input 标签配对后,有此特性: 点击 label 标签或其子元素标签(隐式时,无论与 input 标签是何种布局),会执行 input 标签的 click 事件。

此特性容易引出的Bug: 点击 label 标签时,click 事件被触发两次。

  • 触发条件很简单:label 标签和 input 标签已配对(显示或隐式)、监听的是 label 标签和 input 标签的上层元素 click 事件。

  • 问题原因:点击 label 标签的时候,事件冒泡一次,同时会触发关联的 input 标签的 click 事件,会导致事件再次冒泡。

  • 解决方案:不用 label 标签或 click 事件中,判断事件源为 input 标签。

页面锚点偏移

在进行锚点定位时,页面往往定位到页面的最顶部,无论是上部有导航条,还是出于美观考虑,都希望定位后该内容与页面顶部有一些间距。而锚点自动定位是无法达到的。

  • 方法一: 用Element.scrollIntoView() 滚动页面 :该方法将当前的元素滚动到浏览器窗口的可视区域内。

  • 方法二: 利用 padding-top 将锚点上移 100px,再用 margin-top 将内容上移 100px,修复锚点区域和内容区域 padding-top 产生的 100px的偏移。

    .anchor{
        padding-top: 100px;
        margin-top: -100px;  
    }

    类似的,也可以在元素前面新添加一个元素,设置高度,本元素设置margin-top负值.

  • 方法三: 利用 css3 的 :target 选择器。:target 声明只支持现代浏览器,IE浏览器支持 IE9+。

    .anchor:target{
        padding-top:100px;
    }
  • 方法四: 绑定 window.onhashchange 事件,控制页面滑动。

    window.addEventListener('hashchange', function(e) {
        window.scrollBy(0, -100)
    }, false);
上一页HTML基础知识下一页HTML常见问答

最后更新于1年前

这有帮助吗?