HTML의 18가지 기본 개념 공유

1.HTML:

Hpyer Text Markup Langage

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

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

마크업: 태그

<태그 속성 = "값">< ;/Label>

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

언어: 언어

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

2. 문서 흐름 순서:

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

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

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

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

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

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

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

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

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

4. 🎜>

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

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

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

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

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

5. 세 가지 CSS 스타일:

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

기능: 브라우저 스타일

(1) 인라인 CSS 스타일:

여기 텍스트는 빨간색입니다

(2) 삽입된 CSS 스타일

삽입된 CSS 스타일은 사이에 작성해야 합니다.

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

외부 CSS는

CSS를 추가하려면 태그를 사용하세요. 스타일 파일은 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;}

글꼴이 빨간색입니다

참고:

스타일 우선순위:

브라우저 기본 스타일< 웹 페이지 작성자 스타일<

17. 요소 분류

HTML의 태그 요소는 일반적으로 세 가지 유형으로 구분됩니다.

(1 ) 블록 수준 요소: - 프레임워크를 구축하는 데 사용됩니다

每个块级元素都从新的一行开始，并且其后的元素另起一行。（独占一行）

元素的高度，宽度，行高以及顶和底边距都可设置。

元素宽度在不设置的情况下，是它本身父容器的100%，除非设定一个宽度。

eg:

<p>   <p>   <h1>...<h6>   <ol>   <ul>   <dl>   <table>   <address>   <blockquote>   <form>

（2）内联元素：——修饰细节

自左向右排列，直到排不下自动换行。宽高无效，随内容而定。

eg:

<a>   <span>   <br>   <i>   <em>   <strong>   <label>   <q>   <var>   <cite>   <code>

（3）内联块级元素——,

和其他元素都在一行上

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

18.

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

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

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

【相关推荐】

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

2. 免费html在线视频教程

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

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