首页 > 其他分享 >20230825-面试题html+css5篇简单记录

20230825-面试题html+css5篇简单记录

时间:2023-09-02 10:37:13浏览次数:71  
标签:面试题 font css5 元素 20230825 style 文本 border 属性


html标签的类型(head, body,!Doctype) 他们的作用是什么

!DOCTYPE 标签:
它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令. head:
是所有头部元素的容器, 绝大多数头部标签的内容不会显示给读者
该标签下所包含的部分可加入的标签有 base, link, meta, script, style和title
body :
用于定义文档的主体, 包含了文档的所有内容该标签支持 html 的全局属性和事件属性.

h5新特性

新增选择器 document.querySelector、document.querySelectorAll
拖拽释放(Drag and drop) API
媒体播放的 video 和 audio
本地存储 localStorage 和 sessionStorage
离线应用 manifest
桌面通知 Notifications
语意化标签 article、footer、header、nav、section
增强表单控件 calendar、date、time、email、url、search
地理位置 Geolocation
多任务 webworker
全双工通信协议 websocket
历史管理 history
跨域资源共享(CORS) Access-Control-Allow-Origin
页面可见性改变事件 visibilitychange
跨窗口通信 PostMessage Form Data 对象
绘画 canvas
H5移除的元素:
纯表现的元素:basefont、big、center、font、s、strike、tt、u 对可用性产生负面影响的元素:frame、frameset、noframes

伪类和伪元素

伪类:用于已有元素处于某种状态时为其添加对应的样式,这个状态是根据用户行为而动态变化的。
例如:当用户悬停在指定元素时,可以通过:hover来描述这个元素的状态,虽然它和一般css相 似,可以为 已有元素添加样式,但是它只有处于DOM树无法描述的状态下才能为元素添加样式, 所以称为伪类。
伪元素:用于创建一些不在DOM树中的元素,并为其添加样式。
例如,我们可以通过:before来在一个元素之前添加一些文本,并为这些文本添加样式,虽然用 户可以看见 这些文本,但是它实际上并不在DOM文档中。

html5语义化优点

语义化优点:
易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。 方便屏幕阅读器解析,如盲人阅读器根据语义渲染网页
有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。

继承相关

css的继承:就是给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承。 官方解释,继承是一种规则,它允许样式不仅应用于特定的html标签元素,而且应用于其后代元素。
无继承性的属性
1、display:规定元素应该生成的框的类型
2、文本属性:
vertical-align:垂直文本对齐
text-decoration:规定添加到文本的装饰text-shadow:文本阴影效果
white-space:空白符的处理unicode-bidi:设置文本的方向
3、盒子模型的属性:width、height、margin 、margin-top、margin-right、margin-bottom、
margin-left、border、 border-style、border-top-style、border-right-style、border-bottom-
style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-
width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-
color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
4、背景属性:background、background-color、background-image、background-repeat、background-position、background-attachment
5、定位属性:float、clear、position、top、right、bottom、left、min-width、min-height、max-
width、max-height、overflow、clip、z-index
6、生成内容属性:content、counter-reset、counter-increment
7、轮廓样式属性:outline-style、outline-width、outline-color、outline
8、页面样式属性:size、page-break-before、page-break-after
9、声音样式属性:pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
有继承性的属性
1、字体系列属性font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细font-size:设置字体的尺寸font-style:定义字体的风格
font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是 所有使用小型大写 字体的字母与其余文本相比,其字体尺寸更小。
font-stretch:对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust:为某个元素规定一个 aspect 值,这样就可以保持首选字体的 x-height。
2、文本系列属性
text-indent:文本缩进text-align:文本水平对齐line-height:行高
word-spacing:增加或减少单词间的空白(即字间隔) letter-spacing:增加或减少字符间的空白(字符间距) text-transform: 控 制 文 本 大 小 写 direction:规定文本的书写方向
color:文本颜色 a元素除外
3、元素可见性:visibility
4、表格布局属性:caption-side、border-collapse、border-spacing、empty-cells、table-layout
5、列表布局属性:list-style-type、list-style-image、list-style-position、list-style
6、生成内容属性:quotes
7、光标属性:cursor
8、页面样式属性:page、page-break-inside、windows、orphans
9、声音样式属性:speak、speak-punctuation、speak-numeral、speak-header、speech-rate、
volume、voice-family、 pitch、pitch-range、stress、richness、、azimuth、elevation
所有元素可以继承的属性
1.元素可见性:visibility
2.光标属性:cursor
内联元素可以继承的属性
1.字体系列属性
2.除text-indent、text-align之外的文本系列属性
块级元素可以继承的属性
text-indent、text-align


