Home >Web Front-end >HTML Tutorial >Analysis of basic grammar and semantic writing rules and examples of HTML

Analysis of basic grammar and semantic writing rules and examples of HTML

小云云Original: 2017-12-26 09:44:031985browse

This article mainly shares with you the organization and examples of the basic syntax and semantics of HTML. Friends who need it can refer to it. I hope it can help everyone.

DOCTYPE

DOCTYPE(Document Type)

This declaration is located at the frontmost position in the document, before the html tag. This tag tells the browser Which HTML or XHTML specification the document uses.

DTD(Document Type Definition)

The declaration starts with 1a309583e26acea4f04ca31122d8c535, it is not case sensitive, there is no content in front, if Having other content (except spaces) will cause the browser to turn on quirks mode in IE to render web pages. Public DTD, the name format is registration // organization // type tag // language, registration refers to whether the organization is registered by the International Organization for Standardization (ISO), + means yes, - means no. Organization is the name of the organization, such as: W3C. The type is usually DTD. A tag specifies a description of the public text, that is, a unique descriptive name for the referenced public text, which can be followed by a version number. The last language is the ISO 639 language identifier of the DTD language, such as: EN means English, ZH means Chinese. XHTML 1.0 can declare three DTD types. Represents strict version, transitional version, and framework-based HTML document respectively.

HTML 4.01 strict

e59f3f52655b814e6342df6232818ae7

HTML 4.01 Transitional

79556516d22f9c9265348cb77b531489

HTML 4.01 Frameset

5d531b0f74588d6ac431683c41976ae0

HTML5 Document Type

8b05045a5be5764f313ed5b9168a17e62fd01ee1352baefb8b90cb4a7d393c18

meta

Declare the character encoding used in the document

Before html5

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

SEO Optimization

Title

b2386ffb911b14667cb8f0f91ea547a7your title6e916e0f7d1e588d4f442bf645aedb2f

Page description

0dfd212f5e72f7b7687b6898f3d2db14

Web author

84592cafc38b2269c9b8ca8f1ef9b323

Web search engine indexing method

114ece8409fc65e9b27103aaa5c30460

follow Follow the link and analyze the target page. This is the default behavior and can be ignored.

index Index the web page. This is the default behavior and can be ignored.

noodp does not use the Open Directory Project to create content descriptions.

noydir does not use Yahoo Directory to create content descriptions.

noarchive does not allow search engines to display cached versions of content.

cache allows search engines to display cached versions of content.

Nocache does not allow search engines to display cached versions of content.

Tags

define the structure of the document and make the markup of the document more semantic.

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 tag is more abundant and complete, the p tag seems to have no use, but if you just want to Add a section of style to the document. This is when the p tag comes in handy. The default style of the

tag will be different in different browsers. In order for a web page to have the same effect in different browsers, it is usually necessary to format the tag style first

@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}

If you want to use the html5 tag in a browser that does not support html5, you need to add a small piece of JavaScript code

<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>

The label editable attribute contenteditable

5148c1b640285f5056f70cb723d5fb367618f95bdc39e398f223d37049478af1

Related recommendations:

Analysis of HTML basic syntax and semantic writing rules

The use and basic syntax of regular expressions in Javascript_regular expressions

HTML basic syntax and semantic writing rules and examples

The above is the detailed content of Analysis of basic grammar and semantic writing rules and examples of HTML. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to quickly align code in dreamweaver? How to set up dw alignment code_Dreamweaver tutorial_web page productionNext article：How to quickly align code in dreamweaver? How to set up dw alignment code_Dreamweaver tutorial_web page production

See more

Analysis of basic grammar and semantic writing rules and examples of HTML

Related articles