2HTML5+CSS3

最新推荐文章于 2022-04-28 14:58:47 发布
最新推荐文章于 2022-04-28 14:58:47 发布
阅读量990 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42945998/article/details/108696611
版权

HTML5新增

新元素

  1. canves

  2. audio(音频)，video(视频)，source（多媒体资源），embed(定义嵌入内容，例如插件)，track（为诸如 和 元素之类的媒介规定外部文本轨道。）

  3. datalist(定义选项列表，与input配合使用，定义input可能的的值)，keygen(规定用于表单的密钥对生成器字段)，output(定义不同类型的输出)

    。。。。。

canvas

HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

HTML5 内联 SVG

SVG表示可缩放矢量图形，是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式，

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用于定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
  • SVG 是万维网联盟的标准
  • SVG 与 DOM 和 XSL 之类的 W3C 标准是一个整体

SVG优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

  • SVG 图像可通过文本编辑器来创建和修改
  • SVG 图像可被搜索、索引、脚本化或压缩
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大

SVG 与 Canvas两者间的区别

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 与 SVG 的比较

下表列出了 canvas 与 SVG 之间的一些不同之处。

CanvasSVG
1.依赖分辨率 2.不支持事件 3.处理器弱的文本渲染 4.能力能够以 .png 或 .jpg 格式保存结果 5.图像最适合图像密集型的游戏，其中的许多对象会被频繁重绘1.不依赖分辨率 2.支持事件 3,处理器最适合带有大型渲染区域的应用程序（比如谷歌地图） 4.复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） 5.不适合游戏应用

HTML5 MathML

MathML 与 HTML相似度很高，但是比较繁琐。它继承了角括号和双标签（<标签>内容</标签>）的用法。

HTML5 可以在文档中使用 MathML 元素，对应的标签是 … 。

MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。

拖放

draggable=“true”

拖放元素事件：

  1. dragstart 在元素开始被拖动时触发
  2. dragend 在拖动操作完成时触发
  3. drag 在元素被拖动时触发

释放区事件

  1. dragenter 被拖动元素进入到释放区所占据的屏幕空间时触发
  2. dragover 被拖动元素处于释放区所占据的屏幕空间时触发（ e.preventDefault();要取消其默认事件，否则drop事件无效）
  3. dragleave被拖动元素离开释放区所占据的屏幕空间时触发
  4. drop 被拖动元素被放置在释放区所占据的屏幕空间时触发（ e.preventDefault();要取消其默认事件，否则drop事件无效）

HTML5 Geolocation（地理定位）

HTML5 Geolocation（地理定位）用于定位用户的位置。

Geolocation 通过请求一个位置信息，用户同意后，浏览器会返回一个包含经度和维度的位置信息！

  1. getCurrentPosition(function1,function2) 方法来获得用户的位置。function1:得到位置信息的回调函数,function2:错误情况下的回调函数
  2. watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。
  3. clearWatch() - 停止 watchPosition() 方法
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
  }
</script>

input

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

语义元素

无语义 元素实例:

和 - 无需考虑内容.

语义元素实例: ,

, and - 清楚的定义了它的内容.

HTML5提供了新的语义元素来明确一个Web页面的不同部分

  • header

  • nav

  • section

  • article

  • aside

  • figcaption

  • figure

  • footer

HTML5 Web 存储

在HTML5之前，主要是使用cookies存储，cookies的缺点有：需要在请求头上带着数据，存储大小不过，在4k之内。

localStorage 和 sessionStorage

客户端存储数据的两个对象为：

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

  • 保存数据：localStorage.setItem(key,value);
  • 读取数据：localStorage.getItem(key);
  • 删除单个数据：localStorage.removeItem(key);
  • 删除所有数据：localStorage.clear();
  • 得到某个索引的key：localStorage.key(index);

HTML5 Web SQL 数据库

Web SQL 是在浏览器上模拟数据库，可以使用JS来操作SQL完成对数据的读写。

Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。

