가장 일반적으로 사용되는 HTML5 태그 및 속성

기본 HTML 태그

HTML 텍스트 서식 지정 태그

HTML "컴퓨터 출력" 태그

HTML 인용, 인용 및 정의 태그

HTML CSS 스타일

HTML 테이블 태그

HTML list

HTML 그룹화 태그

HTML Iframe 태그

HTML 헤더 요소

HTML의 유용한 문자 엔터티

HTML form

HTML 입력 속성

집

웹 프론트엔드

프런트엔드 Q&A

html5 태그란 무엇입니까?

醉折花枝作酒筹

Jun 09, 2021 am 10:35 AM

html5 상표

html5 태그에는 p, a, img, 지도, 지역, html, body, br, b, big, em, i, small, Strong, sub, sup, ins, del, code, samp, kbd, tt, var, pre, 주소, bdo, q 등

html5 태그란 무엇입니까?

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

가장 일반적으로 사용되는 HTML5 태그 및 속성

기본 HTML 태그

<h1> - <h6> 标签定义 HTML 标题
<p> 标签定义 HTML 段落
<a> 标签定义 HTML 链接
   超链接：
   >通过使用 href 属性 - 创建指向另一个文档的链接
   >通过使用 name 属性 - 创建文档内的书签
   >通过使用 Target 属性，你可以定义被链接的文档在何处显示
   >语法：<a href="url">Link text</a>
   锚点：
   >语法：<a name="label">锚（显示在页面上的文本）</a>
<img  src="/static/imghw/default1.png"  data-src="demo_iframe.htm"  class="lazy"  alt="html5 태그란 무엇입니까?" > 标签定义 HTML 图像
<map> 定义图像地图
<area>    定义图像地图中的可点击区域
<html>    定义 HTML 文档
<body>    定义文档的主体
<hr /> 标签创建 HTML 页面水平线
 <!-- --> HTML 注释
<br />    插入单个折行（换行）

로그인 후 복사

HTML 텍스트 서식 지정 태그

<b> 定义粗体文本
<big> 定义大号字
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字

로그인 후 복사

HTML "컴퓨터 출력" 태그

<code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<tt> 定义打字机代码
<var> 定义变量
<pre class="brush:php;toolbar:false"> 定义预格式文本

로그인 후 복사

HTML 인용, 인용 및 정의 태그

<abbr>    定义缩写或首字母缩略语
<address> 定义文档作者或拥有者的联系信息
<bdo> 定义文本方向
<blockquote>  定义从其他来源引用的节
<dfn> 定义项目或缩略词的定义
<q>   定义短的行内引用
<cite>    定义著作的标题

로그인 후 복사

HTML CSS 스타일

<style>   定义样式定义
<link>    定义资源引用
<p>   定义文档中的节或区域（块级）
<span>    定义文档中的行内的小块或区域
<font>    规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式
<center>  对文本进行水平居中。不赞成使用。请使用样式

로그인 후 복사

HTML 테이블 태그

<table> 定义表格
<caption> 定义表格标题
<th>  定义表格的表头
<tr>  定义表格的行
<td>  定义表格单元
<thead>   定义表格的页眉
<tbody>   定义表格的主体
<tfoot>   定义表格的页脚
<col> 定义用于表格列的属性
<colgroup>    定义表格列的组

로그인 후 복사

HTML list

<ol>  定义有序列表
<ul>  定义无序列表
<li>  定义列表项
<dl>  定义定义列表
<dt>  定义定义项目
<dd>  定义定义的描述

로그인 후 복사

HTML 그룹화 태그

1 2	`<p> 定义文档中的分区或节（pision/section）。` `<span> 定义 span，用来组合文档中的行内元素。`

로그인 후 복사

HTML Iframe 태그

인라인 하위 창(프레임) 정의</p><p>(1) iframe 추가 구문: <iframe src =" URL"> URL은 격리 페이지의 위치를 가리킵니다.

(2) 높이 및 너비 속성은 iframe의 높이와 너비를 지정하는 데 사용됩니다. 속성 값의 기본 단위는 픽셀이지만, 백분율(예: "80%")로 설정할 수도 있습니다.

