Common module writing

1. Title content moduleDuring an interview, I was also asked how to write the layout if such a layout needs to be done. I didn't think too much at the time. Now I found that I was learning about tag semantics. Analysis:This module is actually completed with the title + content. You can use H2 + ul> Li for layout. I wrote this in the past: Effect:  Analysis:In this way, there is no problem in the display of results, but in terms of semantics, it is unreasonable to include more in H2. So now I will write this: in this way, the title and more are separated. Of course, in the above writing method, if there is no special requirement, the DIV outside the list can be omitted. The final result is as follows: 

<Div> <H2> title </H2> <a href = ""> more </a> </div> <ul> <li> list-item1 </LI> <LI> list-item2 </LI> <li> list-item3 </LI> <li> list-item4 </LI> </ul>

  2. Form At first, I thought I could write it like this:

<Form action = ""> account <input type = "text" id = "username"> <br/> password <input type = "text" id = "password"> <br/> <input type = "checkbox" Checked = "checked"> remember my choices <br/> <button> log on </button> </form>

In fact, writing in this way is fine, but style processing is troublesome. At the same time, there are many labels in the form to control the display of elements. Complete Form:

<Form action = ""> <fieldset> <legend> logon form </legend> <p> <label for = "username"> account </label> <input type =" text "id =" username "> </P> <p> <label for =" password "> password </label> <input type =" text "id =" password"> </P> <p> <input type = "checkbox" id = "checkbox" Checked = "checked"> <label for = "checkbox"> remember my choices </label> </P> <p> <button> logon </button> </P> </fieldset> </form>

Of course, to achieve the design results, we generally set the field border to none, and also hide the legend. This ensures that the design style is used when CSS is available, and the display effect is still good after CSS is removed. Note that the label element can be associated with the corresponding form Element Through. Regardless of the layout, as long as the for is set, Lebel is associated with the corresponding element. 3. Table

Table	Description
<Table>	Definition table
<Caption>	Define the table title.
<TH>	Define the table header.
<Tr>	Defines the rows of a table.
<TD>	Define table units.
<Thead>	Define the table header.
<Tbody>	Define the table body.
<Tfoot>	Define the table footer.
<Col>	Defines the attributes used for table columns.
<Colgroup>	Defines the group of table columns.

See the table above for a reasonable layout. Example: http://blog.snowinmay.net/ouwork/demopage/demopage.html 4. ListTo avoid using UL and ol lists in disorder. Ul is an unordered list, and OL is an ordered list. In many cases, engineers use ul directly regardless of 3721. But is it more convenient if ol is used for digital layout? The list can be used obviously in 4.1, but it is not used in list 4.2 where ol can be used. The ul HTML element is intended. Please do not use it in disorder. High-quality code is structured, styles, and behaviors separated under the guidance of web standards. At the same time, code can be simplified, reused, and ordered.