>  기사  >  웹 프론트엔드  >  HTML의 기본 문법과 의미 작성 규칙 및 예제 분석

HTML의 기본 문법과 의미 작성 규칙 및 예제 분석

小云云
小云云원래의
2017-12-26 09:44:031948검색

이 글은 주로 HTML의 기본 구문과 의미에 대한 구성과 예를 공유합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

DOCTYPE

DOCTYPE(문서 유형)

이 선언은 문서 맨 앞, html 태그 앞에 위치합니다. 이 태그는 문서가 어떤 HTML 또는 XHTML 사양을 사용하는지 브라우저에 알려줍니다.

DTD (문서 유형 정의)

선언은 1a309583e26acea4f04ca31122d8c535로 시작하며 대소문자를 구분하지 않으며 앞에 다른 내용(. 공백 제외) 브라우저는 IE에서 특수 모드를 켜서 웹 페이지를 렌더링합니다. 공개 DTD, 이름 형식은 등록 // 조직 // 유형 태그 // 언어, 등록은 해당 조직이 국제 표준화 기구(ISO)에 등록되었는지 여부를 나타내며 +는 예, -는 아니요. 조직은 조직의 이름입니다(예: W3C). 유형은 일반적으로 DTD입니다. 태그는 공개 텍스트에 대한 설명, 즉 버전 번호가 뒤에 올 수 있는 참조된 공개 텍스트에 대한 고유한 설명 이름을 지정합니다. 마지막 언어는 DTD 언어의 ISO 639 언어 식별자입니다. 예를 들어 EN은 영어를 의미하고 ZH는 중국어를 의미합니다. XHTML 1.0은 세 가지 DTD 유형을 선언할 수 있습니다. 엄격한 버전, 전환 버전, 프레임워크 기반 HTML 문서를 각각 나타냅니다. 1a309583e26acea4f04ca31122d8c535开始,不区分大小写,前面没有任何内容,如果有其他内容(空格除外)会使浏览器在IE下开启怪异模式(quirks mode)渲染网页。公共DTD,名称格式为注册//组织//类型 标签//语言,注册指组织是否由国际标准化组织(ISO)注册,+表示是,-表示不是。组织即组织名称,如:W3C。类型一般是 DTD。标签是指定公开文本描述,即对所引用的公开文本的唯一描述性名称,后面可附带版本号。最后语言是DTD语言的ISO 639语言标识符,如:EN表示英文,ZH表示中文。XHTML 1.0 可声明三种DTD 类型。分别表示严格版本,过渡版本,以及基于框架的HTML文档

HTML 4.01 strict

ab540a5be9b0ab2c90344bc442e25cc5

HTML 4.01 Transitional

c22098bfd3f62d7436149aaab013de1a

HTML 4.01 Frameset

d44b1c13b51eddec01ecbde9e66f5216

HTML5文档类型

8b05045a5be5764f313ed5b9168a17e682e535b3f4e9f6fb9559d510cf4cacf8

meta

声明文档使用的字符编码

html5之前


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
html5
<meta charset="utf-8">

SEO优化

    标题

    b2386ffb911b14667cb8f0f91ea547a7your title6e916e0f7d1e588d4f442bf645aedb2f

    页面描述

    7feda0267ff3699a427bb596e1b0e236

    关键字

    4c3a886eab3d67fdfa884844224a10d6

    网页作者

    5007405b6a1cdbbad2c35b001185ac9f

    网页搜索引擎索引方式

    ea5e18c779cec93c332f3f68c5f195a4

    follow 跟踪链接并分析目标网页。这是默认行为,并且可忽略。

    index  将网页编入索引。这是默认行为,并且可忽略。

    noodp  不使用 Open Directory Project 来创建内容描述。

    noydir 不使用 Yahoo Directory 来创建内容描述。

    noarchive 不允许搜索引擎显示内容的缓存版本。

    cache 允许搜索引擎显示内容的缓存版本。

    nocache 不允许搜索引擎显示内容的缓存版本。

标签

定义文档的结构,使文档的标记更加语义化。


html5 demo
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>html5 demo</title>
 </head>
 <body>
 <header>
  <h1>html5 demo</h1>
  <nav>
  <ul>
   <li>nav1</li>
   <li>nav2</li>
  </ul>
  </nav>
 </header>
 <section>
  <h1>article aside</h1>
  <article>article</article>
  <aside>aside</aside>
 <section>
 <footer>footer</footer>
 </body>
</html>

tips

html5标签更加丰富和完善,p标签似乎没有什么用武之地,但是如果仅仅想在文档中加入一段样式,这个时候p标签便派上用场了。

标签在不同浏览器默认样式会有一些区别,为了一个网页在不同浏览器中看到的效果一样,通常要先格式化一下标签的样式