예:

(3) 테두리 삭제

frameborder 속성은 테두리 표시 여부를 지정합니다. iframe 주위에. 테두리를 제거하려면 속성 값을 "0"으로 설정합니다. 예:

(4) iframe을 링크 대상으로 사용

iframe을 링크 대상으로 사용할 수 있습니다. 링크의 대상 속성은 iframe의 이름 속성을 참조해야 합니다. 예:

HTML 헤더 요소

<head>    定义关于文档的信息
<title>   定义文档标题
<base>    定义页面上所有链接的默认地址或默认目标
<link>    定义文档与外部资源之间的关系
<meta>    定义关于 HTML 文档的元数据
<script>  定义客户端脚本
<style>   定义文档的样式信息

로그인 후 복사

HTML의 유용한 문자 엔터티

html5 태그란 무엇입니까? 참고: 엔터티 이름은 대소문자를 구분합니다.

HTML form

<input> 元素有很多形态，根据不同的 type 属性。
（1）text 定义常规文本输入。
<input type="text"> 定义用于文本输入的单行输入字段。
（2）radio    定义单选按钮输入（选择多个选择之一）。
<input type="radio"> 定义单选按钮。
（3）submit   定义提交按钮（提交表单）。
<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。
（4）action 属性定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。通常，表单会被提交到 web 服务器上的网页。
<form action="action_page.php"> 如果省略 action 属性，则 action 会被设置为当前页面。
（5）button属性定义按钮。<input type="button> 
（6）method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：
<form action="action_page.php" method="GET">或：<form action="action_page.php" method="POST">
（7）name规定识别表单的名称（对于 DOM 使用：document.forms.name）。
（8）用 <fieldset> 组合表单数据：<fieldset> 元素组合表单中的相关数据，<legend> 元素为 <fieldset> 元素定义标题。
（9）novalidate 规定浏览器不验证表单。
（10）target规定 action 属性中地址的目标（默认：_self）。
（11）date用于应该包含日期的输入字段<input type="date"> 。month允许用户选择月份和年份<input type="month"> 。week允许用户选择周和年<input type="week"> 。time允许用户选择时间（无时区）<input type="time"> 。datetime允许用户选择日期和时间（有时区）<input type="datetime"> 。datetime-local允许用户选择日期和时间（无时区）<input type="datetime-local"> 。color用于应该包含颜色的输入字段<input type="color"> 。range用于应该包含一定范围内的值的输入字段<input type="range"> 。根据浏览器支持，日期选择器会出现输入字段中。
（12）search 用于搜索字段（搜索字段的表现类似常规文本字段）<input type="search">。tel用于应该包含电话号码的输入字段<input type="tel"> 。url 用于应该包含 URL 地址的输入字段<input type="url">。

로그인 후 복사

HTML 입력 속성

