2. Hyperlinks, tables, forms and element classification

(1) Hyperlinks

1. Application objects of hyperlinks: text, pictures
2. hyperlink label
3. Common properties
   

   a. href: the path of the target file
   b. target: _self (default, open the target file in its own window), _blank (open the target file in a new window)

4. Types of hyperlinks

   a. Internal links: links between files within a site, the path directly writes the relative path

   b. External link: The so-called external path is a link between sites or a link between sites. The path should be written as an absolute path
   http://www.baidu.com
   c. Empty link: The so-called empty link refers to the effect of a link , but there is no link to point to, write# at the path

   d. Anchor link: The so-called anchor link is a link between different parts within a document. The implementation of anchor link is divided into two steps

   • Step 1: Set the anchor point, use the id attribute in the start tag to set the anchor point name, such as<p id="top"></p>
   • The second step: link the anchor, add # before the anchor name when linking, such as<a href="#top">返回顶部</a>

5. Precautions:

   a. If you add a hyperlink to the picture, then under IE browser, the picture will have a border. If you don't want a border, you can write border="0" in the img tag or modify it with CSS
   b. title: when the mouse is hovered prompt text

(2) Forms

1. The basic structure of the table
   <table>
<tr>
<td></td>
...
</tr>
...
</table>

2. table properties

   a. border: border, the property value is the pixel value, the larger the pixel value, the thicker the border
   b. width: width, the property value is the pixel value or percentage, the default width is affected by the content
   c. height: height, the property value is the pixel Value, the default height is affected by the content
   d. cellspacing: cell spacing, that is, the distance between cells, the attribute value is the pixel value, the larger the value, the wider
   e. cellpadding: cell padding, that is, the distance between the content and the border , the attribute value is the pixel value, the larger the value, the wider
   f. align: Set the horizontal alignment of the table relative to the parent element, the attribute value is left, center, right

3. properties of tr

   height: line height, the property value is the pixel value
   align: the content horizontal alignment, the property value is left, center, right
   valign: the content vertical alignment, the property value is top/bottom/middle

4. properties of td
   

   width: sets the width of the column where the cell is located, the attribute value is the pixel value
   height: sets the row height of the row where the cell is located, and the attribute value is the pixel value
   align: sets the horizontal alignment of the cell content, the attribute The values ​​are left, center, and right
   valign: Sets the vertical alignment of the cell content, the property value is top/middle/bottom
   colspan: Horizontally merged cells, and the property value is the number of merged cells, that is, the Arabic value
   rowspan: vertical merged cells, the attribute value is the number of merged cells, that is, the Arabic value

5. header cell th

   th is a very special cell with bold and centered effects

6. Table title, note that the position is inside the table tag, next to the table tag, the default position of the title is the center position directly above the table

7. The basic structure of the table
   <table>
<thead>
<tr>
<td></td>
...
</tr>
...
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>

   thead: the header of the table
   tbody: the body of the table
   tfoot: the footer

   • The benefits of these three sets of labels
     1. The structure of the table can be fixed
     2. If the table is too long, each page can have the header and footer information of the table when printing

(3) Forms

1. Forms: Components used to collect user information
2. A form consists of form fields and form controls

3. Form field: form, its essence is to form a container for form elements, common attributes are action, method, target, name

   action: form information submission address
   method: form information submission method, commonly used attribute values ​​are get/post
   get: send data in the form of address bar, insecure, small amount of data
   post: safe, large amount of data
   target: set the way to open the page , the common value is _self/_blank
   name: set the name of the form container

4. form element

   Text Box: <input type="text" placeholder="提示文字"/>
   Password Box: Radio Box <input type="password" />
   : <input type="radio" name="单选框的名称" >（注意name的值要相同）
   Multi-select Box: <input type="checkbox" checked="checked"/>
   Submit Button: <input type="submit" value="按钮上的提示文字"/>
   Reset Button: <input type="reset" value="按钮上的提示文字" />
   Normal Button: <input type="button" value="提示文字" />（注意：该按钮，默认情况下没有什么效果，常和其它技术配合着使用）
   Image Field: <input type="image" src="图像的地址" />（注意：图像域的作用和提交按钮的作用相同）
   File Field: <input type="file" />
   Drop-Down Menu Text Field Form Field Set: The function is to divide form elements into different parts Form fields Episode title
   <select>
<option selected="selected" value="向服务器提交的值"></option>
....
</select>
<textarea row="行数" cols="每行所能容纳的字符的个数"></textarea>

<fieldset></fieldset>

<legend></legend>（注意该标签写在fieldset标签的开始标记的后面）

(4) Element classification: block-level elements, inline elements, inline block elements

1. block level element

   a. Exclusive line
   b. You can set the width and height, but even if the width and height are set, the element is also on an exclusive line
   c. Arrange vertically in the page
   d. You can set margin, padding
   e. Block elements can contain other block elements and Inline elements, but it should be noted that <p>tags and <h1>-<h6>tags can neither contain other block elements nor their own
   f. Common block elements are: p, h1-h6, ul, li, ol, dl, dt, dd , div, table, form

2. In-line element (inner element)

   a. Inline elements can be displayed on one line
   b. Inline elements cannot set width and height, its width and height are affected by content
   c. Partial support for margin and padding attributes
   d. Inline elements cannot contain other blocks Element
   e. Common inline elements are: a, span

3. Inline block element (inline block element): It has the characteristics of a block element and also has the characteristics of an inline element, such as a <img />label, which can set the width and height, and can also be placed in one line.

   Common inline block elements: img, input, select,textarea