이 기사에서는 기초를 강화하는 데 도움이 되는 18가지 일반적인 HTML 인터뷰 질문과 답변 분석을 공유합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다. HTML은 인터넷 개발에 가장 널리 사용되는 언어 중 하나입니다. 이를 통해 우리는 웹 개발의 세계로 깊이 들어갈 수 있습니다. 우리의 기술을 향상시키세요. WEB 개발(프론트 엔드 개발)과 관련된 경력을 쌓고 싶다면 HTML의 기본을 능숙하게 익혀야 합니다. 이 업계에 진출하려는 새로운 사람들을 위한 길을 닦기 위한 질문과 답변입니다. [추천 튜토리얼: html 비디오 튜토리얼]HTML 是互联网上应用开发最广泛的语言之一,它可以带我们深入 Web 开发的世界,提高技能。如果你想从事 WEB 开发(前端开发)相关的职业,HTML 的基础就必须熟练掌握,下面就以问答的形式开启我们的回顾之路,为即将踏入这个行业的新人们铺铺路。【推荐教程:html视频教程】 Q1:什么是 HTML? 超文本标记语言(HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。HTML 使文本更具交互性和动态性,是构建网站及WEB应用的基石,HTML允许嵌入图像、表格、链接,并且可以用于创建交互式表单,它被用来结构化信息。 Q2:HTML元素和标签有什么区别? 元素代表某种结构或语义,通常由开始标签、内容和结束标签组成。 标签就是93f0f5c25f18dab9d176bd4f6de5d30e、6c04bd5ca3fcae76e30b72ad730ca86d、f5d188ed2c074f8b944552db028f98a1等被尖括号 aa7d73ef87dde8a172ca6aba4bdc81fa 包起来的对象,绝大部分的标签都是成对出现的,如dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68、4a249f0d628e2318394fd9b75b4636b1473f0a7621bec819994bb5020d29372a。 元素 标签 HTML 网页或文档的单个组件,它代表结构或语义。例如,title 元素表示文档的标题 HTML 文档的根,用来标记 HTML 元素的。例如,head 标签用于包含 HTML 文件中的所有 head 元素 Q3:块级元素和内联元素有什么区别? 块级元素:占据其父元素(容器)的整个空间,创建了一个“块”。通常浏览器会在块级元素前后另起一行,能容纳其他块元素或者内联元素。包括:e388a4556c0f65e1904146cc1a846bee、 dc6dce4a544fdca2df29d5ac0ea9906b、b8a712a75cab9a5aded02f74998372b4、a1f02c36ba31691bcfe87b2722de723b、2f8332c8dcfd5c7dec030a070bf652c3、ff9c23ada1bcecdd1a0fb5d5a0f18437、c787b9a589a3ece771e842a6176cf8e9、4a249f0d628e2318394fd9b75b4636b1-4e9ee319e0fa4abc21ff286eeb145ecc、ff6d136ddc5fdfeffaf53ff6ee95f185 和 25edfb22a4f469ecb59f1190150159c6 内联元素:只占据它对应标签的边框所包含的空间,只能容纳文本或者其他内联元素的元素。包括:45a2772a6b6107b401db3c9b82c049c2、907fae80ddef53131f3292ee4f81644b、1244aa79a84dea840d8e55c52dc97869、2e1cf0710519d5598b1f0f14c36ba674、8e99a69fbe029cd4e2b854e244eab143、3499910bf9dac5ae3c52d5ede7383485、d5fd7aea971a85678ba271703566ebfdQ1: HTML이란 무엇입니까? HyperText Markup Language(HyperText Markup Language, 참조: HTML)는 웹 페이지를 만드는 데 사용되는 표준 마크업 언어입니다. HTML은 텍스트를 보다 대화형이고 동적으로 만들어 웹사이트 및 웹 애플리케이션 구축의 초석입니다. HTML을 사용하면 이미지, 표, 링크를 삽입할 수 있으며 대화형 양식을 만드는 데 사용할 수 있습니다. 정보를 구조화하는 데 사용됩니다. Q2: HTML 요소와 태그의 차이점은 무엇인가요? 요소는 특정 구조나 의미를 나타내며 일반적으로 시작 태그, 콘텐츠 및 종료 태그로 구성됩니다. 태그는 , , 등이며 꺾쇠 괄호 <로 묶입니다. ;code> 및 >로 래핑된 객체의 경우 대부분의 태그는 dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68, <와 같이 쌍으로 나타납니다. ;h1>473f0a7621bec819994bb5020d29372a. 요소 태그 HTML 구조나 의미를 나타내는 웹 페이지나 문서의 단일 구성 요소입니다. 예를 들어, title 요소는 문서의 제목을 나타냅니다. HTML 문서의 루트는 HTML 요소를 표시하는 데 사용됩니다. 예를 들어, head 태그는 HTML 파일 Q3: 블록 수준 요소와 인라인 요소의 차이점은 무엇인가요? 블록 수준 요소: 상위 요소(컨테이너)의 전체 공간을 차지하여 "블록"을 생성합니다. 일반적으로 브라우저는 다른 블록 요소나 인라인 요소를 수용하기 위해 블록 수준 요소 앞뒤에 새 줄을 만듭니다. 포함: , , , , , , , - code>, 및 🎜🎜인라인 요소: 해당 레이블의 테두리에 포함된 공간만 차지합니다. , 텍스트나 기타 인라인 요소만 담을 수 있는 요소입니다. 포함: , , , , , , 🎜🎜🎜🎜🎜블록 수준 요소🎜🎜인라인 요소🎜🎜 🎜🎜🎜🎜블록 수준 요소는 블록으로 그려지며, 사용 가능한 전체 너비, 즉 컨테이너 너비를 채울 수 있도록 늘어날 수 있으며 항상 새 줄에서 시작됩니다. 🎜🎜인라인 요소는 현재 위치에 그려집니다. 그리고 꼭 필요한 공간만 차지합니다🎜🎜🎜🎜각 블록 요소는 새 줄에서 시작하고 그 뒤의 요소도 새 줄에서 시작합니다(해당 줄에서만). 요소의 위쪽 및 아래쪽 여백을 모두 설정할 수 있습니다. 요소의 너비가 설정되지 않은 경우 자체 상위 컨테이너의 100%를 차지합니다(상위 요소의 너비와 동일) 🎜🎜 켜져 있습니다. 다른 요소와 동일한 줄이며 요소의 높이, 너비, 위쪽 및 아래쪽을 독점적으로 차지하지 않습니다. 여백을 설정할 수 없습니다🎜🎜🎜🎜Q4: 시맨틱 HTML이란 무엇인가요? Semantic HTML은 HTML 마크업을 사용하여 콘텐츠의 의미나 의미를 향상시키는 코딩 스타일입니다. 의미론적 HTML에서 a4b561c25d9afb9ac8dc4d70affff419 0d36329ec37a2cc24d42c7229b69747a 태그는 굵은 문장에는 사용되지 않지만 8e99a69fbe029cd4e2b854e244eab143128dba7a3a77be0113eb0bea6ea0a5d0는 기울임꼴 문장에 사용됩니다. 5a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e6가 아닌 907fae80ddef53131f3292ee4f81644bd1c6776b927dc33c5d9114750b586338를 사용하세요. a4b561c25d9afb9ac8dc4d70affff419 0d36329ec37a2cc24d42c7229b69747a 标签不用于粗体语句而是 8e99a69fbe029cd4e2b854e244eab143128dba7a3a77be0113eb0bea6ea0a5d0 ,斜体语句不是用 5a8028ccc7a7e27417bff9f05adf5932 72ac96585ae54b6ae11f849d2649d9e6,而是用 907fae80ddef53131f3292ee4f81644bd1c6776b927dc33c5d9114750b586338。 Q5:列出常用的列表标签 在页面制作中涉及列表,在 HTML 中有专门用于表示列表数据的标签,如下: 有序列表:有序列表以编号格式显示元素,由c34106e0b4e09414b63b2ea253ff83d6标签表示 无序列表:无序列表以项目符号格式显示元素,它由ff6d136ddc5fdfeffaf53ff6ee95f185标签表示。 定义列表:定义列表以定义形式显示元素,就像在字典中一样,如 5c69336ffbc20d23018e48b396cdd57a、 73de882deff7a050a357292d0a1fca94和67bc4f89d416b0b8236eaa5f43dee742标签用于定义描述列表。 Q6:解释HTML标签语义 HTML 是标记语义,文档内容是有其语义的,常见的如下: 1aa9e5d373740b65a0cc8f0a02150c53:用于定义文档的标题。 c787b9a589a3ece771e842a6176cf8e9:定义了导航链接 2f8332c8dcfd5c7dec030a070bf652c3 : 用于定义文档中的一个单元 23c3de37f2f9ebcb477c4a90aac6fffd:用于定义独立的、自包含的文章 15221ee8cba27fc1d7a26c47a001eb9b:用于定义内容之外的内容 c37f8231a37e88427e62669260f0074d:用于定义文档的页脚 Q7:什么是跑马灯? 跑马灯效果在以前是很经典的效果,几乎每个网站都有。marquee 用于网页上的滚动文本,它可以自动向上、向下、向左或向右滚动图像或文本,只要将要滚动的文本放在 ed126914ed1419bab26abf7cf307b7b9……7204e33a7a23f6efcc788532e245c31b 标签内。 Q8:div 和 span 的区别? span和div的区别在于span元素是内联的,通常用于一行内的一小块,例如段落内。而 div 是块级,相当于在其前后有一个换行符,用于对较大的代码块进行分组。 Q9:8b05045a5be5764f313ed5b9168a17e6 标签是否为 HTML 标签? 不是,8b05045a5be5764f313ed5b9168a17e6 声明不是 HTML 标签。1a309583e26acea4f04ca31122d8c535声明叫做文件类型定义(DTD),声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。1a309583e26acea4f04ca31122d8c535声明必须在 HTML 文档的第一行。 HTML 有多种文档类型,例如 HTML 4.01 Strict、HTML 4.01 Transitional、HTML 4.01 Frameset、XHTML 1.0 Strict、XHTML 1.0 Transitional、XHTML 1.0 Frameset、XHTML 1.1 等。因此,8b05045a5be5764f313ed5b9168a17e6 用于定义 HTML 文档类型。 对于HTML5文档,没有 DTD ,也就没有严格模式与混杂模式的区别,HTML5 有相对宽松的语法,实现时,已经尽可能大的实现了向后兼容。 Q10:HTML、XML 和 XHTML 有什么区别? HTML:超文本标记语言(HyperText Markup Language) XML:可扩展标记语言(Extensible Markup Language) XHTML:可扩展超文本标记语言(Extensible Hypertext Markup Language) XHTML是当前HTML版的继承者,是XML文档中的HTML。 HTML 和 XHTML 之间的区别是: HTML是一种标准通用标记语言的应用,XML是一种可扩展标记语言的应用程序。 HTML标签不区分大小写XHTML所有标签都必须小写。 XHTML所有属性都必须使用双引号 HTML 是关于显示信息,而 XHTML Q5: 일반적으로 사용되는 목록 목록 태그 목록은 페이지 생성에 관여하며 HTML에서 목록 데이터를 나타내는 데 사용되는 특수 태그가 있습니다. 태그는 다음과 같습니다. 순서가 지정된 목록: 순서가 지정된 목록은 c34106e0b4e09414b63b2ea253ff83d6 태그 순서가 지정되지 않은 목록으로 표시되는 번호 형식으로 요소를 표시합니다. 순서가 지정되지 않은 목록은 ff6d136ddc5fdfeffaf53ff6ee95f185 태그로 표시되는 글머리 기호 형식으로 요소를 표시합니다. 🎜 🎜정의 목록🎜: 정의 목록은 5c69336ffbc20d23018e48b396cdd57a, 73de882deff7a050a357292d0a1fca94 및 73de882deff7a050a357292d0a1fca94와 같은 사전과 마찬가지로 정의 형식으로 요소를 표시합니다. 태그는 설명 목록을 정의하는 데 사용됩니다. 🎜🎜🎜Q6: HTML 태그 의미 설명 🎜🎜🎜HTML은 태그 의미이며, 문서 콘텐츠에는 고유한 의미가 있습니다. 🎜 : 문서 제목을 정의하는 데 사용됩니다. 🎜 c787b9a589a3ece771e842a6176cf8e9: 탐색 링크를 정의합니다. 🎜 2f8332c8dcfd5c7dec030a070bf652c3: 문서의 단위를 정의하는 데 사용됩니다🎜 : 독립적이고 독립적인 기사를 정의하는 데 사용됩니다🎜 15221ee8cba27fc1d7a26c47a001eb9b: 콘텐츠 이외의 콘텐츠를 정의하는 데 사용됩니다🎜 < ;footer>: 문서의 바닥글을 정의하는 데 사용됩니다🎜🎜🎜Q7: 티커란 무엇인가요? 🎜🎜🎜천막 효과는 과거에는 매우 고전적인 효과였으며 거의 모든 웹사이트에 있습니다. marquee는 웹페이지에서 텍스트를 스크롤하는 데 사용됩니다. 스크롤할 텍스트가 ed126914ed1419bab26abf7cf307b7b9 ......7204e33a7a23f6efcc788532e245c31b 태그입니다. 🎜🎜Q8: div와 span의 차이점은 무엇인가요? 🎜🎜🎜 span과 div의 차이점은 span 요소가 인라인이며 일반적으로 다음과 같이 한 줄 내의 작은 영역에 사용된다는 것입니다. 단락 내에서와 같이. div는 블록 수준으로, 앞과 뒤에 줄 바꿈을 두는 것과 동일하며 더 큰 코드 블록을 그룹화하는 데 사용됩니다. 🎜🎜Q9: 8b05045a5be5764f313ed5b9168a17e6 태그가 HTML 태그인가요? 🎜🎜🎜아니요, 8b05045a5be5764f313ed5b9168a17e6 선언은 HTML 태그가 아닙니다. 1a309583e26acea4f04ca31122d8c535 문을 문서 유형 정의(DTD)라고 합니다. 이 문의 목적은 브라우저에 파일 유형을 알려주는 것입니다. 브라우저 파서가 문서를 구문 분석하는 데 어떤 사양을 사용해야 하는지 알 수 있도록 합니다. 1a309583e26acea4f04ca31122d8c535 선언은 HTML 문서의 첫 번째 줄에 있어야 합니다. 🎜🎜HTML에는 HTML 4.01 Strict, HTML 4.01 Transitional, HTML 4.01 Frameset, XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 프레임셋, XHTML 1.1 등 따라서 8b05045a5be5764f313ed5b9168a17e6는 HTML 문서 유형을 정의하는 데 사용됩니다. 🎜🎜HTML5 문서에는 DTD가 없으므로 엄격 모드와 혼합 모드 사이에 차이가 없습니다. HTML5는 비교적 느슨한 구문을 갖습니다. . 구현 시 이전 버전과의 호환성이 최대한 구현되었습니다. 🎜🎜Q10: HTML, XML 및 XHTML의 차이점은 무엇인가요? 🎜🎜 HTML: 하이퍼텍스트 마크업 언어 🎜 XML: 확장 가능 마크업 언어 🎜XHTML: 확장 가능 하이퍼텍스트 마크업 언어 🎜🎜🎜XHTML는 HTML의 현재 버전의 후속 버전이며 XML의 HTML입니다. 문서. 🎜🎜HTML과 XHTML의 차이점은 다음과 같습니다. 🎜 HTML은 표준 범용 마크업 언어의 응용 프로그램이고 XML은 확장 가능한 마크업 언어를 적용한 것입니다. 🎜 HTML 태그는 대소문자를 구분하지 않습니다. 모든 XHTML 태그는 소문자여야 합니다. 🎜 XHTML 모든 속성은 큰따옴표를 사용해야 합니다. 🎜 HTML은 정보 표시에 관한 것이고, XHTML은 정보 설명에 관한 것입니다. 🎜🎜🎜🎜Q11: 이미지 맵이란 무엇인가요? 🎜🎜🎜때때로 사진의 다양한 영역에 다양한 링크를 추가해야 하는 경우가 있습니다. 일반적인 방법은 이미지 맵을 사용하여 이미지 핫스팟이 되는 것입니다. 구체적인 코드는 다음과 같습니다. 🎜 🎜 하지만 지금은 대안이 많이 있습니다. 🎜Q12:超链接和锚点的区别? HTML中的3499910bf9dac5ae3c52d5ede7383485 是 anchor(锚)的缩写,现在把带有 href 属性的称作超链接,把没有 href 属性只有 name 属性的称作锚点连接或者命名锚点。超链接和锚点只是标签 3499910bf9dac5ae3c52d5ede7383485 的两种呈现方式。命名锚点同城用于页面定位,超链接用于页面间的跳转。 Q13:简述HTML5离线储存 现在日常使用的APP,有部分内容是使用内嵌webview的方式,浏览页面内容,这种方案的优势是WEB和APP共用一个网站,像掘金的APP就是使用这种方式。为了避免重复加载页面或者在无网络的情况下正常展现内容,可以采用离线存储,其中一种方案就是使用 manifest 。 在线情况下,浏览器发现HTML头部有manifest属性,它会请求manifest文件,第一次访问,那么浏览器就会根据manifest文件的内容下载相应的资源,进行离线存储。 在页面头部加入manifest属性,如下:然后在cache.manifest文件中编写离线存储的资源规则,代码如下:CACHE MANIFEST # 2021-06-26 14:01 V0.1.2.42634241855282310056 hash 以便做版本控制 # 默认部分,显式缓存这些文件 CACHE: #需要缓存的列表,如字体、图片、脚本、css ./assets/images/favicons/32x32.png ./assets/fonts/VideoJS.eot ./assets/fonts/VideoJS.svg ./assets/fonts/VideoJS.ttf ./assets/fonts/VideoJS.woff # 启动页资源 ./index.html NETWORK: #不需要缓存的 * FALLBACK: #访问缓存失败后,备用访问的资源,第一个是访问源,第二个是替换文件 *.html /offline.htmlQ14:什么是iframe iframe是嵌入式框架, 是html标签, 是一个内联元素, iframe 元素会创建包含另外一个文档的内联框架(即行内框架) 。通常可以使用iframe内嵌网页,跨域ajax通讯的实现,微前端,广告嵌入等。Q15:position有哪些值? position 属性用于指定一个元素在文档中的定位方式。top、right、bottom 和 left 属性决定了该元素的最终位置。 static: 默认值,没有定位,指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置,此属性下 top、right、bottom、left 和 z-index 属性无效。 relative 相对定位:元素先放置在未添加定位时的位置,在不改变页面布局的前提下调整元素位置(此时会在此元素未添加定位时所在位置留下空白)。position:relative 对 table-row、table-column、table-cell、table-caption 元素无效。 absolute 绝对定位:生成绝对定位的元素,元素会被移出正常文档流,并不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。 fixed 固定定位:生成绝对定位的元素,元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置,元素的位置在屏幕滚动时不会改变 sticky 元素根据正常文档流进行定位,相对它的最近滚动祖先和最近块级祖先。 Q16:title 和 h1 的区别? h1 不等于 title。h1 为大标题,一般用作文章的标题,作用如同一张报纸的大标题,使用读者在没看内容之前就大概了解本文的旨意,它是直接给用户看的。title 为页面标题,可以包含 h1 的标题,一般面对的是搜索引擎和浏览器标签。 Q17:display:none和visibility:hidden的区别 都能把页面上的元素隐藏起来,两者的区别如下: display:none: 숨겨진 개체는 물리적 공간을 차지하지 않으며 다른 요소의 레이아웃에 영향을 주지 않습니다. display:none:被隐藏的对象不会占用任何物理空间,不会影响其他元素的布局 visible:hidden:使对象在网页上不可见,但是会在网页上占用物理空间,通俗来说就是看不见但摸得到。 属性值改变后是否重新渲染:visibility:hidden不渲染;display:none 会重新渲染。 Q18:回流和重绘 回流,当渲染树中部分或全部元素的尺寸、结构、或某些属性发生改变时,浏览器重新渲染部分或全部文档的过程。重绘,当页面中元素样式的改变并不影响它在文档流中的位置时(例如:color、background-color、visibilityvisible:hidden: 개체를 만듭니다. visible 웹페이지에서는 보이지 않지만 웹페이지의 물리적 공간을 차지합니다. 일반인의 관점에서는 보이지 않지만 만질 수 있습니다. 속성 값 변경 후 다시 렌더링할지 여부: visibility:hidden은 렌더링되지 않으며 display:none은 다시 렌더링됩니다. Q18: 리플로우 및 다시 그리기 리플로우, 일부 또는 모든 요소의 크기를 렌더링할 때 트리 구조, 구조 또는 특정 속성이 변경될 때 브라우저가 문서의 일부 또는 전체를 다시 렌더링하는 프로세스입니다. 페이지의 요소 스타일 변경이 문서 흐름의 위치에 영향을 주지 않는 경우 다시 그리기(예: color, ground-color, ) 가시성 코드> 등), 브라우저는 요소에 새 스타일을 할당하고 다시 그립니다. 두 가지가 페이지 성능에 서로 다른 영향을 미치므로 여기서는 소개하지 않겠습니다. 더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개🎜를 방문하세요! ! 🎜