html basics (compiler, list, table, picture, hyperlink, form, frame)

(1) Software use

1. Create html file with visual studio

Then in the resource manager project, right click


to add an html file

ps: When typing the code, if you type <> first and then fill in, there will be no automatic code completion. If you type <then fill in the content, then type>, there will be automatic completion, so there is no need to type The end tag, just hit the start tag, because when you hit >, it will automatically complete.

---

# 2. Run the html file

Shortcut key: ctrl+shift+w

---

(2) Annotate in html code

<!--  在这里插入代码  -->

(3) title and body and head

1.title is the title
2.body is the content

3.tag syntax in the head

<meta>Auto refresh jump

usage:

(Jump to Baidu in 3 seconds)

<meta http-equiv="refresh" content="3;url=http://www.baidu.com"/>

(I usually see some small advertisements in this way)

(4) Some text label syntax in the body

1. Title h (block element)

<h2>There are many types of bold styles for the title (such as h1, h2, h3, h4, h5, h6, where h1 is the largest)

2. Paragraph p (block element)

<p>New paragraph. It comes with a line break at the back (the paragraph tag p will make a gap between the paragraph and the paragraph, and the line break tag br will not have a gap) to



distinguish between "block elements" and "inline elements"

① If you don't need br to wrap after the block, you will change it yourself .

② Except for block element tags, other tags are inline element tags, and they will not wrap themselves.

③ Other block elements and inline elements can be accommodated inside the block element tag.

3. Line break br

<br>or <br/>, both are equivalent to "\n", line break, it can also be placed in another tag

4. Space nbsp

  Equivalent to a space.
One Chinese character is approximately equal to three nbsp.

(Examples of 1, 2, 3, 4)

(Examples of 1, 2, 3, 4)

5. Bold strong or b

①<strong> Fill content</strong>, bold

②<b> Fill content</b>, bold

6. Italic i or em or cite

①<i>fill content</i>, italic
②<iem fill content</em>, italic
③<cite>fill content</cite>, italic

7. Superscript sup

^{Superscript content}

8. Subscript sub

<sub> Subscript content <sub>

9. Underline s

<s> content</s>

10. Underscore u

<u> 内容 </u>

11. Large font size big and small font size small

①<big> content&t;/big>, large font size
②<small> content&t;/small>, small font size

12.Horizontal line hr

<hr/> or <hr> is a long horizontal line

13.div tag

①Function: Used to divide the area (when there are more codes, you can divide the area with div for easy viewing)
②Usage: <div> Partition content</div>

(For example, the above example will look better)

14. Self-closing label

一、自闭合标签（只有开始符没有结束符）
1.head里的：
<meta charset="utf-8"/>

2.body里的：
水平线<hr/>
换行<br/>

二、一般标签
相对自闭合标签的是一般标签（有开始符号和结束符号，比如  <p> 段落内容 </p> ）

15. Special symbols

(5) Some list tag syntax in the body

1. Ordered list (li in ol)

① The child element of ol can only be li, not other tags (div, p, these are not good, and it is not good to put text directly).
The ol label and the li label need to be used together and cannot be used alone. The type of ol is a number by default.

②Type of ol

Type attribute value:

Attribute value	List symbol value
1	Arabic numerals: 1, 2, 3... (default)
a	Lowercase letters: a, b, c...
A	Capital letters: A, B, C...

2. Unordered list (li in ul)

① The child element of ul can only be li, not other tags (div, p, these are not good, and it is not good to put text directly).
The ul label and the li label need to be used together and cannot be used alone. The type of ul defaults to the type of hollow

circle②ul

Type attribute value:

Attribute value	List symbol value
disc	Filled circle (default)
circle	Hollow circle
square	Solid square

③Unordered lists are more commonly used than ordered lists

3. Definition list (dt and dd in dl)

①dl is the definition list, dt is the definition noun, dd is the definition description

(6) Some table label syntax in the body

1. The basic structure of the table (tr in table, td in tr)

Table is a table, tr is a row in the table, and td is a cell (the default is no border, you can add a border after learning css)

2. Table title caption

3. Table header th

4. Semantic table

