html (Hyper Text Markup Language) 하이퍼텍스트 마크업 언어, 발명자: Tim Berners-leehtml은 주로 웹 페이지의 내용과 구조를 정의합니다. html은 웹 페이지를 작성하기 위한 언어입니다. HTML은 브라우저에서만 실행할 수 있습니다. 웹 페이지 기술에는 html(인간의 골격과 유사한 웹 페이지 구조 작성), CSS(계단식 스타일 시트, 웹 페이지 스타일 작성, 인간의 피부와 유사), JavaScript(웹 페이지 특수 작성)가 포함됩니다. 효과 및 상호작용) 인간의 기술(액션)과 유사한 기능) 일반적으로 사용되는 브라우저는 Google Chrome 및 Firefox입니다. 구글 크롬을 권장합니다. 브라우저 열기, F12 또는 마우스 우클릭 -> 개발 도구(dev tool) 열기 체크
HTML 코드를 통해 웹페이지 보기
계산을 통해 요소의 특정 여백을 확인합니다.
웹사이트의 기본 디렉터리 구조: 새 웹사이트 폴더 만들기 -> css, js, imgs 디렉터리를 만들고 그 안에 웹페이지 파일을 작성합니다. w3school: https://www.w3school.com.cn/tags/tag_wbr.asp 모든 HTML 태그, 속성 및 사용법을 쿼리할 수 있습니다. HTML에 대한 참조 매뉴얼로 사용할 수 있습니다.
웹페이지 파일인 .html 파일을 만듭니다. 마우스 오른쪽 버튼 클릭->텍스트 문서 만들기->접미사를 .html로 변경
마우스 오른쪽 버튼 클릭 -> 메모장에서 파일 열기
. <!DOCTYPE html>은 html5.0 버전을 선언합니다.
<head></head> 웹페이지의 헤드(사람의 머리처럼 이해 가능)
<body>hello html!</body> 웹페이지에서 보이는 영역(인체, 입는 옷, 다른 사람이 볼 수 있는 것 등)</html> 웹페이지의 끝
HTML 태그는 <>에 직접 작성해야 합니다. <> 안에 있는 것을 태그(태그)라고 하고, /가 있는 것을 종료 태그(html 종료 태그라고 함), /가 없는 것을 시작 태그라고 합니다. HTML은 다양한 기능을 가진 많은 태그로 구성됩니다. 시작 태그와 종료 태그는 다른 태그를 직접 래핑할 수 있습니다. 코드를 작성하려면 Ctrl+S를 눌러야 코드를 저장할 수 있습니다. 대부분의 국내 브라우저는 기본적으로 UTF-8을 표시하지만 일부 브라우저에서는 기본적으로 UTF-8 인코딩을 사용하지 않을 수도 있습니다. 메모장은 기본적으로 UTF-8로 저장됩니다. UTF-8 인코딩 없이 웹 페이지를 표시하면 잘못된 문자가 나타납니다.
태그(Tag) : 태그는 HTML 언어의 기본 단위로 <>와 그 안에 영문 단어로 구성됩니다. 닫는 태그: 시작 태그 <태그 이름>과 끝 태그로 구성되며, html의 대부분 태그는 닫는 태그입니다. 자체 닫는 태그: <>로 시작하고 끝나며, html4 버전에서는 /를 추가할 필요가 없고, html5 사양에서는 /를 추가해야 합니다. (일반적인 것들은: meta, hr, link, br, input, img) 중첩: html의 닫는 태그는 중첩될 수 있고, 트리처럼 무한히 중첩될 수 있습니다. 이 구조를 트리 구조라고 합니다. 이러한 구조를 표현하기 위해서는 일반적으로 라벨이 단독으로 한 줄을 차지하며, 계층적 구조를 표현하기 위해서는 들여쓰기(탭키 8개 줄바꿈)가 필요합니다. 속성: 태그 이름에서 공백 뒤의 단어에는 일반적으로 =가 포함되거나 등호가 없을 수 있습니다. 속성이 다르면 태그에 다른 표시 효과나 기능이 부여될 수 있습니다. 전역 속성: 대부분의 HTML 태그는 제목 속성을 사용할 수 있습니다. 태그 위로 마우스를 이동하면 다음과 같은 프롬프트 내용이 표시됩니다.
<h2 title="hello h2">h2 제목</h2>
비공개 속성: 태그별 속성 요소: 시작 태그와 종료 태그를 포함하여 시작 태그와 종료 태그로 래핑된 콘텐츠입니다. 요소 콘텐츠: 여는 태그와 닫는 태그로 묶인 콘텐츠
8.
블록 수준 요소: 한 줄을 차지하는 요소로, 콘텐츠가 웹 페이지의 너비를 채우지 못하더라도 한 줄 전체를 차지합니다. ——》h1-h6,p,blockquote 인라인 요소(인라인 요소): 한 줄을 차지하지 않습니다. 크기는 자동으로 계산되며 콘텐츠의 너비와 높이에 따라 달라집니다.——》span,strong,i ,em,b, cite, q, code, markhtml 개행 규칙: html에는 자체 처리 규칙 세트가 있습니다. 태그 내용의 시작과 끝 부분에 있는 공백과 줄바꿈은 무시되며, 내용 사이의 공백과 줄바꿈은 1개의 공백으로 처리됩니다.
HTML 마크업 언어는 많은 태그로 구성되며, 태그마다 스타일과 기능이 다릅니다.
<h1>h1</h1>
h1-h6 제목 태그에서는 글꼴이 큰 것부터 작은 것 순으로 정렬되어 있으며 글꼴이 굵은 효과를 냅니다.
align 속성: 텍스트 정렬을 설정합니다. 속성 값은 왼쪽, 가운데, 오른쪽입니다. 기본값은 왼쪽 정렬이며 생략할 수 있습니다.
<p></p>: p 태그, 단락 태그, p 태그에는 상단과 하단에 16px 여백이 제공됩니다.
<hr />: 수평선을 표시합니다
<span></span>에는 기본 스타일이 없으며 주로 CSS 스타일에 사용됩니다.
<br />: 줄 바꿈 태그, br 뒤의 내용은 여백 없이 새 줄에 표시됩니다.
<b></b> b 태그로 묶인 텍스트는 의미 없이 굵게 표시됩니다. html4 버전 태그
<strong></strong>은 의미를 강조했으며 래핑된 텍스트는 굵게 표시됩니다. html5 버전에 새로운 태그가 추가되었습니다.
<i></i>는 의미상 의미가 없으며 단지 이탤릭체입니다. HTML4 태그
<em></em>은 의미를 강조했으며 래핑된 텍스트는 이탤릭체로 표시됩니다. h5가 증가합니다.
<sup>2</sup>: 위 첨자, 패키지 텍스트가 맨 위에 표시됩니다.
<sub>2</sub> 아래 첨자, 줄 바꿈된 텍스트가 더 작게 표시됩니다.
<blockquote></blockquote>는 기본 여백이 있는 인용된 구절(예: 유명한 인용문)을 나타냅니다.
<cite></cite>인용된 내용은 어딘가 또는 누군가로부터 온 것입니다.
<q></q>는 참조를 나타내며 콘텐츠는 ""로 래핑됩니다.
<code></code>는 콘텐츠가 고정 너비 글꼴 스타일로 표시되는 코드 조각임을 나타냅니다.
<code></code>는 콘텐츠가 고정 너비 글꼴 스타일로 표시되는 코드 조각임을 나타냅니다.
<mark></mark>는 노란색 배경으로 콘텐츠를 표시합니다.
<pre></pre>는 줄 바꿈과 공백 기호를 유지할 수 있지만 웹 페이지의 표시 효과를 제어하기 어렵습니다. 일반적으로 특별한 요구가 없는 한 사용되지 않습니다.
  반각 기호, 영문자 1개의 너비, 한자의 절반 너비
  전각 기호, 너비 2자, 너비 1한자
