Home >Web Front-end >HTML Tutorial >Analyze basic grammar and semantic writing rules of HTML
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 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
ca826600512b13c31f7bcce7de165226
Keywords
ec9afc83b8be120f8a2d5453c4ad3375
Web page Author
84592cafc38b2269c9b8ca8f1ef9b323
Web search engine indexing method
< ;meta name="robots" content="index,follow">
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 If you just want to add a section of style to the document, the p tag will come 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:''}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('header'); document.createElement('nav'); document.createElement('section'); document.createElement('aside'); document.createElement('article'); document.createElement('footer'); </script>
tag Editable properties contenteditable
5148c1b640285f5056f70cb723d5fb367618f95bdc39e398f223d37049478af1
The above is the detailed content of Analyze basic grammar and semantic writing rules of HTML. For more information, please follow other related articles on the PHP Chinese website!