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

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

php是最好的语言
php是最好的语言원래의
2018-07-30 09:30:461395검색

프런트엔드

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标签的一部分。

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

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

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

  • 语法格式如下:

<标签名 属性名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 属性指向外部脚本文件。

<script></p> <p>alert('OK')</p> <p></script>

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

  • 의미가 없는 태그

  • 3.4 텍스트 태그

  • < em >

  • 삭제된 내용에는 밑줄이 그어져 있습니다.
  • / 병음 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.