<small></small> 글꼴은 제목 내용보다 한 크기 더 작습니다. 기본 효과는 h 태그에 적용됩니다. h5 신규 추가
<time></time>은 시간을 나타내며 날짜 텍스트는 "datetime 속성: 선택 사항"이라는 태그로 래핑됩니다. 검색 엔진 크롤링을 용이하게 하기 위해 특정 날짜를 설정할 수 있습니다.
<data value="100">100위안</data>은 데이터 텍스트에 사용됩니다. -> 값 속성: 선택사항, 검색 엔진 크롤링을 용이하게 하기 위해 값을 설정할 수 있습니다.
<address></address>는 주소 텍스트에 사용되며 기본적으로 기울임꼴입니다.
<del>190.00</del>은 삭제된 콘텐츠를 나타내며 텍스트에 수평선이 표시됩니다.
<ins>7.9% 할인</ins>은 삽입된 내용을 의미하며 텍스트에 밑줄이 그어집니다.
<abbr title="">HTML</abbr>은 전문 용어 텍스트에 사용됩니다. - "제목 속성의 내용은 용어에 대한 설명으로 사용될 수 있습니다.
<!-- 나는 주석 내용입니다 --> 주석 내용은 브라우저가 렌더링하지 않는 인터페이스이며 주로 프로그래머가 볼 수 있는 것입니다. vscode의 댓글 단축키는 Ctrl+/입니다.
다운로드 주소: http://vscode.bianjiqi.net/
중국어 패키지 설치
자주 사용되는 플러그인
HTML 조각이 HTML 코드를 프롬프트합니다.
자동 이름 바꾸기 태그는 자동으로 태그를 닫고 동기식으로 태그를 수정합니다.
HTML CSS 지원 스마트 프롬프트 CSS 클래스 이름 및 ID 이름
브라우저에서 열기 현재 html 파일을 브라우저에서 열 수 있습니다.
라이브 서버는 파일을 열기 위해 로컬 서버를 생성합니다.
Shift+! 웹페이지의 기본 구조를 빠르게 생성하려면 첫 번째 항목을 선택하세요.
<div></div>에는 기본적으로 기본 웹 페이지 레이아웃 영역인 블록 수준 영역을 나타내는 스타일과 의미가 있습니다.
<header></header>는 웹 페이지 또는 기사의 헤드를 나타냅니다. 예를 들어 기사에서는 웹 페이지에 여러 헤더가 있습니다. 일반적으로 말하면 여전히 웹페이지의 헤더를 나타냅니다.
<main></main>은 웹페이지의 테마 콘텐츠를 나타냅니다. 웹페이지에는 하나의 메인만 있습니다.
<section></section>은 주로 독립적인 테마를 나타내며 div 요소를 대체할 수 있습니다.
<aside></aside>는 웹페이지의 사이드바를 나타낼 수 있으며, 파일 수준에서는 기사의 댓글을 나타냅니다.
<article></article>은 머리글, 바닥글, 섹션, 옆 및 기타 요소를 포함할 수 있는 기사 또는 게시물을 나타냅니다.
<footer></footer>는 하단 영역을 나타내며 웹 페이지 하단이나 기사 하단을 나타낼 수 있습니다.
<nav></nav> 탐색 모듈을 나타내는 탐색 요소입니다. 일반적으로 웹 페이지에는 탐색이 하나만 있습니다.
HTML 태그 중첩 규칙: 1. 레이아웃 요소는 모든 요소를 중첩할 수 있습니다. 2. 블록 수준 요소는 인라인 요소를 중첩할 수 있습니다. 3. 인라인 요소는 블록 수준 요소를 중첩할 수 없습니다. 4. p 태그는 다른 블록 수준 요소를 중첩할 수 없습니다.
a하이퍼링크 태그:
<a href="https://www.baidu.com" target="_self">Baidu로</a> 이 태그를 클릭하면 URL로 이동할 수 있습니다.
재산
1.href는 리디렉션된 웹페이지의 주소입니다.
href="tel:13111111111" tel 프로토콜은 모바일 브라우저에서 전화 링크를 생성할 수 있습니다. 사용자는 전화 걸기를 위해 클릭하여 전화를 걸 수 있습니다. href="mailto:[email protected]": mailto 프로토콜을 사용하여 클릭하면 브라우저가 기기의 기본 메일 프로그램을 열어 사용자가 지정된 메일 주소로 메일을 보낼 수 있도록 합니다. 앵커: ID를 지정할 수 있습니다. html 태그의 속성을 지정한 다음 href="#id"를 통해 지정된 위치로 이동합니다. #은 ID를 나타냅니다.
예를 들어
<a href="#fyp">생활</a> <h3 id="fyp">아주 좋아요</h3>
파일 다운로드: href가 파일 주소이면 파일을 다운로드할 수 있습니다.
Target은 웹 페이지를 열기 위해 점프하는 방식입니다. 기본 속성 값은 _self이며, 현재 창이 열리고, -blank는 새 창을 엽니다.
핑(Ping): 라벨을 클릭하면 핑이 지정한 주소로 게시물 요청이 전송됩니다. 주로 사용자 행동을 추적하는 데 사용됩니다.
이미지 태그:
<img src="./imgs/shop_33.jpg" alt="" height="50" loading="lazy" />
재산
src 속성은 이미지 주소이며, 로컬 이미지 주소 또는 네트워크 이미지 주소일 수 있습니다. alt 속성은 이미지의 텍스트 설명을 설정합니다. 이미지가 표시되지 않으면 alt 속성의 내용이 표시됩니다. width는 이미지의 너비를 설정하고 height는 이미지의 높이를 설정합니다. 둘 중 하나만 설정하면 나머지 하나도 자동으로 계산됩니다. 단위는 pxloading입니다. 속성은 3개의 속성 값을 설정하며, 이는 로딩 속성이 사용되지 않음을 의미합니다. Lazy는 지연 로딩(이미지가 가시 영역에 나타날 때만 로드됨)을 활성화하고,eager는 이미지가 가시 영역에 나타나는지 여부에 관계없이 즉시 이미지를 로드합니다. 그림 이미지 영역 요소
<그림> <img src="F" /> <figcaption>다리 사진</figcaption> </Figure> 그림은 이미지와 관련 정보를 감쌀 수 있는 이미지 영역을 나타냅니다. figcaption은 그림을 설명하며 그림의 제목으로 사용할 수 있습니다.
목록
ol 주문 목록
<ol type="1" 시작="5"> <li>1학년, 1학년</li> <li>1학년 2 보드</li> ... </ol>
각 열 앞에 숫자가 있는 순서가 지정된 목록입니다.
재산
유형 속성
속성 값은 열 앞의 숫자 유형을 설정합니다.
1개의 아라비아 숫자(기본값).
소문자 알파벳 순서
대문자 알파벳 순서
i 소문자 로마 숫자 정렬
I 대문자 로마숫자 순서
역방향 역순 시작은 숫자의 시작 값을 설정합니다.
ul 정렬되지 않은 목록
<ul 유형="정사각형"> <li>1학년, 1학년</li> ... </ul>
순서가 지정되지 않은 목록, 순서 번호 없음, 각 열 앞에 기호가 있음
유형 속성은 목록의 각 열에 대한 기호를 설정합니다: 디스크가 채워진 원(기본값), 속이 빈 원, 정사각형 직사각형. 웹 페이지의 레이아웃 요소로 사용할 수 있습니다.
DL 맞춤 목록
<DL> <dt>웹 프런트엔드</dt> <dd>웹 프론트 데스크</dd> </dl>
dl 목록에는 dl에 dt와 dd의 여러 조합이 있을 수 있습니다.
dt는 용어를 나타냅니다. dd는 용어에 대한 설명입니다.
iframe 웹 컨테이너
<iframe src="https://player.youku.com/ 삽입/XNTg2MzEyMjY2NA==" 프레임경계="0" 전체화면 허용> </iframe>
src 속성은 표시되는 웹페이지의 주소를 설정하고, height는 iframe의 높이를 설정합니다. 전체 화면 버튼을 클릭하면 멀티미디어 태그가 전체 화면으로 표시됩니다.
비디오: 비디오를 재생할 수 있습니다
<동영상 src="./media/test.mp4" 통제 수단 자동 재생 음소거 고리 높이="300" 포스터="./imgs/shop_33.jpg" 미리 로드="자동" </video>
src는 로컬 주소 또는 네트워크 주소일 수 있는 비디오 주소입니다. 플레이어의 컨트롤 바 자동 재생을 제어합니다(크롬 브라우저는 음소거를 설정해야 함) 음소거 음소거 루프 루프 재생 너비 설정 너비, 높이 높이 설정, 일반적으로 하나를 설정하고 다른 것을 설정합니다. 크기 네트워크 이미지 또는 로컬 이미지 사전 로드일 수 있는 포스터 비디오 표지 이미지를 자동으로 계산합니다. 비디오 캐시 속성 값: 자동(기본값)은 전체 비디오를 버퍼링하고, none은 버퍼링하지 않으며, 메타데이터는 비디오 파일의 메타데이터를 버퍼링하며, 일반적으로 설정되지 않으며 기본값을 유지합니다.
<동영상 컨트롤 자동재생 음소거> <source src="./media/test.webm" type=" 비디오/웹"> <source src="./media/test.mp4" type=" 비디오/mp4"> </video>
다양한 브라우저에서 재생되는 비디오 파일 형식과 호환되도록 하려면 재생할 수 있는 비디오 파일을 찾을 때까지 source 요소를 사용하세요.
HTML 기호 입력:
Sogou 입력 방식을 사용하여 특수 기호를 입력할 수 있습니다.
HTML 기호 소스 코드를 통해 기호 표시(권장 방법)
테이블 테이블
테이블은 테이블을 나타낸다
재산:
border테이블 테두리 너비의 너비는 테이블의 너비를 설정합니다. 셀 사이의 공백 cellpadding 셀과 내용 사이의 직접 간격(공백), 내부 여백이라고도 합니다.align table alignment, left left alignment, center alignment, right right align bgcolor 웹 레이아웃의 배경 이미지
tr은 선을 나타냅니다
번째 헤더 셀 - 기본 글꼴은 굵게, 가로 가운데 맞춤
td 표준 셀, 주로 데이터를 표시합니다. (표시 내용은 td 요소 내부에 배치됩니다.)
colspan은 셀을 병합한 후 나머지 셀을 삭제해야 합니다. rowspan은 여러 행의 셀을 병합하고 후속 행의 셀을 병합한 후 초과 셀을 삭제해야 합니다. bgcolor 셀 배경색: 속성 값: 1. 색상 이름(빨간색, 회색 등) 2. 색상 16진수 코드(#000000 검정색, #ffffff 흰색) 3. rga 모드: rga (204,97,70 )cellpadding 등 셀과 내용 사이의 직접적인 간격(공백)이며 내부 여백이라고도 합니다.align은 셀 텍스트의 가로 정렬, 왼쪽(기본값)입니다. 가운데(가운데), 오른쪽(오른쪽) valign 셀 텍스트 세로 정렬, 위쪽 위쪽 정렬, 가운데 가운데, 아래쪽 아래쪽 정렬
caption 표의 제목
thead는 테이블의 헤드입니다(헤더가 없으면 작성할 필요가 없습니다. thead를 작성하는 경우 tbody 및 tfoot이 있어야 합니다). 테이블 헤드에 있는 셀은 일반적으로 th 헤더 요소를 사용합니다. .
tbody 테이블의 몸체 부분
테이블 바닥에 발을 딛다
url: URL이라고도 하는 URL(Uniform Resource Locator)
프로토콜: 브라우저가 서버 리소스를 요청하는 데 사용하는 방법입니다.
http 프로토콜(기본 포트 80)은 생략 가능합니다. 데이터는 일반 텍스트로 전송되므로 쉽게 탈취될 수 있습니다.
https 프로토콜과 HTTP 프로토콜은 SSL 인증서(공개 키와 비밀 키 포함)를 추가하여 웹 페이지에서 전송되는 데이터를 암호화합니다. 기본 포트는 443이며 생략 가능합니다.
호스트: 웹사이트 서버의 IP 주소 또는 도메인 이름입니다. 포트: 컴퓨터의 각 애플리케이션에는 별도의 포트가 있습니다. 경로: 웹사이트의 리소스 위치입니다. 쿼리 매개변수: 서버에 제공되는 추가 정보, 주로 프런트엔드에서 백엔드로 전송되는 데이터
**양식 양식:** 태그에는 많은 양식 컨트롤이 포함되어 있습니다. 양식 컨트롤을 사용하면 사용자가 입력 데이터를 입력하고 양식 태그를 통해 이러한 데이터를 백엔드로 전달할 수 있습니다. (양식 컨트롤에는 모두 이름 속성이 있으며, 이를 통해 양식 컨트롤에 의해 입력된 데이터는 쿼리 매개변수를 통해 백엔드로 전달될 수 있습니다.)
재산:
조치 데이터 전송 방법의 주소 데이터 전송 방법:
값: 요청 가져오기(기본값) 데이터가 쿼리 매개변수로 전달됩니다. 장점: 데이터 전송 속도가 상대적으로 빠르다. 단점: 전송되는 데이터의 크기에 제한이 있고, 문자열만 전달할 수 있다. get 요청인 경우 메소드 속성을 작성할 필요가 없습니다.
요청 후 데이터는 요청 본문을 통해 전달되며 URL 뒤에는 데이터가 표시되지 않습니다. 단점: 데이터 전송 속도가 get만큼 빠르지 않습니다. 단점: 요청 본문에 데이터가 비교적 안전하며, 전송된 데이터가 거의 표시되지 않으며 다양한 데이터를 전송할 수 있습니다.
enctype은 게시 요청과 브라우저가 전달한 데이터의 MIME 유형을 지정합니다(백엔드는 다양한 MIME 유형에 따라 다른 값을 사용합니다).
입력입력란 라벨, 자동폐쇄 라벨
재산
maxlength는 최대 입력 문자입니다. 이를 초과하면 자리 표시자를 입력할 수 없습니다. 입력 내용이 비어 있으면 표시되는 프롬프트 텍스트는 읽기 전용이며, 요소를 선택할 수는 없습니다. . 비활성화되면 비활성화되며 요소는 회색으로 표시되어 선택할 수 없습니다. 값 요소의 표시 값(컨텐츠) 패턴입니다. 입력 상자가 정규식을 충족하지 않으면 선택하라는 메시지가 표시됩니다. 라디오 버튼 또는 다중 선택 상자가 필요합니다. 속성에 입력란에 입력값이 없으면 제출 시 프롬프트 메시지가 표시됩니다. 유형은 입력 태그의 형식을 결정합니다. 다양한 값이 다양한 형태로 표시됩니다.
유형 속성 값:
텍스트(기본값) 텍스트 입력 비밀번호 데이터는 암호문 숫자 숫자 입력 상자에 표시되며 숫자만 입력할 수 있습니다. 숫자 입력 상자 속성--->일반적으로 최소 최소값, 최대 최대값, 단계 속성과 결합됩니다. 단계 길이를 증가시키는 오른쪽 버튼입니다(3개 속성 중 오른쪽에 있는 버튼이 유효함) 검색은 입력 상자를 검색하는 데 사용됩니다. 내용을 입력하면 오른쪽에 명확한 아이콘이 있습니다. 라디오 버튼의 경우 라디오에서 선택한 값인 값을 설정해야 합니다. 라디오 선택을 위해서는 이름 속성이 일관되어야 합니다. checkbox 다중 선택 상자에서는 다중 선택에 의해 선택된 값인 값이 설정되어야 하며, 이름 속성이 일관되게 설정되어야 합니다. email은 이메일 입력 상자입니다. 입력이 이메일 형식이 아닌 경우 프롬프트가 표시됩니다. 일반 URL을 설정하려면 전화번호 입력 상자를 패턴 속성으로 설정해야 합니다. 입력이 URL이 아닌 경우 색상 범위 슬라이더를 선택하고 선택한 값을 슬라이드할 수 있습니다. 지정된 범위 내 - 최소 최소값, 최대 최대값, 단계 각 슬라이드의 단계 크기(기본값은 1) 숨겨진 입력 상자는 숨겨져 웹 페이지에서 볼 수 없습니다. 날짜 날짜 선택, 시간 시간 선택, 월 월, 주 주, 날짜/시간-현지 연도 월 일 시간 - min은 선택적 최소 날짜, max는 선택적 최대 날짜, value 선택한 날짜 속성 버튼은 일반 버튼으로 표시됨, no Any 함수 제출 버튼을 클릭하면 이름 재설정 재설정을 통해 데이터를 백엔드로 전달하고, 양식 양식에 의해 제어되는 값을 초기 값으로 복원합니다. 파일 업로드, 양식 양식은 enctype="multipart/form-data"를 설정해야 합니다.
필드셋 태그
fieldset 태그는 양식 구성 요소 모음을 나타내는 블록 수준 컨테이너입니다. 범례는 일반적으로 필드 집합의 첫 번째 요소이며 필드 집합의 위쪽 모서리에 포함됩니다. 구문: <양식> <필드셋 비활성화됨> <legend>개인정보</legend> </fieldset> </form>
비활성화된 속성은 래핑된 양식 컨트롤을 회색으로 만들고 사용할 수 없게 만들 수 있습니다.
라벨 라벨
라벨 폼 컨트롤의 텍스트 설명은 일반적으로 프리폼 폼에서 사용됩니다.
for 속성은 양식 컨트롤과 연결될 수 있으며 값은 양식 컨트롤의 id 속성 값입니다.
<input type="checkbox" value="test" id="c" > <label for="c">알 수 없음</label>
양식 컨트롤을 레이블 태그에 넣고 자동으로 연결할 수 있습니다. <라벨> <input type="radio" value="man"name="sex">남성</label>
버튼버튼
재산:
유형 버튼 유형: 제출(양식 데이터 제출), 재설정(양식 데이터를 초기 상태로 재설정), 버튼은 동작이 없는 일반 버튼입니다. ——》버튼 태그는 양식 태그 외부에서 사용할 수 있습니다. 제출 속성이 있으며 제출될 수 있습니다.
비활성화된 버튼은 이름 버튼 이름을 비활성화합니다. 데이터를 제출할 때 값 버튼의 값과 일치하도록 이름=값으로 제출합니다. 값은 id 속성입니다. 형태의 형태. 생략하면 기본 연결은 상위 양식에 있습니다.
<form id="form1"></form> <button form="form1" value="test">제출</button>
드롭다운 메뉴 선택
옵션 태그로 설정해야 하는 드롭다운 메뉴를 생성합니다.
<select name="province"에는 dmultiple size="8">이 필요합니다. <optgroup label="남쪽"> <option value="sc">사천</option> <option value="gd" selected>광동</option> </optgroup> <optgroup label="North" 비활성화됨> <option value="sc">사천</option> </optgroup> </select>
재산
1.select——이름 형식 이름, 데이터는 이름=값 형식으로 백엔드로 전송됩니다(값은 선택한 옵션의 값입니다).
비활성화된 양식을 선택할 수 없습니다.
필수 필수
multiple은 여러 옵션을 선택할 수 있습니다. (여러 항목을 선택하려면 ctrl을 눌러야 합니다.) size multiple을 설정하면 한 번에 표시되는 행 수를 설정할 수 있습니다.
2. 옵션 드롭다운 메뉴에서 옵션을 설정합니다. ——》value 선택한 값이 선택되었습니다. 기본 선택 항목을 설정합니다.
3. <optgroup label="南>그룹 옵션——》label은 그룹 이름으로 해당 그룹을 선택할 수 없으며, 비활성화 설정 후에는 해당 그룹에 속한 모든 옵션을 선택할 수 없습니다.
데이터리스트 컨테이너
<데이터 목록 ID="데이터"> <옵션 값="a" 라벨="A11"> <옵션 값="b" 라벨="B11"> <옵션 값="c" 라벨="C11"> </datalist>
datalist는 지정된 컨트롤에 대한 데이터 세트를 제공할 수 있는 컨테이너 태그로, 일반적으로 입력 입력 상자의 입력 프롬프트에 사용됩니다. id 속성은 입력 입력 컨트롤을 연결하는 데 사용됩니다. 입력의 목록 속성은 각 옵션을 설정하기 위해 datalist 컨테이너 옵션과 연결될 수 있습니다. value는 옵션 값이고 label은 값에 대한 설명이며 Chrome 브라우저는 값의 다음 줄에 이를 표시합니다.
텍스트 영역 여러 줄 텍스트 입력 상자
textarea는 기본적으로 밀고 드래그하여 크기를 수정할 수 있는 여러 줄의 텍스트 입력 상자입니다. 패키지의 내용은 값 자리 표시자 프롬프트 텍스트입니다. 행 텍스트 상자의 높이, 단위는 행 cols 텍스트 상자의 너비, 단위는 문자 비활성화됨 입력이 금지됩니다. maxlength 최대 입력 문자 minlength 필요한 최소 입력 문자 필수
산출
10+10<output name="result">20</output>은 사용자 작업의 결과를 나타냅니다.
진전
<progress max="100" value="50">50%</progress>s는 작업 완료 진행률을 나타내는 인라인 요소이며 일반적으로 진행률 표시줄 스타일로 표시됩니다.
max는 진행률 표시줄의 최대값입니다. 기본값은 현재 진행률을 나타내는 1value에서 0-max 사이의 숫자입니다.
미터 표시기
<미터 제목="455" min="100" max="500" value="455" low="150" high="350"></meter>
미터 표시기는 알려진 범위 내의 값을 표시합니다. 값은 낮음과 높음에 녹색으로 표시되고 다른 영역에는 주황색으로 표시됩니다.
min은 범위의 최소값입니다. max는 범위 값의 최대값입니다. 현재 값 low 하위 임계값(min보다 큼) high 상위 임계값(max보다 작음)
세부정보collapse 태그
세부정보 축소 태그. 기본적으로 브라우저는 콘텐츠를 확장하기 위해 태그를 축소합니다.
접는 제목 설정
<상세> <summary>제목 접기</summary> <ul> <li>테스트1</li> </ul> </세부사항>
블록 수준 태그(요소) div, p, form, ul, h1-h6, dl, header, nav, section, aside, main, article, footer 인라인 태그(요소)span, em, Strong, input(text,password) , 라디오, 체크박스, 파일), 버튼, 선택, 라벨 등이 진행률 표시줄 스타일로 표시됩니다.
- max 진행률 표시줄의 최대값, 기본값은 1 - 값은 0~최대 사이의 숫자로 현재 진행 상황을 나타냅니다. **미터 표시**
미터 표시기는 알려진 범위 내의 값을 표시합니다. 값은 낮음과 높음에 녹색으로 표시되고 다른 영역에는 주황색으로 표시됩니다. - min 범위의 최소값 - max는 범위의 최대값입니다. - value는 현재 값입니다. - low는 하한 임계값입니다(min보다 큼). - 높음 더 높은 임계값(최대값보다 작음) #### 세부정보 태그 세부정보 축소 태그를 축소하면 브라우저는 기본적으로 태그를 축소하여 콘텐츠를 감싸고, 클릭하면 콘텐츠를 확장하고 볼 수 있습니다. <summary>접는 제목 설정
제목 접기
테스트1
````
블록 수준 태그(요소) div, p, form, ul, h1-h6, dl, header, nav, section, aside, main, article, footer 인라인 태그(요소)span, em, Strong, input(text,password) , 라디오, 체크박스, 파일), 버튼, 선택, 라벨표
위 내용은 HTML에 대한 자세한 소개와 자주 사용되는 코드에 대한 요약입니다. HTML 소개 및 자주 사용되는 코드에 대한 자세한 내용은 downcodes.com의 다른 관련 기사를 참고하세요!