집 > 기사 > 웹 프론트엔드 > HTML의 기본이론

HTML의 기본이론

不言원래의: 2018-04-02 15:19:492472검색

이 기사는 HTML에 대한 기본적인 이론적 지식을 공유합니다. 관심 있는 친구는 이 기사를 살펴볼 수 있습니다.

HTML

Semanticization

HTML 태그의 의미는 다음과 같습니다. 문서 구조를 적절하게 표현하기 위해 의미 체계(예: h1-h6)를 포함하는 태그 사용
CSS의 의미 체계 명명이란: HTML 태그에 의미 있는 클래스 추가
의미 체계가 필요한 이유:

이후 스타일을 제거하면 페이지의 구조가 명확해집니다
스크린 리더를 사용하면 시각 장애인도 더 잘 읽을 수 있습니다.
검색 엔진은 페이지를 더 잘 이해할 수 있어 포함에 도움이 됩니다.
지속 가능한 운영 및 유지 관리를 촉진합니다. 팀 프로젝트

HTML 의미론에 대한 이해를 간략하게 설명해주세요.

올바른 해시태그로 올바른 일을 하세요.
html 의미 체계는 페이지의 내용을 구조화하고 구조를 더 명확하게 만들어 브라우저와 검색 엔진이 더 쉽게 구문 분석할 수 있도록 합니다.
스타일 CSS 없이도 문서 형식으로 표시되며 읽기 쉽습니다. ;
검색 엔진 크롤러는 HTML 태그를 사용하여 각 키워드의 컨텍스트와 가중치를 결정하므로 SEO에 도움이 됩니다. 읽기 쉽고 유지 관리가 쉽습니다.
Doctype의 기능을 이해하시나요? 표준 모드와 호환 모드의 차이점은 무엇인가요?

<!DOCTYPE>선언은 HTML 문서의 첫 번째 줄에 있습니다. > 태그 앞에. 이 문서를 구문 분석하는 데 사용할 문서 표준을 브라우저의 구문 분석기에 알려줍니다. DOCTYPE의 존재하지 않거나 잘못된 형식으로 인해 문서가 호환 모드에서 렌더링됩니다.

표준 모드의 서식 및 JS 작업 모드는 모두 브라우저에서 지원하는 최고 표준에서 실행됩니다. . 호환 모드에서는 페이지가 느슨하게 이전 버전과 호환되는 방식으로 표시되어 사이트가 작동하지 않는 것을 방지하기 위해 이전 브라우저의 동작을 시뮬레이션합니다. <!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作

HTML5 为什么只需要写？

HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型

行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内元素有：a b span img input select strong（强调的语气）
块级元素有：p ul ol li dl dt dd h1 h2 h3 h4…p
常见的空元素: <br> <hr> <img> <input> <link> <meta>

页面导入样式时，使用link和@import有什么区别？

link属于XHTML标签，除了加载CSS外，还能用于定义RSS,定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题

介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核
JS引擎则：解析和执行javascript来实现网页的动态效果
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎

常见的浏览器内核有哪些？

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey
🎜🎜🎜HTML5 왜 만 작성해야 합니까? 🎜🎜🎜🎜🎜HTML5는 SGML을 기반으로 하지 않으므로 DTD를 참조할 필요가 없지만 브라우저의 동작을 규제하려면 doctype이 필요합니다(브라우저가 원하는 방식으로 실행되도록 함) 🎜🎜🎜🎜 HTML4.01 동안 SGML을 기반으로 하기 때문에 문서에 사용된 문서 유형을 브라우저에 알리려면 DTD를 참조해야 합니다. 🎜🎜🎜🎜🎜인라인 요소란 무엇인가요? 블록 수준 요소란 무엇입니까? 공허한 요소는 무엇입니까? 🎜🎜🎜🎜🎜인라인 요소는 다음과 같습니다: a bspan img input select Strong(강조 톤) 🎜🎜🎜🎜블록 수준 요소는: p ul ol li dl dt dd h1 h2 h3 h4 …p🎜🎜🎜🎜공통 빈 요소: <br> <img> <link> <meta>🎜🎜🎜🎜 페이지에서 스타일을 가져올 때 link 사용과 @import 사용의 차이점은 무엇입니까? 🎜🎜🎜🎜🎜link는 XHTML 태그에 속하며 CSS를 로드하는 것 외에도 RSS를 정의하는 데에도 사용할 수 있습니다. , rel 연결 속성 및 기타 기능을 정의하고 @import는 CSS에서 제공되며 CSS🎜 🎜🎜🎜페이지가 로드되면 link도 동시에 로드되며, @importCSS /code>는 페이지가 로드되기 전에 대기합니다. 🎜🎜🎜🎜import는 CSS2.1에서 제안되며 IE5에서만 인식될 수 있습니다. code> 이상, <code>link는 XHTML 태그이므로 호환성 문제가 없습니다🎜🎜🎜🎜🎜 브라우저 코어에 대한 이해를 소개해 주시겠습니까? 🎜🎜🎜🎜🎜주로 렌더링 엔진(레이아웃 엔지니어 또는 렌더링 엔진)과 JS 엔진 🎜🎜🎜🎜의 두 부분으로 나뉩니다. 렌더링 엔진 : 웹페이지의 내용(HTML, XML, 이미지 등)을 얻어오고, 정보를 정리(CSS 추가 등)하고, 웹페이지의 표시 방식을 계산하여 출력하는 역할을 담당합니다. 모니터나 프린터에 브라우저 커널마다 웹페이지의 문법적 해석이 다르므로 렌더링 효과도 달라집니다. 네트워크 콘텐츠를 편집하고 표시해야 하는 모든 웹 브라우저, 이메일 클라이언트 및 기타 애플리케이션에는 커널 🎜🎜🎜🎜JS 엔진이 필요합니다. 웹 페이지에 동적 효과를 얻기 위해 자바스크립트를 구문 분석하고 실행합니다. 🎜🎜🎜🎜초기 렌더링 엔진 및 JS 엔진 나중에 JS 엔진은 점점 더 독립적이게 되었고, 커널은 렌더링 엔진만을 참조하는 경향이 있었습니다. 🎜🎜🎜🎜🎜Trident 커널: IE, MaxThon, TT, The World, 360, Sogou 브라우저 등 [MSHTML이라고도 함]🎜🎜🎜🎜Gecko 커널: Netscape6 이상, FF, MozillaSuite/SeaMonkey 등 🎜
Presto 커널: Opera7 이상. [Opera커널은 원래: Presto, 현재: Blink;]Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的Blink（WebKit的分支）]

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加

绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation

移除的元素：

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

支持HTML5新标签：

IE8/IE7/IE6支持通过document.createElement方法产生的标签
可以利用这一特性让这些浏览器支持HTML5新标签
浏览器支持新标签后，还需要添加标签默认的样式

当然也可以直接使用成熟的框架、比如html5shim

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com
/svn/trunk/html5.js"</script><![endif]-->

如何区分HTML5： DOCTYPE声明新增的结构元素功能元素

HTML5的离线储存怎么使用，工作原理能不能解释一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示
如何使用：

页面头部像下面一样加入一个manifest的属性；
在cache.manifest文件的编写离线存储的资源
在离线状态时，操作window.applicationCache进行需求实现

CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
存储大小：

cookie数据大小不能超过4k
sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

有期时间：

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
sessionStorage
🎜🎜Webkit커널: Safari, Chrome 코드> 코드> 등등. [Chrome의 Blink(WebKit의 분기)]🎜🎜

새로운 기능 및 제거 사항은 무엇인가요? html5의 그 요소들? HTML5 새 태그의 브라우저 호환성 문제를 어떻게 처리합니까? HTML과 HTML5를 구별하는 방법은 무엇입니까?

🎜🎜HTML5는 더 이상 SGML의 하위 집합이 아니며 주로 이미지 추가, 위치, 저장, 멀티태스킹 및 기타 기능에 관한 것입니다🎜🎜🎜🎜캔버스 그리기🎜🎜🎜🎜미디어 재생을 위한 비디오 및 오디오 요소🎜🎜🎜🎜로컬 오프라인 저장소 localStorage 장기 저장소 브라우저를 닫은 후에도 데이터가 손실되지 않습니다🎜🎜🎜🎜sessionStorage 데이터는 브라우저가 닫힌 후 자동으로 삭제됩니다🎜🎜🎜🎜기사, 바닥글, 머리글, 탐색, 섹션과 같은 더 나은 의미 체계 콘텐츠 요소🎜🎜🎜🎜양식 제어 , 달력, 날짜, 시간, 이메일, URL, 검색🎜🎜🎜🎜새로운 기술 webworker, websocket, Geolocation🎜🎜

🎜🎜 document.createElement를 통한 IE8/IE7/IE6 지원 생성된 태그 그런데🎜🎜🎜🎜이 기능을 사용하면 이러한 브라우저가 HTML5 새 태그를 지원하도록 할 수 있습니다🎜🎜🎜🎜브라우저가 새 태그를 지원한 후에도 태그의 기본 스타일을 추가해야 합니다🎜🎜

<p style="height:1px;overflow:hidden;background:red"></p>

HTML5 오프라인 저장소를 사용하는 방법 작동 원리를 설명해 주실 수 있나요?

🎜🎜아래와 같이 페이지 헤더에 매니페스트 속성을 추가합니다. 🎜🎜🎜🎜cache.manifest 파일에 오프라인 저장소 리소스를 작성합니다.🎜🎜🎜🎜오프라인일 때 window.applicationCache를 작동하여 요구 사항을 구현합니다. 🎜🎜

