首页 前端知识 Html5、Css3

Html5、Css3

2025-03-12 12:03:02 前端知识 前端哥 452 619 我要收藏

一、Html5、Css3 篇


1、HTML5 新增那些标签?

语义化标签
<header>    定义文档的头部区域
<nav>    定义导航链接
<article>    内容标签
<section>    定义文档某个区域
<aside>    侧边栏标签
<footer>    定义了文档的尾部区域
<figure>    规定独立的流内容(图像、图表、照片、代码等)
<figcaption>    定义 <figure> 元素的标题
增强表单功能 (类型和属性)
音频视频:<Audio> 、<video>
画布:<Canvas>
SVG 绘图
地理位置
拖拽 APL
WebStorage (本地存储:LocalStorage / SessionStorage )

2、HTML、XHTML、XML 有什么区别?


XML: XML 是可扩展标记语言,主要是用来存储和传输数据,而非显示数据,可以用来标记数据,定义数据类型,允许用户对自己的标记语言进行定义。
HTML:HTML 是超文本标记语言,主要是用来描述网页的一种标记语言,通过标记标签来描述网页。
XHTML:XHTML 是可扩展超文本标记语言,XHTML 基于 XML 和 HTML 而来,也是用来描述网页的标记语言,是更严格的 HTML 版本。例如:XHTML 元素必须被正确地嵌套,标签名必须用小写字母, 文档必须拥有根元素,对于图片需添加 alt 属性等。XHTML 和 HTML 4.01 几乎是相同的,XHTML 是 W3C 标准。
XML和HTML区别:XML 相比 HTML 语法要求严格。HTML 是预定义的,XML 标签是免费的、自定义的、可扩展的。HTML 的设计目的是显示数据并集中于数据外观,XML 的设计目的是描述数据、存放数据并集中于数据的内容。XML 是一种跨平台的,数据处理和传输的工具。总的来说,XML用来传输数据,而 HTML 和 XHTML 用来描述网页,XHTML 比 HTML 更为严格。 

3、 XML和JSON的区别?


JSON:JSON 是一种轻量级的数据交换格式,它基于 JavaScript 的一个子集,简单的说 JSON 就是一串字符串用于不同平台的数据交换。
XML:XML 是可扩展标记语言,是标准通用标记语言 (SGML) 的子集,XML 主要是用来存储和传输数据,而非显示数据,可以用来标记数据、定义数据类型,允许用户对自己的标记语言进行定义。
JSON和XML区别:JSON 数据的体积小,传递速度更快,与 JavaScript 数据交互更加方便,更容易解析处理。XML 对数据的描述性比较好。JSON 支持数组,XML 不支持数组。JSON 不支持命名空间,XML 支持命名空间。JSON 容易阅读,XML 难以阅读和解释。JSON 不使用结束标记,XML 有开始和结束标签。JSON 的安全性较低,不支持注释,仅支持 UTF-8 编码。XML 比 JSON 更安全,支持注释,支持各种编码。

4、是否了解W3C的规范?


w3c 标准指的是万维网联盟标准,万维网联盟标准指的不是一个标准,而是一系列标准的集合。web 可以简单分为结构、表现、行为三部分,三部分独立开来使其模块化,w3c 是对 web 做出规范,使代码更加严谨,做出来的网页更加容易使用和维护。
结构标准主要包括 XHTML 和 XML ,比如像标签闭合、标签元素和属性名字小写、标签不乱嵌套、属性必须有属性值、属性值必须用引号括起来、特殊符号用编码表示、定义语言编码等。标签规范可以提高搜索引擎对页面的抓取效率,对 SEO (搜索引擎优化) 很有帮助,越规范的网站搜索排名越靠前。
表现标准主要包括 CSS,行为标准主要包括对象模型(像 W3C DOM,ECMAScript),比如说尽量使用外链的 css 和 js 脚本,提高页面的渲染效率,尽量少使用行内样式,类名要做到见名知意。遵循 w3c 标准可以让我们的页面,我们的程序能够支持所有浏览器,能够满足尽可能多的用户。
W3C 标准的体现,也就是说是开发者在开发过程中怎么去准守 W3C 标准,其实这里面很多规范是为了 XHTML 的,jQurry 不符合 W3C 标准。

                      

