HTML 기본_일반 태그, 일반적으로 사용되는 태그 및 테이블

高洛峰

풀어 주다： 2017-02-17 10:54:43

원래의

1095명이 탐색했습니다.

1부 HTML

--시작 태그

웹페이지 정보 제어

페이지에 표시되는 콘텐츠

> ;

--끝 태그

본문 속성:

bgcolor 페이지 배경색

텍스트 텍스트 색상(모든 텍스트 색상 지정)

topmargin 위쪽 여백

leftmargin 왼쪽 여백

rightmargin 오른쪽 여백 거리

하단마진 하단 여백

배경 배경화면

참고: 배경색과 배경화면 중 하나 선택

1.1, 일반 라벨 1.1 1. 형식 제어 태그

글꼴 색상="##FF0000";

gt;

& lt; 강함 & gt; & lt;/strong & gt; 글꼴 굵게(강조, 톤 향상)

& lt; em & lt;/em & gt; 🎜>

'을 중심으로 쇼를 진행합니다.

~ 는 디자인 페이지에서도 누를 수 있습니다. space

1.1.2, 콘텐츠 컨테이너 태그

...

제목(자동으로 줄바꿈됨) HTML 헤딩(Heading)은

-

과 같은 태그를 통해 정의됩니다.

참고:

...

은 증가 또는 감소에 대한 기존 기본 크기에 따라 중요성이 감소합니다. 그리고 전후에 다른 내용이 있으면 전후에 줄 바꿈을 하고, 전체가 되도록 빈 줄을 남겨두세요.

문단)

참고:

앞뒤에 다른 내용이 있는 경우 앞뒤에 줄 바꿈을 수행하고 전체가 되도록 빈 줄을 남겨둡니다.

한 줄)

일련번호는 1,2,3..., 일련번호 형식은 따옴표로 변경할 수 있습니다

< ;li>Content

Content

참고: 기본적으로 시리얼과 함께 제공됩니다. 앞과 뒤가 다른 경우에는 앞뒤로 줄 바꿈을 하고, 전체가 되도록 빈 줄을 남겨두세요.

위의 "ol"을 "ul"로 변경하면 자체 줄 바꿈 기능이 없는 순서가 지정되지 않은 목록입니다.

1.2.공통 태그

하이퍼링크 태그

하이퍼링크 텍스트 --href (하이퍼링크 참조) _blank가 새 창에서 열립니다.

1단계: 앵커 태그를 만듭니다.

2단계: 앵커 링크를 만듭니다.

이미지 태그

Text --높이와 너비를 하나씩 설정하면 표시되는 이미지의 크기가 비례하여 조정됩니다. alt는 이미지를 로드할 수 없을 때 텍스트를 표시하며 검색 엔진 검색에도 도움이 될 수 있습니다.

HTML 기본_일반 태그, 일반적으로 사용되는 태그 및 테이블 단독으로 등장해야 합니다.

1.3. 테이블

테이블

너비: 너비. 픽셀이나 백분율로 표시할 수 있습니다. 일반적으로 사용되는 픽셀은 960픽셀입니다.

테두리: 테두리. 일반적으로 사용되는 값은 0입니다.

Cellpadding: 내용과 셀 테두리 사이의 여백입니다. 일반적으로 사용되는 값은 0입니다.

셀 간격: 셀 사이의 간격입니다. 일반적으로 사용되는 값은 0입니다.

정렬: 정렬.

bgcolor: 배경색입니다.

배경: 배경 이미지.

🎜> 높이: 행 높이

bgcolor: 배경색

배경: 배경 이미지

> 셀

< ;th> 헤더, 셀 내용은 자동으로 중앙에 굵게 표시됩니다.

align: 셀 내용 정렬

valign: 셀 내용의 세로 정렬 방법

width: 셀 너비

height: 셀 높이

bgcolor: 배경색

background: 배경 이미지

