![](https://img-blog.csdnimg.cn/1b5cd0f5f7f346948f69980d2a9a1423.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML
HTML文章专栏
小草莓蹦蹦跳
一枚努力奋斗的程序莓,喜欢记录和学习。本博客主要涵盖前端技术积累和工作积累。just do it,家人们加油加油油
展开
-
src 和 href 的区别
主要用于指定链接到页面中的外部资源,比如 CSS 文件、字体文件或其他网页文件。通过 href 属性引入的资源是可选的内容,用于提供额外的样式和交互。指向一些网络资源如百度链接,建立当前元素和本文档的链接关系,当浏览器识别到它他指向的⽂件时,就会并⾏下载资源。当浏览器解析到该元素时,会暂停其他资源下载,直到该资源执行完毕。在前端开发中,src 和 href 是两个常见的属性,属性引入的资源会对页面产生直接影响,是必需的内容。通常用于指定要嵌入到页面中的外部资源,比如。引入可选的、提供额外样式和交互的资源。原创 2024-01-17 20:27:30 · 1049 阅读 · 0 评论 -
移动端 -- webkit 如何更改表单元素(input、select、radio、checkbox )的默认外观(placeholder、下拉箭头、清除按钮)?特殊操作?消除transition闪屏
1、如何重置默认外观?2、改变输入框placeholder的颜色值?3、placeholder的文字能换行么?4、修改select 默认下拉箭头5、禁用 radio 和 checkbox 默认样式6、禁用PC端表单输入框默认清除按钮7、禁止ios和android用户选中文字8、禁止ios 长按时不触发系统的菜单,禁止ios&android长按时下载图片9、打电话10、发短信11、如何阻止windows Phone的默认触摸事件12、android 去掉语音输入按钮原创 2019-03-19 11:13:58 · 751 阅读 · 1 评论 -
说说你对html中的置换元素和非置换元素的理解
置换元素(Replaced Element):主要是指 img、input、textarea、select、video、audio等这类默认就有 CSS 格式化外表范围的元素。置换元素的定义如下:一个 内容 不受 CSS 视觉格式化模型控制,CSS 渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。原创 2020-07-22 23:37:54 · 418 阅读 · 1 评论 -
css的属性content有什么作用呢?有哪些场景可以用到?
该属性用于定义元素之前或之后放置的生成内容。,不过该内容创建的盒子类型可以用属性 display 控制。在元素头或尾部来插入生成内容。属性的话,也是没有效果的。原创 2023-05-11 14:16:24 · 229 阅读 · 0 评论 -
要让Chrome支持小于12px的文字怎么做?
即使进行了缩放,原来元素还是会占据对应的位置。因此需要做调整,最好是在外面再包一层元素,以免影响其他元素。最好的办法还是进行切图,或者就不要使用小于 12px 的字体。当需要小于 12px 字体的时候,有以下几个方法可以使用。原因是 Chrome 认为小于这个字号会影响阅读。Chrome 中有最小字号的限制,一般为 12px。这个属性在高版本的 Chrome 中已经被废除。对行内元素无效,因此要么使用。原创 2020-07-22 23:27:22 · 741 阅读 · 1 评论 -
什么是无障碍web(WAI)?在开发过程中要怎么做呢?
这一块只知道一个大致概念,国内使用较少(甚至还遇到过加了。指能让视觉障碍的人也能根据屏幕阅读器的提示阅读网页。1、什么是无障碍web(WAI)被测试提 bug 的情况)原创 2023-05-05 09:55:14 · 193 阅读 · 0 评论 -
描述下你所了解的图片格式及适用场景
通常网页在显示的图片(图形)的时候,有以下几种格式:,还有个比较新的WebP格式。转载 2020-07-22 23:20:58 · 277 阅读 · 2 评论 -
line-height三种赋值方式有何区别?
对于应用在单个元素上,这几种写法的效果都是一样的(除了 px 需要一些计算)。是可以被继承的,因此会影响内部子元素的。(如果是 px 了就直接继承)原创 2020-07-22 22:56:28 · 114 阅读 · 1 评论 -
说说你对HTML元素的显示优先级的理解
属性也可以改变显示优先级,但只对同种类型的元素才有效。有窗口元素如 Select 元素、Object 元素。帧元素(frameset) 优先级最高 >>>之类的表单控件 > 普通的如。从有窗口和无窗口元素来分,原创 2023-05-04 16:45:54 · 227 阅读 · 0 评论 -
HTML和HTML5有什么区别?
例如doctype的声明,只需要写<!DOCTYPE html>就行了;HTML5与HTML5,XHTML1兼容,但是与SGML不兼容;【header、footer、section、article等】(结构标签,表单标签,媒体标签,其他功能标签等)原创 2020-07-22 22:52:01 · 48 阅读 · 1 评论 -
说说你对属性data-的理解
在这里的属性名可以使用驼峰(转换规则和 vue 的组件名称转换一样)。因此在早期前端,为了将数据塞在标签中,往往会采用自定义属性存放数据的方法。data- 属性是H5新增的自定义属性,也可以用来存储自定义属性的值。便是 HTML 5 中用来存放数据的标签。而在对应的 DOM 方法中,我们可以通过。相比之前的自定义属性存放数据,使用。原本 HTML 也允许自定义。时,需要注意,data-在数据的获取上会比较方便。原创 2023-04-28 14:56:58 · 212 阅读 · 0 评论 -
说说你对影子(Shadow)DOM的了解
Shadow Dom 是 Web Component 的一种实现,另外 Custom Element 和 Template 亦是如此。或者说,他是一个DOM的HTML组件,常见标签为video等媒体标签(这些已经封装好的标签,有对应样式)。都是对 Shadow Dom 的实践,也就是对一段功能的封装,形成模块化。与普通的DOM不相同,他更像伪类元素,去修饰DOM。之前看小程序原理的时候看过这块。一个用来封装的虚拟DOM。是 HTML 给出的。原创 2020-07-21 11:33:47 · 143 阅读 · 1 评论 -
在页面上隐藏元素的方式有哪些,分别应用在哪些场景?display:none 与 visibility:hidden 的区别
点击链接时,会产生一个虚线框,对于IE还好,没什么问题,虚线框只是在背影图片大小。,子孙节点消失是由于继承了 hidden,通过修改子孙节点的属性visibility:visible 可以让子孙节点显示;IE采用的遍历方法(HTC,css表达式)有些耗系统资源,正好我们只需要隐藏FF下的虚线框就行了,IE就不管了,说一下。将文字甩到屏幕看不到的地方。,子孙节点会随着父节点从渲染树消失,通过修改子孙节点的属性也无法显示;,子孙节点会随着父节点从渲染树消失,通过修改子孙节点的属性也无法显示;原创 2020-07-21 10:50:33 · 384 阅读 · 1 评论 -
HTML5 和 CSS3 的兼容问题
Vue2.x 和 jQuery2.x 适配兼容 IE9+总结_vue2 兼容ie9_小草莓蹦蹦跳的博客-CSDN博客。原创 2020-07-27 23:46:38 · 1077 阅读 · 0 评论 -
HTML5中的form怎么关闭自动填入?
在部分浏览器上,foucs输入框可以把之前输入过的值自动填入。如果不想自动填入,可以关掉它;一般业务下不会调整这个自动完成,因为对产品来说简化用户操作,建议打开~默认是"on" 开启状态。原创 2023-04-26 17:38:29 · 389 阅读 · 0 评论 -
HTML行内元素、块级元素和行内元素兼块级元素有哪些?
【代码】HTML行内元素、块级元素和行内元素兼块级元素有哪些?原创 2023-04-26 11:33:07 · 36 阅读 · 0 评论 -
解释下你对GBK和UTF-8的理解?并说说页面上产生乱码的可能原因
UTF-8编码格式很强大,支持所有国家的语言,正是因为它的强大,才会导致它占用的空间大小要比GBK大,对于网站打开速度而言,也是有一定影响的。GBK编码:是指中国的中文字符,其它它包含了简体中文与繁体中文字符,另外还有一种字符“GB2312”,这种字符仅能存储简体中文字符。UTF-8编码:它是一种全国家通过的一种编码,如果你的网站涉及到多个国家的语言,那么建议你选择UTF-8编码。GBK编码格式,它的功能少,仅限于中文字符,当然它所占用的空间大小会随着它的功能而减少,打开网页的速度比较快。原创 2023-04-26 11:27:54 · 911 阅读 · 0 评论 -
说说你对<meta>标签的理解
Meta标签是 HTML 语言 head 区的一个辅助性标签,它位于HTML文档头部的 head 标记和 title 标记之间,元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务调用。Meta : 即 **元数据(Metadata)**是数据的基本信息。Day 10 viewport 常见设置都有哪些?主要是给机器以及爬虫来阅读的。用我们的大白话来说,原创 2023-04-26 11:12:57 · 560 阅读 · 0 评论 -
说说你对重绘和重排的理解,以及如何优化?
对DocumentFragment的操作来说,只会产生一次浏览器重排和重绘的操作,相比于频繁操作真实DOM元素的方法,会有很大的性能提升。这样只在隐藏和显示时触发2次重排;DocumentFragment 最核心的知识点在于它不是真实DOM树的一部分,它的变化不会引起DOM树重新渲染的操作,也就不会引起浏览器重排和重绘的操作,从而带来性能上的提升。浏览器会维护1个队列,把所有会引起回流、重绘的操作放入这个队列,等队列中的操作到了一定的数量或者到了一定的时间间隔,浏览器就会flush队列,进行一个批处理。原创 2020-07-20 15:15:02 · 383 阅读 · 1 评论 -
Standards模式和Quirks模式有什么区别?
虽然标准模式可以算是标准,但实际使用过程中怪异模式反而更符合人的直觉(个人认为),这样可以减少对。怪异模式和标准模式最早是为了对旧版本网页进行兼容而设计的,可以通过。在标准模式下,元素的宽度只是指 width,如果添加了。两者最主要的区别就是在盒子模型上,元素的宽度。在怪异模式下,元素的width是包含了。元素实际的宽度需要加上。来对盒模型进行设置。原创 2023-04-25 14:36:52 · 82 阅读 · 0 评论 -
元素的alt和title有什么区别?
属性有一个很好的用途,即为链接添加描述性文字,特别是当连接本身并不是十分清楚的表达了链接的目的。另外一个潜在的应用就是为图像提供额外的说明信息,比如日期或者其他非本质的信息。强烈推荐您在文档的每个图像中都使用这个属性。这样即使图像无法显示,用户还是可以看到关于丢失了什么东西的一些信息。属性指定了替代文本,用于在图像无法显示或者用户禁用图像显示时,代替图像显示在浏览器中的内容。属性是一个必需的属性,它规定在图像无法显示时的替代文本。属性通常是他们了解图像内容的唯一方式。属性规定关于元素的额外信息。原创 2023-04-25 14:29:14 · 385 阅读 · 0 评论 -
简述下你理解的优雅降级和渐进增强
优雅降级和渐进增强这两个概念是在CSS3出现之后火起来的。由于低版本浏览器不支持CSS3,但是CSS3特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能。考虑兼容,以较低浏览器效果为主,之后再逐渐增加对新版本浏览器的支持。以内容为主,这也是多数公司所采用的方法。先不兼容低版本的浏览器,优先最新版浏览器效果,之后再逐渐兼容低版本浏览器。转载 2023-04-25 11:40:51 · 237 阅读 · 0 评论 -
iframe框架都有哪些优缺点?
【代码】iframe框架都有哪些优缺点?原创 2023-04-24 17:27:32 · 528 阅读 · 0 评论 -
label都有哪些作用?并举相应的例子说明
当点击或者触碰(tap)一个与表单控件相关联的 时,关联的控件的 click 事件也会触发。增加命中区域,屏幕阅读器可以读出标签。使使用辅助技术的用户更容易理解输入 哪些数据。标签本身并不与表单直接相关,它们只通过与它们相关联的控件间接地与表单相关联。一个 input 可以与多个标签相关联。表示用户界面中某个元素的说明。原创 2023-04-23 10:40:47 · 276 阅读 · 0 评论 -
知识总结:px、em、rem区别介绍
为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。任意浏览器的默认字体高都是16px。原创 2020-06-11 15:53:14 · 238 阅读 · 0 评论 -
用一个div模拟textarea的实现
使得盒子右下角可以自由拉伸 ,加上overflow:auto;这个属性 ,使得盒子变成可编辑状态。原创 2023-04-19 15:17:13 · 188 阅读 · 0 评论 -
简述超链接target属性的取值和作用
【代码】1. 简述超链接target属性的取值和作用。原创 2023-04-19 11:48:01 · 233 阅读 · 0 评论 -
loading效果
效果图如下: <div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> .原创 2021-02-22 15:51:34 · 250 阅读 · 0 评论 -
对盒子模型的理解
由于浏览器的差异性,盒模型分为标准盒模型和IE盒模型它们的呈现方式和对盒子大小的计算略有不同。效果图:以上两张图便是两种盒模型的差异体现.box_1 是标准盒模型,是 W3C 的规范;.box_2 是老的 IE 浏览器在下使用自己的非标准模型,也可称为 IE 盒模型01. 元素的 width 和 height 只包含 content,不包含 border 和 padding 值;02. 盒子的大小由元素的宽高、边框和内边距决定。原创 2019-03-20 10:04:20 · 1233 阅读 · 1 评论 -
块级元素和行内元素的区别
给行内元素设置宽高不会起作用,margin 值只对左右起作用,padding 值也只对左右起作用;宽度继承自父级,是父级元素的100%;都是可替代元素,这些元素即使是空的,浏览器也会根据其标签和属性来决定显示的内容。行内元素不会独占一行,只会占领自身宽高所需要的空间(宽高由内容决定);行内元素一般不可以包含块级元素,只能包含行内元素和文本;可以给块级元素设置宽高、内边距、外边距等盒模型属性;可替代元素具有内在的尺寸,所以宽高可以设定。块级元素可以包含块级元素和行内元素;3、可替代元素(行内元素兼块级元素)原创 2019-03-20 10:02:13 · 1039 阅读 · 0 评论 -
HTML语义化、HTML5新增的元素、移除的元素 、支持 HTML5 新标签
HTML语义化、HTML5新增的元素、移除的元素、支持 HTML5 新标签原创 2019-03-20 09:58:14 · 253 阅读 · 1 评论