1.html基本知识
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页制作</title>
</head>
<!--设置背景颜色-->
<body style="background-color:yellow;">
<!--设置标题居中 （align排列意思）-->
<h1 style="text-align:center;">感谢你曾来过</h1>
<!--设置字体颜色-->
<h2 style="background-color:red;">我的第一个标题</h2>
<p style="background-color:green;"> 我的第一个段落</p>
<!--font-family(字体），color（颜色）和font-size（字体大小） br是转行意思-->
<h3 style ="font-family:verdana;">我的第二个标题</h3>
<p2 style ="font-family:arial;color:red;font-size:20px;">我的第二个段落</p2><br>
<!--br是转行意思-->
<a href="https://blog.csdn.net/tjfsuxyy/article/details/80801888">这是一个链接</a><br>
<!--插入图像{src（source）源属性,alt 属性用来为图像定义一串预备的可替换的文本,br是转行意思}-->
<img src="D:\tjfsu.jpg" alt="Error of loading" width="400" height="600"/><br>
<!--<th>粗体居中字体,表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。-->
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<!--无序列表-->
<h4>无序列表</h4>
<ul>
<li>贵州</li>
<li>天津</li>
<li>上海</li>
</ul>
<!--有序列表-->
<ol>
<li>法国</li>
<li>英国</li>
<li>德国</li>
</ol>
<ol start="50">
<li>coffee</li>
<li>tea</li>
<li>millk</li>
</ol>
<!--div标签-->
<div style="color:#0000FF">
<h5>这是一个在div元素中的标题</h5>
<p3>这是一个在div元素中的文本</p3>
</div>
<!--span标签-->
<p4>我<span style="color:red">喜欢</span>你</p4>
</body>
</html>
2.div和table布局
2.1 div布局代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页制作</title>
</head>
<body>
<div id="container" style="width:600px">
<div id="header" style="background-color:red;">
<!--margin-bottom设置h1下外边距-->
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
<!--float：left元素向左浮动-->
<div id="menu" style="background-color:blue;height:200px;width:150px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:orange;height:200px;width:450px;float:left;">
内容在这里</div>
<!--clear：both 图像的左侧和右侧均不允许出现浮动元素-->
<div id="footer" style="background-color:yellow;clear:both;text-align:center;">
tjfsuxyy</div>
</div>
</body>
</html>div布局情况
2.2 table布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页制作</title>
</head>
<body>
<table width="600" border="0">
<tr>
<!--colspan 属性规定单元格可横跨的列数。-->
<td colspan="2" style="background-color:red">
<h1>主要的网页标题</h1>
</td>
</tr>
<tr>
<!--vertical-align用来设置垂直对齐方式-->
<td style="background-color:blue;width:150px;vertical-align:top;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:orange;height:200px;width:450px;vertical-align:top;">
内容在这里</td>
</tr>
<tr>
<td colspan="2" style="background-color:yellow;text-align:center;">
tjfuxyy</td>
</tr>
</table>
</body>
</html>table布局情况
3.表单
3.1创建密码字段代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页制作</title>
</head>
<body>
<!--必需的 action 属性规定当提交表单时，向何处发送表单数据.-->
<form action="">
Username: <input type="text" name="goldenstand"><br>
Password: <input type="password" name="password01"><br>
<input type ="submit" value ="submit">
</form>
</body>
</html>创建密码字段情况
3.2单选按钮代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页制作</title>
</head>
<body>
<form >
<!--<input type="radio"> 标签定义了表单单选框选项-->
<input type="radio" name="you" value="喜欢">喜欢<br>
<input type="radio" name="you" value="不喜欢">不喜欢
</form>
</body>
</html>单选按钮情况
3.3 复选框代码
<DOCTYPE html>
<html>
<head>
<meta charaset="utf-8">
<title>网页制作</title>
</head>
<body>
<form action="">
<input type="checkbox"> name="tjfsuxyy" value="感谢你曾来过">感谢你曾来过<br>
<input type="checkbox"> name="tjfsuxyy" value="再见!">再见!<br>
<input type="submit" value="提交”>
</form>
</body>
</html>复选框情况
3.4简单下拉列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页制作</title>
</head>
<body>
<form action="">
<!--select 元素可创建单选或多选菜单。<select&> 元素中的 <option> 标签用于定义列表中的可用选项。-->
<select name="area">
<option value="贵州">贵州</option>
<option value="河南">河南</option>
<option value="天津">天津</option>
<option value="广东">广东</option>
</select>
</form>
</body>
</html>简单下拉列表情况
3.5预选下拉列表代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页制作</title>
</head>
<body>
<form action="">
<select name="area">
<option value="贵州">贵州</option>
<option value="河南">河南</option>
<option value="天津" selected>天津</option>
<option value="广东">广东</option>
</select>
</form>
</body>
</html>预选下拉列表情况（列表默认选天津）
