"Original tutorial" swallowed HTML

Source: Internet
Author: User
Tags closing tag

First of all, our ANGULARJS courses are divided into three main modules:
    • HTML/CSS/JS Foundation,
    • Angularjs detailed,
    • Some of the practical frameworks of Angualrjs are explained.
Among them, the object of the first large module is a little familiar with the front-end development technology, but unfamiliar with the children's shoes, which will be the basis of html/css learning, due to the nature of the course, the JS will focus on the explanation. The second-largest module of the object-oriented is the front-end technology html/css/js have a certain understanding of children's shoes, can build Web pages. The third big module is the little egg part of our course, look forward to it. In this lesson, we will explain the basis of HTML and CSS, and then we will explain in detail JS, so that finally we better to learn angularjs, get higher wages. So, what is HTML, this lesson I will be a layer of you peel off the HTML clothes, you enjoy. HTML is a Hypertext Markup Language (hypertext Markup Language, HTML), a coding language that you can use to structure your Web content and give it meaning and purpose. It tells the browser how to display the content. HTML separates the contents (text, pictures, languages, videos, etc.) and "presentation" (how the content is displayed, such as what color the text is displayed in). HTML uses a pre-defined set of elements to identify content patterns. The element contains more than one tag to contain or express the content. The tag is represented by angle brackets, and the end tag (used to indicate the end of the content) is preceded by a slash. For example, it's an example, so much so. The paragraph element contains the start tag "<p>" and the closing tag "</p>", and the following example shows a paragraph containing an HTML paragraph element: <p> Miss Le is so handsome! (This is a paragraph) </p> when this content is displayed in a Web browser, it will look like this: Le teacher is really handsome! (This is a paragraph) the browser takes advantage of the markup as an indication of how the content in the tag is displayed. Elements that contain content can also contain other elements, such as the accent element (<em>), which can be wrapped in a paragraph element: <p> teacher is <em> really handsome </em>! </p> It looks like this when it comes to the show: music teacher is so handsome .! At this time, some classmates asked, is not HTML is made of all kinds of such angle bracket label ah, no, not all. Usually, a diagonal line in front of the angle brackets means the end of a label, which is optional in HTML, and is required in XHTML, including HTML elements in XML schemas. Let's parse the HTML element and take the example above:

The main parts of this element are:

    1. Start tag (the opening tag): This contains the name of the element (here is p), surrounded by open, closed angle brackets . This means that this is the beginning of the element-in this case, starting at the beginning of the paragraph.
    2. Closed label (the closing tag): Similar to the start tag, except that it contains a slash before the element name. Indicates that this is the end of the element-in this case, the end of the paragraph.
    3. Content: This is the content of an element, in this case the text that is entered itself.
    4. element: A complete element is a combination of open and closed tags and content.

Elements can have attribute properties that look like this:

Attributes (Attribute) contain some additional information about the element that itself does not need to be visible in the content. In this example, the class tag is where you can provide an identity name for the element to further specify the style style for the element or to use it for other operations.

A property should contain:

    1. A space character between an attribute and the element name or the previous property (if there is more than one property)
    2. The name of the property, followed by an equal sign
    3. Attribute values surrounded by quotation marks
Nested elements:  You can tell an element to be placed among other elements-this is called nesting. If you particularly think that Le Teacher is very handsome, then we can use the "true" <strong> element package, which means that the word will be particularly emphasized. <p> music teacher <strong> true </strong> handsome! </p> nesting There is a place to note: You have to ensure that your elements are properly nested, one layer at a time, of course, for like does not start and end of the single label (empty element), is not set others, can only be set by others. Elements must be properly started and closed in order to clearly display the correct nesting. If they do not nest properly, your browser will try to guess what you want to say, but you will not get the results you expect, so don't do it!   Empty elements: empty elements are tags that don't contain content, like the empty elements mentioned above, which are called empty elements, and look at the tags in our HTML code: This element contains two properties, but there is no closed tag for </img>, and there is no content. This is because an image tag does not contain any valid content, and his role is to embed an image in its place.   Parsing HTML documents   Although we've covered some basic HTML elements above, they don't really work, so let's take a look at how they're grouped together as a full HTML page. Let's build a index.html file, open it with your IDE, and write the following in it: (under the index.html file sibling directory, build a images folder with a picture named Hello.png. ) <!DOCTYPE html>      <meta charset="utf-8">
    <title>My test page</title>
    <body>
   
