최신 웹 개발 튜토리얼

HTML의 예


HTML Basic

HTML 문서
HTML 제목
HTML 단락
HTML 링크
HTML 이미지

예 설명


HTML Attributes

제목 속성 title
HREF 속성 href
폭과 높이 속성
고도 속성 alt
따옴표없이 속성
작동하지 않는 따옴표없이 속성

예 설명


HTML Headings

HTML 제목
HTML 수평선
HTML 헤드

예 설명


HTML Paragraphs

HTML 단락
더 많은 HTML 단락
라인의 사용은 HTML에서 나누기
시 문제 (some problems with HTML formatting)
방법과 줄 바꿈과 공백을 제어하는 <pre> 태그

예 설명


HTML Styles

HTML 스타일
HTML 배경색
HTML 텍스트 색상
HTML 텍스트 글꼴
HTML 텍스트 크기
HTML의 텍스트 정렬

예 설명


HTML Text Formatting

은 USING 굵게 <b> 요소
은 USING 강한 서식 <strong> 요소
기울임은 USING 서식 <i> 요소
포맷은 USING 강조 <em> 요소
은 USING 작은 서식 <small> 요소
마킹은 USING 서식 <mark> 요소
표시된하여 삭제 <del> 요소
삽입은 USING 표시된 <ins> 요소
사용하여 삭제 및 삽입 표시된 <del><ins>
은 USING 첨자 서식 <sub> 요소
은 USING 첨자 서식 <sup> 요소

예 설명


HTML Quotations and Citations

짧은 인용 서식 <q> 요소.
포맷은과 부분 인용 <blockquote> 요소를.
와 서식 문서 작성자 / 소유자 정보 <address> 요소
약어 및 두문자어 포맷 <abbr> 요소
서식 지정 작업 제목 <cite> 요소
와 포맷 텍스트 방향 <bdo> 요소

예 설명


HTML Computercode Elements

키보드 입력하여 서식 <kbd> 요소
은 USING 컴퓨터 출력 서식 <samp> 요소
프로그래밍 코드 사용하여 서식 <code> 요소를
보존 공백과 줄 바꿈 서식 프로그래밍 코드
사용하여 변수 형식 <var> 요소를

예 설명


HTML Comments

숨겨진 의견
조건부 의견
디버깅을위한 댓글

예 설명


HTML CSS

인라인 CSS와 HTML
내부 CSS와 HTML
외부 CSS와 HTML
CSS 폰트와 HTML
사용하여 CSS와 HTML id 속성을
사용하여 CSS와 HTML class 속성을
HTML 및 CSS 국경
HTML 및 CSS 패딩
HTML 및 CSS 여백
HTML 및 CSS 전체 데모

예 설명


HTML Links

절대 URL을 사용하여 연결
상대 URL을 사용하여 연결
링크의 색상 변경
링크에서 밑줄을 제거
링크의 대상 변경
링크로 이미지
책갈피 링크 만들기
프레임에서 나누기 링크
해, mailto 링크
될 수있는 이메일 링크

예 설명


HTML Images


특성을 사용하여 이미지의 높이 및 너비
CSS를 사용하여 이미지의 높이 및 너비
상 높이와 폭이 모두 사용
다른 폴더에있는 이미지
깨진 링크와 이미지
다른 서버에있는 이미지
링크로 이미지를 사용하여
동화상
클릭 가능한 영역과 이미지 맵
부동 이미지

예 설명


HTML Tables

기본 HTML 테이블
테두리 테이블
축소 된 테두리 테이블
셀 패딩 테이블
제목과 표
왼쪽 정렬 제목을 가진 테이블
수평 / 수직 테이블 제목
캡션이있는 테이블
하나 이상의 컬럼에 걸쳐 표 셀
한 행 이상에 걸쳐 표 셀
셀 간격이있는 테이블
내부 HTML 태그 테이블
아이디 I을 사용하여 다른 스타일을 가진 테이블
ID II를 사용하여 다른 스타일을 가진 테이블
클래스 I을 사용하여 다른 스타일을 가진 테이블
클래스 II를 사용하여 다른 스타일을 가진 테이블

예 설명


HTML Lists

정렬되지 않은 목록 (default)
디스크 총알 정렬되지 않은 목록
원 글 머리 기호를 가진 정렬되지 않은 목록
정사각형 글 머리 기호를 가진 정렬되지 않은 목록
총알없이 정렬되지 않은 목록
정렬 된 목록 (default)
숫자와 함께 정렬 된 목록
문자 정렬 된 목록
소문자로 정렬 된 목록
로마 숫자와 함께 정렬 된 목록
소문자 로마 숫자와 함께 정렬 된 목록
설명 목록
중첩 된 목록 I
중첩 된 목록 II
수평 목록
수평 목록 메뉴

