html + css 面试

分类：Flex作者：编程之家用户

html + css脑图

对WEB标准以及W3C的理解与认识

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索机率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

  1. 为什么将css引入放头部，js引入放后面？
    浏览器从上到下依次解析html文档。将css文件放到头部，css文件可以先加载。避免先加载body内容，导致页面一开始样式错乱，然后闪烁。
    将javascript文件放到底部是因为：若将javascript文件放到head里面，就意味着必须等到所有的javascript代码都被下载、解析和执行完成之后才开始呈现页面内容。这样就会造成呈现页面时出现明显的延迟，窗口一片空白。

  2. style 标签写在 body 后和 body 前有什么区别？
    页面加载自上而下，当然是需要先加载样式。
    写在body标签后，由于浏览器以逐行方式对HTML文档进行解析，当解析写在尾部的样式表会导致浏览器停止之前的渲染，等待加载且解析样式表后才重新进行渲染，这样可能导致留白现象（所以最好将style标签写在body前）。

"流"概念

‘流’是css的一种基本定位和布局机制，HTML默认的布局机制就是’流布局’,是一种自上而下（例如块级元素div），从左到右排列的布局方式。

盒模型

盒模型脑图

  1. 两种类型 & 区别
    IE盒模型（怪异盒模型）:
    width = border + padding + content;
    一个块的宽度 = width + margin。

    W3C盒模型（标准盒模型）:
    width = content；
    一个块的宽度 = width + padding + border + margin。

  2. 切换方式

    box-sizing: border-box; // IE盒模型标准
box-sizing: content-box; // W3C盒模型标准

  3. margin | padding 分别适用于什么场合
    margin：在border外侧需要留空
    padding：在border内侧需要留空

    1. 浏览器兼容性问题（了解）
      在IE5.X,IE6中，为float的盒子指定margin时，左侧margin可能会变成两倍的宽度，通过改用padding或者指定盒子为display:inline就可以解决。

HTML

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

HTML脑图

文档解析类型

  1. HTML存在两种文档类型
    怪异模型（默认）：浏览器按照自己的方式解析
    标准模式：按照W3C标准

  2. 如何避免浏览器的怪异模式?
    通过声明文档的解析类型 <!DOCTYPE html>

HTML语义化

  1. Html语义化可以使页面更加结构化，提供了一系列具有结构意义的标签，例如header,footer等，让结构更加清晰，有利于浏览器的解析。
  2. 即使在没有css样式的情况下，页面也会以一种文档结构来显示，更加易于阅读。
  3. 由于搜索引擎的爬虫也会依赖于Html标记来确定上下文和各个关键字的权重，因此有利于SEO。
  4. Html语义化更便于阅读，维护和理解。

非替换元素&替换元素

可替换元素：其内容是通过标签类型以及其属性值来决定的。例如：iframe、video、img。
非可替换元素：其内容由其标签包裹内容决定。例如div、p、span、ul、li、ol。

块级元素和行内元素

行内元素：

  1. 左右两边都可以有元素，和其他元素在一行上。
  2. 不可以设置宽高，其宽度就是内容的宽度。对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，但是padding上下对其他元素无影响。
  3. 常见有：span、a、img(行内替换元素)

块级元素：

  1. 默认独自占据一行，左右两边都没有元素。
  2. 可以设置宽高，在不设置宽度的情况下，默认为父元素的宽度一致。
  3. 常见有：h1~h6、p、div

HTML5

Html5新特性

  1. 语义化标签： header、footer、article、aside、caption、nav等
  2. 画布canvas
  3. SVG绘图
  4. 视频video和音频audio
  5. input增强型表单控件：calendar,date,time,email,url,search
  6. 本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后自动删除。
  7. WebWorker、WebSocket

Html5移除的元素(了解)

  1. 纯表现的元素：basefont,big,center,font,s,strike,tt,u;
  2. 对可用性产生负面影响的元素：frame,frameset,noframes;

Html5哪些标签可以优化SEO

  1. title
  2. Meta 详情
    Meta提供给页面一些元信息（名称/键值），它有利于SEO。
    属性：
属性 描述
name 用于描述网站
http-equiv 没有name时，可以采用这个属性的值（content-type,expires(期限),refresh,set-cookie,content属性关联到http请求头）
content 名称/值 中的值，可以是任意有效字符串
scheme 用于指定要用来翻译属性值的方案
  1. 语义化标签： header、footer、article、aside、caption、nav等。

iframe

iframe 是一种内联框架，也是一种很常见的网页嵌入方式。
优点：

  1. iframe能够原封不动的把嵌入的网页展示出来
  2. 如果有多个网页引用iframe,只需要修改iframe的内容
  3. 如果遇到加载缓慢的第三方内容如图标和广告，可以由iframe来解决

缺点：

  1. 会产生很多页面，不容易管理，同时造成onload阻塞
  2. iframe框架结构有时让人感到迷惑，用户体验感差
  3. 代码结构变得复杂，影响搜索引擎
  4. iframe框架页面会增加服务器的http请求

