Common HTML tags (1) text tags,

Source: Internet
Author: User
Tags code tag html hello world

Common HTML tags (1) text tags,

In the latest iOS development process, I found that JavaScript and native OC (Swift) interactions are involved. As a Developer, I started to learn HTML based on the principle of overcoming all problems, record your study notes here to facilitate future review and reference for beginners.

HTML is different from the various object-oriented languages and functional languages that have been learned in the past. Unlike other languages, HTML does not have a clear logical relationship between contexts. so it is not like other languages that need to have a specific foundation. I hope this sentence will keep you away from the shadows of other languages you have learned.

Relationship between HTML, CSS, and JavaScript

1.HTML is the carrier of webpage content.The content is the information that the Web Builder places on the page and allows users to browse. It can contain text, images, videos, and so on.

2.CSS style is a manifestation.It is like the coat of a webpage. For example, the title Font, color change, or adding a background image or border to the title. All these things used to change the content appearance are called representations.

3.JavaScript is used to implement special effects on webpages,For example, move the mouse over the drop-down menu. or move the mouse over the table to change the background color. there is also a shift in the focus of News (news images. it can be understood that animation and interaction are generally implemented using JavaScript.

1. semantic

I have been familiar with HTML or HTML for beginners. The first professional word I want to contact is tag or semantic, the meaning of semantic semantics is to understand the purpose of each tag (when and how different tags are used, and how to use them are things that need to be taken into account in semantic semantics ), for example, the title of an article on a webpage, the charts, column names, paragraphs, and so on that you want to display on a webpage are all labels that can be implemented. You can add CSS through basic labels, you can write some beautiful pages.

Benefits of semantics:

1. It is easier to be indexed by search engines.

2. It is easier for the screen reader to read the webpage content.

2. Explain the HTML from the simplest Program

As a programmer, everyone should know that "hello, world", whether it's learning C, java, OC, etc. I think the first one written by everyone should be a print function, however, HTML does not have a function. HTML is mainly a text display, similar to a text editor. By adding appropriate labels, we can arrange the text as we want, therefore, the following functions will not be printed (JavaScript will be used in the future ).

1 <! Doctype html> 2 

The above is the HTML Hello World.

A brief introduction to this Code

First, we can find from the code that most of the tags appear in pairs, so they are divided into the start tag and the end tag. The end tag is one more "/" than the start tag "/", for example,

Then, we can see that the labels in the code can be nested with each other, but they cannot be crossed.



<Title> </title> label. The text between the <title> and </title> labels is the title information of the webpage, which appears in the title bar of the browser. the title tag of a webpage is used to tell the reader and the search engine what is the main content of the webpage. The search engine can quickly determine the subject of the webpage through the webpage tag. the content of each webpage is different, and each webpage should have a unique title.

<Body> label, as its name implies, the body is also the body, the body, that is, the content displayed on the page on the webpage. It is also the container of the content tag, common Content tags include hierarchical title tags



3. Other labels

<P> </p> the paragraph label. In this article, we need to organize a paragraph clearly. At this time, we need the paragraph label, the default style contains blank spaces before and after <p> </p>, but it is not the first line indent in our normal use. It usually does not make us satisfied, therefore, we need to use the css style (<style> label) to delete or change it.

1 <! Doctype html> 2 

<Strong> and <em> emphasize tags, which are used to emphasize specific words or paragraphs in the text on the webpage. However, the two have differences in tone. <strong> they are more false, the format is bold, and <em> is italic.

<Span> tag, <span> tag does not have any semantics. You may think about its function, but it is because there is no semantics that reflects its strength, that is, custom. The text in the tag can be highly customized with css or JS, which can be called one of the most important labels in future studies.

<Q> short reference text tags, which are relatively unpopular. When you reference a famous saying, the tags will be used. The browser will automatically add double quotation marks to the text you reference, therefore, you do not need to add double quotation marks.

<Blockquote> long reference text tag, which is used in the same way as the preceding tag. However, it is applicable to long field reference and will be indented in actual effect. The reference effect of a separate paragraph is as follows, no double quotation marks are added.

<Address> address Tag: You can define an address, which can be an email address, a signature, or an identity of the author of the document. the text style in the tab is italic by default in the browser, and can be customized using the css style sheet.

<Code> code tag is used in some technical websites, such as our blog Forum websites, when a line of code needs to be displayed. however, it is not possible to execute multiple lines of code.

<Pre> code segment label: When you need to insert code of a large segment, you need to use the <pre> label, which can fully reflect the carriage return and indentation in our code, HTML does not recognize multiple spaces or carriage return characters.

Empty tag (single tag, no start and end tag)

<Br/> line feed labels do not recognize multiple spaces in HTML (a single space can be recognized as a text form) and line feed. All texts are continuous, therefore, the section label <p>, Space & nbsp; <br/> is equivalent to "\ n" in ASCII ".

<Hr/> horizontal tab. The default style lines in the browser are thick and the color is gray. Some people may think this style is not beautiful and does not matter, these external styles can be modified after we learn css style sheets later.

You can use these tags to edit some simple text document websites.



Related Article

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: 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.