> 개발 도구 > atom > 본문

Atom이 HTML 실시간 미리보기를 구현하는 방법에 대한 간략한 설명

青灯夜游
풀어 주다: 2021-12-16 19:30:19
앞으로
3850명이 탐색했습니다.

AtomHTML 실시간 미리보기를 구현하는 방법은 무엇입니까? 다음 기사에서는 Atom 편집기에서 HTML 실시간 미리보기를 구현하는 기본 및 플러그인 방법을 소개합니다. 도움이 되길 바랍니다.

Atom이 HTML 실시간 미리보기를 구현하는 방법에 대한 간략한 설명

Atom 편집기는 HTML 실시간 미리보기를 구현합니다

1. 기본 구현

기본 미리보기를 열려면 편집 상자에서 Ctrl + Shift + M을 누르세요. (CSS 스타일 없음) Ctrl + Shift + M可以打开原生预览。(不带 CSS 样式)

2.插件 atom-html-preview 实现

点击 File->settings–>install-> 搜索 atom-html-preview -> 下载,在编辑框中按Ctrl + Shift + H 可以打开预览面板(带 CSS 样式)。【相关推荐:atom使用教程

3. JavaScript window.onload

window.onload() 方法用于在网页加载完毕后立刻执行的操作,即当 HTML 文档加载完毕后,立刻执行某个方法。

window.onload() 通常用于 元素,在页面完全载入后(包括图片、css 文件等等)执行脚本代码。有多个要执行的函数语法:

window.onload=function(){
    Func1();
    Func2();
    Func3();
    .....
}
로그인 후 복사

在页面加载完成后依次执行 Func1、Func2、Func3,并只是执行一次。

4.window.requestAnimationFrame

window.requestAnimationFrame()

2. 플러그인atom-html-preview구현

파일->설정->설치-> 다운로드를 클릭하고 편집을 누르세요. box Ctrl + Shift + H는 미리보기 패널(CSS 스타일 포함)을 엽니다. [관련 권장사항: atom 사용법 튜토리얼

]🎜🎜🎜3. onload🎜🎜🎜🎜window.onload()🎜 메소드는 웹 페이지가 로드된 직후에 작업을 수행하는 데 사용됩니다. 즉, HTML 문서가 로드되면 즉시 메소드가 실행됩니다. 🎜🎜🎜window.onload()🎜는 일반적으로 페이지가 완전히 로드된 후(이미지, CSS 파일 등) 스크립트 코드를 실행하는 요소에 사용됩니다. 실행할 함수 구문은 여러 가지가 있습니다. 🎜rrreee🎜페이지가 로드된 후 Func1, Func2, Func3을 순서대로 실행하고 한 번만 실행합니다. 🎜🎜🎜4.window.requestAnimationFrame🎜🎜🎜🎜window.requestAnimationFrame()🎜 브라우저에 애니메이션을 수행하고 싶다고 알리고 다음에 다시 그리기 전에 지정된 콜백 함수를 호출하도록 브라우저에 요청합니다. 생기. 이 방법을 사용하려면 다음에 브라우저를 다시 그리기 전에 실행될 콜백 함수를 매개변수로 전달해야 합니다. 🎜🎜【관련 추천: "🎜atom tutorial🎜"】🎜

위 내용은 Atom이 HTML 실시간 미리보기를 구현하는 방법에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