Html 提供哪些 Api

  1. 全屏滚动 Fullscreen API
  2. 页面可见性 Pge Visibility API
  3. 访问摄像头和麦克风 getUserMedia API
  4. 电池 Battery API
  5. 预加载网页内容 Link prefetching

CSS

CSS脑图

CSS引入方式

Css引入方式有4种 内联、内嵌、外链、导入。

通过link和@import引入有什么区别？

  1. 外链link 除了可以加载css之外,还可以定义rss、rel等属性，没有兼容性问题，支持使用javascript改变样式。
  2. @import 是css提供的，只能用于加载css，不支持通过javascript修改样式。
  3. 页面被加载的时候，link会被同时加载，而@import则需等到页面加载完后再加载，可能出现无样式网页。

CSS选择器

  • CSS选择器有哪些? 11个

id选择器、类选择器、标签选择器、相邻选择器(h1+p)、子选择器(ul>li)、后代选择器(li a)、通配符选择器(*)、属性选择器(a[rel = "XXX"])、伪类选择器、伪元素选择器、分组选择器

  • 伪类选择器

    1. CSS3新增伪类
      x:first-of-type：选择属于其父元素的首个 <x> 元素的每个 <x> 元素
      x:last-of-type：选择属于其父元素的最后一个 <x> 元素的每个 <x> 元素
      x:only-of-type：选择属于其父元素唯一的 <x> 元素的每个 <x> 元素
      x:only-child：选择属于其父元素的唯一子元素的每个 <x> 元素
      x:nth-child(1)：选择属于其父元素的第一个子元素的每个 <x> 元素
      等等

    2. Css伪类与伪元素的区别
      伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性。
      与伪类针对特殊状态的元素不同的是，伪元素对元素中的特定内容进行操作。但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

    3. 用户操作伪类
      推荐书写样式顺序：link、visited、focus、hover、active

  • 伪元素选择器

    :first-line、:first-letter、:before、:after、:enabled、:disabled、:checked

    1. Css3新增伪元素
      :enabled：每个已启用的元素（多用于表单元素 例如input）
      :disabled：控制表单控件的禁用状态
      :checked：单选框或复选框被选中
      :before：在元素之前添加内容（可用来做清除浮动）
      :after：在元素之后添加内容

  • 可继承 & 不可继承 的样式

  1. 可继承的样式：font-size, font-family, color...
  2. 不可继承的样式：border, padding, margin, width, height...

  • Css选择器优先级 & 权重

  1. 优先级：!important > 内联style > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器
  2. 权重：二进制规则计算，各选择器权值总览
    内联style，权值：1000
    ID选择器，权值：0100
    类选择器，权值：0010
    标签选择器 & 伪元素选择器，权值：0001
    通配符、子选择器、相邻选择器等，权值：0000
    继承样式没有权值
    如果层级相同，则向后比较，层级不同时，层级高的权重大

  • 浏览器如何解析Css选择器？

css选择器的解析是从右向左解析，为了避免对所有元素进行解析

CSS3新特性 10个

  1. 各种css选择器
    1）E:last-child 匹配父元素的最后一个子元素E。
    2）E:nth-child(n) 匹配父元素的第n个子元素E。
    3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

  2. 圆角border-radius

  3. 多列布局 详情

  4. 文本效果
    @Font-face 特性

  5. 线性渐变
    linear-gradient(left, red, blue)

  6. transform 样式
    translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
    rotate()：元素顺时针旋转给定的角度。
    scale()：元素的尺寸会增加或减少。
    skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
    matrix()：把所有 2D 转换方法组合在一起

  7. 过渡 transition: property duration timing-function delay;
    property：规定设置过渡效果的 CSS 属性的名称。
    duration：规定完成过渡效果需要多少秒或毫秒。
    timing-function：规定速度效果的速度曲线。
    delay：定义过渡效果何时开始。

  8. 动画 animation

  9. flex布局

    原文地址：https://blog.csdn.net/qq_39910307/article/details/105778175

    版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