브라우저는 HTML5 오프라인 저장소 리소스를 어떻게 관리하고 로드하나요?

🎜🎜온라인일 때 브라우저는 html 헤더에 매니페스트 속성이 있음을 발견하고 처음 액세스하는 경우 매니페스트 파일을 요청합니다. 서버는 매니페스트 파일의 내용을 기반으로 해당 리소스를 다운로드하여 오프라인에 저장합니다. 앱에 액세스했고 리소스가 오프라인으로 저장된 경우 브라우저는 오프라인 리소스를 사용하여 페이지를 로드한 다음 브라우저는 새 매니페스트 파일을 이전 매니페스트 파일과 비교합니다. 작업이 수행됩니다. 파일이 변경되면 파일의 리소스가 다시 다운로드되어 오프라인으로 저장됩니다. 🎜🎜🎜🎜오프라인일 때 브라우저는 오프라인에 저장된 리소스를 직접 사용합니다. 🎜🎜

쿠키, sessionStorage 및 localStorage의 차이점을 설명해 주세요.

sessionStorage

localStorage는 자동으로 수행되지 않습니다. 데이터는 서버로 전송되고 로컬에만 저장됩니다🎜🎜🎜🎜저장 크기: 🎜🎜<ul class=" list-paddingleft-2" style="list-style-type: square;"> 🎜🎜<code>쿠키 code>데이터 크기는 4k를 초과할 수 없습니다🎜🎜🎜🎜<code>sessionStorage

localStorage

sessionStorage

cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

iframe有那些缺点？

iframe会阻塞主页面的Onload事件
搜索引擎的检索程序无法解读这种页面，不利于SEO
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题

Label的作用是什么？是怎么用的？

label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件

HTML5的form如何关闭自动完成功能？

给不想要提示的 form 或某个 input 设置为 autocomplete=off。

如何实现浏览器内多个标签页之间的通信? (阿里)

WebSocket、SharedWorker
也可以调用localstorge、cookies等本地存储方式

webSocket如何兼容低浏览器？(阿里)

Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 编码发送 XHR 、
基于长轮询的 XHR

页面可见性（Page Visibility API）可以有哪些用途？

通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;
在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放

如何在页面上实现一个圆形的可点击区域？

map+area或者svg
border-radius
纯js实现需要求一个点在不在圆上简单算法、获取鼠标坐标等等

实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果

<p style="height:1px;overflow:hidden;background:red"></p>

网页验证码是干嘛的，是为了解决什么安全问题

区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水
有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

title与h1的区别、b与strong的区别、i与em的区别？

title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响
strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：会重读，而是展示强调内容
i内容展示为斜体，em表示强调的文本

页面导入样式时，使用 link 和 @import 有什么区别？

link 属于HTML标签，除了加载CSS外，还能用于定 RSS等；@import 只能用于加载CSS
页面加载的时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载
@import 只在 IE5 以上才能被识别，而 link 是HTML标签，无兼容问题

介绍一下你对浏览器内核的理解？

浏览器内核主要分为两部分：渲染引擎(layout engineer 或 Rendering Engine) 和 JS引擎
渲染引擎负责取得网页的内容进行布局计和样式渲染，然后会输出至显示器或打印机
JS引擎则负责解析和执行JS脚本来实现网页的动态效果和用户交互
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎

常见的浏览器内核有哪些？

Blink内核：新版 Chrome、新版 Opera
Webkit内核：Safari、原Chrome
Gecko内核：FireFox、Netscape6及以上版本
Trident内核（又称MSHTML内核）：IE、国产浏览器
Presto内核：原Opera7及以上

HTML5有哪些新特性？

새로운 선택기 document.querySelector, document.querySelectorAll
드래그 앤 드롭 API
미디어 재생 비디오 및 오디오
로컬 저장소 localStorage 및 sessionStorage
오프라인 애플리케이션 매니페스트
데스크톱 알림Notifications
의미 체계 태그 기사, 바닥글, 머리글, 탐색, 섹션
향상된 양식 제어 달력, 날짜, 시간, 이메일, URL, 검색
지리적 위치 GEOLOCATIONo 멀티 작업 WebWorker
전체 이중 작업 통신 프로토콜 WebSocket
이력 관리 History
도메인 간 리소스 공유(Cors) Access-Control-Allow-Origin
페이지 표시 이벤트 표시 변경change
창 간 통신 PostMessage
양식 데이터 개체
페인트 캔버스
HTML5에서는 어떤 요소를 제거했나요?

순수한 표현 요소: basefont, big, center,font, s, Strike, tt, u

사용성에 부정적인 영향을 미치는 요소: 프레임, 프레임셋, noframes
HTML5 브라우저 처리 방법 새 탭과의 호환성 문제가 있습니까?

