>웹 프론트엔드 >HTML 튜토리얼 >HTML(HTML5 포함)의 블록 수준 요소와 행 수준(인라인) 요소에 대한 연구 노트 요약

HTML(HTML5 포함)의 블록 수준 요소와 행 수준(인라인) 요소에 대한 연구 노트 요약

WBOY
WBOY원래의
2016-08-20 08:47:531286검색

1. 먼저 블록 수준 요소와 행 수준 (인라인) 요소?

블록 요소의 특징:

①항상 새 줄에서 시작하세요.

②높이, 줄 높이, 여백, 패딩을 모두 제어할 수 있습니다.

③너비가 설정되지 않은 경우 기본 너비는 컨테이너의 100%입니다.

④ 인라인 요소와 기타 블록 요소를 수용할 수 있습니다.

인라인 요소의 특징:

①과 다른 요소는 같은 줄에 있습니다.


② 높이, 줄 높이, 여백 및 패딩은 불가능합니다. 변경됨;


③너비는 텍스트 또는 이미지의 너비이며 변경할 수 없습니다.

④인라인 요소는 텍스트 또는 기타 인라인 요소만 수용할 수 있습니다.

2. 이제 블록 수준 요소를 살펴보겠습니다.

div:문서 섹션섹션:문서 섹션
nav:navigation
헤더:헤더
문서:문서
aside:문서 사이드바
바닥글:페이지 Foot
details: 요소의 세부 정보
summary: 요소의 표시되는 세부 정보
dialog: 대화 상자 창
h1,h2,h3,h4,h5,h6:title
p:단락
ul: 순서가 없는 목록
ol: 순서가 있는 목록
dir: 디렉토리 목록
li: 프로젝트
dl: 목록
dt: 목록 항목
dd: 프로젝트 설명
menu: 메뉴, 명령 목록
menuiitem: 메뉴 항목
명령: 명령 버튼
양식: 양식
fieldset: 요소 주위의 테두리(양식 내에서 요소를 그룹화하는 데 사용할 수 있음)
범례: 테두리의 제목
select: 목록 선택(인라인 요소)
optgroup: 결합된 선택 목록 옵션
option: 목록 옵션 선택(데이터 목록 옵션으로도 사용 가능)
datalist: 드롭다운 목록 (id 입력의 목록 속성 값에 바인딩됨)
table: table
caption: 테이블 제목
thead: 결합된 헤더 내용(th)
tbody: 결합된 본문 내용(td)
tfoot :결합된 테이블 노트 내용(td)
tr:테이블 행
th:머리글 셀
td:테이블 셀
col:테이블 열 속성;(빈 레이블)
colgroup: 테이블 형식 열 그룹;
iframe: 인라인 프레임
그림: 미디어 콘텐츠 그룹화
figcaption: 그림 제목
맵: 이미지 맵
영역: 이미지 영역
캔버스: 그래픽 컨테이너( 스크립트 그래픽 그리기)
video: video
source: media source
track: text track
audio: sound content
br: newline(빈 레이블)
hr: 가로 구분선( 빈 태그)
pre: 형식화된 텍스트
blockquote: 블록 인용
address: 문서 연락처 정보
center: 가운데 정렬된 텍스트(사용되지 않음)
spacer: 가로 및 세로로 삽입 Space(빈 요소)

3. 다음으로 행 수준 (인라인) 요소를 살펴보겠습니다.

span: 인라인 컨테이너 abbr: 약어
em: 강조
strong: 굵은 강조
mark: 강조 표시된 텍스트
b: 굵은
i: 기울임꼴
bdi:텍스트 방향
bdo:텍스트 방향
큰:큰 글꼴
작은:작은 글꼴
sup:superscript
sub:subscript
del: 삭제된 텍스트
strike: 취소선
s: 취소선
ins: 삽입된 텍스트
u: 밑줄
nobr: 줄 바꿈 금지
wbr: 단어 줄 바꿈 타이밍(빈 태그)
tt: 타자기 텍스트
kbd: 키보드 텍스트
시간: 날짜/시간
cite: 인용
q: 짧은 인용("")
font: 글꼴 설정(일반적으로 사용되지 않음)
acronym: 약어(not html5에서 지원)
dfn: 필드(일반적으로 사용되지 않음)
a: 앵커
img: 이미지
embed: 임베디드(빈 태그)
label:input 태그(텍스트를 클릭하면 컨트롤 트리거)
input: 입력 상자
버튼: 버튼
keygen: 키 생성(빈 레이블)
textarea: 여러 줄 텍스트 입력 상자
output :결과 출력
ruby : 중국어 음성 표기법
rt: 음성 표기법
rp: 브라우저가 루비 요소가 표시하는 내용을 지원하지 않습니다
progress: 진행률 표시줄
meter: 측정
var: 변수 정의
코드:컴퓨터 코드 텍스트
samp:컴퓨터 코드 샘플
선택:드롭다운 목록

오타나 누락이 있으면 정정해주세요 감사합니다!

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