0 Basic HTML Coding Learning notes

Source: Internet
Author: User

Mission Purpose
    • Understand the definition, concept, and history of HTML
    • Mastering the meaning and usage of common HTML tags
    • Ability to properly plan HTML document structures based on design drafts
    • Understand semantics and use HTML tags wisely to build pages
Task Description: Complete an HTML page code writing (do not write CSS, do not need to focus on style, focus on the document structure) task considerations
    • Only need to complete the HTML code writing, do not need to write CSS
    • The example diagram is for reference only and does not need to be fully consistent, and the pictures and copy can be set by itself
    • Try more HTML tags as much as you can

Summarize

I. Involving HTML tags

1,

2. <nav> Tags: defines a set of navigation links.

3, <main> Tags: page body content, the content is unique in the page, and does not include the pages of duplicate content, such as: Sidebar, navigation links, copyright information, website logo and search box.

4, <aside> Tags: define some other content related to the surrounding content.

5, <footer> Tags: define the foot of the page, can be: Author information, copyright information, contact information, site map, back to the top of the page links, related documents. There can be more than one <footer> tag in a page.

6, <article> Tags: define a piece of independent, self-contained content, which itself has a complete meaning, can be independent of the other content of the page exists.

7,

8, <ul> Tags: unordered list (unordered lists). <li> tags define list items for unordered lists.

9, <ol> Tags: there is a sequence list (ordered list). The <li> tag defines the list item with the sequence table.

10. <dl> Tags: A descriptive list (description lists) or a list of definitions. Used with <dt> tags (defines terms/names, defined as headings) and <dd> tags (describes each term/name, definition description is interpreted).

11, <form> Tags: can contain one or more of the following tags:<input>, <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <label>.

12, <input> Tags: define an input area where users can enter data.

(1) Type property: The type attribute defines the form of the input area, with the attribute values: button, checkbox, color, date, datetime-, local, email, file, hidden, image, month, number , password, radio, range, reset, search, submit, tel, text, time, URL, week.

(2) checked attribute: Used for checkboxes, radio and other types, define page pre-selection <input> element, attribute value: checked.

(3) Name property: Defines the names of the <input> elements. Property value: Text.

(4) Value property: Defines the value of the <input> element. Property value: Text.

13, <select> Tags: generate drop-down list. <select> tags Internal <option> tags define the list of options.

14, <textarea> Tags: multi-line text input box, you can define the text box size by cols and rows properties.

(1) Cols Property: Text box visual width, property value: number.

(2) Rows property: Number of visible rows in a text box, attribute value: number.

15, <table> Tags: define HTML tables. The table consists of one or more <tr> (defines a table row), <th> (defines a table header), <td> (defines a table cell) tags.

(1) Border property: The width of the border around the table. Property value: Pixels value.

(2) The Colspan property of the <td> tag: the number of rows spanned by the cell. Property value: Number.

16, <a> Tags: hyperlinks to link from one page to another.

(1) Target property: How to open a link. Attribute values: _blank, _parent, _self, _top, FrameName.

Second, encounter problems

1. Font Bold

HTML5: Use

You can also use the CSS's "Font-weight" property to add bold fonts.

Third,GitHub address : Https://github.com/Nunawading2016/2017-IFE-Baidu.git

0 Basic HTML Coding Learning 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.

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.