Rupeng net Study Notes (7) HTML basics and Study Notes
HTML notes
I. Introduction to HTML
1. HTML (Hyper Text Mark-up Language) is a programming Language. It can also be said to be a standard and standard.
2. HTML provides a series of tags. Each tag has different meanings and functions. The browser displays the content on the browser page according to the meaning of the tag.
3. hypertext: a page can contain not only common text, but also images, links, music, programs, and other non-text content.
4. learning HTML is mainly to learn the usage and syntax of common tags.
Ii. Basic tags
<! DOCTYPE> defines the document type, indicating the document type and version (understanding)
<Html> define HTML document (page)
<Title> define the document title
<Meta> define the metadata of the document, which affects the browser's parsing of the page.
<Body> define the subject of the document
<H1> ~ <H6> define the title text
<P> define paragraph text
<Br> define line feed
<Hr> define a horizontal line
<! --... --> Define comments
Iii. List tags
1. unordered list
<Ul> an unordered list is displayed on the page (the type attribute determines the icon style)
<Li> indicates a list item.
2. ordered list
<Ol>: displays an ordered list (type attribute: 1 a I I) on the page)
<Li>: indicates a list item.
3. Custom list
Dl: displays a custom list on the page.
Dt: defines the parent node list items.
Dd: defines the subnode list items.
Note: dt and dl Are Not nested, but parallel.
Iv. Syntax specifications
1. tags are displayed in pairs. An end tag is required if a start tag exists.
2. labels are case-insensitive, but lower-case labels are recommended.
3. A tag can contain null, text, or other tags (tags can be nested)
4. If a tag is always empty, it can be abbreviated as a single tag, as shown in <br/>
5. Two pairs of labels cannot be crossed.
6. A tag can contain several attributes. attributes are separated by spaces and there is no order between attributes.
7. Some labels need to be used together to accomplish a complicated task.
8. The browser processes several consecutive blank characters (space characters, line breaks, and tabs) into a space.
Note: In the beginning, in order to promote HTML as soon as possible, the browser does not have strict syntax requirements for HTML documents, which causes the nonstandard HTML code to be parsed by the browser.
5. text display effect labels
At the beginning, HTML uses tags to control the Display Effect of text. With the development of technology, CSS is used to control the page effect,
These text display effect labels are no longer recommended
<Small> small text
<Big> large text
<B> bold text
<I> italic text
<U> underlined text
<S> strikethrough text
<Strike> strikethrough text
<Center> center text
<Em> emphasize text
<Strong> strong emphasis on Text
<Sup> superscript
<Sub> The following table text
<Font> text font, size, and color
6. HTML Entity characters
In HTML, there are some special characters, such as >< "& which have special meanings, which may cause conflicts during use. In addition, characters such as × ↓ do not have corresponding buttons on the keyboard.
To facilitate developers to use these characters flexibly, HTML provides corresponding entity characters for developers to use.
Space: & nbsp;
Yu no. & lt;
Yu no. & gt;
And number & amp;
Double quotation marks & quot;
Registered Trademark & reg;
Multiplication number & times;
Division Number & divide;
VII. Table labels
<Table> define a table as a whole
<Caption> define the table title
<Tr> define rows in the table
<Td> define cells in the row (the colspan and rowspan attributes can be used to merge cells)
<Thead> Header
<Th> define the table header cell.
<Tbody> table body, which can be used to optimize the display of large tables in Segments
<Tfoot> footer of the table
Single-pixel border effects of tables <table border = "1" cellspacing = "0px" style = "border-collapse: collapse">
8. hyperlink tag <a>
1. Link to external resources:
<A href = "http://www.rupeng.com/index.shtml"> rupeng Network </a>
<A href = "Ugly: Read More. jpg"> ugly: Read More. jpg </a>
<A href = "Ugly: Read More. Zip"> ugly: Read More. Zip </a>
The hyperlink only specifies the location of the resource. The default hyperlink is used when the browser obtains the resources for post-processing. If the browser can parse and display the resources, the browser will directly parse and display the resources,
Otherwise, it will be processed as a file download (of course, force download can also be specified)
Target attribute: specify the resource opening location (_ self, _ blank)
2. Connect to another <a> tag in the page
<A name = "mao"> define a position (Anchor) </a>
<A href = "# mao"> specify this location </a>
9. image tags
1. Used to display an image on the page
Src attribute: Specifies the image resource location
Alt attribute: when the image resource specified by src cannot be found, the prompt displayed in the browser is displayed.
Width and height attributes: Specify the width and height of the image.
Border: Specify the border width of the image.
Note: The src value should be the relative path of the resource as much as possible, because many Browsers Do not support absolute paths here.
10. Form tags
<Form> is used to define forms for users to enter information and collect user information.
<Input> multiple input controls can be defined,
Including text, password, radio, checkbox, file, hidden, button, submit, and reset
<Label> define the annotation of the Form Control
<Textarea> defines multi-line text input controls
<Select> define the drop-down list and <option> define the options of the drop-down list
<Button> define common buttons
(In the input box, press the Enter key and click the submit button)
11. Framework labels
1, <frameset>, <frame> define frame set (obsolete)
<Html>
<Head> <Frameset rows = "100px, *">
<Frame src = "head.html"/>
<Frameset cols = "20%, *">
<Frame src = "left.html"/>
<Frame src = "main.html"/>
</Frameset>
</Frameset>
</Html>
2. <iframe> define the embedded framework
<Iframe src = "inner.html" width = "600px" height = "370px"> </iframe>
12. Page Layout labels <div> and <span>
Both <div> (division) and <span> can divide pages into relatively independent parts (partitions) for convenient layout.
The difference is that div has a line feed effect by default, while span does not.
The layout of div + css is currently the mainstream, which will be explained in the css Course
There is a consensus that the content of a webpage should be separated from the form of representation. That is to say, html tags are mainly responsible for defining the content of a webpage,
For example, css defines the display style of the content, such as the text color.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
