프론트엔드의 세 가지 기초는 무엇입니까?-프런트엔드 Q&A-php.cn

프론트엔드의 세 가지 기초는 무엇입니까?

青灯夜游

풀어 주다： 2021-11-01 15:50:26

원래의

3989명이 탐색했습니다.

프런트 엔드의 세 가지 기반은 다음을 참조합니다. 1. 웹 페이지를 구성하는 언어인 하이퍼텍스트 마크업 언어 HTML 2. 스타일을 정의하는 구조적 언어인 캐스케이딩 스타일 시트 CSS 3. 내장된 스크립트 언어 Javascript는 사용자와 웹 페이지 간의 실시간 동적 대화 관계를 달성하는 데 사용되는 해석된 스크립트 언어입니다.

프론트엔드의 세 가지 기초는 무엇입니까?

이 튜토리얼의 운영 환경: windows7 시스템, CSS3&&HTML5&&javascript 버전 1.8.5, Dell G3 컴퓨터.

요즘 프론트엔드의 인기는 개발자의 상상을 초월합니다. 분명 단순한 페이지 개발일 뿐이고, 시장에서 말하는 것만큼 인기가 없습니다. 사실 우리는 문 밖에 서 있으면 문 안의 실제 상황을 이해할 수 없을 때가 많습니다.

프론트 엔드가 점점 더 중요해지는 이유는 실제로 사용자 경험이 매우 높은 수준으로 향상되었기 때문입니다. 그가 없었다면 우리는 여전히 Symbian의 세계에서 어려움을 겪고 있을 것입니다. .

사용자와 직접 소통하는 프론트엔드 분야는 경이로운 수준에 이르렀습니다. 그럼에도 불구하고 프론트엔드의 기반, 즉 프론트엔드의 핵심 기술은 변하지 않았습니다.

일상적인 프런트엔드 개발을 구성하는 언어는 여전히 HTML, CSS, Javascript입니다.

1. HTML - 하이퍼 텍스트 마크업 언어

HTML(Hyper Text Markup Language): 마크업 명령(태그)을 사용하여 이미지, 사운드, 그림, 텍스트를 결합합니다. 등의 내용이 표시됩니다. 자체적인 언어 규칙을 규정하여 "텍스트"보다 더 풍부한 의미 항목을 표현하는 데 사용됩니다.

HTML5: 2014년에 공식화 및 출시된 HTML의 최신 표준입니다. HTML5에는 비디오, 오디오, 캔버스/webgl 및 기타 기능을 지원하는 몇 가지 새로운 의미 태그가 추가되었습니다.

HTML 기본 태그: head, body, html, 제목(h1-h7), 단락(p), 링크(a), 이미지(image), 표(table), 목록(ul, ol) 등

HTML 문서의 기본 구조:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello</title>
</head>
<body>
<p>Hello</p>
<a href="http://www.baidu.com"></a>
</body>
</html>

로그인 후 복사

2. CSS-Cascading Style Sheet

수년 동안 개발되었음에도 불구하고 이 언어는 실제로 다음과 같이 설계되었습니다. HTML 태그(태그 요소) 부풀림 문제를 해결하고 언어 디자인이 정말 훌륭합니다. CSS의 핵심은 문서 흐름의 정의와 선택자입니다. HTML 문서를 재정의하여 문서 흐름의 개념을 도입하고 원래의 부풀린 태그를 사용하여 유연한 선택자를 통해 페이지 콘텐츠의 스타일을 수정할 수 있습니다. 초점을 맞춰야 할 것은 문서 흐름의 정의, 요소 상자 모델, 문서 흐름의 파괴 및 수정입니다.

CSS(Cascading Style Sheets): CSS(Cascading Style Sheets)는 글꼴, 색상, 위치 등의 스타일을 정의하는 구조적 언어로, 웹 페이지에서 정보의 형식을 지정하고 표시하는 방법을 설명합니다.

CSS3: CSS의 최신 표준. CSS3에는 애니메이션 및 선택기와 같은 새로운 기능이 추가되었습니다. CSS3 발전의 주요 변화는 CSS3를 일련의 모듈로 나누기로 한 W3C의 결정입니다. 주로 상자 모델, 목록 모듈, 하이퍼링크 방법, 언어 모듈, 배경 및 테두리, 텍스트 효과, 다중 열 레이아웃 등과 같은 모듈이 포함됩니다. 이를 여러 개의 작은 모듈로 나누는 것이 적시에 사양을 업데이트하고 출시하는 데 더 편리합니다. 제조업체는 CSS3의 홍보를 촉진하기 위해 일부 CSS3 모듈 기능을 지원하도록 선택할 수도 있습니다.

css html로 작성 위치:

1) 한 줄로 작성(권장하지 않음)

<h1 style="color:red">haha</h1>

로그인 후 복사

2) html로 스타일 태그로 작성(권장하지 않음)

<style>
h1{
color:red
}
</style>

로그인 후 복사

3), 링크 방식(권장)

<link rel="stylesheet" type="text/css" href="style.css">

로그인 후 복사

3. Javascript 내장 스크립팅 언어

처음에는 Javascript가 브라우저에서 실행되기 때문에 임베디드 스크립트라고 부르기도 하지만 여전히 Javascript가 강력한 프로그래밍 언어로 자리잡는 데에는 영향을 미치지 않습니다. 이 언어는 주로 사용자 행동의 응답 문제를 구현하므로 사용자 행동 이벤트에 따라 다른 연산 결과에 응답합니다. 모든 사용자 경험에는 Javascript를 구현해야 하기 때문에 이 언어는 프런트 엔드의 초점입니다. 언어는 점점 더 완전해지고 있으며 점차 정적인 방향으로 나아가고 있습니다.

1), 라이브러리

라이브러리는 파일 업로드 클래스 라이브러리라고 하는 파일 업로드 시나리오에 대한 캡슐화 구현과 같은 특정 기능에 대한 캡슐화 구현입니다. 이는 예시적인 것이지만 이에 국한되지는 않는다.

2), 프레임워크

프레임워크는 더 많은 문제를 해결하기 위한 캡슐화된 구현입니다. 예를 들어 jQuery 프레임워크는 PC 측(Zepto는 모바일용)에서 Javascript 브라우저 API 호환성을 달성하기 위한 프레임워크이고 MVVM은 다음과 같습니다. 프레임워크는 신속한 구축을 위한 것입니다. 인터페이스 캡슐화 구현은 DOM 작업을 캡슐화하여 수동 DOM 작업을 줄이고 데이터 구조 및 비즈니스 로직의 구현에 중점을 둡니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 프론트엔드의 세 가지 기초는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!