document.createElement를 통해 새 태그 만들기

shim html5shiv.js
HTML과 HTML5를 구별하는 방법은 무엇입니까?

DOCTYPE 선언, 새로운 구조적 요소, 기능적 요소

HTML5의 오프라인 저장소 작동 방식과 사용 방법을 설명해 주실 수 있나요?

HTML5 오프라인 저장 원칙:

사용자가 온라인일 때 사용자 컴퓨터의 캐시 파일이 저장되고 업데이트되며, 사용자가 오프라인일 때 오프라인 저장 사이트 또는 애플리케이션 콘텐츠에 정상적으로 액세스할 수 있습니다.

HTML5 오프라인 저장소 사용:

문서의 html 태그에 매니페스트 속성을 설정합니다(예: 매니페스트="/offline.appcache"

프로젝트에 새 매니페스트 파일을 만듭니다. 매니페스트 파일에 대한 명명 제안은 다음과 같습니다. xxx.appcache
웹 서버에서 올바른 MIME 유형, 즉 text/cache-manifest

온라인일 때 브라우저는 html 태그에 매니페스트 속성이 있음을 발견하고 매니페스트 파일을 요청합니다.

앱에 처음 액세스하는 경우 브라우저는 기반으로 해당 리소스를 다운로드합니다. 그리고 오프라인 저장을 수행합니다
앱에 액세스하고 리소스가 오프라인으로 저장된 경우 브라우저는 파일이 변경되지 않은 경우 새 매니페스트 파일과 비교합니다. , 아무 작업도 수행되지 않습니다. 파일이 변경되면 파일의 리소스가 다시 다운로드되어 오프라인에 저장됩니다
오프라인일 때 브라우저는 오프라인에 저장된 리소스를 직접 사용합니다.
iframe의 장점과 단점은 무엇인가요?

장점:

느린 콘텐츠(예: 광고)를 로드하는 데 사용됩니다.

스크립트를 병렬로 다운로드할 수 있습니다.
하위 도메인 간 통신이 가능합니다.
단점 :

iframe은 메인 페이지의 onload 이벤트를 차단합니다.

일부 검색 엔진에서는 인식할 수 없습니다.
페이지를 많이 생성하므로 관리가 쉽지 않습니다.

양식 컨트롤 사이의 관계를 정의하는 라벨 라벨:

사용자가 라벨 라벨을 선택하면 브라우저는 자동으로 라벨 라벨과 관련된 양식 컨트롤에 초점을 맞춥니다.

사용법 방법 1 ：

<label for="mobile">번호:</label>

<input type="text" id=" mobile" /><label for="mobile">Number:</label>
<input type="text" id="mobile"/>

使用方法2：

<label>Date:<input type="text"/></label>

사용 방법 2:

<label>Date:<input type="text"/></label> code> 
브라우저의 여러 탭 간 통신을 구현하는 방법은 무엇입니까? 

iframe + contentWindow

postMessage

SharedWorker(Web Worker API)

저장 이벤트(localStorge API)

🎜🎜WebSocket🎜 🎜🎜🎜🎜webSocket은 어떻게 low-Socket과 호환되나요? 최종 브라우저? 🎜🎜

Adobe Flash Socket
ActiveX HTMLFile (IE)
멀티파트 인코딩을 기반으로 XHR 보내기
롱 폴링을 기반으로 한 XHR

Page Visibility API 무엇을 사용할 수 있나요?

페이지가 다른 백그라운드 프로세스로 전환되면 음악이나 비디오 재생이 자동으로 일시 중지됩니다.
사용자가 다른 페이지를 탐색할 때 웹사이트 홈페이지 슬라이드쇼 자동 재생이 일시 중지됩니다
이후 로그인 완료하면 자동으로 새로고침이 안됨 다른 페이지 로그인 상태 동기화

title과 h1의 차이점, b와 Strong의 차이점, i와 em의 차이점은 무엇인가요?

title은 전체 페이지의 제목을 나타내고, h1은 명확한 계층적 제목을 나타내며, 이는 페이지 정보 캡처에 큰 영향을 미칩니다.
strong 핵심 내용을 표시하고, 톤을 강화한다는 의미를 가지며, 읽을 수 있는 독서 장치 인터넷에서 강한 것은 스트레스를 받을 것이고 b

는 강조된 내용을 표시하는 것입니다

i 내용은 이탤릭체로 표시되고 em은 강조된 텍스트를 나타냅니다
자연스러운 스타일 태그: b , i, u, s, pre
시맨틱 스타일 태그: Strong, em, ins, del, code
시맨틱 스타일 태그는 정확하게 사용해야 하지만 남용해서는 안 됩니다. 확실하지 않은 경우 자연스러운 스타일 태그를 사용하는 것이 좋습니다

HTML의 기본이론

HTML

관련 기사