웹 프론트엔드 HTML 튜토리얼 html hr 태그의 속성은 무엇입니까? HTML hr 태그 스타일에 대한 자세한 설명

html hr 태그의 속성은 무엇입니까? HTML hr 태그 스타일에 대한 자세한 설명

Aug 18, 2018 pm 01:30 PM
hr html

html hr 태그의 속성은 무엇인가요? HTML hr 태그 스타일에 대한 자세한 설명 이 문서에서는 html에서 hr 태그의 정의 및 속성 설명과 html hr 태그 스타일을 사용하는 여러 가지 방법을 소개합니다.

html에서 hr 태그의 정의 및 사용법:


태그는 HTML 페이지에 수평선을 만듭니다.

수평선을 사용하면 문서를 시각적으로 여러 부분으로 나눌 수 있습니다.

HTML


태그 예:

가로줄로 구분된 제목과 단락:

<h1>This is header 1</h1>
<hr />
<p>This is some text</p>

html에서 hr 태그의 선택적 속성:

html hr 태그의 속성은 무엇입니까? HTML hr 태그 스타일에 대한 자세한 설명

웹 페이지에서 hr 태그 사용법:

<hr align="center">
<hr align="left">
<hr align="right">
<hr noshade="true">
<hr noshade="false">
<hr size="5">
<hr width="500px">
<hr align="left" noshade="false" size="4" width="500px" color="#ff0000">

HTML에서 다양한 스타일의 hr 태그 사용:

웹 디자인에서 다양한 스타일의 hr을 적절하게 사용하면 페이지에 많은 색상을 추가할 수 있습니다. 다양한 스타일과 다양한 사용 방법을 소개하겠습니다. 그것!

제가 사용하는 편집기는 개인 취향에 따른 것입니다. 무엇을 사용하든 상관없습니다. txt를 직접 사용해도 결국은 정적일 뿐입니다.

첫 번째 유형:

<hr style=" height:2px;border:none;border-top:2px dotted #185598;" />

height:2px; 은 hr

border:none; 테두리 없음

border-top:2px dotted #185598은 수평선을 설정하는 스타일입니다

dotted line #185598 color

두 번째:

<hr style="height:1px;border:none;border-top:1px dashed #0066CC;" />

세 번째:

<hr style="height:1px;border:none;border-top:1px solid #555555;" />

넷째:

<hr style="height:3px;border:none;border-top:3px double red;" />

html에서 다양한 스타일의 hr 사용하기

다섯 번째:

<hr style="height:5px;border:none;border-top:5px ridge green;" />

여섯 번째:

<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
border-top:10px groove skyblue;    groove  上颜色        skyblue   下颜色

그라디언트 색상 :

<hr style="filter:alpha(opacity=5,finishopacity=100,style=1);height:10px" color=green>
<hr style="filter:alpha(opacity=100,finishopacity=5,style=1);height:10px" color=blue>

중앙 투명 칸막이 :

<hr style="filter:alpha(opacity=0,finishopacity=100,style=2);height:12px" color=orange>
<hr style="filter:alpha(opacity=0,finishopacity=100,style=3);height:12px" color=#FF00FF>

중앙 불투명 구분선:

<hr style="filter:alpha(opacity=100,finishopacity=0,style=2);height:15px" color=yellow>
<hr style="filter:alpha(opacity=100,finishopacity=0,style=3);height:15px" color=#00FFFF>

물결선:

<hr style="filter:wave(strength=9,freq=2,lightstrength=20,phase=9);height:15px" color=pink width=95%>

3색 선:

<hr style="border-top: #ff0000 solid; color: #00ff00; border-bottom: #0000ff solid; height: 9px">

점선:

<hr style="border-top: 2px dashed; border-bottom: 2px dashed; height: 2px" color=black>

세로선:

<hr style="height:100px; width:4px" color=orange>
<hr style="filter:alpha(opacity=100,finishopacity=5,style=2); height:100px; width:5px" color=navy>
<hr style="filter:alpha(opacity=0,finishopacity=100,style=2);height:100px; width:4px" color=red>

HTML, XHTML의 차이점

HTML , < ;hr> 태그에는 닫는 태그가 없습니다.

XHTML에서는


을 올바르게 닫아야 합니다(예:
).

HTML 4.01에서는 hr 요소의 모든 렌더링 속성이 더 이상 사용되지 않습니다.

XHTML 1.0 Strict DTD에서는 hr 요소의 모든 렌더링 속성이 지원되지 않습니다.

【관련 추천】

html 제목 태그의 역할은 무엇인가요? html 제목 태그 상세 소개

html 선택 태그 사용법을 아시나요? HTML 선택 태그 속성 소개


위 내용은 html hr 태그의 속성은 무엇입니까? HTML hr 태그 스타일에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

핫 AI 도구

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

