집 > 기사 > 웹 프론트엔드 > HTML에서 일반적으로 사용되는 태그 분석(코드 포함)

HTML에서 일반적으로 사용되는 태그 분석(코드 포함)

不言원래의: 2018-08-30 11:54:231865검색

이 문서의 내용은 HTML에서 일반적으로 사용되는 태그(코드 포함)에 대한 내용입니다. 특정 참조 값이 있으므로 도움이 될 수 있습니다.

1.1 태그 분류

1.1.1 제목별 분류:

1. 제목이 있는 태그: 예: 240cb830ca84ebaabbd07850110b414ddatae6e38b3c62e8df885fe2e3986461aa63

2. 예를 들어 076402276aae5dbec7f672f8f4e5cc81 줄 바꿈 태그

는 테이블에 본문이 필요한지 여부를 결정합니다. 데이터를 캡슐화해야 하는 경우 태그에 본문이 있어야 하는지 여부를 생각해 볼 수 있습니다. . 데이터를 캡슐화할 필요가 없다면 본체를 가져올 필요가 없습니다.

2.1.2 라인별 분류 :

1. 라벨의 내용이 독립된 라인을 차지해야 하는 경우 이를 블록 라벨이라고 부릅니다. 예: 4a249f0d628e2318394fd9b75b4636b1Title tag

2. 태그가 별도의 줄을 차지할 필요가 없으면 이를 인라인 태그라고 부릅니다. 예: 240cb830ca84ebaabbd07850110b414dFont tag

2.2 Text tag:

태그 이름	태그 설명	일반적으로 사용되는 속성
h1~h6	제목 태그, 모든 제목은 굵은 글씨로 표시됩니다, 1은 1급 제목을 의미하며, 단어가 가장 크며, 6급 제목이 가장 작습니다	속성은 시작 태그에 있습니다 align:제목 정렬 설정 가운데: 가운데, 오른쪽: 오른쪽 정렬, 왼쪽: 왼쪽 정렬
시간	수평선 그리기	너비: 선 길이 크기: 두께 색상: 색상
b	strong 태그와 동일한 기능을 가진 글꼴을 굵게
i	글꼴을 이탤릭체로 설정
br	줄바꿈
글꼴	글꼴(HTML5에서는 더 이상 사용되지 않음)	색상: 색상 크기: 크기 얼굴: 지정된 글꼴의 이름
p	단락, 각 p 태그는 단락이며 첫 줄 들여쓰기가 없습니다. 문단 사이에 공백이 있습니다	들여쓰려면 반자 공백 또는 전자 공백 을 사용하세요. title: 마우스를 위로 올리면 텍스트 프롬프트 정보가 표시됩니다

2.3 块标签与内联标签：

1.div：块标签，需要独立占一行。

2.span:内联标签，不需要独立占一行。

案例文字素材

World Wide Web Consortium94b3e26ee717c64999d7867364b1b4a3万维网联盟创建于1994年

代码演示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css"></style>
    <script type="text/javascript"></script>
</head>
<body>
<div style="background-color: red">World Wide Web Consortium</div>
万维网联盟创建于1994年
<span style="background-color: aqua">World Wide Web Consortium</span>
万维网联盟创建于1994年
</body>
</html>

2.4 列表标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css"></style>
    <script type="text/javascript"></script>
</head>
<body>
今天早上吃什么?
<ol style="color: black" type="A">
    <li>
        油条
    </li>
    <li>
        豆浆
    </li>
    <li>
        稀饭
    </li>
</ol>
明天早上吃什么？
<ul style="color: black" type="disc">
    <li>面</li>
    <li>糯米鸡</li>
</ul>
</body>
</html>

2.5 实体字符

2.5.1 为什么需要使用到实体字符：

在HTML页面中，有些字符是有着特殊含义的字符，如果需要在网页上显示这种特殊的字符，那么就需要使用到该特殊字符对应的实体字符。比如：1419bbb8796a47bb047bc6a86db1bff3 大于号

2.5.2 实体字符列表：

注释：实体名称对大小写敏感！

2.5.3 常用的实体字符：

特殊的字符	对应的实体字符
5acd248ed1b924abd09ea8af7be12d21	>
空格
￥	¥
© 版本所有	©
®	®

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css"></style>
    <script type="text/javascript"></script>
</head>
<body>
&lt;h1&gt;标签是标题标签<br/>
       百度（纳斯达克：BIDU），全球最大的中文搜索引擎、最大的中文网站。
1999年底,身在美国硅谷的李彦宏看到了中国互联网及中文搜索引擎服务的巨大发展潜力，
抱着技术改变世界的梦想，他毅然辞掉硅谷的高薪工作，携搜索引擎专利技术，于 2000年1月1日在中关村创建了百度公司。<br/>
青岛啤酒：&yen;16元一瓶。<br/>
《java从入门到放弃》:&copy; XXX版权所有<br/>
本次活动解释权归XXX公司所有：&reg;XXX有限公司
</body>
</html>

2.6 图像标签（img）

2.6.1 标签的作用：

在网页中显示图片。

2.6.2 常用的属性：

属性名	作用
src	source图片文件地址，注：不能使用客户端本地地址，如：c:/aaa.jpg
width	图片宽度，如果只指定宽和高，另一个参数会等比例缩放
height	图片高度
alt	如果图片丢失，图片显示的文字
title	如果鼠标移到图片上，显示提示文字信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css"></style>
    <script type="text/javascript"></script>
</head>
<body>
<img src="img/11.jpg" height="500" width="200" title="这个是一辆豪车" />
</body>
</html>

HTML에서 일반적으로 사용되는 태그 분석(코드 포함)

관련 기사