调试浏览器：谷歌或火狐
HTML基本结构：
<!--H5声明-->
<!DOCTYPE html>
<!--最外层-->
<html>
<!--头部-->
<head>
<!--指定编码方式-->
<meta http-equiv='content-type' content="text/html; charset=utf-8">
<!--标题-->
<title>我是你爸爸</title>
</head>
<!--主体-->
<body>
<!--块元素-->
<div>块元素</div>
<div>
<!-- 标题 -->
<h1>你好</h1>
<h2>你好</h2>
<H3>你好</H3>
<h4>你好</h4>
<h5>你好</h5>
<h6>你好</h6>
</div>
<div>
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
</div>
</body>
</html>
示例1
<!--H5声明-->
<!DOCTYPE html>
<!--最外层-->
<html>
<!--头部-->
<head>
<!--指定编码方式-->
<meta http-equiv='content-type' content="text/html; charset=utf-8">
<!--标题-->
<title>主页</title>
</head>
<!--主体-->
<body background="1.jpg">
<!--块元素-->
<div>
<!-- 行内元素，元素在一行内添加，不单独占用一行，不填满元素不换行，包括以下内容 -->
你好，
<b>B标签，用于加粗。</b>
<strong>strong标签，也是用于加粗。</strong>
<i>斜体标签i </i>
<em>斜体标签em </em>
<u> u下划线标签</u>
<center>居中</center>
<p>这是段落1，</br>这是段落二</p>
<P>空 格 折 叠 原则</P>
<del>删除线</del>
<p>
你好，
p标签，
一般格式显示。
</p>
<pre>
你好，
pre标签，
按原格式显示。
</pre>
<span style="color:red;">span标签用于搭配css</span>
</br>
<img src="2.gif" alt="百度logo" />
<a href="https:www.baidu.com"><center>百度一下</center></a>
<a href="E:\文档\Java学习\前端\测试.html"><center>内部页面</center></a>
<a href="测试.html"><center>内部页面</center></a>
<a href="mailto:wangwu@139.com"><center>王五邮箱</center></a>
</div>
<div>
<a href="#Internet">互联网</a><br/>
<a href="#HTML"> HTML简介</a><br/>
<a href="#Consistency">多样化和统一性</a><br/>
<a name="Internet">互联网</a><br/>
<p>互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过TCP/IP传输协议绑定在一起。</p>
<a name="HTML">HTML简介</a><br/>
<p>是web用来创建和识别文档的标准语言。</p>
<a name="Consistency">多样化和统一性</a><br/>
<p>万事万物都离不开多样性和统一性</p>
</div>
<div><!-- 列表 -->
<ul><!-- 无序列表ul -->
<li>苹果</li>
<li>栗子</li>
<li>香蕉</li>
</ul>
<span>把大象放进冰箱里</span>
<ol><!-- 有序列表ol -->
<li>打开冰箱门</li>
<li>把大象放进去</li>
<li>关上冰箱门</li>
</ol>
</div>
</body>
</html>
示例：表格
<!--H5声明-->
<!DOCTYPE html>
<!--最外层-->
<html>
<!--头部-->
<head>
<!--指定编码方式-->
<meta http-equiv='content-type' content="text/html; charset=utf-8">
<!--标题-->
<title>主页</title>
</head>
<!--主体-->
<body background="1.jpg">
<div>
<!--表格-->
<table border="1" align="center">
<!--表头-->
<caption>信息统计</caption>
<!--行-->
<!--align 水平对齐方式：left 默认、center、right -->
<!--valign垂直对齐方式：middle默认、top、 bottom-->
<tr align="center">
<!--标题单元格-->
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
<tr>
<!--普通单元格-->
<td>Tom</td>
<td align="center" valign="top">M</td>
<td>99</td>
</tr>
<tr>
<td>John</td>
<td>F</td>
<td>89</td>
</tr>
</table>
</div>
</br>
<div>
<!--表格-->
<table border="2" align="center">
<!--表头-->
<caption>学年成绩统计</caption>
<!--标题单元格-->
<th colspan="3">第一学期</th>
<th colspan="2">第二学期</th>
<tr>
<td>数学</td>
<td>科学</td>
<td>英语</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr>
<td>99</td>
<td>99</td>
<td>98</td>
<td>96</td>
<td>96</td>
</tr>
</table>
</div>
</br>
<div>
<!--表格 cellspacing栅距 cellpadding 格子大小-->
<table border="2" align="center" cellspacing="1" cellpadding="5" bordercolor="#698B69">
<!--表头-->
<caption>产品销量记录</caption>
<!--标题单元格-->
<th colspan="2">时间\品类</th>
<th>螺母</th>
<th>螺栓</th>
<th>锤子</th>
<tr>
<td rowspan="3">第一季度</td>
<td>一月</td>
<td>99</td>
<td>99</td>
<td>96</td>
</tr>
<tr>
<td>二月</td>
<td>99</td>
<td>98</td>
<td>90</td>
</tr>
<tr>
<td>三月</td>
<td>99</td>
<td>88</td>
<td>96</td>
</tr>
<tr>
<td rowspan="3">第二季度</td>
<td>四月</td>
<td>99</td>
<td>99</td>
<td>96</td>
</tr>
<tr>
<td>五月</td>
<td>99</td>
<td>98</td>
<td>90</td>
</tr>
<tr>
<td>六月</td>
<td>99</td>
<td>88</td>
<td>96</td>
</tr>
</table>
</div>
</body>
</html>Form
表单控件
action：指定服务器处理程序
method：指定处理方法
<!--H5声明-->
<!DOCTYPE html>
<!--最外层-->
<html>
<!--头部-->
<head>
<!--指定编码方式-->
<meta http-equiv='content-type' content="text/html; charset=utf-8">
<!--标题-->
<title>主页</title>
</head>
<!--主体-->
<body background="iamge/back.jpg">
<!-- style="margin:0 40%" -->
<div align="center">
<form action="https://www.baidu.com/" method="get">
<!-- placeholder提示词 -->
<input type="text" name="name" placeholder="账号"/>
<br/>
<input type="password" name="password" placeholder="密码"/>
<br/>
<!-- name一致时单选框，不一致是多选框 -->
<input type="radio" name="sex" value="0" id="sexM"/> <label for="sexM">男</label>
<input type="radio" name="sex" value="1" id="sexF"/> <label for="sexF">女</label>
<br/>
<input type="checkbox" name="interest" value="0"/>篮球
<input type="checkbox" name="interest" value="1"/>足球
<input type="checkbox" name="interest" value="2"/>网球
<input type="checkbox" name="interest" value="3"/>乒乓球
<br/>
<select name="address">
<option value="0">山东</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="4">重庆</option>
</select>
<br/>
<textarea name="remark" rows="3" cols="5"></textarea>
<br/>
<input type="file" value="file"/>
<br/>
<!--此处用于传送id关键字，用户看不到-->
<input type="hidden" name="id" value="1"/>
<br/>
<input type="reset" value="重置"/>
<input type="submit" value="提交"/>
</form>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