PHP 튜토리얼
1596
276
내 HTML 이미지가 나타나지 않는 이유는 무엇입니까? 내 HTML 이미지가 나타나지 않는 이유는 무엇입니까? Aug 16, 2025 am 10:08 AM

먼저 SRC 속성 경로가 올바른지 확인하고 상대적 또는 절대 경로가 HTML 파일 위치와 일치하는지 확인하십시오. 2. 파일 이름과 확장자가 정확하고 대소 문자를 사용하는지 확인하십시오. 3. 이미지 파일이 실제로 지정된 디렉토리에 존재하는지 확인하십시오. 4. 적절한 alt 속성을 사용하고 이미지 형식이 .jpg, .png, .gif 또는 .webp가 브라우저에서 널리 지원되는지 확인하십시오. 5. 브라우저 캐시 문제 해결, Image URL에 새로 고침 또는 직접 액세스하십시오. 6. 파일을 읽고 차단하지 않도록 서버 권한 설정을 확인하십시오. 7. 올바른 따옴표 및 속성 순서를 포함하여 IMG 태그 구문이 올바른지 확인하고 최종적으로 이미지가 정상적으로 표시되도록 브라우저 개발자 도구를 통해 404 오류 또는 구문 문제를 해결하십시오.

HTML에서 DEL 및 INS 태그를 사용하는 방법 HTML에서 DEL 및 INS 태그를 사용하는 방법 Aug 12, 2025 am 11:38 AM

THETAGISUSSODTOMARKDELETEDTEXT.2.THETIMEANDCITEATTETESTESCIFY.2

HTML에서 주소 태그를 사용하는 방법 HTML에서 주소 태그를 사용하는 방법 Aug 15, 2025 am 06:24 AM

THETAGISUSSODTODEFINECONTACTINFORMATIONOROWOROFODOCUMENTORSECTION의 경우, 1. 1. 1. SESOITFOREMAIL, PHYSTYADDRESS, PHONENUMBER, ORWEBSITEURLWITHINANTICLEORBIDE; 2. PLACEITINSIDEFORITORCONTACTORINDORDORINFORINDORINFORINDORINDORINDOCUMENT-WIDECONTACT;

HTML에서 BDO 태그를 사용하여 텍스트 방향을 재정의하는 방법 HTML에서 BDO 태그를 사용하여 텍스트 방향을 재정의하는 방법 Aug 16, 2025 am 09:32 AM

thebdotagisUsedToOverRideTheBrowser'SdefaultDectiveRenderrendingWhenderingWithmixEdleft-to-rightwright 대

HTML에서 스크립트로드에 비동기 속성을 사용하는 방법 HTML에서 스크립트로드에 비동기 속성을 사용하는 방법 Aug 17, 2025 pm 12:52 PM

theasyncattributeinhtmlisusedtoloadandexecuteexternaljavaScriptFilesAsySynshronously, witheplowSertOnloadTheMpernParallelwithHtMllescringScriptIncuteMmediesMmediestimmed SeflSectOmponceponceponcepontrender-blocking;

HTML 선택 요소의 기본값을 설정하는 방법 HTML 선택 요소의 기본값을 설정하는 방법 Aug 17, 2025 pm 01:00 PM

htmlSelect 요소의 기본값을 설정하려면 해당 옵션 요소가 선택한 속성으로 표시되어야합니다. 1. UnitedStates와 같은 기본적으로 선택하려는 옵션에 선택한 속성을 추가하십시오. 2 단일 옵션에서 하나의 옵션만이 속성을 선택했는지 확인하고 여러 옵션이있는 경우 첫 번째 옵션은 소스 코드 순서입니다. 3. 선택한 속성은 첫 번째 옵션에 국한되지 않고 목록의 어느 곳에도 배치 될 수 있습니다. 4.이 방법은 단일 선택 및 다중 선택 선택에 적합합니다. 5. 동적으로 설정 해야하는 경우 JavaScript를 사용하여 Document.querySelec과 같은 값 속성을 작동 할 수 있습니다.

html5에서 div를 중심하는 방법은 무엇입니까? html5에서 div를 중심하는 방법은 무엇입니까? Aug 21, 2025 pm 05:32 PM

Tocenteradivhorizontally, usemargin : 0autowithadefinedwidth.2. forhorizontalandverticalcentering, appluddisplay : flexontheparentwithjustify-content : centerAndalign-items.3.

HTML 숨겨진 속성과 CSS의 차이점 : 없음 HTML 숨겨진 속성과 CSS의 차이점 : 없음 Aug 12, 2025 am 02:08 AM

thehiddenattributeanddisplay : nonebothelementsbutdifferinsemantics, behavior, andusecases.1. thehiddenattributeisasemantichtmlfeaturethideselementsandsoverriddenbycssunlessspecificity!

See all articles