예 설명


HTML Block and inline elements

스타일링 <div> 요소
스타일링 <span> 요소

예 설명


HTML Classes

클래스라는 <div> 요소 I을
클래스라는 <div> 요소 II
클래스라는 <span> 요소

예 설명


HTML Layout

레이아웃 사용하여 <div> 요소를
의미 론적 요소를 사용하여 레이아웃
레이아웃하여 <table> 요소

예 설명


HTML IFrame

인라인 프레임 (a frame inside an HTML page)

예 설명


HTML head Elements

와 유효한 HTML 문서에는 <html> <body, and <head>
아니오 유효한 HTML 문서 <head> 요소
<타이틀> 엘리먼트는 문서 제목을 정의 <title>
<스타일> 요소는 스타일 정보를 포함 <style>
<링크> 요소는 외부 자원에 대한 관계를 정의 <link>
<메타> 요소는 특별한 메타 정보를 정의 <meta>
<스크립트> 요소는 클라이언트 측 자바 스크립트를 정의 <script>
<베이스> 요소는 모든 URL의 기본 URL을 정의 <base>

예 설명


HTML Scripts

스크립트를 삽입
의 사용 <noscript> 태그

예 설명


HTML Forms

텍스트 입력이 양식
라디오 버튼 입력이 양식
텍스트 필드와 양식 및 제출 단추
이름 속성이없는 텍스트 필드와 양식
양식 데이터를 그룹화
양식에서 전자 메일 보내기

예 설명


HTML Form Elements

간단한 드롭 다운 목록
미리 선택된 값으로 드롭 다운 목록
텍스트 영역 (a multi-line text input field)
입력 버튼
은 Using <datalist> 요소를
은 Using <keygen> 요소를
은 Using <output> 요소

예 설명


HTML Input Types

입력 텍스트를 입력
입력 password를 입력
입력 유형 라디오
입력 유형 확인란
입력 유형 버튼
입력 유형 번호 - 제한
입력 유형 번호 - 단계를
입력 유형 날짜 - 날짜 선택에
입력 방식 일 - 제한
입력 방식 색상 - 색상 선택기로
입력 유형 범위
입력 유형의 달
입력 유형 주
입력 유형 시간
입력 유형 날짜
입력 유형 날짜 로컬
입력 유형의 이메일
입력 형 검색
입력 유형의 전화
입력 URL을 입력

예 설명


HTML Input Attributes

자동 완성 속성 autocomplete
NOVALIDATE 속성 novalidate
autofocus_attribute
형태의 속성 form
formaction의 속성 formaction
formenctype의 속성 formenctype
formmethod 속성 formmethod
formnovalidate 속성 formnovalidate
formtarget 속성 formtarget
높이와 너비 속성
목록 속성 list
최소 및 최대 속성
여러 속성 multiple
패턴 속성 pattern
자리 표시 자 속성 placeholder
필요한 속성 required
단계의 속성 step

예 설명


HTML5 Canvas

자바 스크립트로 캔버스에 그리기
와 선 그리기 lineTo()
와 원 그리기 arc()
와 텍스트 그리기 fillText()
와 텍스트 그리기 strokeText()
선형 구배 그리기
원형 그라디언트 그리기
와 이미지 그리기 drawImage()

예 설명


HTML5 SVG

SVG 원
SVG 사각형
SVG 둥근 사각형
SVG 스타
SVG 로고

예 설명


HTML5 Media

토끼 플레이
컨트롤 곰 비디오를 재생
자동 재생과 곰 비디오를 재생
컨트롤 말 소리 재생

예 설명


HTML5 Geolocation

지리적 위치 좌표를 가져옵니다
위치 정보의 오류를 처리
지도와 위치 정보를 가져옵니다
구글지도 스크립트와 위치 정보를 가져옵니다
위치 정보를 확인하고 위치를 감시

예 설명


HTML5 Local Storage

영구적으로 이름을 저장
영구적으로 카운터를 저장
하나 개의 세션에 대한 카운터를 저장

예 설명


More HTML5 Examples

HTML5의 드래그 앤 드롭
HTML5 응용 프로그램 캐시
HTML5 웹 근로자
HTML5 서버 전송 이벤트