HTML and CSS

Today's talk of HTML and CSS

HTML-speaking tables and forms

<table></table> Forms

<tr></tr> Line

<td><td/> columns (one row and two columns)

Text input

text box <input type= "TXT" name= "" id= "" value= ""

Password box <input type= "password" name= "" id= "" Value ""/>

Text field <textarea name= "" id= "" cols "" (Number of characters) rows= "" (a few lines high) ></textarea>

Hidden fields <input type= "hidden" name= "" id= "" value= ""/>

Button

Submit button <input type= "Submit" Name= "id=" "value=" "/>

Reset button <input type= "reset" name= "" id= "" value= ""/>

Select input

radio button Group <input type= "Radio" name= "checked=" checked "value=" "/> checked (set default options)

check box <input type= "checkbox" Name= "value=" "/>

File upload <input type= "file" name= "id=" "/>

<lable></lable>

Drop-down list box

<select name= "" Size= "" >

<option value= "value" > Content 1<option>

<option value= "Value" selected= "selected" > Content 2<option>-selected (set as Default)

<option value= "value" > Content 3<option>

Exercises:

For:

<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Untitled Document </title>

<body>
<form>
Nickname: <input type= "text" name= "" id= ""/><br><br>
Password: <input type= "password" name= "id=" "/><br><br>
Email: <input type= "text" name= "" id= ""/> <select id= "" Name= "" >
<option value= "1" >qq.com</option>
<option value= "2" >123.com</option>
<option value= "3" >xxx.com</option>
</select><br><br>
Sex:<label> male </label><input type= "Radio" id= "Name=" DD ">
<label> female </label><input type= "Radio" id= "" Name= "DD" ><br><br>
Interest:<label> travel </label><input type= "checkbox" id= "Name=" ">
<label> Photography </label><input type= "checkbox" id= "Name=" ">
<label> Sports </label><input type= "checkbox" id= "Name=" "><br><br>
<table>
<tr>
<td> Personal Introduction: <br><br><textarea name= "" id= "" cols= "" rows= "5" ></textarea></td>
</tr>
</table>
<input type= "Submit" name== "id=" "value=" register "/><br><br>
Upload a personal photo:<br><br>
<input type= "File" name= "id=" ">

CSS font styles and text styles

Font style: font-family (font type)

font-size (font size )

Font-weight (font weight)

Font-style (font tilt)

Color (colors)

Text styles: text-decoration (underline, strikethrough, top dash)

Text-indent (indent in first line of paragraph)

Text-align (Text horizontal alignment)

Line-height (Row height)

Underline (underline)

Line-through (delete below)

Overline (top dash)

Exercises:

For:

<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Untitled Document </title>
<style type= "Text/css" >
#aaa {Text-decoration:line-through;}
</style>

<body>

<br> Steve Jobs ' tribute to the classic edition collection set (when the national exclusive
<p> Buying Price:￥116.10</p>
<p id= "AAA" > Pricing: ￥198.00 </p>

<div>
<span> Add to Cart </span>
</div>
</body>

HTML and CSS