</body>
  • <! DOCTYPE html>  -Document Type description (doctypes). In the time when HTML has just appeared (about 1991/2 years), the document type description is used to make HTML pages behave as good HTML by using automatic spell checking and other useful actions for linking to a specific rule. Now, however, no one really pays attention to them, and they are now just a historical artifact to make development go smoothly.
  •  -    element. This element contains the contents of the entire page. Sometimes called the root element.
  •  -    element. This element contains all the information related to your page, but is not visible to the user. This includes keywords and page descriptions like those searched by search engines, CSS stylesheets and character encoding declarations, and so on.
  • <body></body>  -  <body>   element. This element contains what you want to be seen by the user, whether it's text, images, videos, games, playable tracks, or other content.
  • <meta charset= "Utf-8";  -This element specifies the character encoding that your document needs to use, like UTF-8, which includes a very good number of characters in a human-known language. Basically UTF-8 can handle any text content. We don't have any reason not to set character encodings, and we can avoid problems that may arise in the future.
  • <title></title>  -This element sets the title of the page, which is displayed on the Browser tab, and as the default name when you add the page to your favorites or favourites.
Image: Let me go back to the image element: as we said before, he embeds the image into the location of the element, which is via the SRC (source) containing the path to the image file property to implement this functionality. But this art element also includes the ALT (alternative) attribute---This attribute should be the contempt of the image, and when the image cannot be seen by some users, it may be because:
    1. They are blind or visually impaired. Some users who have serious visual impairments often use screen readers to read the alt  contents of their properties.
    2. Some of the errors in the code let the image not be displayed.
The key to the ALT attribute is to "can describe the text of an image." When it is read, the contents of Alt should convey to the user the meaning of sufficient image expression. So the above description is not accurate. Now modify your code to provide more appropriate descriptive information for your image. There is a point to note that in the future to go inside the company, there may be a large number of programmers are not very fond of writing this alt attribute, but, write this is a good habit, children's shoes must remember not to forget, good habits are 1.1 points slowly accumulated. Tag text

This section contains some basic markup text for HTML elements.

Title

The caption element allows you to specify the title and sub-headings of the content. Just as a book has the main title, and then each chapter has a title, and then there's a smaller title, and the HTML document is the same. HTML includes six levels of titles Although you may only use up to 3-4.

Now try to add an appropriate title to your element.

Paragraph

As explained above, the <p> element is used to specify the paragraph. You can use it to specify general text content:

<p>This is a single paragraph</p>
Add your sample contentinto one or several paragraphs, and then place them under the element. List

Many of the content on the Web is a list, so HTML has some special list elements. To mark a list usually includes at least two elements. The most commonly used list types are sequential tables (ordered lists) and unordered tables (unordered lists):

    1. The order of items in an unordered list is not important, like a shopping list. This content is included in an <ul> element.
    2. The order of items in a sequence list is important, just like a recipe. This content is included in an <ol> element.

Each item in the list is included in a <li> (list item) element.

So, if we want to change the fragment of the following paragraph to a list:

<p>At skylor , we’re a global community of technologists, thinkers, and builders working together ... </p>

We can do this:

<p>atskylor, we ' re a global community of</p>   
<ul> 
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li></ul>

<p>working together ... </p>

Try adding an ordered list and unordered list to your sample page.

Link

Links are important-they make the Web a web (WWW). To implant a link, we need to use a simple link--a <a> is an abbreviation for "anchor" (anchor). To add some text to the link, just the following steps:

    1. Add some text. We chose "Mozilla Manifesto".
    2. Include the text within the <a> element, like this: <a> skylor</a>
    3. Give the <a> element an href attribute, just like this: <a href=""> skyloro</a>
    4. Place the URL you want to link in the href attribute:
      <ahref="https://www.cnblog/skylor">skylor/a>
If you omit it at the beginning of the URLhttps://Orhttp://Protocol, you may get the wrong result. After completing a link, click on it and make sure it goes to the URL you specified. Of course, there are some marks listed above, there are a lot of parts of the label is not listed, these are not in detail to do this course, Learning Angularjs Preliminary Master I said will be the basic knowledge of HTML, later see the new Mark I will explain a little bit, a word, understand the above so much, You have the knowledge of learning Angularjs HTML. And we know, now the major websites on the internet page are beautiful and beautiful. These beautiful pages through above, of course, can not be done, HTML is a shelf, we need to put some decorations on the shelves, do some animation, the following course we will briefly explain the CSS Art garden, as well as JS's pattern Foundation. By the end of this study, we can begin our Angularjs formal course. Thank you for watching, thank you for your support, see you next time.

"Original tutorial" swallowed HTML

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