<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>May 8, 2018 Overall practice html tags, forms, selectors, font styles, etc.</title>
<style type="text/css">
body {
font-family: "Microsoft Yahei";
/*css internal styles*/
}
caption {
color: cadetblue;
}
h3 { /*tag selector*/
color: green;
}
tr{
text-align: center;
}
</style>
<link rel="stylesheet" type="text/css" href="css/css external style beginner.css" />
<!--css external style href: defines the url of the connected external style sheet , which can be a relative path or an absolute path.
type: defines the type of the connected document, which needs to be specified as text/css here, indicating the css style sheet of the linked external file.
rel: locates the relationship between the current document and the linked document. It needs to be specified as a stylesheet here, indicating that the linked document is a style sheet file. -->
</head>
/li> </ol> <dl> <!--Custom list, dt represents the noun of the upper level, dd is mainly based on the interpretation of the upper level of dt, there is a little hierarchical relationship, at the bottom of the e-commerce website There are generally examples of this syntax. --> <dt>Hangzhou</dt> <dd>West Lake District</dd>
<dd>Yuhang District</dd>
<dd>Gongshu District</dd>
<dd>Binjiang District</dd>
<dd>Xiaoshan District</dd>
</dl>
<hr />
<h3>Image Tags </h3>
<img src="img/Chen Qianqian2.png" alt="Instead of displaying the document" / width="200" border="3"> <br />
<!--Normal image display, set the width, Border pixels -->
<img src="img/Chen Fu.png" title="Prompt information document" width="200" border="3" />
<!--title is displayed by hovering the mouse over the picture Hint text -->
<h3>Link tag</h3>
<a href="http://www.baidu.com" target="_blank">Baidu</a>
<a href="http:// www.taobao.com" target="_blank">Taobao</a>
<a href="http://www.sina.com"target="_blank">Sina</a> <br />
<div>Cheng</div>
<!--div is a box that separates different content-->
<div>Chen</div>
<div >Chen</div>
<div>Diao</div>
<span>I</span><span>Yes</span><span>Good</span><span>People</span>
<!--span is to separate the same line of content as needed and customize the style-->
<hr />
<h3>table tag</h3>
<table align="center" width="500" height= "200" border="1" cellspacing="0" cellpadding="0">
<caption>Family member table information</caption>
<!--Table title tag, as a table title description-->
<!- -The default parameters of the table border, cell spacing, cell content and border spacing are 0-->
<tr height="35">
<!--th represents the header, the header will be bold and centered by default-- >
<th>Name</th>
<th>Sex</th>
<th>Age</th>
<th>Origin</th>
<th>Height</th>
<th colspan="2">Weight </th>
<!--Merge across columns-->
</tr>
<tr height="35">
<!--tr represents the row, td represents the cell in the row, the table has no columns, only rows, the number of cells in a row represents the number of columns -->
<td>process</td>
<td >Male</td>
<td>28</td>
<td>Hubei</td>
<td>177</td>
<td>140</td>
<td>Merge 1</td>
</tr>
<tr height="35">
<td>陈</td>
<td>男</td>
<td>29</td>
<td>杭州</td>
<td>170</td>
<td>170</td>
<td>合并2</td>
</tr>
<tr height="35">
<td>陈</td>
<td>女</td>
<td>26</td>
<td>杭州</td>
<td>160</td>
<td>90</td>
<td rowspan="2">合并3</td>
<!--跨行合并-->
</tr>
<tr height="35">
<td>刁</td>
<td>女</td>
<td>26</td>
<td>杭州</td>
<td>150</td>
<td>100</td>
</tr>
</table>
<hr />
<h3>表单标签</h3>
<form action="" method="get">
The <!--form tag defines the form field. There are many form controls in the form field, so that all form controls can be submitted together when the form is submitted. Action is where the form field is submitted, and method is the submission method, which is generally used. Most of them are posts, get will display the user name and password information in the address bar is not safe-->
<table width="500" align="center" border="0" cellspacing="0" cellpadding="0">
<caption> Registration information fill-in page</caption>
<tr height="35">
<td>
<label for="username">username</label>
<!--label tag focuses the bound form control, for It is to bind the label to which form. After binding, in the form control that needs to get the focus, write the id name as the name of the bound form control -->
</td>
<td>
<input type=" text" name="username" id="username" value="" />
</td>
</tr>
<tr height="35">
<td>
<label for="密码">密码</label>
</td>
<td>
<input type="password" name="pswd" id="密码" value="" />
</td>
</tr>
<tr height="35">
<td>Gender</td>
<td>
<!--When selection is involved, the selected content should be regarded as a group, and a name should be set for this option group, so that multiple selections will not appear-->
<input type ="radio" name="sex" id="" value="" />male
<input type="radio" name="sex" id="" value="" />female
</td>
<tr>
<td>Birthday</td>
<td>
<select name="">
<option value="">1990</option>
<option value="">1991</option>
<option value="" selected= "selected">1992</option>
<!--Who is selected by default in the drop-down box, where to set the select attribute-->
<option value="">1993</option>
<option value="">1994</option>
<option value="">1995</option>
<option value="">1996</option>
</select>
</td>
</tr>
</tr>
<tr height="35">
<td>所在地</td>
<td>
<select name="">
<option value="">杭州</option>
<option value="">嘉兴</option>
<option value="">绍兴</option>
<option value="">湖州</option>
<option value="" selected="selected">义乌</option>
</select>
</td>
</tr>
<tr height="35">
<td>兴趣爱好</td>
<td>
<input type="checkbox" name="love" id="love" value="" />篮球
<input type="checkbox" name="love" id="love" value="" />足球
<input type="checkbox" name="love" id="love" value="" />台球
<input type="checkbox" name="love" id="love" value="" />羽毛球
<input type="checkbox" name="love" id="love" value="" />乒乓球
</td>
</tr>
<tr height="35">
<td>Upload Photo</td>
<td>
<input type="file" name="" id="" value="" />
</td>
</tr>
<tr height="35">
< td>Introduce yourself</td>
<td>
<textarea name="" rows="10" cols="30">Let's introduce...</textarea>
<!--Multi-line text box to write a lot of content, to set The number of rows and columns that can be entered in the lower text box -->
</td>
</tr>
<tr height="35">
<td></td>
<td>
<input type="submit" name=" " id="" value="submit" />
<input type="reset" name="" id="" value="reset" />
</td>
</tr>
<tr height="35">
<td></td>
<td>
<input type="image" name="" id="" value="" src="img/免费注册.png" />
</td>
</tr>
</table>
</form>
<h3>四大名著</h3>
<h4>1. Water Margin</h4>
<p class="cfy">Water Margin is one of the four famous ancient Chinese novels, which tells the story of the peasant uprising</p>
<h4 class="cfy">2 , Romance of the Three Kingdoms</h4>
<h4>3, Journey to the West</h4>
<h4>4, A Dream of Red Mansions</h4>
<a href="#Top">Back to top</a>
<!--This is the anchor Click the link, click here to return to the top, set the anchor id here, and fill in the id name in the tag that needs to be returned to the top -->
</body>
</html>