Home > Developer > Web Develop

HTML+CSS Basic Course notes (MOOC) added in succession ...

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1th Chapter HTML Introduction 
1 <!DOCTYPE HTML>2 <HTML>3     <Head>4         <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8">5         <title>make my first page</title>6     </Head>7     <Body>8         <H1>Hello World</H1>9     </Body>Ten </HTML>
early code experience, making my first page 
1 1. HTML is the carrier of Web content. The content is the information that the Web creator puts on the page to let the user browse, can contain text, picture, video and so on.  232. CSS styles are expressive. Just like a web coat. For example, the title font, color changes, or for the title to add background pictures, borders and so on. All these things that change the appearance of the content are called performance.  45 3. JavaScript is used to achieve special effects on a Web page. such as: Mouse over Popup drop-down menu. or the mouse slide over the background color of the table changes. There is also the rotation of the Focus news (news pictures). It can be understood that there are animations and interactions that are generally done with JavaScript.
the relationship between HTML and CSS 
1 Each content in a Web page is displayed in a browser and is stored in a variety of tabs.
Recognize HTML tags 
11. Label by English angle brackets<and the>Enclosed, such as<HTML>is a label. 2 3 2. The tags in the HTML are usually paired, with the start and end tags. The end tag has one more/more than the start tag. 4 53. Tags and labels can be nested, but the order must be consistent, such as:<Div>Inside nested<P>So</P>Must be placed in</Div>the front6 74. HTML tags are case insensitive,<H1>And<H1>is the same, but it is recommended in lowercase because most programmers are lowercase.
syntax for tags 
1 an HTML file has its own fixed structure. 2 3 <HTML>4     <Head>...</Head>5     <Body>...</Body>6 </HTML>7 Code Explanation:8 91.<HTML></HTML>Called the root tag, all the page labels are in<HTML></HTML>the. Ten  One2.<Head>Labels are used to define the head of a document, which is the container for all head elements. The head element has<title>、<Script>,<style>,<Link>,<Meta>and other labels A 3. In<Body>and the</Content between body> tags is the main content of the page, such as
Understanding the basic structure of HTML files 
1 The header of the document describes various properties and information about the document, including the title of the document, and so on. Most of the data contained in the header of a document is not actually displayed to the reader as content. 2 3 The following tabs are available in the head section:4 5 <Head>6     <title>...</title>7     <Meta>8     <Link>9     <style>...</style>Ten     <Script>...</Script> One </Head>
Recognize head tags 
1 <!--   -
Understanding code comments for HTML

The 2nd Chapter recognizes the label (Part I)

1 What is called semantic, the popular point is: understand the purpose of each label (in which case the use of this label is reasonable) For example, the title of the article on the page can be used title tag, the column name of each column on the page can also use the title tag. The paragraph in the article should be placed in the paragraph label, in the article has the want to emphasize the text, you can use the EM tag to express emphasis and so on.  23 That's a lot of semantics, but what are the benefits of semantics?  451. More easily indexed by search engines.  67 2. Easier for screen readers to read Web content.
semantic to make your Web page better understood by search engines 
1 The page content to be displayed on the Web page must be placed in the body tag.
tags, and the contents of the page are displayed here. 
1  Note that a <p> tag in a piece of text, such as 3 paragraphs in a news article, will have to put these 3 paragraphs to 3 <p> in the label
Add a paragraph 
1 Title tags A total of 6, H1, H2, H3, H4, H5, H6 respectively for the first-level title, two-level title, three-level title, four-level title, five-level title, six-level title. and decreases on the basis of importance. < H1 > is the highest level.  2 Syntax:3<HX> title text </HX > (x is 1-6)
Learn about tags and add titles to your pages

Add accent tone, use <strong> and <em> tags

1 <!--The <span> tag is not semantic, and its purpose is to set up a separate style.  -2 <!DOCTYPE HTML>3 <HTML>4 <Head>5 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8">6 <title>Great Gatsby.</title>7 <style>8 span{9 Color:Blue;  Ten } One </style> A </Head> - <Body> -     <P>In the spring of 1922, a writer who wanted to fame named Nick Karawi (Tobey Maguire Tobey Maguire) left the Midwest and came to New York. It was a time of rising morality, popular jazz, smuggling as king, and soaring stocks. In pursuit of his<span>American Dream</span>, he moved into a bay near New York to live.</P> the     <P>Fitzgerald, one of the American literary giants of the 20th century, combines both writer and screenwriter. He sings the ornate elegy of the "Jazz Age" with the poet's sensibility and the imagination of the dramatist, and the temperament of his poet and Dreamer is also the perfect note for that extravagant age.</P> - </Body> - </HTML>
use labels to set individual styles for text