@charset "utf-8";
html{margin:0;padding:0;border:0}a,abbr,acronym,address,article,aside,blockquote,body,caption,code,dd,del,dfn,dialog,p,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,iframe,img,label,legend,li,nav,object,ol,p,pre,q,section,span,table,tbody,td,tfoot,th,thead,tr,ul{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,dialog,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1.5;background:#fff}table{border-collapse:separate;border-spacing:0}caption,td,th{text-align:left;font-weight:400;float:none!important}table,td,th{vertical-align:middle}blockquote:after,blockquote:before,q:after,q:before{content:&#39;&#39;}blockquote,q{quotes:"" ""}a img{border:none}a{text-decoration:none}:focus{outline:0}

如果要在不支持html5的浏览器中使用html5标签,需要加一小段JavaScript代码


<script>
 document.createElement(&#39;header&#39;);
 document.createElement(&#39;nav&#39;);
 document.createElement(&#39;section&#39;);
 document.createElement(&#39;aside&#39;);
 document.createElement(&#39;article&#39;);
 document.createElement(&#39;footer&#39;);
</script>

标签可编辑属性contenteditable

5148c1b640285f5056f70cb723d5fb367618f95bdc39e398f223d37049478af1

HTML 4.01 엄격

6b61dcbc0addda0906ff3d237e92e33f

HTML 4.01 프레임세트

7021f94c3e9f08f52bd6dd234464a465

HTML5 문서 유형

8b05045a5be5764f313ed5b9168a17e651e7ea7f445aebc88a47f535d3fcf70e 🎜🎜🎜meta🎜🎜🎜html5🎜 전에 문서🎜🎜에 사용된 문자 인코딩을 선언합니다.<p class="jb51code"><br>🎜rrreee🎜🎜SEO 최적화🎜🎜🎜 Title🎜🎜<code> &lt ;제목>제목6e916e0f7d1e588d4f442bf645aedb2f🎜🎜 페이지 설명🎜🎜 f825aa442d1115425c05586eaf3bb7c6🎜🎜 키워드🎜🎜 5381f57887dcdaab7eb95a6d022d14fe🎜🎜 웹 작성자🎜🎜 cf12f250ccd6249e8ab986cc7928dfc8 🎜🎜  웹 검색 엔진 색인 방법🎜🎜  34a1ab87b92f160f9b0228d438ea760c🎜🎜  팔로우하여 링크를 추적하고 대상 웹 페이지를 분석하세요. 이는 기본 동작이므로 무시할 수 있습니다. 🎜🎜 index 웹 페이지의 색인을 생성합니다. 이는 기본 동작이므로 무시할 수 있습니다. 🎜🎜 noodp는 콘텐츠 설명을 작성하기 위해 Open Directory 프로젝트를 사용하지 않습니다. 🎜🎜 noydir은 콘텐츠 설명을 작성하기 위해 Yahoo 디렉토리를 사용하지 않습니다. 🎜🎜 Noarchive는 검색 엔진이 캐시된 콘텐츠 버전을 표시하는 것을 허용하지 않습니다. 🎜🎜 캐시를 사용하면 검색 엔진이 콘텐츠의 캐시된 버전을 표시할 수 있습니다. 🎜🎜 Nocache는 검색 엔진이 캐시된 콘텐츠 버전을 표시하는 것을 허용하지 않습니다. 🎜🎜🎜 태그 🎜🎜🎜 문서의 구조를 정의하고 문서의 마크업을 더욱 의미있게 만듭니다. 🎜


🎜rrreee🎜🎜tips🎜🎜🎜html5 태그가 더 풍부하고 완벽해 보입니다. p 태그는 쓸모가 없을 것 같지만 문서에 스타일을 추가하려는 경우에만 사용할 수 있습니다. , 이번에는 p 태그가 유용합니다. 🎜🎜태그의 기본 스타일은 브라우저마다 다릅니다. 웹페이지가 다른 브라우저에서 동일한 효과를 가지려면 일반적으로 먼저 태그 스타일의 형식을 지정해야 합니다🎜


🎜rrreee🎜html5를 지원하지 않는 브라우저에서 html5 태그를 사용하려면 JavaScript 코드의 작은 조각을 추가해야 합니다🎜


🎜rrreee🎜태그 편집 가능 contenteditable 속성🎜🎜&lt ;article contenteditable>7618f95bdc39e398f223d37049478af1🎜🎜관련 권장사항: 🎜🎜🎜기본 HTML 구문 및 의미론적 작성 규칙 분석🎜🎜🎜🎜정규식의 사용 및 기본 구문 Javascript_정규식🎜🎜🎜 🎜HTML 기본 구문과 의미 작성 규칙 및 예제🎜🎜

위 내용은 HTML의 기본 문법과 의미 작성 규칙 및 예제 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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