Beginners learn H5-first week, first week

Source: Internet
Author: User
Tags closing tag

Beginners learn H5-first week, first week

As a beginner, to learn the Html programming language from the beginning, you must start with the most basic. The programming software I use is Hbuilder.

1. Html document structure

Including head and body

 

<!DOCTYPE html>

 

Note that the document type must be emphasized at the beginning!

 

2. Html tag is the most basic unit and most important component of Html. Use <>. All Html tags must be closed tags. It can be a pair of tags, such as <title> </title> or a self-closing tag, for example, . That is,/indicates the closure of this tag or a pair of tags. Labels must be correctly nested and cannot be crossed. 3. Html tag attributes are part of tags. They can contain additional information and contain multiple attributes. The following are commonly used labels and functions in the head. <! --> The content is a comment.
<! DOCTYPE html> <! -- Document declaration: it must exist and be in the first line of the document page. Html5 has been simplified to the above style --> 

 

4. Label classification block-level labels: displays block-level labels. Line-level labels are displayed one by one from left to right. 5. common block-level labels 7. Common row-level labelsSpan (text) <span> </span> is meaningless. It is used to wrap a part of text and modify a specific style em (emphasis) <em> </em> to emphasize, the highlighted style is skewed strong (emphasized). <strong> </strong> the highlighted style is bold, and the emphasis is higher than em (Html5 requires tags to be semantically implemented as much as possible) q (short reference) <q> </q> the display content is enclosed by quotation marks (I) <I> </I> B (BOLD) <B> </B> I labels indicate skew, small (reduced font) <small> </small> makes the displayed font smaller than one, and can be nested multiple times until the font size reaches the lower limit big (enlarged font) <big> </big> opposite to small img (image) 1.src: indicates the address of the referenced image (path address: 1. relative Path: Search for image address a based on the current file. write image name B directly at the same layer as the file. the image is stored at the bottom of the file: folder name/image name c. picture layer on file :.. /image name 2. absolute path: file:///E:/00.jpg Do not use 3. Network Address: image links on the network are generally not used) 2. width and height of the image. CSS can be used to replace 3. title: The image title. The text displayed when the mouse points. Alt: Text a (Hyperlink) displayed when the image cannot be displayed <a href = "" target = ""> </a> 1, target = "_ blank" hyperlink opens _ self on the new page opens 2.rel: specifies the relationship between the current document and the linked document. (rel = "prev" is linked to the previous document, rel = "next", followed by rel = "prefetch, after the current document is loaded, use the free time to pre-load the file rel = "icon" to be connected. The linked image is the icon of the current document. Rel = "stylesheet" The linked document is the style sheet of the current document 3. anchor: on this page, anchor ① sets the anchor <a name = "top"> </a> ② On the connection, use # name to jump to the corresponding anchor, <a href "= # top" target = "_ self"> hyperlink </a> anchor between pages ① set anchor at the specified position on the page to be redirected ② set the href attribute on the hyperlink use the "page address .html # name" function to connect ① mailto: // used to send an email <a href = "mailto: lyx02095211@126.com" target = "_ self"> email </a> ② "tencent: // message /? Uin = send an email to the specified QQ <a href = "tencent: // message /? Uin = 805216490 "target =" _ self "> deduction </a> <s> indicates incorrect text strikethrough </s> <cite> cite indicates reference, the browser is skewed </cite> <code> only indicates the code. The browser shows the same width but does not retain the code format, use the sub subscript text X <sup> 2 </sup> copyright symbol & copy .......... for examples that are not commonly used, see the following program:
<! DOCTYPE html> 

 

8. table

Table row: tr column in each row: the title of the td table: th is bold by default, and the cell is centered. Statement: <table> <tr> <th> </tr> <td> </td> </tr> </table> This is a common table attribute with two rows and two columns: 1. boder: Add a border to the table. When the boder attribute is increased, only the peripheral border is increased, and the cell border is always 1px2. cellspacing: the distance between cells. When cellspacing is set to 0, only the cell spacing is 0 and the border line is not merged (Table Style merging, style: boder-collapse: collapse;) 3. cellpadding: the distance between the content in the cell and the border line. width and height 5. align: The table is displayed in the left-right corner of the screen. Adding align to the table is equivalent to adding floating 6 to the table. bgcolor: the background color is equivalent to style = "background-color:" 7. background: The background image is equivalent to style = "background-image" 8. bodercolor: border color.

 

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.