>  기사  >  웹 프론트엔드  >  HTML5 연구 노트의 간결한 버전(1): HTML5 소개 및 구문

HTML5 연구 노트의 간결한 버전(1): HTML5 소개 및 구문

黄舟
黄舟원래의
2017-01-21 16:28:421338검색

HTML5 소개

HTML5는 HTML4 이후의 차세대 HTML 표준 사양으로, 몇 가지 새로운 요소와 속성(예: c787b9a589a3ece771e842a6176cf8e9 웹 사이트 탐색 블록 및 405ee5486cdff4d61a4b761fa4ac98b0)을 제공합니다. 새로운 태그는 검색 엔진과 의미 분석에 도움이 되며, 작은 화면 장치와 시각 장애가 있는 사람들이 태그를 사용하는 데 더 도움이 됩니다. 또한 5573a07d4f3bb7e58df5fa81d12b6cb1 및 오디오용 ed5a8878ef1d5d7c9ad44485cda17591 및 bacbf9e1ad7f40415ce1670e31edfee3와 같은 순수한 표시 효과를 위한 태그를 포함합니다. , CSS로 대체되었습니다. HTML5는 문서 구조를 개선하는 일부 기능을 포함하여 XHTML2의 몇 가지 제안을 흡수했습니다. 예를 들어 새로운 HTML 태그 머리글, 바닥글, 대화 상자, 옆, 그림 등을 사용하면 콘텐츠 작성자가 이전 개발 작성자에게 더 의미 있는 문서를 만들 수 있습니다. 일반적으로 이러한 기능을 구현할 때 div를 사용합니다.

콘텐츠와 디스플레이의 분리

b와 i 태그는 그대로 유지되지만 이전과 의미가 다릅니다. 이 태그의 의미는 단지 텍스트를 식별하는 것뿐입니다. 이를 식별하십시오. 굵은체 또는 기울임체 스타일을 설정하십시오. u, 글꼴, 중앙 및 파업 태그가 완전히 제거되었습니다.

일부 새로운 양식 입력 개체 추가

날짜, URL, 이메일 주소 및 기타 개체를 포함하여 라틴어가 아닌 문자에 대한 지원이 추가되었습니다. HTML5는 또한 기계가 읽을 수 있는 태그로 콘텐츠에 주석을 추가하는 방법인 마이크로데이터를 도입하여 시맨틱 웹 처리를 더 쉽게 만듭니다. 전반적으로 이러한 구조 관련 개선을 통해 콘텐츠 제작자는 검색 엔진, 화면 읽기 소프트웨어 등에 더욱 친숙하고 더욱 깔끔하고 관리하기 쉬운 웹 페이지를 만들 수 있습니다.

새롭고 더욱 합리적인 태그

멀티미디어 개체는 더 이상 개체 또는 포함 태그에 바인딩되지 않지만 비디오에는 비디오 태그가 있고 오디오에는 오디오 태그가 있습니다.

로컬 저장소

이 기능은 로컬 SQL 데이터베이스를 내장하여 대화형 검색, 캐싱 및 인덱싱 기능의 속도를 높입니다. 동시에 이러한 오프라인 웹 프로그램도 이로 인해 큰 이점을 얻을 수 있습니다. 플러그인이 필요하지 않은 풍부한 애니메이션.

캔버스 개체

는 브라우저에 벡터 그래픽을 직접 그릴 수 있는 기능을 제공합니다. 즉, 사용자는 Flash 및 Silverlight 없이 브라우저에서 직접 그래픽이나 애니메이션을 표시할 수 있습니다.

새 API 확장

HTMLDocument 및 HTMLElement 인터페이스에 대한 새 API 확장이 제공됩니다.

HTML5는 Flash 및 Silverlight를 대체합니다

구문

1 문서 미디어 유형

HTML5에서 정의한 대부분의 HTML 구문은 HTML4 및 XHTML1과 호환되지만 일부는 호환되지 않습니다. 대부분의 HTML 문서는 text/html 미디어 유형으로 저장됩니다.

HTML5는 HTML 구문에 대한 자세한 구문 분석 규칙(오류 처리 포함)을 정의하며 사용자는 이를 text/html 미디어 유형으로 저장하려면 이러한 규칙을 따라야 합니다. 다음은 HTML 구문 사양을 준수하는 예입니다.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

HTML5는 신뢰할 수 없는 콘텐츠를 호스팅할 수 있도록 HTML 구문에 대한 text/html-sandboxed 미디어 유형도 정의합니다.

HTML5에서 사용할 수 있는 다른 구문은 XHTML1과 호환되는 XML입니다. XML 구문을 사용하는 경우 문서를 XML 미디어 유형으로 저장하고 XML 사양에 따라 네임스페이스를 http://www.w3.org/1999/xhtml로 설정해야 합니다.

다음 예제 문서는 HTML5의 XML 구문 사양을 준수합니다. XML 문서는 application/xhtml+xml 또는 application/xml과 같은 XML 미디어 유형으로 저장되어야 합니다.

아아아아

2문자 인코딩

HTML5的HTML语法里,有三种形式可以声明字符串的encoding类型:

在传输级别(transport level)上,在HTTP实例的header里设置Content-Type。

在文件的开头设置一个Unicode的Byte Order Mark(BOM),该字符为文件的encoding方式提供了一个签名。

在文档的前1024个byte之前的内容里,使用带有charset属性的meta元素来声明encoding方式。例如:0d94b2dad07259293dd606022eaa23d8表明该文档是UTF-8格式的。它是替换原有的8d29369bdb665a142cf8029391b2aae6语法声明,尽管原有的语法依然可用,但在HTML5里不推荐使用。

对于HTML5里的XML语法,依然和以前的XML语法声明式一样的。

3 DOCTYPE

HTML5的HTML语法要求文档必须声明DOCTYPE以确保浏览器可以在标准模式下展示页面。这个DOCTYPE没有其它的目的,并且在XML里是可选项,因为XML媒体格式的文档一直就是在标准模式下处理的。

DOCTYPE的声明方式是8b05045a5be5764f313ed5b9168a17e6,不区分大小写。HTML的早期版本声明的DOCTYPE需要很长是因为HTML语言是建立在SGML的基础上,所以需要关联引用一个相对应的DTD。HTML5和之前的版本不一样了,仅仅需要声明DOCTYPE就可以告诉文档启用的是HTML5语法标准了,浏览器会为8b05045a5be5764f313ed5b9168a17e6做剩余的工作的。

4 MathML和SVG

HTML5的HTML语法允许在文档里使用MathML(数学标记语言)和SVG(可伸缩矢量图)元素。例如,一个非常简单的HTML页面包含一个svg元素画出的圆:

<!doctype html>
<title>SVG in text/html</title>
<p>
 A green circle:
 <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
</p>

更多复杂的组合标记也是支持的,比如使用svg的foreignObject元素你可以嵌套MathML, HTML,或者自身嵌套。

5 其它

HTML5已经原生支持IRI了,尽管这些IRI只能在UTF-8和UTF-16的文档里使用。

lang属性如果设置的不合法,将会更新为空字符串,以告诉浏览器是一个未知的语言,作用和XML里的xml:lang一样。

以上就是HTML5学习笔记简明版(1):HTML5介绍与语法 的内容,更多相关内容请关注PHP中文网(www.php.cn)!


성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.