꼭 읽어야 할, 프론트엔드 HTML과 CSS의 기본 지식 포인트를 체계적으로 소개한 책-HTML 튜토리얼-php.cn

프런트엔드

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.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 구문
* 태그는 HTML의 가장 기본적인 단위이며 중요한 구성 요소입니다.

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

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

内容

` 显示开始结束

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

` 里面的左斜杠可以省略

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

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

2.2 HTML标签属性

HTML属性一般都出现在HTML的开始标签中, 是HTML标签的一部分。
标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中。
标签可以拥有多个属性。
属性由属性名和值成对出现。
语法格式如下：

<标签名属性名1="属性值" 属性名2="属性值" ... 属性名N="属性值">

单标签

双标签

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

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

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

구분됨

의미가 없는 태그
3.4 텍스트 태그
< em >

Hellonihao

CSS 기본 구문

선택기 {
CSS 속성: 값;
selector {속성: 값 속성; : 값}
/* */
픽셀 픽셀

퍼센트 기본 크기 참조

CSS 색상 단위
rgb 숫자 rgb(34,45,23) rgb(20%, 57%, 100%)
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 기본