꼭 읽어야 할, 프론트엔드 HTML과 CSS의 기본 지식 포인트를 체계적으로 소개한 책

프런트엔드

1 프론트엔드란?

프론트엔드는 PC, 모바일, 기타 브라우저에서 실행되어 사용자에게 웹페이지를 표시하는 웹사이트의 프론트엔드 부분입니다. 인터넷 기술의 발전과 HTML5, CSS3, 프론트엔드 프레임워크의 적용으로 크로스 플랫폼 반응형 웹 디자인은 다양한 화면 해상도에 적응할 수 있으며 완벽한 다이내믹 디자인은 사용자에게 매우 높은 사용자 경험을 선사할 수 있습니다.

프런트엔드 기술은 일반적으로 프런트엔드 디자인과 프런트엔드 개발로 나누어집니다. 프런트엔드 디자인은 일반적으로 웹사이트의 시각적 디자인으로 이해될 수 있으며, 프런트엔드 개발은 웹사이트의 프런트엔드 코드 구현입니다. 기본 HTML, CSS 및 JavaScript를 포함한 웹 사이트

2 프런트 엔드 개발을 위한 기술 스택

HTML

• Hyper Text Markup Language

• "하이퍼텍스트"는 페이지에 그림, 링크는 물론 심지어 비표시도 포함될 수 있음을 의미합니다. -음악, 프로그램 등 텍스트 요소

• CSS

Cascading Style Sheet

• 은 페이지의 스타일 디자인, 스타일 및 아름다움을 담당합니다. page

• JavaScript

브라우저에서 작성하고 실행할 수 있는 브라우저 스크립트 언어 프로그램

• 적절한 프로그래밍 언어

• 는 페이지 특수 효과를 작성하고 브라우저의 API( BOM), 페이지 내용 조작 및 변경(DOM), 백엔드에서 데이터 가져오기(Ajax), 페이지 렌더링 등

• jQuery는 JavaScript 라이브러리입니다.

• Vue, Angular, React 등이 있습니다. JavaScript 프레임워크

• HTML5 기본

1.HTML

1.1 HTML이란 무엇입니까

HTML이 사용됩니다. 웹 마크업 만들기 언어

• HTML은 Hypertext Markup Language의 영어 약어, 즉 Hypertext Markup입니다. 언어

• HTML 언어는 컴파일이 필요하지 않고 브라우저에서 직접 실행할 수 있는 마크업 언어입니다.

• HTML 파일은 텍스트입니다. 파일에는 일부 HTML 요소, 태그 등이 포함되어 있습니다.

• HTML 파일 .html 또는 .html을 사용해야 합니다. 파일 이름 접미사를 확인하세요.

• HTML은 크기를 구분하지 않으므로 소문자를 사용하는 것이 좋습니다.

• HTML은 W3C

• HTML이 (World Wide Web Consortium)에서 관리합니다. WEB 기술 세계의 열쇠

• 1.2 개발 역사

HTML은 버전 2.0부터 시작되었습니다. 실제로 1993년 6월 IETF(Internet Engineering Task Force)로 발표되었습니다. 3월 초안(표준 아님) HTML 2.0 — 1995년 11월 RFC 1866으로 게시, 2000년 6월 RFC 2854가 게시된 후 더 이상 사용되지 않는다고 선언됨

• HTML 3.2 — —1997년 1월 14일, W3C 권장 표준

• HTML 4.0 - 1997년 12월 18일, W3C 권장 표준

• HTML 4.01(사소한 개선) - 1999년 12월 24일, W3C 권장 표준

• HTML 5 - 2014년 10월 28일, W3C 권장 표준(현재 HTML5를 사용하고 있습니다. )

• 1.3 HTML5의 기원

HTML5 초안의 전신은 웹 애플리케이션 1.0이라고 불렸습니다. 이는 2004년 WHATWG에서 제안되었고 2007년 W3C에서 승인되었으며 새로운 HTML 작업 팀이 설립되었습니다.