값 속성: 입력 필드의 초기 값을 지정합니다.
readonly 속성: 입력 필드가 읽기 전용(수정할 수 없음)임을 지정하고 읽기 전용 속성에는 값이 필요하지 않습니다. readonly="readonly"와 동일합니다.
disabled 속성: 입력 필드가 비활성화되고 비활성화된 요소를 사용할 수 없거나 클릭할 수 없으며 비활성화된 요소가 제출되지 않도록 지정합니다. 비활성화된 속성에는 값이 필요하지 않습니다. 이는 비활성화="비활성화"와 동일합니다.
size 속성: 입력 필드의 크기(문자 단위)를 지정합니다.
maxlength 속성: 입력 필드에 허용되는 최대 길이를 지정합니다.
autocomplete 속성: 양식 또는 입력 필드를 자동 완성해야 하는지 여부를 지정합니다. 자동 완성 기능이 켜져 있으면 브라우저는 사용자가 이전에 입력한 내용을 기준으로 자동으로 값을 채웁니다.
novalidate 속성은 < form> 설정된 경우 novalidate는 양식이 제출될 때 양식 데이터의 유효성을 검사하지 않도록 지정합니다.
autofocus 속성은 부울 속성입니다. 설정된 경우 페이지가 로드될 때 < input> 요소에 자동으로 초점이 맞춰지도록 지정합니다.
form 속성은 요소가 속하는 하나 이상의 양식을 지정합니다. 두 개 이상의 양식을 참조하려면 공백으로 구분된 양식 ID 목록을 사용하세요.
ormaction 속성은 양식이 제출될 때 이 입력 제어를 처리하는 파일의 URL을 지정합니다. formaction 속성은 < form> formaction 속성은 type="submit" 및 type="image"와 함께 작동합니다.
formenctype 속성은 양식 데이터가 서버에 제출될 때 인코딩되는 방법을 지정합니다(method="post"인 양식에만 해당). formenctype 속성은 < form> 요소의 enctype 속성을 재정의합니다. formatctype 속성은 type="submit" 및 type="image"에 적용됩니다.
formmethod 속성은 양식 데이터를 작업 URL로 보내는 데 사용되는 HTTP 메서드를 정의합니다. formmethod 속성은 < form> formmethod 속성은 type="submit" 및 type="image"와 함께 작동합니다.
novalidate 속성은 부울 속성입니다. 설정된 경우 양식이 제출될 때 요소의 유효성이 검사되지 않도록 지정합니다. formnovalidate 속성은 < form> formnovalidate 속성은 type="submit"으로 사용할 수 있습니다.
formtarget 속성에 지정된 이름이나 키워드는 양식을 제출한 후 받은 응답을 표시할 위치를 나타냅니다. formtarget 속성은 < form> formtarget 속성은 type="submit" 및 type="image"와 함께 사용할 수 있습니다.
height 및 width 속성은 < input> 높이 및 너비 속성은 < input type="image">에만 사용됩니다.
list 属性引用的 < datalist> 元素中包含了 < input> 元素的预定义选项。
min 和 max 属性规定元素的最小值和最大值。min 和 max 属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。
multiple 属性是布尔属性。如果设置，则规定允许用户在 < input> 元素中输入一个以上的值。multiple 属性适用于以下输入类型：email 和 file。
pattern 属性规定用于检查 < input> 元素值的正则表达式。pattern 属性适用于以下输入类型：text、search、url、tel、email、and password。
placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。该提示会在用户输入值之前显示在输入字段中。placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。
required 属性是布尔属性。如果设置，则规定在提交表单之前必须填写输入字段。required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file。
step 属性规定元素的合法数字间隔。示例：如果 step=“3”，则合法数字应该是 -3、0、3、6、等等。

<article> 定义文档内的文章。
<aside>   定义页面内容之外的内容。
<bdi> 定义与其他文本不同的文本方向。
<details> 定义用户可查看或隐藏的额外细节。
<dialog>  定义对话框或窗口。
<figcaption>  定义 <figure> 元素的标题。
<figure>  定义自包含内容，比如图示、图表、照片、代码清单等等。
<footer>  定义文档或节的页脚。
<header>  定义文档或节的页眉。
<main>    定义文档的主内容。
<mark>    定义重要或强调的内容。
<menuitem>    定义用户能够从弹出菜单调用的命令/菜单项目。
<meter>   定义已知范围（尺度）内的标量测量。
<nav> 定义文档内的导航链接。
<progress>    定义任务进度。
<rp>  定义在不支持 ruby 注释的浏览器中显示什么。
<rt>  定义关于字符的解释/发音（用于东亚字体）。
<ruby>    定义 ruby 注释（用于东亚字体）。
<section> 定义文档中的节。
<summary> 定义 <details> 元素的可见标题。
<time>    定义日期/时间。
<wbr> 定义可能的折行（line-break）。
<canvas>  定义使用 JavaScript 的图像绘制。
<svg> 定义使用 SVG 的图像绘制。
<audio>   定义声音或音乐内容。
<embed>   定义外部应用程序的容器（比如插件）。
<source>  定义 <video> 和 <audio> 的来源。
<track>   定义 <video> 和 <audio> 的轨道。
<video>   定义视频或影片内容。