Html and css study notes (2)

1表

1.1table tr td

1.2表properties

width Border Align="center" Cellspacing the distance between the cell border and the cell border Cellpadding The distance between the cell content and the cell border *Three parameters are 0 border cellspacing cellpadding are generally 0, the default cellspacing cellpadding has a value

1.3 header tag: center display, text bold

<th> 

1.4 table title:

catption, must follow After the table tag.

1.5

<thead></thead> Defines the header of the form, which usually contains the header and navigation information of the web page. <tbody></tbody> Defines the body of the form

1.6 merged cells

Inter-row merge: rowspan cross-column merge: colspan

@table summary:

表 provides definition in html Tabular data method The table consists of rows and cells The table has no column elements. The number of columns depends on the number of cells in the row

2. Form

2.1 defines

in html, a complete form includes: form controls (also called form elements) ), prompt information, form field (a container that holds all the form controls and prompt information)

2.3input control

radio If it is a group, you must give them the same name, so you can choose one more Up 3 Label tag: used to bind a form element, when the label tag is clicked, the bound form element will get the input focus 4 text field textarea multi-line text input box <textarea cols="Number of characters in each line" rows="Number of lines displayed">Text content</textarea> The width and height of textarea are generally controlled by css, rows and cols properties. 5 drop down menu <select> <option>Option 1</option> <option>Option 2</option> <option>...</option> </select> 6 form fields <form>

Check documents W3c Mdn: https://developer.mozilla.org/zh-CN

CSS 1css writing position Internal style sheet The embedded method is to write the CSS code in the head header tag of the HTML document, and define it with the style tag. The basic syntax is as follows:

```html <head> <style type="text/CSS"> Selector {Attribute 1: attribute value 1; attribute 2: attribute value 2; attribute 3: attribute value 3;} </style> </head> ``` Note: In the grammar, the style tag is usually located after the title tag in the head tag, or it can be placed anywhere in the HTML document.

type="text/CSS" can be omitted in html5, and the writing is also in line with the specification, so this place can be written or omitted. Inline style <head> <style type="text/CSS"> Selector {Attribute 1: attribute value 1; attribute 2: attribute value 2; attribute 3: attribute value 3;} </style> </head> Type="text/CSS" can be omitted in html5, and the writing is also in line with the specification, so this place can be written or omitted. External style sheet <head> <link href="CSS file path" rel="stylesheet" /> </head> Note: link is a single tag!!!

In this syntax, the link tag needs to be placed in the head header tag, and the three attributes of the link tag must be specified, as follows:

``` Href: defines the URL of the linked external style sheet file, which can be a relative path or an absolute path. Type: defines the type of the linked document, which needs to be specified as "text/CSS", indicating that the linked external file is a CSS style sheet. Rel: Define the relationship between the current document and the linked document. Here you need to specify "stylesheet" to indicate that the

2css selector is linked. Tag selector Class selector The class selector uses "." (English dot) for identification, followed by the class name, and its basic syntax is as follows:

``` Class name {attribute 1: attribute value 1; attribute 2: attribute value 2; attribute 3: attribute value 3; } ```

``` When the tag is called, use class=“class name”. Note: 1. Long names or phrases can use the horizontal line to name the selector. 2. It is not recommended to use the "_" underscore to name the CSS selector. Multi-class name selector Specify multiple class names for the tag to achieve more choices. Example: <div class="pink fontWeight font20">Arthur</div> Id selector The id selector uses "#" for identification, followed by the id name, and its basic syntax is as follows:

``` #id名{Attribute 1: attribute value 1; attribute 2: attribute value 2; attribute 3: attribute value 3; } The d selector and the class selector differ from the

W3C standard. In the same page, id objects with the same name are not allowed, but classes with the same name are allowed. Wildcard selector The wildcard selector is represented by the "*" sign, which is the most widely used of all selectors and matches all the elements in the page. The basic syntax is as follows: * { Attribute 1: attribute value 1; attribute 2: attribute value 2; attribute 3: attribute value 3; } 3css style attribute Font related style Font-size font size The attribute is used to set the font size. The value of this attribute can be in relative length units or in absolute length units. Among them, the relative length unit is more commonly used, it is recommended to use the pixel unit px, and the absolute length unit is used less. details as follows: