집 > 기사 > 웹 프론트엔드 > HTML에서 일반적으로 사용되는 태그 요약

HTML에서 일반적으로 사용되는 태그 요약

巴扎黑원래의: 2017-06-16 17:09:171408검색

html 태그 <
글꼴 효과
섹션 나누기 태그
링크 형식
스티커 /음악
테이블 구문
분할 창
Form
색상을 표현하는 방법에는 세 가지가 있습니다.
....속성 나눌 수 있습니다. 세 가지 유형이 있습니다.

align 속성

1 순서가 없는 목록을 기호 목록이라고도 합니다.
2주문 목록
3 정의 목록

name 연결 이름
대상 대상 창 구문 형식:
image
구문 형식:
글꼴 요소
테이블 구문 형식:

tr 요소
td 요소

입력 요소 구문 형식:
요소 선택

옵션 속성

여러 줄 텍스트 상자

맨 위로

HTML에서 일반적으로 사용되는 태그 요약

html

태그< ...일반 스크롤
<마키 동작=슬라이드>...
Sliding
<마키 동작=스크롤>...
기본 스크롤
< 선택 윤곽 동작=대체>...
앞뒤로 스크롤
<선택 윤곽 방향=아래로>...
아래로 스크롤
<선택 윤곽 방향= 위로>. ..

왼쪽으로 스크롤
...
스크롤 수
...너비 설정...높이 설정...
배경 색상 설정
...
스크롤 속도 설정
...
스크롤 시간 설정
...
마우스가 그 위로 지나갈 때 스크롤 중지
...< ;/marquee>
마우스가 떠날 때 스크롤 시작

맨 위로

글꼴 효과

...
제목 단어(

MAX)

...
제목 단어 (minimum)

...굵은 글꼴

...굵은 글꼴(emphasis) (위와 같은 효과)

... 기울임꼴
...italics(emphasis)

... 이탤릭체 (정의를 의미함)
...하단 라인

