HTML basic grammar and semantic writing rules and examples-HTML Tutorial-php.cn

HTML basic grammar and semantic writing rules and examples

陈政宽～

Release： 2017-06-28 14:03:35

Original

1546 people have browsed it

This article organizes the basic syntax and semantics of HTML and provides examples. Friends who need it can refer to it

DOCTYPE

DOCTYPE(Document Type)

This statement is located at the very beginning of 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 <!DOCTYPE>, 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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR /html4/strict.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN " "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML5 Document Type

<!DOCTYPE html>

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

Copy after login

SEO optimization

Title

<title> your title</title>

Page description

<meta name="description" content="your description">

Keywords

<meta name="keywords" content="your keywords">

Web author

< meta name="author" content="your name">

Web search engine indexing method

<meta name="robots" content="index, follow">

follow Follow the link and analyze the target web 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>

Copy after login

tips

html5 tags are more abundant and complete. The p tag seems to be of little use, but if you just want to add a style to the document, at this time p That’s where labels come in handy.

There will be some differences in the default styles of tags in different browsers. In order for a web page to have the same effect in different browsers, you usually need 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}

Copy after login

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>

Copy after login

The tag editable attribute contenteditable

I hope the above article content will be helpful to all my friends

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