찾다
HTML의 UTF-8Sep 04, 2024 pm 04:39 PM
htmlhtml5HTML TutorialHTML PropertiesHTML tags

UTF-8은 HTML 페이지를 완벽하게 표시하는 데 사용되는 HTML5의 기본 문자 인코딩으로 정의됩니다. UTF-8은 1바이트를 사용하고 모든 브라우저에서 잘 작동하는 엔터티의 모든 문자와 기호를 포함하므로 웹 개발자가 UTF-8을 사용하도록 권장합니다. 유니코드 변환 형식 – 8비트는 입력된 문자를 기계가 읽을 수 있는 코드로 변환하는 방법입니다. charset 속성은 HTML의 문자 인코딩을 수행하는 데 사용됩니다.

HTML의 UTF-8 구문

의 UTF-8 문자 인코딩 지정 태그는 다음과 같이 제공됩니다:

<meta charset="UTF-8">

여기서 메타는 HTML 문서에 대한 데이터를 제공하지만 기계가 읽을 수 있습니다. 그리고 그 요소는 키워드, 마지막 수정 등을 지정합니다. 이 메타 태그에는 페이지에 액세스하는 동안 웹 브라우저에 알려주는 문자 세트가 포함되어 있습니다.

인코딩은 주어진 숫자를 기계가 이해하는 이진수로 변환하는 방법입니다. 여기서 각 문자는 각각 하나 이상의 바이트로 구성됩니다.

HTML에서 UTF-8은 어떻게 작동하나요?

  • 가장 널리 사용되는 인코딩 문자는 ASCII입니다. 인터넷이 전 세계적으로 성장함에 따라 유일하게 지원되는 라틴어는 효율적이지 않습니다. 이것이 바로 업계가 최선의 선택으로 유니코드로 전환한 이유입니다. UTF-8은 유니코드 인코딩으로, 모든 문자와 이모티콘에 코드 포인트라는 고유한 값을 할당합니다. 이 인코딩 시스템은 ASCII 공간의 문제를 해결하며 W3C의 주요 인코딩으로 간주됩니다. 그리고 모든 전자 메일 메시지는 UTF-8을 사용하여 생성할 수 있도록 권장됩니다. 이는 문서 시작 부분에 있는 메타 태그를 사용하여 페이지가 UTF-8로 명시적으로 선언되어 있는지 확인합니다. UTF-8의 유효 비트는 1~4바이트로 인코딩되므로 8,16, 24 또는 32비트로 정의됩니다. UTF-8은 더 많은 애플리케이션을 이해하므로 기존 애플리케이션의 글로벌 표준으로 간주됩니다. 이 인코딩은 텍스트를 인코딩하고 데이터를 전송하는 데 도움이 됩니다. 대부분의 웹사이트에서는 UTF-8 인코딩이 가장 바람직합니다. 이 표준은 전 세계의 모든 문자, 기호, 구두점을 포괄합니다.
  • UTF-8은 0-127 범위를 ASCII 코드로 처리하고 이후 최대 192를 Shift 키로 처리합니다. 그리고 다음 문자인 224-239는 이중 이동되어야 합니다. 따라서 이를 멀티바이트 변수 인코딩이라고 합니다.
  • 유니코드는 인간 언어의 모든 문자에 고유한 코드를 할당합니다. 문자 세트(사용 가능한 모든 문자를 특정 세트로 그룹화)는 lang 속성을 사용하여 재정의할 수 있습니다. 이 유니코드는 바이너리로 변환되며 그 반대도 마찬가지입니다. 양식 제출 신청 시 예상치 못한 결과가 발생하는 것을 방지합니다. 웹 페이지의 공간이 너무 많이 지연되는 경우 UTF-8을 고려해야 합니다. UTF-8 텍스트를 바이너리로 저장하는 동안 char은 바이너리가 되고 varchar는 SQL의 VARBINARY로 표시됩니다.

예를 들어 Hi, EDUCBA!라는 텍스트를 살펴보겠습니다.

UTF-8 문자 인코딩은 다음과 같습니다.

01001000 01101001 00101100 01100101 01000100 01010101 01000011 01000010 01000001 00100001

기계가 읽을 수 있는 바이너리 구조로 변환됩니다.

UTF-8 사용의 주요 중요성

  • 인코딩 표준 ASCII와 의도적으로 호환됩니다.
  • 이 기본 HTML 인코딩은 공간을 덜 사용하고 다양한 언어를 지원합니다.
  • 이는 SEO에 도움이 됩니다. 두 가지 표준을 사용한다고 가정하면 SEO에 잘못된 영향을 미치는 디코딩 문제가 발생합니다. SEO 노력에 도움이 되도록 캐릭터를 올바르게 구현해야 한다는 의미입니다.

다음으로 콘텐츠에서 외국어를 차지하면서 유니코드 표현이 얼마나 중요한지 살펴보겠습니다.