내용 셀에 배치해야 합니다. , 셀은 행에 배치되어야 하며 행은 테이블에 배치되어야 합니다. 셀 행 높이와 열 높이를 설정하면 해당 행이나 열에도 영향을 미칩니다.

셀 병합: (최대한 테이블 중첩을 사용하는 것이 좋습니다)

colspan=" n" - 같은 행의 셀 병합(나중에 코드 작성 시 해당 열 빼기)

rowspan="n" - 같은 열의 셀 병합(두 번째 행부터 해당 열 빼기)

위의 기본 지식을 바탕으로 프로그램 코드와 실행 결과는 아래와 같습니다

프로그램 코드:

XML/HTML 코드 내용을 클립보드에 복사

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>脚本之家</title>  
</head>  
  
<body bgcolor="#00FFCC">  
<a name="top"></a>  
今天<br>  
天     气<br />不错。<br />  
<br />  
<font size="45" color="red">  
字体格式控制标签：<br />  
<b>文字加粗方式1，b标签</b><br />  
<strong>文字加粗方式2，strong标签</strong><br />  
<i>文字倾斜方式1，i标签</i><br />  
<em>文字倾斜方式2，em标签</em><br />  
<u>文字加下划线，u标签</u>  
123<center>居中标签，center，默认，前后若有其他，执行前后换行，保证自身是一个整体，然后进行居中显示。</center>456<br />  
<br />  
内容容器标签：<br />  
123<p>p标签，段落标签，若前后有其他，执行前后换行，并且空开一行，保证自身是一个整体，</p>456   
<ol>ol有序列表   
<li>默认自带序号</li>  
<li>自带换行</li>  
<li>若前后有其他，执行前后换行，并且空开一行，保证自身是一个整体</li>  
</ol>  
<ul>ul无序列表   
<li>默认不自带序号</li>  
<li>自带换行</li>  
<li>若前后有其他，执行前后换行，并且空开一行，保证自身是一个整体</li>  
</ul>  
<a href="http://www.baidu.com" target="_top">百度一下</a><br />  
<img src="123.jpg" title="这是两个美女" alt="zheshilianggemeinv" /><br /><br />  
  
<a href="http://www.qq.com"><img  src="123.jpg"    style="max-width:90%" / alt="HTML 기본_일반 태그, 일반적으로 사용되는 태그 및 테이블" ></a><br /><br />  
  
<img  src="123.jpg"    style="max-width:90%"  style="max-width:90%" / alt="HTML 기본_일반 태그, 일반적으로 사용되는 태그 및 테이블" >  
  
  
</font>  
<h1>h1~h6标签，标题控制标签</h1>  
<h2>若前后有其他，执行前后换行，并且空开一行，保证自身是一个整体</h2>  
<h3>重要性依次递减</h3>  
<h4>依附于现有的默认尺寸，进行增加或减小</h4>  
<p style="background-color:#0F0">p层标签，默认一上来就占用一整行</p>  
<span style="background-color:#CF0">span层标签，默认使用多少就占用多少</span><br />  
<br />  
<table align="center" width="480" height="120" border="1" cellpadding="0" cellspacing="0">  
<tr align="center">  
<td width="120"><a href="http://autohome.com">汽车之家</a></td>  
<td width="120">易车网</td>  
<td colspan="2">新浪汽车</td>  
</tr>  
<tr align="center">  
<td>58同城</td>  
<td>赶集网</td>  
<td rowspan="2" bgcolor="#FF0033">京东</td>  
<td>安居客</td>  
</tr>  
<tr align="center">  
<td>天猫</td>  
<td>聚美优品</td>  
<td>唯品会</td>  
</tr>  
</table>  
<br />  
<a href="#top">返回最顶端</a>  
</body>  
</html>

로그인 후 복사

실행 결과:

HTML 기본_일반 태그, 일반적으로 사용되는 태그 및 테이블