html 의 각종 라벨 을 어떻게 배 웁 니까?
웹 페이지 제목 라벨
<title>HTML </title>
<!-- -->
<meta charset="utf-8" /> <!-- H5 -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"><!-- H4 -->
<title>HTML </title> <!-- -->
<meta name="Description" content=" HTML head ，666， "/> <!-- -->
<meta name="Keywords" content="azb,lll,xxx"/> <!-- -->
<meta name="author" content=" "/> <!-- -->
<meta http-equiv="refresh" content="5;url = https://www.baidu.com"/><!-- URL -->
CSS 또는 js 가 도입 한 태그
바디 태그 학습
본문 태그
1.제목 탭
h1 부터 h6 까지:그 중의 데 이 터 를 굵게 표시 하고 순서대로 줄 이 며 제목 라벨 자체 줄 바 꾸 기 기능(블록 급 라벨)을 표시 합 니 다.
속성:
align ： center right left
<h1 align="center"> </h1>
<h2 align="center"> </h2>
<h3 align="middle"> </h3>
<h4 align="right"> </h4>
<h5> </h5>
<h6> </h6>
2.수평선 라벨
hr:페이지 에 수평선 을 표시 합 니 다.기본 값 은 가운데 로 표 시 됩 니 다.
속성:
width="너비"설정 수평선 너비 size="높이"설정 수평선 높이 color="색상"설정 수평선 색상
<hr width="200px"
size="20px"
color="red"
align="left">
<hr width="40%">
3.단락 태그
p:데 이 터 를 전체적으로 표시 합 니 다.주로 css 와 js 작업 을 할 때 편리 합 니 다.자동 으로 줄 바 꿉 니 다(블록 급 요소)
특징:구간 간격 이 비교적 크다
4.줄 바 꿈 태그
br:브 라 우 저 에 게 이 위치 에서 줄 을 바 꿔 야 한다 고 알려 줍 니 다.
5.스페이스 바 탭
:브 라 우 저 에 게 이 위치 에 빈 칸 을 추가 하 라 고 알려 줍 니 다.
6.가중치 라벨
b:내용 을 검은색 으로 표시 합 니 다 i:내용 의 기울 임 꼴 을 표시 합 니 다 u:내용 을 밑줄 로 늘 립 니 다 del:중간 줄 추가
가중치 라벨 은 마음대로 중첩 할 수 있다.
주:
1.라벨 의 속성 은 라벨 의 기능 에 대한 추가 적 인 보충 으로 개발 자가 라벨 의 속성 치 를 자 유 롭 게 지정 하여 원 하 는 디 스 플레이 효 과 를 얻 을 수 있 습 니 다.
2 픽 셀 단 위 는 컴퓨터 화면의 크기 를 차지 하고 백분율 은 브 라 우 저 창의 크기 를 차지한다.
<p>
<u> ・ 4 6 </u>：<br> ， 、 。
</p>
<p>
<b> </b>・ <i>4 6 </i> ： ，<del> 、 。 </del>
</p>
<b><i><u><del> d</del></u></i></b>
<html>
<head>
<meta charset="utf-8"/>
<title>body </title></head><body>
<h1 align="center"> </h1>
<h2 align="center"> </h2>
<h3 align="middle"> </h3>
<h4 align="right"> </h4>
<h5> </h5>
<h6> </h6>
<hr width="200px" size="20px" color="red" align="left">
<hr idth="40%">
<p>
<u> ・ 4 6 </u>：
<br> ， 、 。 </p>
<p><b> </b>・
<i>4 6 </i> ： ，
<del> 、 。 </del>
</p><b><i><u><del> d</del></u></i></b></body></html>
1.무질서 목록
ul
li:이 탭 은 목록 내용 을 작성 합 니 다.1i 탭 은 목록 의 한 줄 데 이 터 를 대표 합 니 다.
특징:기본 데이터 앞 에 검 은 동그라미 기호 가 있 습 니 다.
2.순서 목록
ol
li:이 탭 은 목록 내용 을 작성 합 니 다.1i 탭 은 목록 의 한 줄 데 이 터 를 대표 합 니 다.
특징:
자동 으로 목록 에 순서 인 코딩 을 합 니 다.형식 은 어 릴 때 부터 크 고 연속 적 입 니 다.
속성:type:순서 인 코딩 의 값 을 변경 할 수 있 습 니 다.1a A I 일 수 있 습 니 다.기본 값 은 아라비아 숫자 로 순서 인 코딩 을 할 수 있 습 니 다.
3.사용자 정의 목록
dl
dt:데이터 의 제목
dd:데이터 의 구체 적 인 내용,dd 는 데 이 터 를 표시 합 니 다.
목록 태그 모든 코드
<!DOCTYPE html><html>
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1">
<title>body （ ）</title>
</head><body>
<h3> </h3>
<hr >
<h3> </h3>
<ul><li> </li>
<li> </li
><li> </li>
<li> </li>
</ul><h3> </h3>
<ol type="A">
<li>xx</li>
<li>hh</li>
<li>ll</li>
<li>qq</li>
</ol>
<dl><dt>java</dt>
<dd>python</dd>
<dd>go</dd>
<dd>shell</dd>
<dt>hh</dt>
<dd>aa</dd>
<dd>xx</dd>
<dd>ll</dd></dl></body></html>
img src :
그림 경로
로 컬 자원 경로:일반 로 컬 이미지 자원 은 상대 적 인 경 로 를 사용 하면 네트워크 자원 경 로 를 사용 할 수 있 습 니 다.이미지 자원 의 URL 주소
속성
width:그림 의 너 비 를 설정 하고 단독 설정 이 라면 그림 이 왜곡 되 지 않 은 상황 에서 자동 으로 축소 되 거나 확대 되 는 것 을 보증 합 니 다.단 위 는 px 일 수도 있 고 백분율 height 일 수도 있 습 니 다.그림 의 높이 를 설정 하고 단독 설정 이 라면 그림 이 왜곡 되 지 않 은 상황 에서 자동 으로 축소 되 거나 확대 되 는 것 을 보증 합 니 다.단 위 는 px 일 수도 있 고 백분율 title 일 수도 있 습 니 다.그림 제목,마 우 스 를 그림 에 올 렸 을 때 alt:그림 불 러 오 는 데 실패 한 알림 말 이 표 시 됩 니 다.
메모:그림 은 자동 으로 줄 이 바 뀌 지 않 습 니 다(줄 내 요소)
코드 붙 여 넣 기
<html>
<head>
<meta charset="utf-8"/>
<title> </title>
</head>
<body>
<h3> </h3>
<hr >
<img src="D:/" title="hanpi" alt="shabi">
<img src="./img/1.jpg" height="200px" title="shabi" alt="hanpi">
<img src="img/2.jpg" width="200px" >
<hr >
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3767793794,672931879&fm=26&gp=0.jpg" >
</body>
</html>
태그
href:이동 할 웹 자원 경로
로 컬 자원:상대 경로
네트워크 자원:네트워크 자원(웹 페이지)의 URL
target:이동 할 웹 자원 의 표시 위 치 를 표시 합 니 다.
_self 현재 페이지 에서 새로 고침 표시blank 새 탭 에 표시top 맨 위 페이지 에 표시parent 는 부모 페이지 에 닻 점 학습 을 표시 합 니 다.
역할:한 페이지 에서 자원 이동
사용:
먼저 하이퍼링크 라벨 을 사용 하여 지정 한 웹 페이지 위치 에 닻 점 을 추가 합 니 다.형식 은
<a name=" ”></a>a 라벨 을 사용 하면 지정 한 닻 점 을 뛰 어 넘 고 웹 페이지 내부 자원 의 도약 목적 을 달성 할 수 있 습 니 다.형식:<a href="# " rel="external nofollow" > /a>코드 붙 여 넣 기
#
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
<h3> </h3>
<hr >
<a href=" .html" rel="external nofollow" target="_blank"> </a>
<hr >
<a href="body （ ）.html" rel="external nofollow" target="_parent"><img src="img/1.jpg" height="200px" ></a>
<hr >
<a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" >baidu</a>
<h3> </h3>
<a href=" .html" rel="external nofollow" > </a>
</body>
</html>
#
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
<a href="#first" rel="external nofollow" > </a><br>
<a href="#second" rel="external nofollow" > </a><br>
<h5> </h5>
<a name="first"></a>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<h5> </h5>
<a name="second"></a>
<p>
</p>
<p>
</p>
<p>
</p>
<a href="#" rel="external nofollow" > </a>
</body>
</html>table:표 설명
tr:한 줄 을 설명 하고 줄 의 높이 를 설정 하 며 모든 셀 의 높이 를 변경 합 니 다.th:셀,헤더 칸 을 설명 합 니 다.기본 값 가운데 검은색 디 스 플레이 td:셀 을 설명 합 니 다.기본 값 은 왼쪽 에 원본 데 이 터 를 표시 합 니 다.
속성:
border:표 에 테두리 width 추가:표 의 너비 height 설정:표 의 높이 를 설정 합 니 다 cellpadding:내용 이 테두리 에 있 는 거 리 를 설정 합 니 다 cellspacing:테두리 의 크기 를 설정 합 니 다.
특징:기본 값 은 데이터 의 크기 에 따라 표 의 크기 를 표시 합 니 다.
<table border="1px" bordercolor="red" cellpadding="10" cellspacing="0">
<tr height="50px">
<th width="100px"> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td>100</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>10</td>
<td> </td>
<td> </td>
</tr>
</table>
표 의 병합
단계:
1.우선 표 가 정연 한 표 인지 확인
2.합 칠 셀 에 따라 원본 위 치 를 찾 습 니 다.
3.합병
줄 병합:합 칠 셀 의 첫 번 째 셀 에 속성 rowspan="합 칠 셀 의 개수"를 사용 하고 다른 셀 을 삭제 하여 합 칠 열 을 합 칩 니 다.합 칠 셀 의 임의의 셀 에 속성 colspan="합 칠 셀 의 개수"를 사용 하고 다른 셀 을 삭제 합 니 다.
<h4> </h4>
<hr >
<table border="2" cellpadding="10" cellspacing="0" bordercolor="red">
<tr height="35px">
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
<td width="200px"colspan="2" rowspan="2"></td>
</tr>
<tr height="35px">
<td colspan="2"></td>
<td></td>
</tr>
<tr height="35px">
<td></td>
<td></td>
<td></td>
<td rowspan="2" ></td>
<td></td>
</tr>
<tr height="35px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
코드 붙 여 넣 기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> </title>
</head>
<body>
<h3> </h3>
<hr >
<table border="1px" bordercolor="red" cellpadding="10" cellspacing="0">
<tr height="50px">
<th width="100px"> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td>100</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>10</td>
<td> </td>
<td> </td>
</tr>
</table>
<h4> </h4>
<hr >
<table border="2" cellpadding="10" cellspacing="0" bordercolor="red">
<tr height="35px">
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
<td width="200px"colspan="2" rowspan="2"></td>
</tr>
<tr height="35px">
<td colspan="2"></td>
<td></td>
</tr>
<tr height="35px">
<td></td>
<td></td>
<td></td>
<td rowspan="2" ></td>
<td></td>
</tr>
<tr height="35px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
<table border="green" cellpadding="10" cellspacing="">
<tr>
<th colspan="2" width="100px"> </th>
<td colspan="8" width="400px"></td>
</tr>
<tr>
<th colspan="2"> </th>
<td colspan="2" width="100px"></td>
<th colspan="2" width="100px"> </th>
<td colspan="2" width="100px"></td>
<td rowspan="7" colspan="2" width="200px"></td>
</tr>
<tr>
<th colspan="2"> </th>
<td colspan="2"></td>
<th colspan="2"> </th>
<td colspan="2"></td>
</tr>
<tr>
<th colspan="2"> </th>
<td colspan="2"></td>
<th colspan="2"> </th>
<td colspan="2"></td>
</tr>
<tr>
<th colspan="2"> </th>
<td colspan="2"></td>
<th colspan="2"> </th>
<td colspan="2"></td>
</tr>
<tr>
<th colspan="2"> </th>
<td colspan="2"></td>
<th colspan="2"> </th>
<td colspan="2"></td>
</tr>
<tr>
<th colspan="2"> </th>
<td colspan="6"></td>
</tr>
<tr>
<th colspan="2" > </th>
<td colspan="6"></td>
</tr>
<tr>
<th colspan="2"> </th>
<td colspan="8"></td>
</tr>
</table>
</body>
</html>
라벨 삽입 학습
iframe
인자:
src:표시 할 웹 페이지 자원 경로;로 컬(상대 경로)일 수도 있 고 네트워크 자원(URL)일 수도 있 습 니 다.
주:기본 현재 페이지 열기 및 src 가 가리 키 는 자원 불 러 오기
width:디 스 플레이 영역의 너비 height 설정:디 스 플레이 영역의 높이 설정
역할:현재 웹 페이지 에 다른 웹 페이지 의 자원 을 불 러 와 서로 다른 웹 페이지 자원 간 에 서로 간섭 하지 않 고 같은 페이지 에서 사용자 에 게 보 여줄 수 있 는 목적 을 달성 합 니 다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="https://www.csdn.net/" rel="external nofollow" target="ifcsdn">csdn</a>
<a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" target="_ifbaidu">baidu</a>
<br>
<iframe src="" width="48%" height="500px" name="ifcsdn"></iframe>
<iframe src="" width="48%" height="500px" name="_ifbaidu"></iframe>
</body>
</html>
1.바디 탭 삭제
frameset
매개 변수
rows:줄 에 따라 페이지 를 나 눕 니 다.
cols:열 에 따라 페이지 를 나 눕 니 다.
하위 태그:
frame:영역 을 나 누 어 차지 합 니 다.frame 은 웹 자원 을 따로 불 러 올 수 있 습 니 다.src:자원 경로(로 컬 또는 네트워크)name:지역 명,하이퍼링크 와 결합 하여 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<frameset cols=" 20% ,*,50%">
<frame src="frame/left.html" >
<frameset rows="70% ,*">
<frame src="frame/top.html" >
<frame src="frame/bottom.html" >
</frameset>
<frame src="frame/right.html" name="_right" >
</frameset>
</html>역할:지정 한 서버 에 사용자 데 이 터 를 수집 하고 제출 합 니 다.
속성:
action:수 집 된 데이터 제출 주소 즉 URL method:수 집 된 데이터 의 제출 방식 get:소량의 데이터,폼 데이터 에 적합 합 니까?URL 뒤에 격 리 되 어 있 습 니 다.서로 다른 키 값 은 사용&기호 로 격 리 되 어 안전 하지 않 습 니 다.post:대량의 데이터,안전,암시 적 제출 에 적합 합 니 다.
주:
폼 데이터 제출,제출 할 폼 항목 은 name 속성 값 이 있어 야 합 니 다.그렇지 않 으 면 제출 하지 않 습 니 다.제출 한 폼 항목 의 데 이 터 는 키 쌍 이 고 키 는 name 속성 값 입 니 다.값 은 사용자 가 작성 한 데이터 form 탭 은 탭 내부 의 데이터 form 폼 의 데이터 제출 을 수집 할 때 submit 제출 단추 에 의존 해 야 합 니 다.from 폼 도 메 인 탭 학습
역할:사용자 에 게 데 이 터 를 작성 하거나 선택 할 수 있 는 탭 을 제공 합 니 다.
사용:
(1)텍스트 상자:
text 는 소량의 텍스트 데 이 터 를 수집 합 니 다.사용 자 는 password 가 사용자 암호 데 이 터 를 수집 하 는 것 을 볼 수 있 습 니 다 name:데이터 제출 키 도 js 에서 value:기본 값 을 사용 합 니 다.
(2)체크 상자:
radio name:name 속성 값 이 같은 체크 상자 에서 데이터 value 만 선택 할 수 있 습 니 다.제출 할 데이터 checked:checked 에서 이 속성 을 사용 하 는 체크 상 자 는 기본적으로 선택 상태 입 니 다.
(3)다 중 선택 상자
checkbox name:하나의 다 중 선택 그룹 은 같은 name 속성 값 value 를 사용 해 야 합 니 다.제출 할 데이터 checked:checked 는 이 속성 을 사용 하 는 다 중 선택 상자 의 기본 선택 상 태 를 사용 합 니 다.
(4)체크 드 롭 다운 상자
selectname:데이터 제출 키 이름,하위 탭 option 을 설명해 야 합 니 다.option 탭 은 드 롭 다운 옵션 value:제출 할 데이터
(5)텍스트 필드
textarea:대량의 텍스트 를 쓸 수 있 는 텍스트 영역 을 설명 합 니 다 name:데이터 제출 키,js 와 CSS 도 rows:텍스트 필드 의 줄 수 를 설명 합 니 다 cols:텍스트 필드 의 열 수 를 설명 합 니 다.
(6)일반 버튼
<input type="button" name="" id="" value=" " />(7)탭 숨 기기 <input type="hidden" name="hidden" id="" value=" " />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form </title>
</head>
<body>
<h3>form </h3>
<hr >
<form action="#" method="get">
Login：<input type="text" id="" name="user" value="" /><br>
Password：<input type="password" name="password" value="" /><br>
sex： <input type="radio" name="sex" value="n" checked="checked" /> <input type="radio" name="sex" value="w"/><br>
： <input type="checkbox" name="fav" value="1"/>
<input type="checkbox" name="fav" value="2"/>
<input type="checkbox" name="fav" value="3"/> <br>
：<select name="address">
<option value=" "> </option>
<option value=" "> </option>
<option value=" " selected="selected"> </option>
</select><br>
：<br>
<textarea rows="10" cols="30" name="intro">
</textarea>
<br>
<input type="button" name="" id="" value=" " />
<br>
<hr >
<input type="hidden" name="hidden" id="" value=" " />
<hr >
<input type="submit" id="" name="" value=" "/>
</form>
</body>
</html>
등록 페이지 연습
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
<h1> </h1>
<hr >
<form action="" method="get">
<table border="" cellpadding="10px" cellspacing="">
<tr>
<td width="100px"> </td>
<td><input type="text" name="user" id="" value="" /></td>
</tr>
<tr>
<td> </td>
<td><input type="password" name="paw" /></td>
</tr>
<tr>
<td> </td>
<td><input type="email" id="" value="" name="email" /></td>
</tr>
<tr>
<td> </td>
<td><input type="tel" name="tel" id="" value="" /></td>
</tr>
<tr>
<td> </td>
<td>
man<input type="radio" name="sex" id="" value="1" />
woman<input type="radio" name="sex" id="" value="1" />
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="checkbox" name="fav" id="" value="1" />
<input type="checkbox" name="fav" id="" value="2" />
<input type="checkbox" name="fav" id="" value="3" />
</td>
</tr>
<tr>
<td> </td>
<td>
<select name="adress">
<option value=" "> </option>
<option value=" "> </option>
<option value=" " selected="selected"> </option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td>
<textarea rows="10px" cols="30px" name="intro">
</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="middle">
<input type="checkbox" name="agree" id="agree" value="1" />
</td>
</tr>
<tr>
<td colspan="2" align="middle">
<input type="submit" value=" "/>
</td>
</tr>
</table>
</form>
</body>
</html>
html 를 어떻게 배 우 는 지 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.html 태그 에 관 한 더 많은 학습 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다른 사람의 웹사이트 편집: contenteditable 및 designMode그래도 우리가 그렇게 할 수 있다고 생각하는 것은 멋진 일입니다. 제가 강조하고 싶었던 일종의 관련 API가 실제로 몇 개 있기 때문에 오늘 그것을 가져왔습니다. contenteditable는 "true" 값이 할당...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
