HTML Reinforcement--basics

Source: Internet
Author: User

If you want to make your own web page, do Web design, Web development, then you have to learn the first is HTML, and can master the writing of HTML files. Maybe your programming linguistics is bad or poor, do not be afraid, HTML is another language, is a new world, perhaps this is the right stage for you oh. HTML is easy to get started, and Don ' t be shy, let's have a try!!! Start customizing your own Web page.

0X01 Learning Methods

For beginners, sticking to the hands is the only way to improve, so that not only makes learning interesting, but also absorbs the improvement quite quickly. For the development environment, at first I do not recommend the use of a more powerful HTML IDE, just use the general text editor is very good, and then we use a powerful development environment to improve development efficiency.

0x02 Learning Path

A graph describes the HTML

0x03 What is HTML
    • First, HTML is a language that is used to describe the language of a Web page.

    • HTML refers to Hypertext Markup Language (Hyper text Markup Language) so-called hypertext refers to the page can contain pictures, links, and even music, and other non-text elements

    • HTML is not a programming language, but a markup language (markup language) so even if you do not understand any programming language, it's okay, you can get started with HTML. Markup Language: A set of Tag tags (markup tag)

    • HTML is the use of tag tags to describe web pages

    • HTML file suffix name is (. html), you can use the General text Editor can be edited, and then open with a browser, you can see the page you edit

Look at the HTML files that others have written.

This is a simple HTML search online, we can also open the environment of the browser, right-click, view page source

The HTML file is written to look like this. But do not think that the appearance of good trouble, a lot of HTML files are only large, please believe that the start is certainly not difficult. Here we dissect it.

0x04 HTML file structure

Here, let's look at the structure of an HTML file.

In this picture, the HTML file is shown a simple structure diagram, can be compared to see, the general HTML file structure is the following

As I said before, HTML is a markup language, these < > is called a label , and HTML uses these tags to describe the page. After understanding the general structure, we will learn HTML tags later.

0x05 HTML Document

HTML documents are also called Web pages, HTML documents contain HTML tags and plain text, and the role of WEB browsers is to read HTML documents and display them in the form of Web pages. Instead of displaying HTML tags (the equivalent of a hidden format description), the browser uses tags to interpret the contents of the page:

Let's take a look at the corresponding explanation:

< html> and

0x06 HTML Tags
    • What is a label

The label is the above < Head>, < body>, < table>, such as the angle brackets "<" and ">" Wrapped up objects, most of the labels are in pairs appear, such as < table></ Table>, < form></form>. The first label in the pair is the start tag, the second tag is the end tag, and the start and end tags are also known as open tags and closed tags, and of course, a few are not in pairs, such as < br>, < hr>, etc. tags are used to tag HTML elements. The text that is between the start and end tags is the content of the HTML element.

    • Describe in advance what is an element (contrast)

Many people may not have called a label, which is called the concept of elements to clear, learning has been confused. In order to avoid this kind of tragedy to happen again, I am here to distinguish beforehand, in fact the concept between the two is still very clear

HTML pages are actually text files made up of many different HTML elements, and any Web browser can run HTML files directly. So it can be said that HTML elements are the basic objects that make up HTML files, HTML elements can be said to be a generic. HTML elements are defined by using HTML tags.

For example < p> This is a label;< p> content </p> This is an element, which means that the element consists of a starting label and an end tag to contain some content; Here's a notable exception, < br/> itself is both the start tag and the end tag, but it doesn't contain anything, so it's just a label.

We'll have specific chapters behind us to tell the elements, and this is to avoid the concept and label clutter, just a little bit.

    • Common tags

We know that the Web page can achieve a variety of customization, to achieve a variety of functions, in turn, we can show that the label type is many, so as to achieve a variety of functions and definitions. And here we'll start with the four most basic labels.

    • The HTML title Heading is defined by tags such as < h1>-< h6>. Example:

    • The HTML paragraph paragraph is defined by the < p> tag. Example:

    • <p>this is a paragraph.</p><p>this is another paragraph.</p>

      HTML link links are defined by < a> tags. Example:

    • <a href= "http://shiyanlou.com" >this is a link</a>

      The image of HTML images is defined by the < img> tag. Example:

    • Here are just a few examples of the four commonly used labels, as well as specific usage and other tags, which we'll cover in the sections that follow. One more thing to add is that the HTML tag is insensitive to case:< p> is equivalent to < p>. Many websites use uppercase HTML tags. W3school uses lowercase tags because the World Wide Web Consortium recommends lowercase in HTML 4, and lowercase in future (X) HTML versions. So after the label, there are attributes of the writing we will all take lowercase.

HTML Reinforcement--basics

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.