... (ins ins 텍스트를 의미합니다. ... 키보드 텍스트

`...`
글꼴 입력

고정 폭 글꼴(

파일 내에서는 중앙 공백, 줄 바꿈, 위치 지정 기능이 유효합니다

)
...</plaintext>Fixed -width 글꼴( 표시 기호를 구현하지 않습니다 ) &lt ; 목록 >... ;...최소 글꼴 <글꼴 스타일 ='font-size:100 px'>...무제한 증가 맨 위로영역 나누기 표시 <hr>가로선 <hr size= '9'> 가로선(크기 설정) <시간 너비 ='80%'> 수평선(폭 설정<a href="#_labelTop">) </a> <img class="anchorclass" alt="HTML에서 일반적으로 사용되는 태그 요약" > <hr color='ff0000'>수평선(set color) (줄바꿈 ) ...waters(줄바꿈 없이) ...waters( 단락 ) <center>...</center>Centered <a href="#_labelTop">맨 위로</a><img class="anchorclass" alt="HTML에서 일반적으로 사용되는 태그 요약" > <h2><!>링크 형식 </h2> <base href=Address>(기본 링크 경로) <a href=Address></a>외부 링크 <a href=addresstarget='_blank'></a>외부 링크(새 창에서 열기) <a href=Addresstarget='_top'></a>External link(전체 창 링크) <a href = = 대상 = ' 페이지 상자 이름' & lt;/a & gt; Top<!>stickers/music <a href="#_labelTop"><img src=</a>사진 주소<img class="anchorclass"/ alt="HTML에서 일반적으로 사용되는 태그 요약" >><h2>stickers <img src =image address</h2>width="180">이미지 너비 설정 </h2></a> < img src=이미지 주소height="30"& gt ;이미지 높이 설정<img src=이미지 주소alt="프롬프트 텍스트">이미지 프롬프트 텍스트 설정 <img src=이미지 주소 border=" 1 ">사진 테두리 설정 <bgsound src=MID음악 파일 주소>배경 음악 설정 <a href="#_labelTop">맨 위로</a> <img class="anchorclass" alt="HTML에서 일반적으로 사용되는 태그 요약" > <h2>< !>테이블 구문</h2> <table aling=left>...</table>테이블 위치,left < table aling=center>.. .</table>테이블 위치,centered <table background=image path>...</table> URL= 배경 이미지는 경로 URL입니다 <table border=border size>...</table>테이블 테두리 크기 설정(숫자 사용) <table bgcolor=color code>...</table>테이블의 배경색 설정 <table borderclor=color code > ...</table>테이블 테두리 색상 설정 <table borderclordark=Color code>...</table>테이블 어두운 테두리 색상 설정 <table borderclorlight=Color code>...</table>테이블 조명 테두리 색상을 설정합니다 <table cellpadding=parameter >. .. ... /table>테이블의 열 수 지정<tableframe=parameter>...</table> 테이블의 표시 방법을 설정합니다. 테이블 개요<table width=width>...</table>테이블 너비 지정(숫자 사용) <테이블 높이=height td & gt; 셀 병합 컬럼의 열 수 ( use numbers ) & lt; td rowspan = parameter & gt; ... & lt;/td & gt. ;열을 병합할 저장 열 수 지정(숫자 사용) 맨 위로창 분할<프레임 cols="20%로 설정 ,"&g t; 왼쪽 및 오른쪽 분할,왼쪽 프레임을 20%<a href="#_labelTop"></a>으로 분할합니다. 브라우저는 오른쪽 프레임의 크기를 자동으로 조정합니다<img class="anchorclass"/ alt="HTML에서 일반적으로 사용되는 태그 요약" ><h2><frameset 행="20 %,">상하 분할 ,상단 프레임을 20%로 분할브라우저는 하단 프레임의 크기를 자동으로 조정합니다 <frameset cols="20 %,">왼쪽 및 오른쪽 프레임 분할 <frameset cols="20%,,20%">왼쪽, 중간, 오른쪽 프레임을 3개의 프레임으로 분할 <상단 프레임과 하단 프레임으로 분할 <framesetrow="20%,,20%">상단, 중간, 하단 프레임 분할 속성: cols 세로 자르기 창(예: 두 개의 창을 왼쪽과 오른쪽으로 분할)은 정수 값, 백분율, 을 허용합니다(는 남은 공간을 나타냅니다). 부분으로 나누어져 있으므로 쉼표로 구분해야 합니다. 예: cols="30,,50%"는 세 개의 창으로 나눌 수 있습니다. 첫 번째 부분은 절대 분할의 경우 30픽셀(pixels)이고 두 번째 부분은 다음과 같습니다. 할당이 완료되었습니다. 첫 번째와 세 번째 조회 후 남은 공간인 세 번째 부분은 전체 창의 50%을 차지하며 이는 상대적 분할입니다. rows는 가로 자르기로 위쪽 창과 아래쪽 창을 분리하는 값 설정은 위와 동일합니다. 위의 두 속성을 동일한 <frameset> 태그에 넣지 마세요. Wangjing(netscape)에서는 이를 지원하지 않으므로 여러 분할을 사용해 보세요. frameborder 프레임의 테두리를 설정합니다. 값은 테두리가 없는 0과 테두리가 있는 1입니다. border 프레임 테두리 두께 설정 framespacing 공간을 유지하기 위해 프레임 사이의 거리를 나타냅니다. frame 요소(단일 라벨) 문법 형식: <frame name="" src="url" scrolling="yes/no" noresize> 속성: name 프레임 이름, 대상 창에 연결할 프레임을 지정합니다. src 프레임에 표시될 url 주소는 각 프레임이 html 문서와 일치해야 합니다. scrolling 스크롤바 표시 여부는 yes/no, auto는 자동입니다. noresize 사용자가 이 프레임의 크기를 변경하지 못하도록 설정하고, noframe 요소 프레임을 사용하는 페이지가 지원되지 않는 브라우저에서 열릴 때 지정 프레임 표시되는 정보 문법 형식: <noframe> ...... </noframe> <a href="#_labelTop">맨 위로 돌아가기 </a><img class="anchorclass" alt="HTML에서 일반적으로 사용되는 태그 요약" > <h2> 양식 <form></form> </h2> 문법 형식: <form action="url" method="get/post"> .... <input type=submit><input type=reset> action is 양식에 작성된 정보가 cgi로 전송될 수 있도록 양식을 처리하는 프로그램의 위치를 지정합니다. 이 매개변수를 action="mailto:lwr8494@163.com"으로 설정할 수 있습니다. 이 양식 작성된 정보가 이 이메일 주소로 전송됩니다. method 는 cgi 및 기타 네트워크 프로그램에 정보를 전송하는 방법을 말합니다. 선택적 post 방법, get 방법, post 방법을 사용하면 대량의 정보를 보낼 수 있습니다. get 메소드는 1k 아래 정보만 허용합니다. 신청 양식은 post 검색 엔진은 get < - - ... -> HREF HREF 대상> 하이퍼링크 지정 <A NAME=앵커의 이름> 연결된 지점의 이름 <ADDRESS>.....</ADDRESS> 굵은 글꼴 <BASE TARGET> 하이퍼링크 분할 창 지정 <BASEFONT SIZE> 사이즈 <BGSOUND SRC> 배경 음악 추가 <BIG> 큰 글꼴 표시 <BLINK> EXT LINK VLIN K> 텍스트 설정 color <BODY> 이 기사 표시 줄 바꿈 <CAPTION ALIGN> <캡션&gt ;... </CAPTION> 표에 제목 추가 <CENTER> 중앙에 정렬 <CITE>...<CITE> <CODE>...</CODE> 코드 목록을 나열하는 데 사용됩니다. <COMMENT>...</COMMENT> <DD&gt ; 설정 정의 목록 항목 설명<DFN>...</DFN> Display "Definition " Text & lt;디렉터리& gt;..</DIR> 목록 텍스트 라벨 <DL>...</DL> 정의 목록의 라벨 설정 <DT> 정의 목록 항목의 레이블 강조용 사용할 글꼴을 임의로 지정 글꼴 크기 설정 <FORM ACTION> 모바일 양식의 처리 방식을 설정합니다 <FORM METHOD> 모바일 양식의 데이터 전송 방식을 설정합니다 <FRame MARGINHEIGHT&gt 창 설정 <FRame MARGINWIDTH> 창의 왼쪽 및 오른쪽 경계 설정 <FRame NAME> 분할 창 이름 지정 <FRame NORESI ZE& 잠금 분할 창 크기 <FRame SCROLLING> 분할 창의 스크롤 설정 <FRame SRC> HTML 파일을 창에 추가합니다 <FRameSET COLS> 창을 왼쪽 및 오른쪽 하위 창으로 분할 <FRameSET ROWS> 창을 위쪽 및 아래쪽 하위 창으로 분할 <FRameSET>...&lt ;/FRameSET> 분할 창 나누기 <H1>~<H6> 텍스트 크기 설정 <HEAD> <인사> 구분선 추가 <HTML> 파일의 시작과 끝 italics <IMG ALIGN> <IMG ALT> 그래픽 이미지에 주석 달기 <IMG DYNSRC LOOP> 비디오 추가 <IMG HEIGHT WIDTH> 사진 삽입 및 그래픽의 왼쪽 및 오른쪽 테두리 설정<IMG LOWSRC> 사진 기능 미리 로드 <IMG SRC BORDER> < IMG SRC&gt 그림 삽입 <IMG VSPACE> 그림 삽입 및 그래픽의 위쪽 및 아래쪽 테두리 설정 <입력 유형 이름 값> &lt ;ISINDEX> 정의 쿼리 양식 <KBD>...</KBD> 사용자가 텍스트를 입력했음을 나타냅니다 <LI TYPE>...< /LI> 목록 항목 (기호 지정 가능) <MARQUEE> 마퀴 효과 <MENU>...</MENU> 기사 텍스트 라벨 <meta NAME="REFRESH" CONTENT URL> 파일 콘텐츠 자동 업데이트 <MULTIPLE> 여러 항목을 동시에 선택할 수 있는 목록 표시줄 < NOFRame> Definition not 분할 창에 표시되는 텍스트 <OL>...</OL> 직렬화된 목록 <OPTION> &lt ;P ALIGN> 정렬 방향 설정 Segmentation <PERSON>...</PERSON> 사람 이름 표시 <PRE> 원본 배열 사용 <SAMP>...</SAMP> ;/select > 양식에서 목록 열 정의 작은 글꼴 표시 <STRIKE> ;강함> 톤을 강화하는 데 사용됩니다 &lt ;SUB> Subscripts Superscripts <TABLE BORDER=n> 테이블의 줄 높이 < TABLE CELLPADDING> 데이터 필드의 테두리 조정 <TABLE CELLSPACING> 테이블 선 너비 조정 <TABLE HEIGHT> 단지 높이가 table <TABLE WIDTH& gt; 테이블 너비 조정 <TABLE>...</TABLE> 테이블 필드의 왼쪽 및 오른쪽 정렬 조정 <TD BGCOLOR> 테이블 필드의 배경색 설정 T & lt; TD COLSPAN ROWSPAN & GT; & td nowrap & gt; <TD WIDTH> <TD>...</TD> 테이블 데이터 필드 정의 <TEXTAREA NAME ROWS COLS &gt ; 양식에 추가할 텍스트 입력 필드의 열 수 < TEXTAREA WRAP> 텍스트 입력 필드가 자동으로 줄바꿈할지 여부를 결정합니다. <TH>...</TH> 헤더 필드 정의 <TITLE> title <TR>...</TR> 한 줄로 정의한 표가 아름답습니다 <TT> 타자기 글꼴 밑줄 친 text <UL TYPE>...</UL> 변수를 표시하는 데 사용됩니다 BlockQuotc텍스트 들여쓰기 맨 위로 세 가지 방법이 있습니다. 1 16기본 색상 코드 구문: #RRGGBB 예: red (<a href="#_labelTop">RRR</a> <img class="anchorclass"/ alt="HTML에서 일반적으로 사용되는 태그 요약" >,<h2>GGG , </h2>BBB) 예: red 3,색상을 직접 사용 영어 이름 예: red 맨 위로<body&g 티;. ....</body> 속성은 세 가지 유형으로 나눌 수 있습니다: 1, 배경 속성 포함: bgcolor, 배경 2, text 속성 : 에는 text, link, alink, vlink, 3, Blank 속성: 이 포함됩니다. leftmargin, topmargin .bgcolor 배경색문법 형식: <body bgcolor="#ff0000"> .Background배경 패턴. 문법 형식: <body background="url"> .text텍스트 색상(연결되지 않은 텍스트 색상) .link연결된 텍스트 색상(연결 가능한 텍스트) ) 색상) .alink활성 링크 텍스트 색상(클릭 중인 링크 가능한 텍스트의 색상) .vlink방문 링크 텍스트 색상)(클릭된 링크 가능한 텍스트의 색상) 방문하려면 클릭하세요) ) 문법 형식: <body text="color" link="color" alink="color" vlink="color"> .leftmargin 공백 페이지 왼쪽에 M p.topMargin 문법 형식: & lt; 본문 leftmargin = "값" topmargin = " value" & gt; <img class="anchorclass" alt="HTML에서 일반적으로 사용되는 태그 요약" > 참고: <h3>value는 길이 값은 숫자입니다. lt;h2 정렬="? ">text</h3> </h2> 세 가지 속성이 있습니다: leftleft ,center center,rightright 〈p 〉 은 단락 기호이며, 위 속성을 사용하여 전체 단락을 설정할 수 있습니다.〈br>은 줄바꿈 기호 &lt ;nobr>은 줄 바꿈 기호가 아니며 텍스트 양쪽에 배치할 수 있습니다 예: <body> <h3>Jiangnan Meets 리귀의 해</h3> 기왕 집안의 흔한 풍경 p> </body> 사전 서식 지정: <pre class="brush:php;toolbar:false">......</pre> 찾아보기는 글쓰기와 같은 효과가 있습니다. 맨 위로 목록 1순서가 없는 목록은 기호 목록이라고도 합니다. 문법 형식: <a href="#_labelTop"><ul type=" "> </a><img class="anchorclass" alt="HTML에서 일반적으로 사용되는 태그 요약" >disc <h2>solid dot, clrcle</h2> hollow dot , square<img class="anchorclass" alt="HTML에서 일반적으로 사용되는 태그 요약" >solid box<h3><li>Text</li> <li>Text</li> 2 <img class="anchorclass" alt="HTML에서 일반적으로 사용되는 태그 요약" > <h3>문법 형식:</h3> <ol type="?" start"?"> <li>Text</li> <li>Text </ol> type의 값은 숫자 문자입니다. 선택 문자는 1...,a ...,A..., i... ,I... start는 시작 값입니다. 예: start가 3인 경우 3 Start에서 시작해야 합니다. 숫자가 되십시오. 3정의 목록<img class="anchorclass" alt="HTML에서 일반적으로 사용되는 태그 요약" > <h3><dl>정의 목록 표시</h3> <dt>mark 항목 정의 <dd> 정의 내용 표시 문법 형식: <dl> <dt>Text </dt> <dd>텍스트 콘텐츠 </dd> " title="?">...</a> 속성: href 연결 대상 값은 url주소가 연결일 수도 있습니다. 앵커 &lt ;a href="url">...</a> 또는 <a href="anchor">...</ a> </h3> 맨 위로name 연결 이름 구문 형식: <a name="앵커 이름 ">...< /a> 예: <a name="abcdcf">...</a> <a href="#_labelTop"></a>앵커 지점에 대한 연결은 다음과 같아야 합니다. <img class="anchorclass" alt="HTML에서 일반적으로 사용되는 태그 요약" > <h2><a name=" #abcdef">...</a> </h2> 맨 위로 target대상 창 구문 형식: <a href="url "target= "_blank|_self|_farent|_top|windowname">....</a> -blank새 창 열기 _self현재 창이 열려있습니다 <a href="#_labelTop"></a>한 번에 두 개 프레임 리프에만 적용 <img class="anchorclass" alt="HTML에서 일반적으로 사용되는 태그 요약" > <h2>_parent현재 창의 상위 창(상위 수준)이 열립니다. </h2> _top최상위 창 열기 windowname 명명된 창 또는 프레임에서 연결을 엽니다 title연결 프롬프트 <a href="http://www.crazytribe.net" title="Crazy Tribe 홈페이지 열기">Crazy Tribe</ a&gt " height="?" border="?" align="?"> border 속성은 그림 테두리의 너비를 정의하며, 기본값은 <a href="#_labelTop"></a>0 <img class="anchorclass" alt="HTML에서 일반적으로 사용되는 태그 요약" > <h2> align 속성 세트입니다. 그림 옆의 텍스트 위치 </h2> 문법 형식: <img src="" align""> 선택 값은 다음과 같습니다. top상단 정렬 middle Pictures를 텍스트의 중앙에 정렬 bottom이미지와 텍스트의 아래쪽 가장자리 정렬(기본값) left이미지가 정렬됩니다. 왼쪽을 보면 텍스트가 이미지 주변에 배치됩니다 right이미지가 오른쪽에 정렬되고 텍스트가 그림 배치를 따라 정렬됩니다 absmiddle그림이 절대 중앙에 정렬됩니다 현재 텍스트 줄의 absbottom그림은 현재 텍스트 줄의 절대 아래쪽에 정렬됩니다 텍스트 유형 설정 줄바꿈 공백 표시 없음 맨 위로 돌아가기 fontElement 구문 형식: <fontface="글꼴 이름" size="<a href="#_labelTop"></a>글꼴 크기<img class="anchorclass"/ alt="HTML에서 일반적으로 사용되는 태그 요약" >" color=" <h2>글꼴 색상 "> 선택적인 글꼴 크기 값은 1——7이며, 기본값은 3 예: 〈글꼴 얼굴=" 굵은 글씨 " size="4" color="#ff00ff">..... horizontal line<hr> grammar 형식: <hr width="width" align="alignment 기본값은 centercenter" size="수평선 두께는 기본값 2" color="color" noshade> noshade그림자 없음, 실선 둘 다 layer〈p>두 요소 는 단락 요소 와 유사한 블록 수준 요소입니다. 차이점은 두 개의 요소가 두 개의 <p&gt를 생성하지 않는다는 것입니다. ;요소 사이의 빈 줄 은 단락에 있는 일부 텍스트의 속성을 정의할 수 있는 인라인 요소입니다. 문법 형식: ... align레이어 요소의 가로 정렬 설정 stule요소 적용 속성 설정 css canonical 호환성은 보다 약간 낫습니다. 를 사용하는 것이 가장 좋습니다. <a href="#_labelTop">맨 위로 </a><img class="anchorclass" alt="HTML에서 일반적으로 사용되는 태그 요약" > <h2> 테이블 구문 형식 ：</h2> <table width="" bgcolor="" background="" border=""cellspacing="" cellpadding=""> <tr>.. .<td>... .</td>.... 간격 표에 있는 셀의 여백 크기, 기본값은 2픽셀입니다.cellpadding표에 있는 셀 사이의 간격 크기 테이블에서 기본값은 2픽셀입니다.tr 요소 문법 형식: <tr align="" bgcolor="">...</ tr & gt;;; aLIGN 속성 정렬에 대한 선택적 값은 다음과 같습니다. <img class="anchorclass"/ alt="HTML에서 일반적으로 사용되는 태그 요약" ><h3>td 요소 </h3>문법 형식: <td width="width" height="height " align="수평 정렬 " valign="세로 정렬" bgcolor="" background ="" rowspan="셀의 행 범위" colapan="셀의 열 범위<img class="anchorclass"/ alt="HTML에서 일반적으로 사용되는 태그 요약" >"&gt ;...</td> <h3> align 속성 옵션 값은 다음과 같습니다. </h3> left, center, right valign 속성의 옵션 값은 다음과 같습니다. 상단, 중간, 하단 rowspan 및 colapan 행 및 열 전체 수량, 기본값은 1 맨 위로입니다. <h2>input syn 요소 구문 형식 : </h2> & lt; input type = "& gt; type 속성의 선택적 값은 다음과 같습니다. 줄 텍스트 상자 속성: name 텍스트 상자 이름 value 텍스트 상자의 초기 값 size 텍스트 상자의 길이 최대 길이 입력 문자열의 최대 길이 radio Radio 버튼 속성: name Radio 버튼 이름 value 내부 값 선택됨 기본적으로 선택됨 checkbox check Box 속성: name checkbox name value 내부 값 checked 기본 선택됨 재설정 재설정 버튼 제출 확인 버튼 속성: 이름 버튼 이름 값 버튼에 표시되는 텍스트 비밀번호 상자 속성 및 텍스트 상자 속성 동일 file 파일 필드 속성: name파일 필드 이름 size 파일 필드의 길이 maxlength 허용되는 문자 수 파일 필드 상한 hidden hidden domain 속성: name hidden domain name value default value 이미지 이미지 도메인 속성: 이름 으로 표시되는 버튼은 제출, 재설정, 또는 기타 src url address 일 수 있습니다. 목록 상자< 선택> 문법 형식: <select> ..... <option>...</option> ... .. </select> 맨 위로 select 요소 <a href="#_labelTop"></a> <img class="anchorclass" alt="HTML에서 일반적으로 사용되는 태그 요약" >구문 형식: <h2><select name="" size=" " 다중> </select> </h2>name 목록 상자의 이름을 지정하세요 size 목록 상자에 표시되는 목록 항목의 개수를 지정하세요. 요소는 목록이고, 그렇지 않으면 드롭다운 목록 상자입니다 multiple 이 매개변수가 지정되면 목록 상자에서 여러 항목을 선택할 수 있으며, 그렇지 않으면 하나의 항목만 선택할 수 있음을 의미합니다 <a href="http://www.php.cn/code/4996.html" target="_blank"></a>optionAttribute 구문 형식: <option value="" selected></option> value 목록 항목의 값 selected 이 매개변수가 설정되면 다음에 의해 선택됩니다. 기본 항목 1개 맨 위로<a href="#_labelTop"></a><img class="anchorclass" alt="HTML에서 일반적으로 사용되는 태그 요약" >여러 줄 텍스트 상자<h2><textarea> </h2> <textarea name="" cols=""row="" Wrap= "off /physical/virtual" > 텍스트 상자 높이 wrap텍스트 상자의 래핑 방법에 대한 선택적 값은 다음과 같습니다. off줄을 저장하지 마세요. 포장 정보 physical브라우저가 웹서버로 정보를 보내도록 강제합니다. 여러 줄 텍스트 상자의 텍스트는 한 줄씩 보내야 합니다. virtual 사용자가 Enter를 누르지 않는 한 단어 문자열입니다. 맨 위로 css 캐스케이딩 스타일 시트 캐스케이딩 스타일 시트를 도입하는 방법은 다음과 같습니다. 외부 스타일 시트<a href="#_labelTop"></a><img class="anchorclass" alt="HTML에서 일반적으로 사용되는 태그 요약" > 예 : <h2><head> </h2><link rel="stylesheet" href="/css/default.css"> </head> <img class="anchorclass" alt="HTML에서 일반적으로 사용되는 태그 요약" ><body> <h3>... </h3> </body> </html> 속성: rel 은 <link>을 설명하는 데 사용됩니다. 요소는 여기에 있습니다. 수행해야 할 작업은 독립형 css 파일을 연결하는 것입니다. href 속성은 연결할 css 파일의 url 주소를 제공합니다. font105{font:10.5pt;color:blue} --> </style> </head> <body>.....&lt ;/body></html> 요소 기본값 형식: 가져온 스타일 시트 〈 html> <head> <style type="text/css"> <-- @import url(css/home.css) ; --> </style><img class="anchorclass" alt="HTML에서 일반적으로 사용되는 태그 요약" > <h3><body> </h3> .... </body> </ html><img class="anchorclass" alt="HTML에서 일반적으로 사용되는 태그 요약" > <h3> css우선순위 </h3> 스타일 정의가 대상에 가까울수록 우선순위가 높아지며, 우선순위가 높은 스타일은 낮은 우선순위를 상속합니다. 우선순위 스타일의 비중복 정의이지만 중복을 무시합니다. 정의 만약 4스타일 시트가 동일한 요소에 대해 서로 다른 스타일을 정의하는 경우 우선 순위는 높은 것부터 낮은 것 순으로 요소 기본값, 인라인 스타일 시트, 가져온 스타일 시트, 외부 스타일 시트입니다. <img class="anchorclass" alt="HTML에서 일반적으로 사용되는 태그 요약" > <h3>css구조</h3> 예: td{font-size:10.5pt;color:#666666} c ss 스타일은 두 가지 기본 부분으로 구성됩니다. , 선택기 <td> 및 선언 {font-size:10.5pt;color:#666666} 선언도 두 부분으로 구성됩니다. 속성 글꼴 크기, 색상 및 값 10.5pt, #666666 <img class="anchorclass" alt="HTML에서 일반적으로 사용되는 태그 요약" > <h3> 선택자는 6 유형</h3> 1으로 나뉩니다. 요소 선택기 켜질 때 페이지 여러 요소가 동일한 스타일을 갖는 경우 여러 요소를 함께 정의하고 쉼표로 구분할 수 있습니다. 예: td,p,li,input,select{font-size:12px;} 2class( 클래스 ) 선택기 예: 〈head> <title>...</title> <style type="text / CSS ">  </style> </head> <body bgcolor="#ffffff"> 학자-공식 징강산구 공식 나인링크 탈퇴계획 </body> 적용할 수 있는 페이지 요소를 제한하는 방법도 있습니다 예: 〈head> <title>...</title> <style type="text/css"> <! -- h1.red{color:#ff0000} --> </style> </head> <본문 bgcolor= "#ffffff"> 학자 공식 징강산구 공무원 <h1 class="red"> 9개의 링크 이탈 계획 </h1> </body> 3 id 선택기 는 class 선택과 유사합니다. 추가 '.' 변경은 '#' 예: <body> <head> <style type="text/css"> <! -- #select{font-size:18px;color:#0000ff} --> </style> </head> <body> <table width="250" border="1" height="50"> <tr> T & lt; td align = "center" id = "select" & gt; id 룬 선택 & lt;/td & gt; & lt;/tr & gt; table & gt; </body> 페이지 스크립트 언어association selector 호출을 용이하게 하기 위해 id=""로 대체되었습니다. &lt ;body><head&gt ; <style type="text/css">  &lt ;/style> < /head> <body> <a href="#">연결 선택기 </a> <a href="#">연결 선택기 </a> <a href="#">연결 선택기 </a> a > 그렇지 않으면 페이지 연결이 혼란스러워집니다 <h3>의사 요소 선택기</h3> 는 의사 클래스 선택기의 정의와 유사합니다. 현재 대부분의 브라우저에서는 첫 번째 줄 의사 요소(first-line)와 첫 번째 문자 의사 요소 두 가지를 지원합니다. (첫 글자) 요소는 첫 번째 줄을 대문자로 만들고 첫 번째 줄을 가라앉히는 효과를 얻는 데 사용됩니다 예: 첫 번째 줄 <html> <head> < style> <!- -p:first-line{color:red;font-size:20pt}--> </style> </hesd> ;body> <p&gt ;dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf... </body> </html> 길이는 브라우저 창의 크기에 따라 달라집니다. 첫 번째 단어 <html&g t;<head> <style></style> </hem ;cssrules </table></body> </html> 두 가지 하위 레벨 css 는 속성 요소, 동일한 적용 범위, 다른 상속에 사용됩니다. 2.combination Example:td{font-size:12pt} p1{font-size: 12pt}조합 후td,.p1{font-size:12pt} 3.Layering 스타일 정의 후 테이블 속성에 정의<html> <head><style type="text/css"></style> </hesd><body> <table width="300" border="1" height= "150"><tr> <td align="center" style="color:#0000ff" class="red">지방 치안판사 </td> </tr> </table> </body> </html> cssunit 네 가지 범주로 나뉩니다: 1 길이 단위 값은 정수, 소수, 양수, 음수, 0이 될 수 있습니다. 뒤에 단위가 옵니다(음수 값을 가볍게 사용하지 마세요) 환산 관계: 1in(inch )=6pc(pie 1in(inch )= 72pt(파운드 ) 1in(inch)=2.54(cm) 1cm(cm)=10mm(mm) 1cm(cm )=0.3937( 인치) 1pt(파운드)=1/72in(inch)=0.2478mm(mm) 1pc(pie )=1/6in (inch)=중국 신4호 서체의 크기 2 퍼센트 단위 3 색상 단위 4 urlUnit <a href="#_labelTop" style="text-align: right;">Back to top </a> <img class="anchorclass" alt="HTML에서 일반적으로 사용되는 태그 요약" > <h2>p Attributes </h2> color: #999999 Text color font-family: 노래 스타일 글꼴 font-size: 10pt Text size font-style:itelic Text italic 글꼴 변형:작은 대문자 작은 글꼴 <a href="http://www.php.cn/wiki/865.html" target="_blank">letter-spacing</a> : 1pt 텍스트 간격 line-height : 200% 줄 높이 설정 font-weight:bold 텍스트 굵게 <a href="http://www.php.cn/wiki/869.html" target="_blank">vertical-align</a>:sub subscript vertical-align:super superscript <a href="http://www.php.cn/wiki/859.html" target="_blank">text-장식</a>:line-through add?h제외 라인 text-장식:overline 윗줄 추가 text-꾸밈:밑줄 밑줄 추가 text-장식:없음 ?h연결 밑줄 제외 <a href="http://www.php.cn/wiki/863.html" target="_blank">text-transform</a> : 대문자로 사용 첫 번째 단어를 대문자로 사용 text-transform : 대문자 english capital text-transform : 소문자 english writing text-align : right text right alignedtext-align : left text left-valigned text-align:center Text-aligned in the center다음은 css 페이지에 적용할 수 있는 몇 가지 간단한 텍스트 효과입니다. 맨 위로<a href="#_labelTop"></a><img class="anchorclass" alt="HTML에서 일반적으로 사용되는 태그 요약" >Background<h2> TEXTAREA STYLE="테두리:1px 점선 핑크"></h2> 실선 <TEXTAREA STYLE="테두리:1px 솔리드 핑크"> </li></ul>위 내용은 HTML에서 일반적으로 사용되는 태그 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng">성명：<div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox">이전 기사：<a class="dBlack" title="일반적인 전역 속성 요약 및 공유" href="http://m.php.cn/ko/faq/367595.html">일반적인 전역 속성 요약 및 공유</a>다음 기사：<a class="dBlack" title="일반적인 전역 속성 요약 및 공유" href="http://m.php.cn/ko/faq/367598.html">일반적인 전역 속성 요약 및 공유</a></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><a href="http://m.php.cn/ko/article.html" class="bBlack">더보기</a><div class="clear"></div></div><ul class="nphpXgwzList"><li><a href="http://m.php.cn/ko/faq/348757.html" title="HTML 지식 요약" class="aBlack">HTML 지식 요약</a><div class="clear"></div></li><li><a href="http://m.php.cn/ko/faq/348804.html" title="HTML을 빨리 배우는 방법" class="aBlack">HTML을 빨리 배우는 방법</a><div class="clear"></div></li><li><a href="http://m.php.cn/ko/faq/348873.html" title="html xhtml xml의 차이점" class="aBlack">html xhtml xml의 차이점</a><div class="clear"></div></li><li><a href="http://m.php.cn/ko/faq/348884.html" title="src와 href 속성의 차이점" class="aBlack">src와 href 속성의 차이점</a><div class="clear"></div></li><li><a href="http://m.php.cn/ko/faq/348902.html" title="HTML5 및 CSS 대체 사용 정보" class="aBlack">HTML5 및 CSS 대체 사용 정보</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ko/">집</a></li><li><a href="http://m.php.cn/ko/course.html">강의</a></li><li><a href="http://m.php.cn/ko/wenda.html">Q&A</a></li><li><a href="http://m.php.cn/ko/login">나의</a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><a href="http://m.php.cn/ko/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ko/">집<div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course.html">강의<div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/article.html">기사<div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/wenda.html">Q&A<div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/dic.html">사전<div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course/type/99.html">수동<div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/xiazai/">다운로드<div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/faq/zt" title="주제">주제<div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ko/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ko/" >집</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/article.html" class="hover">기사</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/course.html" >강의</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/faq/zt" >주제</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/xiazai" >다운로드</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/game" >게임</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/dic.html" >사전</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;">简体中文（ZH-CN）</a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;">English（EN）</a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;">繁体中文（ZH-TW）</a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;">日本語（JA）</a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;">한국어（KO）</a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;">Melayu（MS）</a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;">Français（FR）</a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;">Deutsch（DE）</a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append(""); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>