HTML QuickStart (Basic tutorials + resource Recommendations)

Source: Internet
Author: User
Tags opening and closing tags tag name

What exactly is 1.html?

Literally, HTML is the acronym for Hypertext Markup Language Hyper Text mark-up language, referring to a generic web page description language that describes the various web pages that we can see when we open a browser.

So, write HTML code and programming are not the top, do not listen to the source code two words despair, thought you want to study a computer degree.

You just need to know which tag to use when you want to display the content on the page.

Even if the beginning can not remember, it does not matter, check the textbook, Ask degrees Niang, minutes to fix, used several times, want to remember not to be difficult.

Recently swept the big blogs and the writing platform Markdown Everybody knows, HTML is not much more complicated than it.

At present, the latest version is HTML5, with a qualitative leap from the previous version, the new media field has placed great expectations, especially in the mobile application, carried out in full swing.

About HTML5, you can open a different topic. No more talk today.

2.html Document BASIC structure

The first thing you need to do is define a concept where the HTML document is composed of elements. There are 4 base document elements, and any HTML document requires all of these elements.

Each HTML document needs to start with the DOCTYPE element, which is intended to tell the browser: "The type of document that is about to be opened is HTML, which is handled according to the HTML parsing rules."

Some students will find that even if the DOCTYPE element is not written, most browsers will still be able to display the contents of the document correctly.

However, it is not advisable to do so in the long run, relying too much on the browser's "understanding" to make you mad at a critical moment.

HTML elements are the root elements of an HTML document and contain real HTML content.

The HTML element consists of the head element and the BODY element.

The head element contains information such as the document's metadata, which in HTML5 specifies that a TITLE element must be included in the head element.

The BODY element is used to wrap the contents of the document to be displayed in the browser window.

The relationship between them can be understood in the sense that the head element itself is not the document content, but provides important information about the contents of the document later wrapped in the body.

For users, it is important to have the contents of the BODY element, but if you want to successfully display the contents of the BODY element, you cannot leave the head element.

So, when you create an HTML file like the one below, you actually complete a Web page creation.

1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <title>My first web App</title>5 </Head>6 <Body>7 </Body>8 </HTML>

However, when you use a browser to open this page, you will find that there is a blank window in front of you, it is because we did not add any substantive content.

It's like we printed a book, but the text page of the book is all blank. But anyway, it's still a book.

To design and develop a truly useful Web page, you need to add a variety of elements.

3.html Mark Basic Syntax

In the HTML5 authoritative guide, there is a saying: "HTML is a markup language." The element whose markup is applied to the contents of the document (for example, text) is in its form.

In layman's terms, to have the browser execute your instructions correctly, you must use tags. These tokens are long-defined and cannot be created by themselves.

What is a mark?  We used it in the code above, like <html> <head> <body> The content written in the angle brackets is all marked. And most of the markings are in pairs.

The basic syntax for an element in an HTML document that has tags applied is as follows:

< Tag Name > element content </ tag name >

Where the < tag name > is the start tag, the </ tag name > the end tag , which refers to the content that you want to display in the browser window.

Is it true that all element markers have the above three elements?

Not so.

When there is no content between the opening and closing tags of an element, it is an empty element .

Empty elements can be expressed in a more concise way, which is to combine the opening and closing tags with only one token, such as the < tag name /> .

There are also special elements that are represented by a label, called a virtual element . For example, the <hr> , which is used to insert horizontal lines in a page, is one such element.

We call the pair to appear as a double mark, whereas the other is a single Mark .

How many tags does the HTML have? Count the HTML5 new tags, about 119.

And the most commonly used is much less.

According to the 80/20 principle, only about 24 (119*20%) of the most commonly used tags can solve the problem of 80%.

Do you feel elated?

4.html common Labeling and application methods

Beginners are familiar with the use of the following tags.

<style><script>

<div>,<p>,<br>

,<a>,<embed>

<form>,<input>,<button>,<txtarea>,<label>

<frame>,<frameset>,<iframe>

<ul>,<ol>,<li>

<table><tr><td>

Because there are a lot of resources on the network, it is not repeated here.

Recommended W3school This site, which has basic tutorials and advanced tutorials, there are very complete reference manuals, is really a good place for beginners to learn. The address is as follows:

Http://www.w3school.com.cn/index.html

In addition: recommend the "HTML5 authoritative guide" This book, the content adopts the organization way based on the question, but also is the Classics book, is advantageous to the three views.

Later I will combine CSS, in the form of specific examples to give you a detailed explanation of the use of HTML tags.

My point is, do not make the HTML document itself too complex, as far as possible semantic stronger markup, and less the main function is to change the display style of the markup, the style to CSS.

Copyright NOTICE: This article is the author original, if need to reprint, please indicate the source. Thank you!

HTML QuickStart (Basic tutorials + resource Recommendations)

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.