html hr 태그의 속성은 무엇입니까? HTML hr 태그 스타일에 대한 자세한 설명-HTML 튜토리얼-php.cn

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

寻∝梦

풀어 주다： 2018-08-18 13:30:39

원래의

30057명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!