Comprehensive understanding of HTML basic structure

Comprehensive understanding of HTML basic structure

Introduction to HTML

HyperText Markup Language: Hypertext Markup Language

HyperText: Hypertext (text + pictures + video + audio + links)

Markup Language:

Three elements of a website

Image, hyperlink, text

HTML Basic Structure

XML/HTML CodeCopy content to clipboard
  1. < html >   
  2.      < head >   
  3.          < title > Document </ title >   
  4.      </ head >   
  5.      < body >   
  6. I am mossbaoo!
  7.      </ body >   
  8. </ html >   

Standard HTML tags for web pages

1. HTML document declaration: <!DOCTYPE HTML>

2. Page title: <title>~</title>

3. Page encoding: <meta charset="utf-8" />

UTF-8 is a multi-language encoding (recommended)

gb2312 is the simplified Chinese encoding


4. Page keywords: <meta name="keywords" content="Keyword 1,Keyword 2,…" />

Main content of the page: <meta name="description" content="Content introduction" />

Note: The meta tag is an auxiliary tag of the HTML language, usually used to optimize search engines. It is located in the head of the HTML document.

Generate the initial structure of the HTML document

1. HTML5 standard structure: html:5+Tab key or !+Tab key

The generated results are as follows

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE html >   
  2. < html   lang = "en" >   
  3. < head >   
  4.      < meta   charset = "UTF-8" >   
  5.      < title > Document </ title >   
  6. </ head >   
  7. < body >   
  8.        
  9. </ body >   
  10. </ html >   

2. HTML4 transitional structure: html:xt+Tab key

The generated results are as follows

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
  2. < html   xmlns = "http://www.w3.org/1999/xhtml"   xml:lang = "en" >   
  3. < head >   
  4.      < meta   http-equiv = "Content-Type"   content = "text/html; charset=UTF-8" >   
  5.      < title > Document </ title >   
  6. </ head >   
  7. < body >   
  8.        
  9. </ body >   
  10. </ html >   

Note on HTML tags:

• HTML elements consist of start tags and end tags.

• The text enclosed between the start and end tags is the content of the element.

• HTML tags must have a beginning and an end. If it is a tag with no content (empty tag), use /> to end it.

• Tag names are not case sensitive, but in XHTML tag names must be lowercase.

• Tags have attributes, which are used to represent the properties and characteristics of the tags. Attributes are specified in the opening tag.

The above comprehensive understanding of the basic structure of HTML is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

Original URL: http://www.cnblogs.com/mossbaoo/archive/2016/07/31/5724065.html

<<:  Implementing a simple Christmas game with JavaScript

>>:  Pure CSS and Flutter realize breathing light effect respectively (example code)

Recommend

vue.config.js packaging optimization configuration

The information on Baidu is so diverse that it...

How to use Navicat to operate MySQL

Table of contents Preface: 1. Introduction to Nav...

JavaScript imitates Taobao magnifying glass effect

This article shares the specific code for JavaScr...

Implementation of MySQL scheduled database backup (full database backup)

Table of contents 1. MySQL data backup 1.1, mysql...

Solution to the data asymmetry problem between MySQL and Elasticsearch

Solution to the data asymmetry problem between My...

Detailed analysis of several situations in which MySQL indexes fail

1. Leading fuzzy query cannot use index (like ...

Solution for creating multiple databases when Docker starts PostgreSQL

1 Introduction In the article "Start Postgre...

CSS3 realizes the website product display effect diagram

This article introduces the effect of website pro...

Pure CSS to achieve click to expand and read the full text function

Note When developing an article display list inte...

10 reasons why Linux is becoming more and more popular

Linux has been loved by more and more users. Why ...

Detailed process of zabbix monitoring process and port through agent

Environment Introduction Operating system: centos...

Summary of basic operations for MySQL beginners

Library Operations Query 1.SHOW DATABASE; ----Que...

How to implement the Vue mouse wheel scrolling switching routing effect

A root routing component (the root routing compon...