Thead means head, tbody means body, and tfoot means foot.
Tfoot is rarely used, generally tfoot is used for statistics.

It only plays the role of semantic clarity, can improve readability and maintainability, and has no practical use (that is, it does not work).

<body>
    <table>
        <caption>表格标题 </caption>  <!--标题-->
        <thead> <!--表头标识-->
            <tr>
                <th>名字</th>
                <th>语文</th>
            </tr>
        </thead>
        <tbody><!--表身标识-->
            <tr>
                <td> 小红 </td>
                <td> 90 </td>
            </tr>
            <tr>
                <td> 小明 </td>
                <td> 100 </td>
            </tr>
        </tbody>
        <tfoot><!--表脚标识-->
            <tr>
                <td> 平均 </td>
                <td> 95 </td>
            </tr>
        </tfoot>       
    </table>
</body>

5. Merge rowspan

Pay attention to the
meaning of a and b in the red box : let the label td rowspan="2" span two lines

6. Combine columns

It can be colspan in th (header) or solspan in td (an ordinary cell)

(7) Some image tag syntax in the body

1. Picture <img/>

2. Path src="xxxx"

3.alt and title attributes

①alt: display the content of alt when the picture cannot be displayed

②title: place the mouse on the picture and display the content of title

4. Relative path

Example:

Answer:

<img src="../../img/haizei.png" alt=""/>

(The first time is tied with conlumn, the second time is tied with blog, and because img and blog are tied together, you can connect to img)

ps: .../Only one level up, so there are two.../

(8) Some hyperlink label syntax in the body

1. Text hyperlink and picture hyperlink a href

①Text hyperlink

(remember to type http://, it won’t work without it)

② Picture hyperlink (for example, click on the picture to jump to the registration)

2. Hyperlink opening method target

Attributes	Description
_self	Open the link in the original window (default value)
_blank	Open the link in a new window (commonly used)
_parent	Open link in parent window
_top	Open the hyperlink in the top window

3. Internal link a href

4. Anchor link (like a directory effect) id

(9) Some form tag syntax in the body (form)

1.form tag attributes

Attributes	Description
name	Form name
method	Submission method
action	Submit address
target	Open method
enctype	Encoding

The following is also more commonly used method = "post" (safety is better)

2.input tag

①Single line text box text and password box password

Are all readable and writable boxes

Attributes	Description
value	Defaults
size	length
maxlength	Maximum number of characters

②Radio

type="radio" is a single selection box, name is the name of the group, the same name is the same group, only one of the same group will be selected (automatically exclusive), value is the value of the circle

(Both name and value must be set, because this is the syntax of radio)

(Not selected by default)

(Selected by default)

③Checkbox checkbox

(Not selected by default)

(Selected by default)

④Primary button button and submit button submit

Normal button buttons are generally used to trigger events, they will be used when writing JavaScript

The submit button is generally used to submit data to the server

(Pressing the summit here will prompt whether to save the password)

⑤Reset button reset

Press the reset button, the single-line text box , password box and multi-line text box in the same form can be reset (that is, restore the default value )

---

For example, the following

is the following picture after pressing reset, that is, all text boxes in the same form are reset to default values

---

⑥ File upload file

Currently only the absolute path of the file can be obtained

⑦Multi-line text box textarea

格式：<textarea rows="行数" cols="列数">默认内容</textarea>

⑧Drop-down list (option in select)

The first option is displayed by default (you need to click that arrow to display the drop-down list)

Attributes	Description
multiple	Set the drop-down list to select multiple items, ctrl+left mouse button to select multiple items
size	Set the drop-down list to display several list items, as integers

(There is no arrow button for the following two types, and the drop-down list is displayed directly)

Example: multiple:

Example: size: (note that the minimum for chrome is 4, but ie unlimited)

option tag attributes

Attributes	Description
selected	Is it selected
value	Option value, used for JavaScript trigger events

例：selected

(10) The frame tag syntax in the body (iframe)

1. Function

Realize the embedded frame, that is, embed one or more other web pages on the current page
. For example, the following picture is embedded with Baidu and Taobao

2. Examples

iframe is an embedded tag, src is the path, width is the width, and height is the height