HTML의 18가지 기본 개념 공유

1.HTML:

Hpyer Text Markup Langage

Hpyer Text: 하이퍼텍스트 언어(텍스트, 그림, 링크, 오디오, 비디오 등) )

구분: 일반 텍스트 - 단어 텍스트(텍스트, 표, 그림)

마크업: 태그

85854c20d2ef9a243963bc60b58a2b79< ;/Label>

레이블은 여러 속성을 가질 수 있고, 속성은 여러 값을 가질 수 있습니다. 속성과 값은 공백으로 구분됩니다.

언어: 언어

HTML은 다양한 태그를 사용하여 하이퍼텍스트 내용을 감싼 다음 순서대로 작성합니다

2. 문서 흐름 순서:

브라우저 창이 나누어집니다. 위에서 아래로 행으로. 각 줄의 요소를 왼쪽에서 오른쪽으로 정렬

브라우저 창을 위에서 아래로 행과 행으로 나눕니다. 이를 문서 흐름 순서

라고 합니다. 3. HTML 구조 태그

HTML: 일반 태그, 브라우저에 이것이 HTML 문서임을 알리고 페이지에는

head: head 태그가 하나만 있을 수 있습니다. 문서 포함 관련 정보는 브라우저 창에 표시되지 않습니다. 페이지에는 모든 하이퍼텍스트 콘텐츠가 포함된

body 태그만 있을 수 있습니다. one

meta: 페이지에 대한 관련 정보를 제공합니다. b2f0d49c16306e60b5f5bbc3a6018943특수 종료 방법

제목: 페이지의 관련 내용을 설명합니다. 페이지에는

하나만 있을 수 있습니다! DOCTYPE: 선언 태그, 문서에 사용된 사양 기호의 W3C 사양을 알려주며, 페이지는 HTML 내부에 작성되지 않습니다.

4. 🎜>

(1) 태그 문자는 소문자여야 합니다

(2) 시작 태그가 있으면 종료 태그도 있어야 합니다.

2e1cf0710519d5598b1f0f14c36ba6748c1ecd4bb896b2264e0711597d40766c

bfdf57554631c62e63917d588904f58a

(3) 레이블 값은 큰따옴표로 묶어야 합니다(예: { < ;Tag attribute="value">baa3ea5ae7414741617ff7b18b3fb09e}

(4) 표시되는 모든 기호는 영문 기호여야 합니다

(5) 태그 + 콘텐츠 = 요소

5. 세 가지 CSS 스타일:

CSS(Cascading Style Sheets) 계단식 스타일 시트

기능: 브라우저 스타일

(1) 인라인 CSS 스타일:

bb48c1a665e17caf93008ad3b3e0d707여기 텍스트는 빨간색입니다c22f3dd8a21e7554bdf2e8c88da00289531ac245ce3e4fe3d50054a55f265927 사이에 작성해야 합니다.

(3) 외부 CSS 스타일(.css는 확장자)

외부 CSS는 93f0f5c25f18dab9d176bd4f6de5d30e

CSS를 추가하려면 2cdf5bf648cf2f33323966d7f58a7f3f 태그를 사용하세요. 스타일 파일은 HTML 파일에 연결됩니다

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

CSS 스타일은 근접성 원칙을 따릅니다(단, 가중치의 크기는 판단해야 함)

6. 선택기

.클래스 선택기 이름 {CSS 스타일 코드;}

예:

<span>胆小如鼠</span>
<span class="stress">胆小如鼠</stress>
.stress{color:red;}

7.ID 선택기

ID 선택자는 클래스 이름 앞에 "." 대신 "#" 기호가 붙습니다

8. 클래스(.) 선택자와 ID(#) 선택자의 차이점:

(1) ID 선택자는 문서 내에서 한 번만 사용할 수 있고, 클래스 선택자는 여러 번 사용할 수 있습니다.

(2) 클래스 선택자 하위 목록 방식을 사용하여 여러 개 설정할 수 있습니다. 동시에 하나의 요소에 대한 항목 스타일. ID 선택기가 작동하지 않습니다.

예:

.stress{color:red;}
.size{font-size:25px;}
<p>到了<span class="stress size">三年级</span>下学期。。。</p>

위 코드의 기능은 "third grade" 세 단어의 텍스트 색상을 빨간색으로, 글꼴 크기를 25px로 설정하는 것입니다

9. 선택기

는 지정된 태그 요소의 1세대 하위 요소를 선택하는 데 사용되는 ">" 기호입니다.

예:

.aa > li {border:1px solid red;}

클래스 aa 포함 li 요소에 1px 빨간색 실선 테두리 추가

10. 하위 항목 선택기

.first span {color:red;}
<p class="first">.......<span>胆小如鼠</span></p>

는 빨간색

으로 채워집니다.

11. 하위 선택자와 하위 선택자의 차이점:

(1) 하위 선택자: 직계 자손 - ">"

(2) 하위 선택자 : 모든 하위 항목 - 공백

12. 범용 선택기(*)

는 HTML의 모든 태그 요소와 일치

13. 그룹 선택기( ,)

h1,span{color:red;}

14. 상속(CSS 스타일)

은 다음에만 적용되지 않습니다. 특정 특정 HTML 태그 요소이며 해당 하위 항목에 적용됩니다.

예:

p{color:red;}
<p>我小时候<span>胆小如鼠</span></p>

어렸을 때 소심한 생쥐를 포함하여 글꼴이 모두 빨간색이었습니다. (상속관계)

15. 특이사항:

예:

p{color:red;}
.first{color:green;}
<p class="first">我小时候<span>胆小如鼠</span></p>

참고:

p,. p 태그의 CSS 속성과 일치합니다. 브라우저는 가중치에 따라 사용할 CSS 스타일

을 결정합니다(태그의 가중치는 1, 클래스 선택자의 가중치는 10, ID의 가중치). selector is The Weight is 100)

예:

代码                                                                                                      权值
p{color:red;}                                                                                             1
p span{ color:green;}                                                                             1+1=2
.warning{ color:white;}                                                                           10
p span .warning { color:purple;}                                                             1+1+10=12
#footer .note p { color:yellow;}                                                               100+10+1=111

16. 중요도

CSS 스타일은 가장 높은 가중치를 설정합니다. - important

예:

p { color:red !important;}
p { color:green;}

글꼴이 빨간색입니다

참고:

스타일 우선순위:

브라우저 기본 스타일79877019cceaf656dcca0146003f047d,d5fd7aea971a85678ba271703566ebfd

和其他元素都在一行上

元素的高度、宽度、行高及顶和底边距都不可设置

18.

转换成块级元素：   a { display:block;}

转换成内联元素：   a { display:inline;}

转换成内联块级元素：   a { display:inline-block;}

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费html在线视频教程

3. php.cn原创html5视频教程

위 내용은 HTML의 18가지 기본 개념 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!