HTML의 UTF-8 예

아래는 HTML의 UTF-8 예입니다.

예시 #1

단락 내용을 사용한 간단한 예

코드:

new.html



<meta charset="UTF-8">
Page Title



!مرحبا بالعالم

你叫什么名字?

This is Chinese Language.

This is the code demonstrating encoding Process

설명:

  • 아래 스크린샷은 중국어와 영어로 표시되는 콘텐츠를 보여줍니다. 이는 위의 HTML 코드가 최신 브라우저에서 실행될 때 일반적으로 유니코드를 참조하기 때문입니다.

출력:

HTML의 UTF-8

예시 #2

텍스트 입력에 버튼을 사용합니다.

코드:

lang.html



<title>HTML sample -buttons</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


Selection list Checkbox:
RadioButton1:
RadioButton2:
Give Input Login Id:
Password:
Designation

Software Engineer

Data Analyst

Web Developer

Senior Analyst

설명:

  • 아래 스크린샷은 입력 내용이 중국어와 영어로 표시되는 모습입니다. 이는 위의 HTML 코드가 최신 브라우저에서 실행될 때 일반적으로 유니코드를 참조하기 때문입니다.

출력:

HTML의 UTF-8

예시 #3

외국어 콘텐츠를 활용한 코드

코드:

mett.html



<title>
HTML UTF-8 Charset
</title>
<meta name="keywords" charset="UTF-8" content="Meta Tags, Metadata">


<h1 id="Hi-Instructor">Hi Instructor!</h1>
<h2>
This is my formal e-mail for the joining.
</h2>
<h3 id="Hola-me-llamo-Juan">Hola, me llamo Juan </h3>
<b>Mucho gusto </b>

설명:

  • 위 코드는 스페인어를 사용하여 웹 브라우저에서 호환성을 확인합니다.

출력:

HTML의 UTF-8

Example #4

Using JavaScript.

Code:

name.js



<meta charset="utf-8">
<title>UTF-8 Charset</title>
<style>
span {
color: blue;
}
span.name {
color: red;
font-weight: bolder;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>


<div>
<span>Thomas,</span>
<span>John Betson,</span>
<span>Valli Tromson</span>
</div>
<div>
<span>आभरणा,</span>
<span>आचुथान,</span>
<span>अभिनंध</span>
</div>
<script>
$( "div span:first-child" )
.css( "text-decoration", "Underline" )
.hover(function() {
$( this ).addClass( "name" );
});
</script>

Explanation:

  • The above code uses functions to class the respective class. Before that, we have declared metadata for the encoding process. Here we have assigned an element with another language. Unfortunately, ASCII doesn’t have compatibility to access. Therefore, we have declared UTF-8 to support the type.

Output:

HTML의 UTF-8

Conclusion

So that’s all about the encoding of UTF-8 in HTML. We have gone through Unicode and encodes in the HTML briefly and the implementation of HTML and JavaScript. In this emerging software world, the character sets are not made so feasible; therefore, there comes character encoding schemes to be done with the HTML and other programming languages. Therefore, it is said that it is best to use UTF-8 everywhere where it doesn’t need any conversions encoding.

위 내용은 HTML의 UTF-8의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
HTML超文本标记语言--超在那里?(文档分析)HTML超文本标记语言--超在那里?(文档分析)Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML(超文本标记语言),介绍一下HTML的本质,HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单,希望对大家有所帮助!

html和css算编程语言吗html和css算编程语言吗Sep 21, 2022 pm 04:09 PM

不算。html是一种用来告知浏览器如何组织页面的标记语言,而CSS是一种用来表现HTML或XML等文件样式的样式设计语言;html和css不具备很强的逻辑性和流程控制功能,缺乏灵活性,且html和css不能按照人类的设计对一件工作进行重复的循环,直至得到让人类满意的答案。

web前端笔试题库之HTML篇web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试(笔试)题分享给大家,本篇文章就先给大家分享HTML部分的笔试题(附答案),大家可以自己做做,看看能答对几个!

总结HTML中a标签的使用方法及跳转方式总结HTML中a标签的使用方法及跳转方式Aug 05, 2022 am 09:18 AM

本文给大家总结介绍a标签使用方法和跳转方式,希望对大家有所帮助!

HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html中document是什么html中document是什么Jun 17, 2022 pm 04:18 PM

在html中,document是文档对象的意思,代表浏览器窗口的文档;document对象是window对象的子对象,所以可通过“window.document”属性对其进行访问,每个载入浏览器的HTML文档都会成为Document对象。

html5废弃了哪个列表标签html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

Html5怎么取消td边框Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法:1、给td元素添加“border:none”无边框样式即可,语法“td{border:none}”。2、给td元素添加“border:0”样式,语法“td{border:0;}”,将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式,语法“td{border:transparent;}”,将td边框的颜色设置为透明即可。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.