HTML ruggedized 4--Hypertext 2

HTML list

There are three main types of HTML list tags: sequential, unordered, and definition lists. Now let's learn one by one.

(1). Ordered list

The sequence list starts with the < ol> label. Each list item starts with the < li> label. Within a list item, you can use paragraphs, line breaks, pictures, links, and other lists, and so on.

<ol><li>balabala</li></ol>

This is the smallest element of a relatively simple ordered list, with the default ordering method starting with a number

In the sequence table we can also define other sorting methods, above is the default number sorting, below we add the alphabetical sort and the Roman numeral sort here just need to added the type attribute, "a" means to sort in lowercase letters; " A "is to use uppercase letters to sort;" I "is sorted by lowercase roman numerals;" I "is sorted by uppercase Roman numerals. You can also add the Start property and decide where to start. Here's an example:

(2). Unordered list
You're done. There is a list of the sequences, which are listed below. Unordered lists are still very common in HTML. The unordered list starts with the < ul> tag. Each list item starts with < Li> (ordered unordered is the same). Unordered lists are sorted by adding various small symbols to each list item which is divided into disc (default) solid black dots; Circle Small Circle, Square point, and the properties of the ordered list are the same, and then I'll move on.
(3). List of definitions
Definition lists are often used to define and interpret terms. The definition list starts with < dl>, and the term starts with < dt>, explaining the text indentation displayed by < dd>,< dd>....</dd>. Here's a simple operation.
2 HTML blocks
First we need to know that HTML elements are defined as block-level elements or inline elements. So what is a block-level element and what is an inline element:
Block-level element attribute: Always exclusive one row, the beginning of another row, and the subsequent elements must be displayed on a separate line; Width (width), height, padding (padding), and margin (margin) are controlled, like used < H1>, < P>, < Ul>, < table> label.
inline element (inline) attributes: The same line as the adjacent inline element, the width (width), height (height), the Top/bottom (padding-top/padding-bottom) of the padding, and the top/bottom of the margin ( Margin-top/margin-bottom) can not be changed, that is, the size of the text or picture inside, previously used < B>, < td> < A>, < img> label.
Here we introduce two labels < div> tags and < span> tags.
< div> is used to define partitions or sections (division/section) in a document without a specific meaning. It is a container that can be used to combine other HTML elements
< span> is used to combine inline elements within a document and does not have a specific meaning
Let's take a look at the usage of the < div> tag.
2.3 HTML Layout
Most web layouts are designed to work with CSS, and CSS is used to position elements or to create a background and color-rich appearance for the page. Since we are dealing with the basics of HTML here, we use our existing knowledge to lay out the layout.
Page layouts can be implemented by < table> elements, or by < div> elements. Let's start with a simple < table> layout page We learned the table in the previous chapter, so let's move on to a section of a Web page with a table with no borders (add background color and layout text content)
DL> <dt>Listof book</dt> <dd> <ol> <li>hadoop</li>              <li>linux</li> <li>c</li> </ol> </dd> </DL> </td> <td style= "background-color:forestgreen;height:500px;width:700px;" > 
I 'll leads you to travel in the season of Linux</td> </tr> <tr> <td colspan= "2" style= "Background-color:powderblue;text-align:center;h eight:100px ">Good good study day</td> </tr></table></body>
As you can see, this web page is just a simple form that uses the tags we've learned, and the orange one adds to the list of nested lists of the definitions we just learned.
Here we will use the < div> elements for layout (as far as possible to achieve the above page effect): The general structure of the DIV element is like (thinking is also used in the idea of table):
Here is the concrete implementation content:
Div#container{width:1000px}Div#header {background-color:royalblue; height:100px;text-align:center;font-size:20px}Div#Sidebar{background-color:darkorange;height:400px;width:300px;float:left;}Div#mainbody {background-color:forestgreen;height:400px;width:700px;float:left;}Div#footer {background-color:powderblue;height:100px;clear:both;text-align:center;}</style>DL> <dt>Listof book</dt> <dd> <ol> <li>hadoop</li> <li>linux</li> <li>c</li> </ol> < /dd> </DL> </div> <div id= "mainbody" > 4 HTML form
Learning form first of all, we need to know what the form label is, the form label is used for the data submitted in the Web page, such as our registration page, in the message board, comments, etc. can fill in the data, submit processing place all need form label, form form label has input box, single, multiple selection, Select drop-down menu and Jump menu, submit button and other label contents. Let's try it out in a hurry.
We are directly in the above code to modify, the first thing we tried, of course, is to collect different types of user input, here we only involve text and password only need to involve a input type tag can be completed
<form>Username:<input type= "text" name= "username" ><br/>Password:<input type= "password" name= "password" ></form>
Here is the page:
When you type, you will find that username is visible and password is replaced by dots, which is the difference between the two types.
Here we add two more boxes, one is multi-choice, one is a radio. A radio box is used when a user chooses one of several given choices.
Radio Box:
<form><input type= "Radio" name= "Sex" value= "male"/> male<br/><input type= "Radio" name= "Sex" value= "female"/> female</form>
Multi Box:
<form><input type= "checkbox" name= "married"/>married<br/><input type= "checkbox" Name = "A Job"/> hasa job<br/><input type= "checkbox" Name= "Chinese"/> Chinese</ Form>
HTML ruggedized 4--Hypertext 2