Web Front end--html introduction and head tags

Source: Internet
Author: User
Tags color representation

Web Standard World: WWW alliance organization, used to develop web standards for the Organization (organization) Web standards: The production of Web pages follow the specification of the classification of the Web: structural standards, performance standards, behavior standards.  Structure: HTML, Presentation: CSS behavior: Javacsriptweb Preparation Summary: The structure of the standard: the equivalent of human body, HTML is used to make Web pages.  Performance standards: the equivalent of human clothing, CSS is to beautify the Rajah. Standard of conduct: equivalent to a person's action. JS is to let the Web page move, with vitality. Two browsers: The browser is a Web page running platform, commonly used browsers are IE, Firefox, Google, Cheetah Browser, Safari and Opera 1. What is the kernel: the scientific name is called the rendering engine, the role is to display the Web page, its existence determines the content, format and effect of the Web page presentation, a good   Browser must be based on a stable, high-end, obvious role of the browser kernel. 2. Browser kernel:
Browser Kernel
Ie Trident
Chrome Blink
Firefox Gecko
Safari Webkit

Iii. introduction of development tools:

Iv. Introduction of HTML:

1.html Full name Hypertext Mackeup Language, translated into Hypertext Markup Language, which is not a programming language, is a descriptive markup language used to describe how hypertext content is displayed. such as font, color, size and so on.


    • Hypertext: Audio, video, picture is called hypertext.
    • Tags:< english words or letters > called tags, an HTML page is made up of various tags.

Role: HTML is the language that is responsible for describing the semantics of the document.

Note: The HTML language is not a programming language (a compilation process), but rather a markup language (no compilation process), and HTML pages are parsed directly by the browser.

HTML is the language responsible for describing document semantics

1, HTML, in addition to the semantics of nothing else.

HTML is a pure document, with some tags to describe the semantics of the text, these tags are not visible in the browser, so called ' hypertext ', is ' Hypertext Markup Language '.

Network terminology for 2.HTML:


    • Web page: A page made up of various tags is called a Web page.
    • Home page: A homepage or navigation page of a website.
    • Tags: <p> called the start tag, </p> called the end tag, also called the tag. Each label has a special meaning.
    • element: <p>内容</p> called element.
    • Properties: The auxiliary information that is given to each label.

Five, HTML color introduction:

Color representation:

    • Pure words: red, green, blue, orange, gray, etc.
    • 10 binary representation: RGB (255,0,0)
    • 16 binary representation: #FF0000, #0000FF, #00FF00等

RGB Color Mode:


    • In nature, all colors can be used in red, green, Blue (RGB) The three color wavelength of different intensity combinations, which is often said the principle of three primary colors.
    • RGB tricolor is also called additive color mode, this is because when we add different wavelengths of light together, we can get a different blend color. Example: Red + green = yellow, red + blue = purple, green + blue = Cyan
    • In digital video, 8-bit encoding of the RGB tri-color is about 16.78 million colors, which is what we often call true color. The RGB color mode is used for all display devices.
    • RGB each has 256 level (0-255) brightness, 256 levels of RGB color can be combined out about 16.78 million colors, namely 256x256x256=16777216.

VI. specification of HTML:

HTML is a weak language

HTML is case insensitive

The suffix of the HTML page is HTML or HTM

    • Some systems do not support suffix names longer than 3 characters, such as DOS systems
    • Structure of HTML:
      • Declaration part: The main function is to tell the browser which standard is used by this page. is the HTML5 standard.
      • Head part: Tell the server some extra information about the page. Does not appear on the page.
      • Body part: The code we write must be placed inside this tag

1, the code to write HTML:

1) All markup elements must be properly nested, not cross-nested. Examples of correct wording:


2) All tokens must be lowercase

3) All marks must be closed

Bilateral marking:<span></span>

Single-sided marking <br> <br/>

4) All attribute values must be quoted:

5) All attributes must have a value of <input type = "Radio" checked= "checked"/>

Basic grammatical features of 2.HTML:

1) HTML is not sensitive to the line and is not sensitive to tab

Tml only cares about the nested structure of the tag, the nested relationship. Who nested who, who was nested, and line-wrapping, tab-Independent. No line break, tab not tab, does not affect the structure of the page.

In other words, HTML does not rely on indentation to represent nesting, that is, to look at the label's parcel relationship. However, we find that there is good indentation and the code is easier to read.