• HTML 5의 첫 번째 공식 초안은 2008년 1월 22일에 발표되었습니다. HTML5는 아직 진행 중인 작업입니다. 그러나 대부분의 최신 브라우저에는 이미 HTML5가 일부 지원되어 있습니다.

• 2012년 12월 17일, 월드와이드웹 컨소시엄(W3C)은 수많은 네트워크 작업자들의 노력을 집약한 HTML5 사양이 공식 확정되었다고 공식 발표했습니다. W3C의 연설에 따르면: "HTML5는 개방형 웹 네트워크 플랫폼의 초석입니다."

• 2013년 5월 6일 HTML 5.1의 공식 초안이 발표되었습니다. 이 사양은 World Wide Web의 핵심 언어인 HTML(Hypertext Markup Language)을 최초로 개정한 다섯 번째 주요 버전을 정의합니다. 이 버전에서는 새로운 요소의 상호 운용성을 향상시키기 위한 노력의 일환으로 웹 애플리케이션 작성자를 돕기 위해 새로운 기능이 지속적으로 도입되었습니다.

• 2014년 10월 29일, 월드와이드웹 컨소시엄은 약 8년 간의 노력 끝에 마침내 표준 사양이 완성되었다고 발표했습니다.

• 1.4 HTML5의 장점

1. 유용성을 향상하고 사용자 친화적인 환경을 개선합니다.

• 2. 개발자가 중요한 콘텐츠를 정의하는 데 도움이 되는 몇 가지 새로운 태그가 있습니다. 더 많은 멀티미디어 요소(비디오 및 오디오)를 사이트에 가져옵니다.

• 4. FLASH 및 Silverlight를 대체할 수 있습니다.

• 5. 웹사이트 크롤링 및 색인 생성에 있어서 매우 친숙합니다. (검색 엔진);

• 6. 모바일 애플리케이션 및 게임에서 널리 사용됩니다.

• 7.

• 1.5 HTML5 호환성

• Internet Explorer 9 이상

chrome, Safari, Opera, Firefox 및 wekkit을 핵심으로 하는 다양한 국내 브라우저

• 2 기본 HTML 구문

2.1 HTML 태그

• * 태그는 HTML의 가장 기본적인 단위이며 중요한 구성 요소입니다.

* 일반적으로 두 개의 꺾쇠 괄호를 사용합니다:

* 태그는 닫혀 있습니다(두 가지 형식: 쌍으로 구성되거나 쌍으로 구성되지 않음)

* 双标签（成对）： 可以加内容标签名> 如：`

内容` 显示开始结束

* 单标签（不成对）： 两个单标签内不可加内容 如： `
`   ,   `

---

`   里面的左斜杠可以省略

* 标签大小写都可以，推荐使用小写

* 对与HTML标签来将，最重要的是语义

2.2 HTML标签属性

• HTML属性一般都出现在HTML的开始标签中, 是HTML标签的一部分。

• 标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中。

• 标签可以拥有多个属性。

• 属性由属性名和值成对出现。

• 语法格式如下：

标签名>

单标签

双标签

2.3 HTML代码格式

任何回车或空格在源代码中都是不起作用，一般标签嵌套用缩进所以在编写HTML代码时，都可以使用回车或者空格进行代码排版，这样可以使代码清晰，也便于团队合作。必须保持严格的缩进规则，以Tab键为准。

2.4 HTML 注释

 

可以在里面写单行注释，也可以写多行

注释里的！符号和-- 要连起来不能空格

2.5 HTML实体

注意：用来表示特殊符号，跟转义字符有像

• &nbsq; 表示一个空格

• <表示特殊符号 <

• > 表示符号

• ©表示版权符号 ©上海公安 版权号333333455

• ¥表示人民币符号 ¥1000

• &表示实体本身& 如果是空格则就显示& 如果是符号 则&符号

3 HTML常用标签

文档声明

3.1 主体结构

•  此元素可告知浏览器其自身是一个 HTML 文档。

• 用于定义文档的头部，它是所有头部元素的容器,对文件的描述。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