css display:flex 属性
一：display:flex布局display:flex是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵
display:flex 布局详解2
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何垂直居中对齐，方法有很多，但是在学习了flex布局之后，垂直居中更加容易实现HTML代码：1<divclass="demo">2<divclass="inner">3<p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p>4</div
移动端开发
移动端开发知识点pc端软件和移动端apppc端软件是什么，有哪些应用。常见的例子，比如360杀毒，photoShop，VisualStudioCode等等移动端app是什么，有哪些应用。常见的例子，比如手机微信，手机qq，手机浏览器，美颜相机等等PC端与移动端的区别第一：PC考虑的是浏览器的兼容性，移动端考
grid布局笔记
最近挺忙的，准备考试，还有其他的事，没时间研究东西，快周末了，难得学点东西，grid是之前看到的，很好奇，讲的二维的布局，看起来很方便，应该很适合移动端布局，所以今天抽时间学一学，这个当是笔记了。参考的是阮老师的博客。阮一峰：CSSGrid网格布局教程http://www.ruanyifeng.com/blog/2019/03/g
盒模型
display:flex;把容器设置为弹性盒模型（设置为弹性盒模型之后，浮动，定位将不会有效果）给父元素设置的属性：（1）display：flex---把容器设置为弹性盒模型。（2）flex-direction---设置弹性盒模型主轴方向默认情况下主
javascript – Flex禁用Safari键盘快捷键
我在网页上运行了一个Flex应用程序,我想使用Command←组合键在应用程序中触发某些操作.这在大多数浏览器上都很好,但在Safari上,浏览器拦截此键盘事件并导致浏览器“返回”事件.有没有办法,通过Flex或通过页面上的其他地方的JavaScript,我可以告诉Safari不要这样做？解决方法:简短的
flex布局，flex-item
flex布局，flex-item1<template>2<viewclass="container">3<viewclass="greentxt">4A5</view>6<viewclass="redtxt">7B8<
c# – 大屏幕多点触控交互式应用程序设计
我应该设计一个大型多点触控屏幕的应用程序.从大到大,我的意思是新闻广播员(大约55英寸及以上).该应用程序是一个交互式地图.我的问题是：开发应用程序的技术.我的第一个想法是在AdobeFlex中制作,但是HTML5也是如此……必须有一些非常棒的Java库用于触摸交互,但是在Windows平台上
左图有文字的一些CSS样式
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&quo
弹性盒模型：flex多行多列两端对齐，列不满左对齐
【1】需求：  【2】解决方案：最近遇到布局上要求item两端对齐，且最后一行在列不满的情况下要求左对齐，使用flex的justify-content:space-between;实现时发现最后一行不能左对齐，而是两端对齐方式。 不是项目上想要的效果#网上查了一些资料，有两种方法可以实现效果：**1.
AS3无法从Java发送的套接字解​​码AMF3对象
我有一个java套接字服务器,它在连接时将Animal对象发送到Flash客户端.对象发送方式如下：Amf3Outputamf3Output=newAmf3Output(SerializationContext.getSerializationContext());amf3Output.setOutputStream(userSocket.getOutputStream());amf3Output.writeObject(animal)
java – 在JBoss上使用Flex / BlazeDS的Client.Error.MessageSend问题
我正在开发一个Flex3.4应用程序,它通过最新版本的BlazeDS与JBoss-4.2.2服务器上运行的JavaEE后端进行交互.当我在Tomcat上从FlashBuilder4beta2运行Flex应用程序时,一切都很好,Flex应用程序能够进行所需的远程调用.但我的生产环境是在JBoss上,当我将应用程序移动到JBoss时(更
java – NetConnection.Call.Failed偶尔在Flex3 / Tomcat / BlazeDS / Spring中发生
我有一个非常大的问题.我使用Flex3/Tomcat/BlazeDS/Spring编写了一个大型应用程序,在本地开发时运行良好,当我部署到公共开发环境时很好,但是当部署到我们的测试环境时经常失败.当远程处理请求花费大量时间(超过20秒)时,故障似乎最常发生.在我的开发服务器上,错误发生,但仅
HTML5的Day1
弹性和布局display:flex在ie6,ie7不兼容状态，一般在pc用的比较少,在手机端所有的浏览器都是支持的控制子元素在父元素里面的位置关系display:flex是给父元素加的文档流是按照主轴排列，只要父元素加了flex,那么里面的子元素全部可以直接添加宽高主轴的方向
FLEX源码分析
FLEX2.0源码分析（一）https://www.jianshu.com/p/8bc4c5f4b19fFLEX源码分析二（网络监测swizzle）https://www.jianshu.com/p/ffb95f2cbda6FLEX源码分析三（网络监测记录FLEXNetworkRecorder）https://www.jianshu.com/p/66267dc922c5FLEX源码分析四（Systemlog）https://www.jianshu.
页面伸缩布局实例
1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title><itle>6<style>7*{8margin:0;9padding:0;10
弹性盒子圣杯布局
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&qu
flex与inline-flex
flex：将对象作为弹性伸缩盒显示inline-flex：将对象作为内联块级弹性伸缩盒显示两者都是使子元素们弹性布局，但是如果是flex，父元素的尺寸不由子元素尺寸动态调整，不设置时默认是100%，而inline-flex则会使父元素尺寸跟随子元素们的尺寸动态调整。
css实现手机端导航栏左右滑动
<html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>test<itle><stylemedia="screen">.tab-head{list-style-type:no
php – 查找位于指定距离之间的用户(使用用户的邮政编码)
有没有办法使用邮政编码找到径向距离？我的任务是搜索居住在指定距离内的所有用户.我知道用户的zipcodes.例如,距离当前位置25英里的用户.我有其他搜索类别,我正在使用mysql查询.我无法解决距离问题.我的后端是在PHP中Flex的前端和前端.对我来说最好的选择就是www.zip-codes.com
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot