>  기사  >  웹 프론트엔드  >  HTML 소개

HTML 소개

高洛峰
高洛峰원래의
2016-10-31 11:45:563479검색

HTML의 소개

1. 웹 브라우저의 기능은 HTML 문서를 읽고 이를 웹 페이지 형식으로 표시하는 것입니다. 브라우저는 HTML 태그를 표시하지 않지만 태그를 사용하여 페이지의 콘텐츠를 해석합니다.

2.

나의 첫 제목

나의 첫 문단 >

#

사이의 텍스트 설명 페이지#

사이의 텍스트는 페이지 콘텐츠 #

사이의 텍스트는 제목

#

사이의 텍스트로 표시됩니다.


HTML 링크

1.HTML 링크는

태그를 통해 정의됩니다.

링크입니다

HTML 이미지

HTML 이미지는

태그를 통해 정의됩니다. HTML 소개


HTML 요소 구문

시작 태그로 시작하는 HTML 요소

끝 태그로 끝나는 HTML 요소

요소 콘텐츠는 시작 태그와 종료 태그 사이의 콘텐츠입니다.

일부 HTML 요소에는 빈 콘텐츠(빈 콘텐츠)가 있습니다.

빈 요소는 시작 태그에서 닫힙니다( 시작 태그 끝)

대부분의 HTML 요소는 속성을 가질 수 있습니다.

빈 HTML 요소

내용이 없는 HTML 콘텐츠를 빈 요소라고 합니다. 빈 요소는 여는 태그에서 닫힙니다.

은 닫는 태그가 없는 빈 요소입니다(
태그 정의 래핑).

XHTML, XML 및 HTML의 향후 버전에서는 모든 요소를 ​​닫아야 합니다.

과 같이 여는 태그에 슬래시를 추가하는 것은 빈 요소를 닫는 올바른 방법이며 HTML, XHTML 및 XML에서 허용됩니다.

가 모든 브라우저에서 유효하더라도
를 사용하는 것이 실제로는 장기적으로 보장됩니다.

HTML Centering

에는 정렬에 대한 추가 정보가 있습니다.

에는 배경색에 대한 추가 정보가 있습니다.


HTML 가로선

태그는 HTML 페이지에 가로선을 만듭니다.


hr 요소를 사용하여 콘텐츠를 구분할 수 있습니다.

속성 값은 항상 따옴표로 묶어야 합니다.

속성 값은 항상 따옴표로 묶어야 합니다. 가장 일반적으로 사용되는 것은 큰따옴표이지만 작은따옴표를 사용해도 문제가 없습니다.

속성 값 자체에 큰따옴표가 포함된 등 일부 개별적인 경우에는 작은따옴표를 사용해야 합니다. 예:

name='Bill "HelloWorld" Gates'

빈 단락 태그

를 사용하여 빈 줄을 삽입하는 것은 나쁜 습관입니다.

태그로 바꿔보세요!
새 단락을 만들지 않고 줄 바꿈(새 줄)을 원할 경우

태그를 사용하세요.
이것은

파라
줄 바꿈이 있는 그래프입니다

요소는 빈 HTML 요소입니다. 닫는 태그는 의미가 없으므로 닫는 태그가 없습니다.

미리 서식이 지정된 텍스트

이 예에서는 pre 태그를 사용하여 빈 줄과 공백을 제어하는 ​​방법을 보여줍니다.