• 代表文件内容,定义文档的主体

3.2HEAD头部标签

• 双标签内写标题，网页标题

• 标签为页面上的所有链接规定默认地址或默认目标

• 写在最上面，因为下面有输入字符，指定网页的元信息可指定字符编码，关键字，描述信息属性：charset , name ,content

            指定编码

• 导入css 文档，或者指定的网页图标 属性 src ， type ，rel

从文件导入css 

h1{

color: red;

}

• <script></script>标签用于定义客户端脚本，比如 JavaScript。script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。

<script></script>

alert('OK')

排3.3 형식 태그 & LT;/Hn & GT; 1 ~ 6 제목 & & lt;/p & gt;

---

구분됨

• 의미가 없는 태그

• 3.4 텍스트 태그

삭제된 내용에는 밑줄이 그어져 있습니다.
/ 병음 H5 신규 추가
Hellonihao 위에 nihao 디스플레이 추가 Hello

• CSS 기본 구문

CSS 사용

링크에 외부 CSS 파일 소개
html로 작성
html 요소의 스타일 속성 사용
형식

• 선택기 {

CSS 속성: 값 ;

• CSS 속성: 값;

}

• selector {속성: 값 속성; : 값}

주석

• /* */

CSS 길이 단위

• 픽셀 픽셀

em 기본 크기의 배수

퍼센트 기본 크기 참조

cm

mm

pt

• CSS 색상 단위

색상 이름: 빨간색/녹색/bue/보라색/주황색/노란색/핑크/하늘색

• rgb 숫자 rgb(34,45,23) rgb(20%, 57%, 100%)

16진수 #abcdef #f90 #ccc

• 5 CSS 선택기

#태그 이름 선택기

tagName {

}

# 클래스 이름

.className {

}

#ID 선택기

#idName {

}

# 전역 선택기

* {

}

# 결합된 하위 요소

selector selector .list li

# 조합 하위 요소

selector>selector .list>li

# 그룹

selector, selector, selector h1,h2,p ,.list

# 다중 조건 .item.frist_item

p .item

6 선택기 우선순위

ID > CLASS > tagName > sans-serif; 또는 serif 글꼴 serif

font-size 글꼴 크기 10px 1.3em 괜찮습니다

font-weight 보통 /bold 글꼴 너비 기본값 및 굵은 글꼴

font-style 보통/기울임꼴 글꼴 스타일 기본값 italic

font-variant 일반/작은 대문자 글꼴 변형 기본 작은 대문자

글꼴 복합 속성

EFONT: [무게 | 스타일 | 변형] SIZE FAMILY

색상

색상 텍스트

단어 간격 단어 공백

문자 간격 문자 1px 2em 2단어 공백

text-align: 왼쪽 / 가운데 /오른쪽 텍스트 가로 정렬 왼쪽 가운데 왼쪽

vertical-align: 기준선 / middle .... 이미지와 텍스트의 기본 세로 정렬 방식은 중간입니다.

line- height 줄 높이가 한 줄이면 높이가 줄 높이와 같습니다.

• text-designation: none/overline/underline/line-through 텍스트 장식은 기본적으로 윗줄 및 밑줄 취소선으로 설정됩니다.

• text-indent : 2em 텍스트의 첫 번째 줄 들여쓰기

• word-wrap: break-word 단어가 너무 길거나 URL을 줄 바꿈할 수 있습니다

• overflow-wrap word-wrap CSS3의 별칭

• white-space pre pre-wrap Reserved 그대로 입력하고 줄 바꿈 텍스트가 경계에 닿을 때

• 관련 기사:

프런트엔드 기본(제로) CSS 기본

프런트엔드 신규 사용자를 위한 학습 노트 - html/css/js 기본 지식 포인트

• 관련 동영상 :

HTML 및 CSS 기본 소개 비디오 튜토리얼 - 무료 온라인 비디오 튜토리얼

위 내용은 꼭 읽어야 할, 프론트엔드 HTML과 CSS의 기본 지식 포인트를 체계적으로 소개한 책의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!