HTML5 应用程序缓存

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。这意味着，你可以在没有网络连接的情况下进行访问。

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

  1. 离线浏览 - 用户可在应用离线时使用它们
  2. 速度 - 已缓存资源加载得更快
  3. 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
The content of the document......
</body>

</html>

  1. 如需启用应用程序缓存，请在文档的html 标签中包含 manifest 属性：

    <!DOCTYPE HTML>        
<html manifest="demo.appcache">        
...        
</html>

    每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。

    manifest 文件的建议的文件扩展名是：".appcache"。

    Remark请注意，manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置。

实例 - 完整的 Manifest 文件

CACHE MANIFEST  (被缓存文件)      
\# 2012-02-21 v1.0.0       
/theme.css        
/logo.gif        
/main.js                
NETWORK:   （不被缓存文件）     
login.php        
        
FALLBACK: （规定如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件：）
/html/ /offline.html

一旦应用被缓存，它就会保持缓存直到发生下列情况：

  • 用户清空浏览器缓存
  • manifest 文件被修改（参阅下面的提示）
  • 由程序来更新应用缓存

HTML5 Web Workers

web worker 是运行在后台的 JavaScript，不会影响页面的性能，更好的解释是，你可以使用web worker提供的一种简单的方法来为web内容在后台线程中运行脚本，这些线程在执行任务的过程中并不会干扰用户界面！

HTML5 WebSocket

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

以下 API 用于创建 WebSocket 对象。

var Socket = new WebSocket(url, [protocal] );

以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

css新增

边框

  1. border-radius

  2. box-shadow

  3. border-image(ie不支持)

  4. CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。

    如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中:

背景

  1. background-size
  2. background-origin（content-box，padding-box，border-box）
  3. background-clip（content-box，padding-box，border-box）

渐变

  1. background: linear-gradient(direction, color-stop1, color-stop2, …);

    direction可以是位置，也可以是角度

  2. background: radial-gradient(center, shape size, start-color, …, last-color);

    center/ellipse ，也可以是百分比（几个）

    shape size：（定义渐变的大小）

    • closest-side
    • farthest-side
    • closest-corner
    • farthest-corner

  3. repeating-radial-gradient()

文本

  1. hanging-punctuation：规定标点符号是否位于线框之外（不支持）
  2. punctuation-trim：规定是否对标点符号进行修剪（不支持）
  3. text-align-last:设置如何对齐最后一行或者紧挨着强制换行符之前的行
  4. text-justify:规定当 text-align 设置为 “justify” 时所使用的对齐方法。
  5. text-outline:规定文本的轮廓。
  6. text-overflow:规定当文本溢出包含元素时发生的事情。
  7. text-shadow：向文本添加阴影。
  8. text-wrap:规定文本的换行规则。
  9. word-break:规定非中日韩文本的换行规则。
  10. word-wrap:允许对长的不可分割的单词进行分割并换行到下一行。

字体