<p></p>미리 포맷된 텍스트입니다.          >>>>>>>>>>> 미리 서식이 지정된 텍스트입니다. <p></p> 공백 <p></p>과 줄 바꿈을 유지합니다. 그리고 줄 바꿈. <p></p> <p></p>pre 태그는 컴퓨터 코드를 표시하는 데 적합합니다. <p></p> <p></p>주소<p></p>이 예는 HTML에 주소를 작성하는 방법을 보여줍니다. 파일. <p></p> <p></p><p>도널드덕 주소 : </p><p></p><p></p><address>도널드덕<p><br></p> BOX 555 <p><br></p>디즈니랜드<p><br></p>미국<p><br></p>
<p></p>
</address> <p></p><p><br> </p> <p></p><p>W3School 주소: </p><p></p><p></p><address> <p>사용자 서비스 메일함<a href="mailto:service@w3school.com.cn"></a><br></p> Shanghai Yingke Investment Co., Ltd.<p><br></p> No. 789, Jinqiao Development Zone<p><br></p>
<p></p>
</address>결과: <p></p> 도널드 덕 주소 : <p></p> <p></p>도널드 덕<p></p>BOX 555<p></p>디즈니랜드<p></p>USA<p></p> <p> </p>사용자 서비스 메일함<p></p>Shanghai Yingke Investment Co., Ltd.<p></p>No. 789, Jinqiao Development Zone<p></p> <p></p>약어 및 두문자어<p> </p><p>UN<abbr title="United Nations"></abbr></p><p>WWW<acronym title="World Wide Web"></acronym></p> <p></p>텍스트 방향<p></p><p><bdo dir="rtl"> </bdo></p>여기 히브리어 본문이 있습니다<p></p><p></p>여기 히브리어 본문이 있습니다<p></p> <p></p>인용 블록<p></p><p> </p><blockquote>긴 인용문입니다. 이것은 긴 인용문입니다. 이것은 긴 인용문입니다. 이것은 긴 인용문입니다. 이것은 긴 인용문입니다. 이것은 긴 인용문입니다. 이것은 긴 인용문입니다. 이것은 긴 인용문입니다. 이것은 긴 인용문입니다. 이것은 긴 인용문입니다. 이것은 긴 인용문입니다. <p></p>
<p></p>
</blockquote><p>blockquote 요소를 사용할 때 브라우저는 줄 바꿈과 여백을 삽입하지만 q 요소에는 특별한 렌더링이 없습니다. </p><p><br></p><p>HTML 스타일 예 - 배경색 </p><p> background-color 속성은 요소의 배경색을 정의합니다. </p><p></p> <p></p><h2 style="background-color:red">제목입니다</h2><p></p><p style="background-color:green">문단입니다.</p><p></p><p>font-family , 색상 및 글꼴 크기 속성은 각각 요소에 있는 텍스트의 글꼴 모음, 색상 및 글꼴 크기를 정의합니다. </p><p></p><h1 style="font-family:verdana">제목</h1><p></p><p style="font-family:arial;color:red;font-size:20px;">문단. </p> ><p>text-align 속성은 요소 내 텍스트의 가로 정렬을 지정합니다. </p><p></p><h1 style="text-align:center"></h1><p></p><p> </p><p><a href="../example/html/lastpage.html" tppabs="http://www.w3school.com.cn/example/html/lastpage.html"> </a></p><p>테이블 헤더<img  border="0" src="../i/eg_buttonnext.gif" tppabs="http://www.w3school.com.cn/i/eg_buttonnext.gif" alt="HTML 소개" ></p>테이블 테이블 헤더는 <p> 태그를 사용하여 정의됩니다. <🎜> 🎜>다른 제목</p><p></p><p></p><p></p><th>
<p>1행, 1번 셀</p>
<table border="1">
<p></p>
<tr>
<p></p>
<th>Heading</th>           >>>>>>>>注意<p></p>
<th>Another Heading</th>
<p></p>
</tr>
<p></p>
<tr>
<p></p>
<td>row 1, cell 1</td>
<p></p>
<td>row 1, cell 2</td>
<p></p>
</tr>
<p></p>
<tr>
<p></p>
<td>row 2, cell 1</td>
<p></p>
<td>row 2, cell 2</td>
<p></p>
</tr>
<p></p>
</table>
<p></p>1행, 셀 2<p></p>
<p></p>
<p></p>
</th><tr>
<p></p>
<td></td>2행, 셀 1 <p></p>
<td></td>행 2, 셀 2<p></p>
</tr><p></p><tr>
<p></p>
<td> </td> 테이블 그리드의 빈 셀<p></p>
<td>table border="1"></td>
<p></p>
</tr><p>행 1, 셀 1 1행, 2번 셀2행, 1번 셀 </p><p> </p><p>순서가 없는 목록:</p><p></p><h4>순서가 없는 목록:</h4><p></p>

  • 커피
  • 우유

주문 목록:

주문 목록:

  1. 커피
  2. 우유

정의 목록

커피

블랙 핫 드링크

우유

화이트 차가운 음료


양식

양식은 양식 요소를 포함하는 영역입니다.

양식 요소는 사용자가 양식에 정보를 입력할 수 있는 요소(예: 텍스트 필드, 드롭다운 목록, 라디오 버튼, 확인란 등)입니다.

양식은 양식 태그(

)를 사용하여 정의됩니다.

입력

대부분의 경우에 사용되는 form 태그는 입력 태그()입니다. 입력 유형은 유형 속성(type)으로 정의됩니다.

텍스트 필드

텍스트 필드는 사용자가 양식에 문자, 숫자 등을 입력하려고 할 때 사용됩니다.

이름:


성 :


라디오 버튼

남자 이름과 가치는 무슨 뜻인가요?


여성

체크박스

자전거가 있어요


차가 있어요

액션 속성(Action) 및 양식의 확인 버튼

                                                                ~

사용자 이름:

가치란 무엇을 의미하나요?

예:

간단한 드롭다운 목록

이 예는 간단한 드롭다운 목록을 만드는 방법을 보여줍니다. HTML 페이지 드롭다운 목록 상자의 아래 목록. 드롭다운 목록 상자는 선택 가능한 목록입니다.

》》》》첫 번째 선택에 추가

텍스트 필드

이 예는 텍스트 필드(여러 줄 텍스트 입력 컨트롤)를 만드는 방법을 보여줍니다. 사용자는 텍스트 필드에 텍스트를 쓸 수 있습니다. 쓸 수 있는 문자 수에는 제한이 없습니다.

우리 편집기는 텍스트 영역

입력과

브라우저를 사용하므로 이 예는 편집할 수 없습니다

텍스트 영역 내부에 텍스트 영역을 허용하지 않습니다.

정원.

버튼 만들기

상자 만들기:

건강 정보:

키:

입력창과 확인버튼 형태

첫번째 이름:

성:

확인란이 있는 양식

저는 자전거를 가지고 있습니다:

저는 자전거를 가지고 있습니다 자동차:


비행기가 있어요:




라디오 버튼이 있는 양식

남:

여성:



세로 표 헤더:

이름

빌 게이츠

전화

555 77 854

전화 555 77 855

그림: 이름 Bill Gates

전화 555 77 854

전화 555 77 855


제목이 있는 표

이 예는 제목(캡션)이 있는 테이블을 보여줍니다.

두 셀에 걸쳐 열:

내 제목

두 행에 걸쳐 있는 셀:


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