标签:面试题,font,css5,元素,20230825,style,文本,border,属性
From: https://blog.51cto.com/u_15460007/7330764

相关文章

  • 220230825-纯js实现以下代码
    题目<ul><li>1<li><li>2<li><li>3<li></ul>代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"con......
  • 220230825-localstorage实现数据的增删改查
    演示案例<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title>......
  • android面试题:谈谈对Java中多态的理解
     Java中的多态是面向对象编程的一个重要特征,它允许同一个类型的对象在不同的情况下表现出不同的行为。多态是Java语言中实现代码复用、提高代码可维护性和可扩展性的重要手段。 多态的实现基于两个核心概念:继承和方法重写。在Java中,子类可以继承父类的方法,并且可以重写(覆......
  • 面试题目3
    string,h下的库函数strcat(str1,str2)将str2的字符串追加到str1中,追加方式为查找\0strncat(str1,str2,6)将str2中的6个字符追加到str1中,不需要查找\0,可以同字符串追加。strstr(str1,str2)查找字符串,判断字符串str1中是否含有str2#define_CRT_SECURE_NO_WARNINGS1#include<stdio.h>......
  • 每天一道面试题:对象引用及垃圾回收
    先来看题目 (多选)下面哪些描述是正确的:()【文章末尾有答案】1publicclassTest{2publicstaticclassA{3privateBref;4publicvoidsetB(Bb){5ref=b;6}7}8publicstaticClassB{9......
  • Android并发编程高级面试题汇总(含详细解析 十五)
    Android并发编程高级面试题汇总最全最细面试题讲解持续更新中......
  • GDB基本操作和常见面试题
    目录GDB基本操作和常见面试题基本操作启动查看断点运行退出常见面试题GDB基本操作和常见面试题基本操作GDB是GNU开源组织发布的一个强大的Unix/Linux下的程序调试工具。作用:1、启动用户程序后,可以按照用户的要求随意运行程序2、可让被调试的程序在用户所设定的断点处停住3......
  • 【备战金九银十】2023年最全Android岗1000+面试题及答案
    前言马上又准备迎接金九银十了,各大厂,国央企纷纷加入抢人大战竞争尤为激烈!但是,相比求职者来说岗位数量还不是很多,自然而然HR们就开始优中选优,激化“内卷”!如何在众多面试者中脱颖而出?对于很多程序员来说是目前最重要的事。因此本篇通过收集腾讯T4总结的2023年最全的Android岗面试......
  • Linux运维工程师面试题(4)
    Linux运维工程师面试题(4)祝各位小伙伴们早日找到自己心仪的工作。持续学习才不会被淘汰。地球不爆炸,我们不放假。机会总是留给有有准备的人的。加油,打工人!1redis常用的数据类型String:字符串,最基础的数据类型List:列表Hash:哈希对象Set:集合SortedSet:有序集合,Set的基......
  • Linux运维工程师面试题(4)
    目录Linux运维工程师面试题(4)1redis常用的数据类型2redis数据持久化有几种,区别是什么,如何选择3redis有哪些架构模式4什么是缓存雪崩?如何解决?5什么是缓存穿透?如何解决?6什么是缓存击穿?如何解决?7redis为什么这么快8Redis常用命令9SQL语句分类10多表查询Linux运维工程......