Title: Observe the HTML elements of commonly used Web pages, and use the learned tags to mimic the actual application scenarios.
Make a login page with Div,form and do it as beautifully as possible.
Practice using the drop-down list selection box, the unordered table, the list of sequences, and the definition lists.
The label production and landing page code is as follows:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title></title></Head>Pikachu Park<Bodystyle= "Background-image:url (105.jpg)"><H1>Welcome to my dream.</H1><Divstyle= "width:400px;margin-left:800px"> <DivID= "header"style= "Background-color:aquamarine"><H2Align= "Center"style= "margin-bottom:0">Login</H2></Div> <DivID= "Content"style= "background-color:beige;height:200px" > <form><BR/> inUsername:<inputtype= "text"name= "User"placeholder= "Input your username"><BR/><BR/> inPassword:<inputtype=""name= "Password"placeholder= "Input your password"><BR/><BR/> in in<inputtype= "Radio"name= "Role"value= "Stu">Student<inputtype= "Radio"name= "Role"value= "Tea">Teacher<BR/><BR/> <inputtype= "checkbox"value= "true"><span>Remember Me</span> in in in in<ahref= "http://help.clouddream.net/newsitem/277741776"Target= "_blank">Login problem</a><BR/> <BR/> in in in in in in in<inputtype= "button"value= "Login"onclick= "alert (Login check)"> </form> </Div> <DivID= "Footer"style= "Background-color:aquamarine"><I>Copyright: @yubz</I></Div></Div><ahref= "https://www.baidu.com/"Target= "_blank">Search for it ~</a><ahref= "https://baike.so.com/doc/119187-125839.html"Target= "_blank"><imgsrc= "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507869214059&di= 50320e9634cb246f1de5aa08390bc662&imgtype=0&src=http%3a%2f%2fimg15.3lian.com%2f2015%2fh1%2f301%2fd%2f106.jpg "alt= "Bucunzai"></a></Body></HTML>
Operation Result:
The list design code is as follows:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Practice</title></Head><Body><Div> <Select><b>Your favorite Pokémon.</b> <option>Pikachu</option> <option>Jenny Turtle</option> <option>Little Dragon</option> <option>Meow Meow</option> </Select> <ul><b>The highest heat, Pokémon.</b> <Li>Pikachu</Li> <Li>Jenny Turtle</Li> <Li>Meow Meow</Li> </ul> <ol><b>Most popular rankings</b> <Li>Pikachu</Li> <Li>Meow Meow</Li> <Li>Jenny Turtle</Li> <Li>Little Dragon</Li> </ol> <DL> <DT>Pikachu</DT> <DD>Pikachu is a chunky, round-shaped, rodent-like Pokémon.</DD> <DT>Meow Meow</DT> <DD>One of the Rockets trio, the human language</DD> </DL></Div></Body></HTML>
Operation Result:
Web base, creating Web pages with HTML elements