<q> tags, short text references

<blockquote> tags, long text references

Display text using the <br> label branch

Add some space to your page

Recognize

<address> tags, adding address information to a webpage

Do you want to add a line of code? Use <code> tags

Use <pre> tags to add large pieces of code to your page

3rd. Recognition of tags (PART II)

    1. Use UL to add a list of news messages
    2. Use OL to add book sales rankings
    3. Understanding the role of div in typesetting
    4. Name the div to make the logic clearer
    5. Table tags, recognize tables on a Web page
    6. Use CSS styles to add a border to a table
    7. Caption tags, adding titles and summaries to the table

4th. Recognition of tags (Part III)

    1. Use the <a> tab to connect to another page
    2. Open a connection in the new browser window
    3. Use mailto to connect to an email address in a webpage
    4. Recognize tag, insert pictures for Web pages

The 5th chapter interacts with the browser, form labels

    1. Use form labels to interact with users
    2. Text input box, password entry box
    3. Text fields, multi-line text input support
    4. Use the Radio box, check box, to let the user select
    5. Save space with a drop-down list box
    6. Use the drop-down list box to make multiple selections
    7. Submit data using the Submit button
    8. Use the reset button to reset the form information
    9. Label label on Form form

The 6th chapter begins with CSS, adding styles to the page

    1. Understanding CSS Styles
    2. Advantages of CSS Styles
    3. CSS code syntax
    4. CSS Comment Code

7th. CSS Style Basics

    1. Inline CSS style, written directly in existing HTML tags
    2. Inline CSS style, unload the current file
    3. External CSS style, written in a separate file
    4. Three ways to prioritize

8th Chapter CSS Selector

    1. What is a selector
    2. Tag Selector
    3. Class Selector
    4. ID Selector
    5. Differences between class and ID selectors
    6. Child Selector
    7. Include (descendant) selectors
    8. Universal Selector
    9. Pseudo class Selector
    10. Group Selector

The 9th chapter, CSS inheritance, cascade and particularity

    1. Inherited
    2. Particularity
    3. Cascade
    4. Importance

10th Chapter CSS Format layout

    1. Text layout--fonts
    2. Text layout--font size, color
    3. Text layout--Bold
    4. Text Layout-Italic
    5. Text layout-Underline
    6. Text layout--delete Next
    7. Text layout--indentation
    8. Text layout-line spacing (row height)
    9. Text layout--text spacing, letter spacing
    10. Text layout--alignment

11th Chapter CSS Box model

    1. Element classification
    2. Element Classification--block-level elements
    3. Element classification--inline elements
    4. Element classification-inline block elements
    5. What is a box model (02:14)
    6. Box model--border (i)
    7. Box model--border (two)
    8. Box model--width and height
    9. Box Model--fill
    10. Box model--boundary

12th Chapter CSS Layout model

    1. CSS Layout model
    2. Flow model (i)
    3. Flow Model (ii)
    4. Floating model
    5. What is a layer model
    6. Layer model--absolute positioning
    7. Layer model--relative positioning
    8. Layer model--fixed positioning
    9. Relative combined with absolute

13th. CSS code abbreviations, taking up less bandwidth

    1. Box Model Code Shorthand
    2. Color value abbreviation
    3. Font abbreviations

Chapter 14th Unit and value

    1. Color values
    2. Length value

The 15th chapter CSS style setting tips

    1. Center horizontal setting-inline elements
    2. Center horizontally setting-fixed width block element
    3. Horizontal Center Summary-variable width block element method (i)
    4. Horizontal Center Summary-variable width block element method (ii)
    5. Horizontal Center Summary-variable width block element method (iii)
    6. Center vertically-single line of text with parent element height determination
    7. Center vertically-multi-line text with parent element height determination (method one)
    8. Center vertically-Multiple lines of text (method two) of the parent element height determination
    9. Implicitly changing the display type

HTML+CSS Basic Course notes (MOOC) added in succession ...

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
html css crash course basic codes in html em basic show notes how to put notes in html how to make notes in html how to create basic website in html html language notes

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More