2) Blank folding phenomenon

All the text in the HTML, if there are spaces, line breaks, tab will be collapsed into a space display

3) The label should be strictly closed

Vii. Detailed HTML structure

Create a new HTML file, enter Html:5, and press the TAB key to automatically generate the following code:

<! DOCTYPE html>"en">"  UTF-8">    <title>Document</title>

1) Document Declaration Header:

Any standard HTML page, the first line must be a

<! DOCTYPE ...

The beginning of this line is the document declaration header, DocType Declaration, referred to as DTD. This tab tells the browser which HTML or XHTML specification to use for the document


Xhtml:extensible hypertext Markup Language, extensible Hypertext Markup Language.

The main purpose of XHTML is to replace HTML, or it can be understood as an upgraded version of HTML.

HTML tag writing is very irregular, causing other devices (ipad, mobile phone, TV, etc.) to not display properly.

XHTML is basically the same as HTML4.0 's markup.

XHTML is strict, pure HTML

What are the specifications of HTML4.01?

First we determine one thing, we are now learning HTML4.01 This version, this version is IE6 start compatible. HTML5 is compatible with IE9 start . But IE6, 7, 8 these browsers can not be prematurely eliminated, so these years the web should be used HTML4.01 to make. Today, mobile phones, mobile Web pages, you can use HTML5, because of its higher compatibility.

Aside from that, HTML1 to HTML3 is used by the U.S. military and advanced research institutes and is not publicly available.

There are two major kinds of norms in HTML4.01, each of which has 3 kinds of small specifications. So there are 6 different specifications (see below):

The HTML4.01 contains two general and XHTML specifications.

HTML feel that some of the rules are not rigorous, such as the label can be used in uppercase?<H1></H1>

So, the HTML feel, put some standard strict standards, and set up a XHTML1.0. The letter X in XHTML, which means "strict".

Summing up, HTML4.01 altogether has 6 kinds of DTD, plainly speaking, the first line of HTML statement a total of 6 kinds:

The following three types of small specifications are explained:

    • strict: "Strict", this model is more stringent requirements. Where is this strictly manifested? Some tags are not available.
      For example, the U tag is to underline a text, but this is in conflict with the nature of HTML, because HTML is responsible only for semantics, not for styles, and U is a style. Therefore, you cannot use the U-tag in strict.
      How do you add an underscore to the text? Future CSS will be resolved using CSS properties.
      XHTML1.0, then, is stricter because the system itself stipulates that the label must be lowercase, must be tightly closed, the attribute must be quoted, and so on.

    • transitional: "Ordinary", this pattern is not a few other specifications.

    • Frameset: Represents "frames", which are used on the frames page.

The html:xt,x indicated in the sublime input indicates that xhtml,t represents transitional.
The HTML5 greatly simplifies the DTD, which means that there is no XHTML in HTML5 (it is a face-up):

<! DOCTYPE html>

2. Head Label

The head tag is placed between the header parts. This includes: <title>、 <meta> ,<link>,<style>

    • <title>: Specifies the title of the entire page, displayed at the top of the browser.
    • <meta>: Provides basic information about the page
    • <link>: Defines the relationship between a document and an external resource.
    • <style>: Defining the relationship between an internal style sheet and a Web page

2.1Meta Label Description:

Elements can provide information about the page, descriptions of search engines and update frequency, and keywords.

The label is in the header of the document and does not contain any content.

The information provided is not visible to the user, the META tag consists of two attributes, which are the HTTP-EQUIV attribute and the name attribute, and the different parameter values of different attributes, which implement different page functions.

Common Meat Tags:

1) http-equiv Properties:

She is used as a browser to convey some useful information, to help the browser to correctly display the content of the Web page, the corresponding property value of content,content content is actually the variable value of each parameter.

2) Name property:

Mainly used for page keywords and descriptions, is written to the search engine to see, the key word can be used with a number of ', ' separated, and corresponding

The property value of Content,content is mainly convenient for search engine robot to find information and classify information.

" Keywords " content=" netease, email, games, news, sports, entertainment, women, Asian Games, forums, SMS "/>

These keywords are engines. What this page is used for, can improve the search hit rate, so that others can find you, is to tell the search

Let others find you, search.

2.2 Title Tag

Mainly used to tell users and search the main content of this page, search cited droning can be the page title, quickly determine the current page theme.


Web Front end--html introduction and head tags

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.