<style>
@font-face
{
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

div
{
   font-family:myFirstFont;
}
</style>

2D，3D转换

transform：适用于2D或3D转换的元素

过渡属性

下表列出了所有的过渡属性:

属性描述CSS
transition简写属性，用于在一个属性中设置四个过渡属性。3
transition-property规定应用过渡的 CSS 属性的名称。3
transition-duration定义过渡效果花费的时间。默认是 0。3
transition-timing-function规定过渡效果的时间曲线。默认是 “ease”。3
transition-delay规定过渡效果何时开始。默认是 0。3

动画

animation与@keyframes

属性描述CSS
@keyframes规定动画。3
animation所有动画属性的简写属性，除了 animation-play-state 属性。3
animation-name规定 @keyframes 动画的名称。3
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3
animation-timing-function规定动画的速度曲线。默认是 “ease”。3
animation-delay规定动画何时开始。默认是 0。3
animation-iteration-count规定动画被播放的次数。默认是 1。3
animation-direction规定动画是否在下一周期逆向地播放。默认是 “normal”。3
animation-play-state规定动画是否正在运行或暂停。默认是 “running”。3
animation-fill-mode：forwards
/*动画停在最后一帧*/

CSS3 新多列属性

下表列出了所有 CSS3 的新多列属性，点击属性可以查看更多内容以及用法：

属性说明CSS
column-count指定元素应分为的列数3
column-fill指定如何填充列3
column-gap指定列之间差距3
column-rule一个用于设置所有列规则的简写属性3
column-rule-color指定的列之间颜色规则3
column-rule-style指定的列之间的样式规则3
column-rule-width指定的列之间的宽度规则3
column-span指定一个元素应该横跨多少列3
column-width指定列的宽度3
columns缩写属性设置列宽和列数3

新的用户界面特性

下表中为CSS3的新用户界面属性，您可以点击对应的属性，了解到更多的内容以及对应属性的用法等等：

属性说明CSS
appearance允许您使一个元素的外观像一个标准的用户界面元素3
box-sizing允许你以适应区域而用某种方式定义某些元素3
iconProvides the author the ability to style an element with an iconic equivalent3
nav-down指定在何处使用箭头向下导航键时进行导航3
nav-index指定一个元素的Tab的顺序3
nav-left指定在何处使用左侧的箭头导航键进行导航3
nav-right指定在何处使用右侧的箭头导航键进行导航3
nav-up指定在何处使用箭头向上导航键时进行导航3
outline-offset外轮廓修饰并绘制超出边框的边缘3
resize指定一个元素是否是由用户调整大小3

弹性盒子flex

属性描述
display指定 HTML 元素盒子类型。
flex-direction指定了弹性容器中子元素的排列方式
justify-content设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap设置弹性盒子的子元素超出父容器时是否换行。
align-content修改 flex-wrap 属性的行为，类似align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flowflex-direction 和 flex-wrap 的简写
order设置弹性盒子的子元素排列顺序。
align-self在弹性子元素上使用。覆盖容器的 align-items 属性。
flex设置弹性盒子的子元素如何分配空间。

CSS3 多媒体查询

CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。

媒体查询可用于检测很多事情，例如：

  • viewport(视窗) 的宽度与高度
  • 设备的宽度与高度
  • 朝向 (智能手机横屏，竖屏) 。
  • 分辨率

目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。

多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

@media not|only mediatype and (expressions) {
    CSS-Code;
}

你也可以在不同的媒体上使用不同的样式文件：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 多媒体类型

值描述
all用于所有多媒体类型设备
print用于打印机
screen用于电脑屏幕，平板，智能手机等。
speech用于屏幕阅读器

实例

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

1.盒模型水平垂直居中的五大方案

2.关于css盒模型的几道面试题

3.掌握几大经典布局方案

4.移动端响应式布局的三大方案

5.几道开放式的css3面试题

  • 让一个元素在视线中消失的方式

    • display：none

    • visibility：hidden

    • z-index：

    • opicity

    • rotate

    • filter

    • height或者宽设为0,overflow:hidden

    • …

      opacitydisplayvisibility
      是否支持过渡是否是
      是否产生重绘否是是
      是否产生回流否是否
      元素隐藏，是否可以触发绑定事件是否否
      元素隐藏，是否占据页面空间是否是
    • visibility支持过渡，但是不是平滑的过渡，进行了延迟

    从 visible 过渡 到 hidden 有延迟，从 hidden 过渡到 visible 不延迟

    • 实际上透明度改变后，GPU在绘画时只是简单的降低之前已经画好的纹理的alpha值来达到效果，并不需要整体的重绘。

  • display其他值

    • none 不显示，并且不会创建dom节点，不会出现在dom tree 与render tree上

    • list-item ：此元素会作为列表显示

    • run-in:此元素会根据上下文作为块级元素或内联元素显示。

    • table此元素会作为块级表格来显示（类似 ），表格前后带有换行符。
      inline-table此元素会作为内联表格来显示（类似 ），表格前后没有换行符。
      table-row-group此元素会作为一个或多个行的分组来显示（类似
      table-header-group此元素会作为一个或多个行的分组来显示（类似
      table-footer-group此元素会作为一个或多个行的分组来显示（类似
      table-row此元素会作为一个表格行显示（类似
      table-column-group此元素会作为一个或多个列的分组来显示（类似
      table-column此元素会作为一个单元格列显示（类似
      table-cell此元素会作为一个表格单元格显示（类似 和 ）
      table-caption此元素会作为一个表格标题显示（类似
      ）
      inherit规定应该从父元素继承 display 属性的值。
      ）。）。）。）。）。）

  • 项目中什么时候用到flex

    • 布局

  • 元素垂直居中的方式

    • flex布局下align-items：center(设置在父元素上) align-self:center(设置在子元素上)
    • line-height:只针对行内元素；
    • transform：translateY（-50%）；top：50%； position: relative;
    • 子元素：display: table-cell; vertical-align: middle;（经常用在表格中使表格元素垂直居中）父元素：display：table/或者要求父元素高度固定

  • 元素水平居中的方式

    • text-align:center(针对非块状元素居中)
    • margin :0 auto
    • transform:translateX(-50%) left:50%;
    • flex justify-content:center

  • 响应式布局的核心是媒体查询

    还有rem,flex,vh/vm

  • 盒模型有哪些

    • 标椎盒模型：包含了 内容（content） 内边距（padding） 边框（border） 外边框（margin）

      width = content +margin+padding+border

    • IE盒模型：width = content+margin

    • flex弹性盒布局

    • columns 多列布局（文字排版）

    • box-sizing : content-box|border-box|inherit;

      • content-box:即总宽度=margin+border+padding+width

      • border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容

        即总宽度=margin+width

几大经典布局方案

  • 圣杯布局/双飞翼布局（左/右/左右固定，中间自适应）

    实现方案：

    • 有时候会用flex

    • 用 position: absolute; left,top

    • 用浮动

      这个时候会牵扯到一个清除浮动（浮动引起高度塌陷的问题）

      解决方式：

      • 父元素overflow：hidden（通过触发BFC方式，实现清除浮动）

        缺点：

        内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素，

        元素内容比较多的时候，内容会环绕着浮动的元素（解决方式，为多出的内容再创建一个BFC）

      • 额外标签法：添加一个clear：both的子元素，语义化差（不推荐）

      • 使用伪类 .parent::after {content: “”； clear: both; display: block; /* visibility: hidden;/ }推荐使用display的值只要不具有inline行内元素的特性就可以

        .clearfix{**zoom: 1;/*ie6清除浮动的方式 号只有IE6-IE7执行，其他浏览器不执行/

        优点：符合闭合浮动思想，结构语义化正确

        缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

FC

Formatting Context，格式化上下文，指页面中一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。

BFC

BFC (Block formatting context) “块级格式化上下文”

Block Formatting Context，块级格式化上下文，一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

  • 触发

    • 根元素HTML
    • float值不是none
    • overflow值不为visible
    • display的值为inline-block、table-cell、table-caption
    • position的值为absolute或fixed

  • 特性

    • 属于同一个BFC的两个相邻块级子元素（元素都要在文档流中）的上下margin会发生重叠—— 分为两个BFC就可以消除这种margin 重叠。**解决：**触发其中一个div的BFC，使得两个div不在同一个 BFC内，这样就可以阻止这两个div的margin重叠。

    • 包含浮动元素（元素内容比较多的时候，内容会环绕着浮动的元素）

IFC

  • 定义：内联格式化上下文
  • 特征
    1. 框会从包含块的顶部开始，一个接着一个的水平摆放
    2. 摆放这些框时，它们在水平方向的内外边距加边框所占用的空间都会被考虑，在垂直方向上，这些框可能会以不同方式来对其，
    3. 同一个IFC下的元素高度会不同
    4. 其内部不能包含块状元素
  • 应用
    1. 水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
    2. 垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

GFC

GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。

GFC将改变传统的布局模式，他将让布局从一维布局变成了二维布局。简单的说，有了GFC之后，布局不再局限于单个维度了。这个时候你要实现类似九宫格，拼图之类的布局效果显得格外的容易。

FFC

FFC(Flex Formatting Contexts)直译为"自适应格式化上下文"，display值为flex或者inline-flex的元素将会生成自适应容器（flex container）。

Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。

伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。

FFC与BFC的区别

FFC与BFC有点儿类似，但仍有以下几点区别：

  • Flexbox 不支持 ::first-line 和 ::first-letter 这两种伪元素
  • vertical-align 对 Flexbox 中的子元素 是没有效果的
  • float 和 clear 属性对 Flexbox 中的子元素是没有效果的，也不会使子元素脱离文档流(但是对Flexbox 是有效果的！)
  • 多栏布局（column-*） 在 Flexbox 中也是失效的，就是说我们不能使用多栏布局在Flexbox 排列其下的子元素
  • Flexbox 下的子元素不会继承父级容器的宽

z-index（关于文档流和定位）

  • 定义：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

  • demo1z-index有三种值，分别是auto自动，整数（正整数、0、负整数），inherit（继承）；z-index只能在定位元素上有效（如position:relative）；

  • 如何工作（层叠次序）

    1. 背景和边框-》
    2. 层叠上下文中有着z-index为负值的子元素=》
    3. 文档流中非行内非定位子元素-》
    4. 非定位浮动元素-》
    5. 文档流中行内级别非定位子元素-》
    6. 定位元素，z-index:0,这些元素形成新的层叠上下文
    7. 定位元素，z-index 层叠上下文中的最高等级

  • 创建层叠上下文的方式

    1. html
    2. opcity!=1
    3. transform!=none

文档流

定位

html5面试题

  • 拖拽

  • 什么是标签语义化

    合理的标签干合适的事情，每一种标签都有它固定的意思，例如p这个标签，我们就知道他是一个段落，h1…h6他是一个标题，a标签是一个链接，heaer，footer我们他是网页的头和尾

  • 都有哪些标签，都是啥意思

    • 行内标签：

      特点：

      1.和其他元素都在一行；

      2.元素的高度，宽度，以及底部和顶部的边距不可设置；

      3.元素的宽度就是它包含的文字或者图片的宽度不可改变

    • 块状标签：

      …

      特点：

      1.每个块状元素都是从新一行开始；

      2.元素的高宽，行高以及底部和底部的边距都可以设置

      3.元素宽度在不设置的情况下，等于父元素content 的宽度

    • 行内块状标签：

      特点：

      1.和其他元素在一行上；

      2.元素的高宽，行高，以及顶部和底部的边距都可以设置；

  • 三种标签如何转化

    display:block/inline/inline-block

谈谈自己对HTML5的理解

css的渲染规则（从右向左）

HTML页面生命周期

  • DOMContentLoaded浏览器已经加载了HTML，dom 树已经构建完成，但是像样式表等外部资源可能没有下载完成

    dom加载完成，所以js可以访问所有dom节点，初始化界面

    当浏览器在解析HTML页面时遇到了 ... 标签，将无法继续构建DOM树（译注：UI渲染线程与JS引擎是互斥的，当JS引擎执行时UI线程会被挂起），必须立即执行脚本。外部脚本（带src的）的加载和解析也会暂停DOM树构建，所以 DOMContentLoaded 也会等待外部脚本。所以 DOMContentLoaded 有可能在所有脚本执行完毕后触发。，这就是为什么不要再body元素中加入脚本的原因

    带有async和defer的脚本的下载是和HTML的下载与解析是异步的，但是js的执行一定是和UI线程是互斥的，像下面这张图所示，async在下载完毕后的执行会阻塞HTML的解析）

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eEV6mEeW-1600598414147)(E:\typora.md文件\前端面试题\async_defer.png)]

  • load浏览器已经加载了所有资源（图像，样式表等）

    附加资源加载完毕，可以在此事件触发时获取图像的大小（如果没有被在html/css中指定）

  • beforeUnload/unload当用户离开页面的时候触发

    可以询问用户是否保存了更改以及是否确定要离开页面

    asyncdefer
    顺序带有async的脚本是优先执行先加载完的脚本，他们在页面中的顺序并不影响他们执行的顺序。所以async用在那些完全不依赖其他脚本的脚本上。带有defer的脚本按照他们在页面中出现的顺序依次执行。
    DOMContentLoaded带有async的脚本也许会在页面没有完全下载完之前就加载，这种情况会在脚本很小或本缓存，并且页面很大的情况下发生。带有defer的脚本会在页面加载和解析完毕后执行，刚好在DOMContentLoaded之前执行。

DOMContentLoaded与样式表

不过仍然有一个陷阱：如果在样式后面有一个内联脚本，那么脚本必须等待样式先加载完。

（译注：简单来说，JS 因为有可能会去获取 DOM 的样式，所以 JS 会等待样式表加载完毕，而 JS 是阻塞 DOM 的解析的，所以在有外部样式表的时候，JS 会一直阻塞到外部样式表下载完毕）

<link type="text/css" rel="stylesheet" href="style.css">
<script>
  // the script doesn't not execute until the stylesheet is loaded
  // 脚本直到样式表加载完毕后才会执行。
  alert(getComputedStyle(document.body).marginTop);
</script>
123456

发生这种事的原因是脚本也许会像上面的例子中所示，去得到一些元素的坐标或者基于样式的属性。所以他们自然要等到样式加载完毕才可以执行。

DOMContentLoaded需要等待脚本的执行，脚本又需要等待样式的加载。

浏览器自动补全

dom事件模式

dom0与DOM2级事件模式的区别

dom事件模型dom0dom2
语法document.body.onclick = function() {}document.body.addEventListener(‘click’, function() {})
运行机制给元素的某个操作属性绑定方法，有效事件只有一个基于事件池机制，每增加一个方法，都会有效的绑定事件
可以给一些特殊的事件类型绑定事件，例如DOMContentLoaded(dom结构加载结束）（load,dom,图片，文件加载完才会触发）transitionend(transitionend 事件在 CSS 完成过渡后触发。)

dom2事件池机制

基于addEventListener/attachEvent(IE6-8)向事件池追加方法、新版本浏览器会根据元素和事件类型对新增方法做重复校验，但是IE6-8不可以

removeEventListener/dttachEvent删除事件 不能移除匿名函数

当事件行为触发，会把事件池中的方法按照增加的顺序执行，但IE6-8中执行的顺序是不固定的（乱序执行） 捕获 目标 冒泡

                                      | dom2                                                         |

| ----------- | ---------------------------------------------- | ------------------------------------------------------------ |
| 语法 | document.body.onclick = function() {} | document.body.addEventListener(‘click’, function() {}) |
| 运行机制 | 给元素的某个操作属性绑定方法，有效事件只有一个 | 基于事件池机制，每增加一个方法，都会有效的绑定事件 |
| | | 可以给一些特殊的事件类型绑定事件，例如DOMContentLoaded(dom结构加载结束）（load,dom,图片，文件加载完才会触发）transitionend(transitionend 事件在 CSS 完成过渡后触发。) |

dom2事件池机制

基于addEventListener/attachEvent(IE6-8)向事件池追加方法、新版本浏览器会根据元素和事件类型对新增方法做重复校验，但是IE6-8不可以

removeEventListener/dttachEvent删除事件 不能移除匿名函数

当事件行为触发，会把事件池中的方法按照增加的顺序执行，但IE6-8中执行的顺序是不固定的（乱序执行） 捕获 目标 冒泡

阿源不秃，天理难容
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5+css3+js登录页面
04-10
html5+css3+js登录页面模板，适用于网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
html中缩放级别为1,更改浏览器缩放级别
weixin_39924481的博客
06-24 1799
如果这对你有用的话。这工作在FF，IE8+和铬。其他部分适用于非Firefox浏览器。尽管这会给您带来缩放效果，但它实际上不会在浏览器级别上修改缩放值。varcurrFFZoom=1;varcurrIEZoom=100;$('#plusBtn').on('click',function(){if($.browser.mozilla){varstep=0.02;currFFZoo...
缩放级别为1HTML,OpenLayers中地图缩放级别的设置方法
weixin_33600376的博客
06-17 779
来源于：http://www.cnblogs.com/sailheart/archive/2011/03/15/1984519.html一、概述在OpenLayers中，地图必须具有一个缩放级别的范围，缩放级别可以用比例尺(scale)或者分辨率(resolution)表示。比例尺——屏幕上1米代表多少地图坐标单位；分辨率——屏幕上一个像素代表多少地图坐标单位。两者的转换关系是：scale = r...
CSS中的各种FC
weixin_30711917的博客
10-30 89
什么是FC？ Formatting Context，格式化上下文，指页面中一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context，块级格式化上下文，一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。 BFC的约束规则 内部的BOX会在垂直方向上一个接一个...
制作移动端静态网页（房屋装饰网站）
m0_57823924的博客
04-28 2503
1.创建house.html 效果图如下： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- width=device-width 当前窗口宽度等于100% initial-scale=1 缩放级别为1--> <!-- 步骤一：适配移动端视口 --> <meta name="viewport" content="..
html每次加缩放比例为1,CSS让DIV按照背景图片的比例缩放，并让背景图片填充整个元素（转）...
weixin_35997546的博客
06-26 307
目的是：通过background的一系列属性，让DIV按照背景图片的比例缩放，并让背景图片填充整个DIV首先我们需要让背景图片在指定的DIV中全部填充显示之前看有用类似 background-attachment: 的fix来实现背景图片的填充，但是，貌似是不能按照当前的DIV大小去填充。我的情况是，宽度按照整个屏幕的百分比来调整，但是高度，又不能通过整个屏幕的高度百分比来调整，而也想通过宽度的百...
HTML5+CSS3
09-17
该文档是HTML5+CSS3的总结笔记，把工作中的常用的知识点个记录下来，仅供学习和工作的参考资料，不做商业用途，版权归本人所有，侵权必究！
html5+css3+JS代码
05-22
在本篇文章中，我们将深入探讨这三种技术的详细知识点，并结合《精通html5+css3+JavaScript页面设计》这本书中的实践代码进行说明。 首先，HTML5（超文本标记语言第五版）是描述网页内容的标准语言。它引入了许多新...
html5+css3笔记资料
02-14
html5+css3笔记资料
HTML5+CSS3期末大作业——城市简介源码
05-05
在这个“HTML5+CSS3期末大作业——城市简介源码”项目中，学生或开发者将有机会实践这两门技术，构建一个介绍特定城市的网页。 HTML5作为最新的超文本标记语言版本，引入了许多新特性，旨在提高网页的交互性和可用...
chiptunes-flp:红白机风格 Chiptune FL Studio 工程
05-11
关于本项目 Famicom 风格 Chiptune FL Studio 工程 本项目用于存放自 2012 年起个人使用 FL Studio 11.1 制作的 Chiptune 音乐 (Famicom 风格, 模拟任天堂 Famicom 2A03 APU 音色及历史上发行的游戏卡中用于增强音频的扩展芯片的音色). 这些作品的编曲及旋律部分均非原创, 每个作品对应的工程文件均已尽最大努力搜集原作者信息, 但仍有少数作品原作者信息暂缺或有误. 如有可靠的发现请在 Issues 中提交. 访客可随意下载本项目中的工程文件用于学习 FL Studio. 由于项目的特殊性, 且为确保唯一, 请勿以任何方式复制或克隆 (包括 Fork) 本项目. 请注意: 开源并不代表放弃这些文档的所有权, 数字签名是唯一保障. 工程为 zip 格式文件, 打开方式及 FL Studio 版本要求见工程列表顶部. 本项
base(1).apk
05-29
京东贴蛋糕小助手
nes：Javascript NES模拟器
02-05
OnaNES（哦，没有其他NES仿真器） 在Javascript中！ 这是我对NES控制台的实现，它同时模拟了原始CPU和PPU。 这个git repo没有前端，因为我希望它尽可能裸露。 我开始使用React.js实现UI，您可以在找到源代码。 入门 正在安装 纱 yarn install nes-emulator NPM npm install nes-emulator 本地 克隆仓库 yarn install yarn run build 如何使用 该库使用观察者模式来表示事件（帧准备就绪，重置，暂停...）。 这是如何使用此库的示例。 import { Console } f
缩放级别为1HTML,如何在所有现代浏览器中检测页面缩放级别？
weixin_29589357的博客
06-17 617
现在比这个问题第一次被问到的时候更混乱了。通过阅读我能找到的所有回复和博客文章，这里有一个总结。我还设立了此页面测试所有这些测量缩放级别的方法。.IE8:screen.deviceXDPI / screen.logicalXDPI(或者，对于相对于默认缩放的缩放级别，screen.systemXDPI / screen.logicalXDPI)IE7:var body = document.b...
CSS——FC（BFC/IFC/FFC/GFC）超详细版+原理案例分析
Erya Programming learning
11-07 2363
文章目录一、Box二、FC（Formatting Context）1. BFC1.1 BFC的形成条件 一、Box Box 是 CSS 布局的对象和基本单位， 一个页面是由很多个 Box 组成的。 元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。 让我们看看有哪些盒子： 1、block-level box:display ：属性为 block, li
CSS FC布局指南
weixin_34068198的博客
05-23 200
1. 布局 1.1 什么是FC FC（Formatting Context）格式化上下文，其实指的是一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素之间的关系和相互作用。 FC类型 描述 BFC 块级格式化上下文( Block formatting contexts ) IFC 行内格式化上下文( Inline formatting contexts ) ...
html页面用户缩放
a787188834的专栏
12-07 1940
html本身有一个缩放的方法,可以在<head>里加一个节点： Html代码 <metaname="viewport"content="initial-scale=1.0,minimum-scale=0.1,maximum-scale=2.0,user-scalable=yes\"> content里规定了这个界面: 最小缩放比例是0.1：mi...
html获取滑轮位置,百度地图实时侦听鼠标滚轮获取地图zoom缩放级别
weixin_39672194的博客
06-04 404
百度地图api提供的获取地图缩放级别的方法比较单一，就一个getZoom()方法，这个方法能够获取一次地图缩放级别，后面随着鼠标滚轮的滚动，地图缩放级别被改变，就无法再获取地图缩放级别了，具体api参考：http://developer.baidu.com/map/reference/index.php?title=Class:%E6%9E%81%E9%80%9F%E7%89%88%E6%A0%B...
html允许缩小级别代码,使用CSS,标题标记或JavaScript强制缩放级别/ DPI级别
weixin_34984235的博客
06-09 1063
我们这里有一个奇怪的问题.我们有一个网站,几年来工作得很好.几个月前,Firefox开始根据操作系统上的用户DPI设置来扩展页面.问题是,默认情况下,在Windows 7中DPI比例设置为125％(在我们国家),并且每个使用Firefox的访问者都会看到缩放的页面.但是,Internet Explorer和Safari现在也在做同样的事情,我猜Chrome也会如此.棘手的部分是：当我打开页面时,我...
html5+css3ppt课件.ppt
最新发布
11-16
html5+css3ppt课件.ppt

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值