HTML element attributes

The main content of this note is to organize and summarize the extended reading training

html content table

• <caption>Table title</caption>

• <table><table/>Define a table

1. <th>Define the header (column)

2. <tr>Row setting

3. <td>Column settings

4. <thead>Title, <tbody>data body, <tfoot>footnote

   It is used to fix the display order and also has a distinguishing effect. It can be divided by multiple tbody
   
   

• Attribute label

1. <border="0">或<border="1"> Set border
2. <cellpadding="数字"> Cell margin (the blank part of the cell)
3. <cellspacing="数字"> Cell spacing (distance between cells)
4. <colspan="数字"> Merge several columns of cells across columns (add attributes in th or td)
5. <rowspan="数字">Merge several rows of cells across rows (add attributes in th or td)
6. <colgroup>Define column group attributes
7. <col>Define the attributes of one or more columns (colgroup can be overridden)
   
   
   
   
   ![](https://img-blog.csdnimg.cn/20201023111733625.png#pic_center
   
   
   
   
   
   
   

html content form

• <form>Define form tags (create a form)

  1. action: one of the form attributes, indicating the program that processes the output of the form on the server

  2. method: one of the form attributes, tells the browser how to send data to the server (post or get)

     Get method:

     • GET requests can be cached;
     • GET requests are kept in the browser history;
     • GET requests can be bookmarked;
     • GET requests should not be used when processing sensitive data;
     • GET request has a length limit;
     • GET requests should only be used to retrieve data;

     POST method:

     • POST requests will not be cached;
     • POST requests will not be kept in the browser history;
     • POST cannot be bookmarked;
     • POST request does not require data length;

Code:

<form action="#" method="post">      

​           <p>密码：<input type="text" name="pwd"></p>        

​           <p>            

​           <input type="submit" value="提交"/>            

​           <input type="reset" value="重填"/>       

​           </p>    

​           </form>

• label

1. type attribute: specify the type of form element, the available options are text, password, checkbox, radio, submit, reset, file, hidden, image and button, the default is text;
2. name attribute: specify the name of the form element;
3. value attribute: optional, specify the initial value of the form element;
4. checked: Specifies whether the button is selected;
5. size attribute: specify the initial width of the form element;
6. maxlength attribute: specify the maximum number of characters that can be entered in the text or password element;

• Three buttons

1. reset button: reset button, reset to the initial state;
2. Submit button: The submit button will submit to the URL pointed to by the action attribute and pass the form data;
3. button button: a common button, which needs to be used in association with events;

Code:

<form action="#"method="post"style="margin:0auto;width: 1000px;margin-top:100px;">       

<p>姓名：<input type="text" /></p>        

<p>邮箱：<input type="text" /></p>       

<p>地址：<input type="text" /></p>      

<p>性别：男<input type="radio" checked/>&nbsp;女<input type="radio"/></p>        <p>爱好：篮球<input type="checkbox" />&nbsp;羽毛球<input type="checkbox" checked/>&nbsp;足球<input type="checkbox"/></p>        

<p>今天星期：            <select name="weekday" size="1">              

 <option value="1">星期一</option>              

 <option value="2">星期二</option>              

 <option value="3" selected>星期三</option>               

<option value="4">星期四</option>               

<option value="5">星期五</option>               

<option value="6">星期六</option>               

<option value="7">星期七</option>            

</select>       

 </p>       

 <p>密码：<input type="password" /></p>        

<p>确认密码：<input type="password" /></p>                 

<p>            

<input type="submit" value="提交按钮"/>           

 <input type="reset" value="重填按钮"/>            

<input type="button" value="普通按钮"/>        

</p>    

</form>

Image, audio and video of html content

image<img>

• Audio<audio>
• video<video>

The format is <tag name src="file address" length, width and height attributes>

• <source>Tag: Connect different video files for different browsers to recognize
• <track>Label: Define the text track in the media player, such as subtitle text box, etc.

html content link

<a>Define anchors (navigate to different parts of the same page)

• <link>Define the relationship between the document and external resources (open external links)
• <nav>Define navigation links (open internal links, that is, different pages)

Structure of html content

• header element: defines the header
• Artical element: Define a log, a news or user comment is equal to an independent part that is not relevant to the context (divided by section elements)
• footer element: define the footer