5、常用的块级元素和行内元素有哪一些? 

  • 块级元素:div、p、h1~h6、ol、ul、li、table、form。
  • 行内标签:a、span、img、input、lable、button。
  • 行内块元素:img、input、button。

6、DOCTYPE(⽂档类型) 的作⽤

  Doctype是HTML5的文档声明,通过它可以告诉浏览器,使用哪一个HTML版本标准解析文档。在浏览器发展的过程中,HTML出现过很多版本,不同的版本之间格式书写上略有差异。如果没有事先告诉浏览器,那么浏览器就不知道文档解析标准是什么?此时,大部分浏览器将开启最大兼容模式来解析网页,我们一般称为怪异模式,这不仅会降低解析效率,而且会在解析过程中产生一些难以预知的bug,所以文档声明是必须的。

浏览器渲染页面的两种模式(可通过document.compatMode获取):

CSS1Compat:标准模式(Strick mode),默认模式,浏览器使用W3C的标准解析渲染页面。在标准模式中,浏览器以其支持的最高标准呈现页面。
BackCompat:怪异模式(混杂模式)(Quick mode),浏览器使用自己的怪异模式解析渲染页面。在怪异模式中,页面以一种比较宽松的向后兼容的方式显示。

7、行内元素和块级元素的区别?


块级元素:默认换行,独占一行,可设置宽高 (宽度是父容器的100%),块级元素可以嵌套任意元素,块级文字不能放入其他块级元素。
行内元素:默认不换行,设置宽高无效 (默认宽度是本身内容宽度),不能包含块级元素,只能包含文本或者其它行内元素,设置 margin,padding 上下无效。
行内块元素:综合块级元素与行内元素的特性,可设宽高(默认是内容宽高),也可以设置内外边距。

8、css盒子模型有几种类型?它们区别是什么 


根据盒子大小的计算方式不同,css 盒子模型分成了两种类型,分别是 W3C 标准盒子模型和怪异盒子模型也叫 IE 盒子模型。
标准盒子模型:设置的宽度 = 内容的宽度,盒子的宽度 = 内容的宽度 + padding*2 + margin*2 + border*2。
IE盒子模型:设置的宽度 = 盒子的宽度,内容的宽度 = 盒子的宽度 - padding*2 - margin*2 - border*2。
默认情况下都是标准盒子模型,设置 IE 盒子模型:box-sizing:border-box,设置标准模型:box-sizing:content-box 

9、盒子居中的几种方式

1. 使用 margin: auto

适用于块级元素,前提是元素有明确的宽度。

.container {
  width: 200px;
  height: 200px;
  margin: auto;
}

2. 使用 Flexbox

Flexbox 是一种非常强大的布局方式,可以轻松实现水平和垂直居中。

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 容器高度 */
}

3. 使用 Grid

CSS Grid 也是一种强大的布局方式,可以实现居中。

.container {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
  height: 100vh; /* 容器高度 */
}

4. 使用 position 和 transform

适用于不知道元素宽高的情况。

.container {
  position: relative;
  height: 100vh;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

10、css3的新特性有哪些?


选择器:层级选择器,属性选择器,状态伪类选择器,结构伪类选择器,伪元素选择器
文本效果:文本阴影 ,文本自动换行,文本溢出,(单词拆分,文本拆分)
边框:圆角边框 border-radius,边框阴影 box-shadow,边框图片 border-image
背景:渐变背景,多重背景 (设定背景图像的尺寸,指定背景图像的位置区域,背景的绘制)
透明度:opacity ( 取值0-1,通常用于做元素的遮罩效果)
高斯模糊:filter
渐变:background: linear-gradient (线性渐变,径向渐变 ,文字渐变)
过渡:transition
2D转换 / 3D转换: transform
动画:Animation (@keyframes 动画帧)
媒体查询:@media
多列布局 (兼容性不好,还不够成熟)
弹性布局 (flex)
网格布局

11、css选择器有哪些?


基本选择器:

标签选择器    ( div { } )
id 选择器       ( id=”a”, #a { } )
类选择器 class (class=”b”, .b { } )
通配符选择器   ( * { } )
 CSS3新增选择器: 

层级选择器:
后代选择器    ul li { } : 选择子类元素,包括间接子类
子代选择器    ul>li { } :选择子类元素,只包括直接子类
相邻兄弟选择器    div+p { } : 选择紧跟在 div 元素后面的 p 元素
通用兄弟选择器    div~p { } : 选择 div 元素后面的所有 p 元素
共享选择器    div1,div2 { } :选择所有元素
状态伪类选择器
结构伪类选择器
表单伪类选择器
伪元素选择器
属性选择器

12、什么是浮动?


设置浮动的图片,可以实现文字环绕图片。设置了浮动的块级元素可以排列在同一行。设置了浮动的行内元素可以设置宽高。浮动造成的影响:使盒子脱离文档流,如果父级盒子没有设置高度,需要被子盒子撑开,那么这时候父级盒子的高度就塌陷了,同时也会造成后面的盒子布局受到影响。

13、清除浮动有哪些方法? 


清除浮动,主要是为了解决父级元素因为子级浮动引起的内部高度为 0 的问题

父级div定义height (只适合高度固定的布局)
结尾处加空div标签然后添加一个clear:both样式 (浮动多的话要加很多个div)
父级 div 定义 overflow:hidden 超出盒子部分会被隐藏 (不推荐)
父级div定义伪类:(推荐)
 clearfix:after
     {
          content:"";
          display:block;
          visibility:hidden;
          height:0;
          line-height:0;
          clear:both;
      }


14、CSS 样式覆盖规则?


规则一:由于继承而发生样式冲突时,最近祖先获胜。
规则二:继承的样式和直接指定的样式冲突时,直接指定的样式获胜。
规则三:直接指定的样式发生冲突时,样式权值高者获胜。
规则四:样式权值相同时,后者获胜。
规则五:!important 的样式属性不被覆盖。


15、CSS 样式的优先级?


引入方式:内联样式的优先级高于嵌入和外链,嵌入和外链的选择器相同就看他们在页面的插入顺序,后面插入的会覆盖前面的。
选择器优先级:id 选择器高于 ( 类选择器/伪类选择器/属性选择器 ) 高于 ( 标签选择器/后代选择器/伪元素选择器 ) 高于 ( 子选择器/相邻选择器 ) 高于通配符 *。
继承样式:继承样式是所有样式中优先级比较低的,浏览器默认样式优先级最低。
!important:!important 最高权重,无论引入方式是什么,选择器是什么,它的优先级都是最高的。所以 !important 使用要谨慎,一定要优先考虑使用样式优先级的规则来解决问题而不是 !important 。只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important。永远不要在插件中使用 !important ,永远不要在全站范围的 CSS 代码中使用 !important.
!important >> 内联样式 >> id 选择器 >> 类选择器/伪类选择器/属性选择器 >> 标签选择器/后代选择器/伪元素选择器 >> 子选择器/相邻选择器 >> 通配符 * >> 继承样式 >> 浏览器默认样式 

16、display: none 和 visibily: hidden 区别? 


display:none:隐藏对应的元素,整个元素消失不占空间。
visibily:hidden:隐藏对应的元素,元素还会占用空间。
disapaly 还可以转换元素类型,可以转换成块级元素、行内元素,行内块元素、弹性布局、网格布局等。visibility 只能做隐藏。


17、相对定位,绝对定位,固定定位的区别?


position:relative:相对定位,相对于自己进行定位。

position:absolute:绝对定位,相对于有相对定位的父级元素进行定位,没有就找 body。

position:fixed:固定定位,相对于浏览器定位。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/23388.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!