第九页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
文档主题
</body>
</html>
第十二页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html; charset=UTF-8">
<title>事件</title>
</head>
<body>
输入框文本:<input type="text" id="source" /><br />
<button onclick="document.getElementById('target').value=document.getElementById('source').value;">单击将复制文本到目标框</button><br />
目标文本框:<input type="text" id="target" /><br />
</body>
</html>
第十六页
<!DOCTYPE Html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strivt.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8" />
<title>无语义标签</title>
<style type="text/css">
.dnf {
color: red;
}
</style>
</head>
<body>
<div>牛顿三大定律
<div>
<span class="dnf"><dfn>牛顿第一运动定律</dfn></span>:一切物体总保持匀速直线运动状态或静止状态,除非作用在它上面的力迫使它改变这种状态。</div>
<div>
<span class="dnf"><dfn>牛顿第二运动定律</dfn></span>:物体加速度的大小跟受到的作用力成正比,跟他的质量成反比,加速度的方向跟作用力的方向相同。</div>
</div>
<div>
<span class="dnf"><dfn>牛顿第三运动定律</dfn></span>:两个物体之间的作用力和反作用力总是大小相同,方向相反,作用在同一条直线上</div>
</div>
</div>
</body>
</html>
第十七页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html">
<title>DIV+CSS布局</title>
<style>
#header {
background-color: blue;
color: white;
text-align: center;
padding: 5px;
}
#nav {
line-height: 30px;
background-color: yellow;
height: 300px;
width: 100px;
float: left;
padding: 5px;
}
#section {
background-color: pink;
width: 1390px;
height: 100px;
float: left;
padding: 10px;
}
#footer {
background-color: blue;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
</style>
</head>
<body>
<div id="header">
<h1>首页</h1>
</div>
<div id="nav">HTML<br />CSS<br />JavaScript<br /></div>
<div id="section">
<h2>HTML</h2>
<p>HTML,超文本标记语言(HyperText MArkup Language,简称HTML),是为网页创建和其他可在网页浏览器中看到的信息设计的一种标记语言。</p>
<p>人们可以使用HTML来建立自己的WEB站点,HTML文档运行在咯浏览器上,由浏览器来解析。</p>
</div>
<div id="footer">Auyhor:王五 E-mail:someone@example.com</div>
</body>
</html>
第十九页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<h1>Web前端开发</h1>
<h2>HTML基础</h2>
<h3>HTML元素</h3>
<h4>HTML的主体元素</h4>
<h5>HTML的标题元素</h5>
<h6>HTML属性</h6>
<hr />
<h2>CCS基础</h2>
<hr />
<h2>JavaScript基础</h2>
</body>
</html>
第二十页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>兄弟,你真是经天纬地之才,气吞山河之志,上知天文下至地理,通晓古今,学贯中西,超凡脱俗之人!文能提笔安天下,武能上马定乾坤,美貌与智慧并存,英雄和侠义的化身,玉树临风胜临安,一朵梨花压海棠,人见人爱,车见车载</p>
<p>
燕雀 安知
鸿鹄之 志
哉
</p>
<p>以上内容纯属编造<br/>若有雷同,纯属巧合</p>
</body>
</html>
第二十一页
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<!--注释-->
</body>
</html>
第二十三页
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>格式化</title>
</head>
<body>
<h1>普通文本格式化</h1>
粗体文本:<b>网页</b> 是什么?<br />
大号字<big>网页</big>是什么?<br />
着重文本<em>网页</em>是什么?<br />
斜体字<i>网页</i>是什么?<br />
小号字<small>网页</small>是什么?<br />
加重语气<strong>网页</strong>是什么?<br />
下标字<sub>网页</sub>是什么?<br />
上标字<sup>网页</sup>是什么?<br />
插入字<ins>网页</ins>是什么?<br />
删除字<del>网页</del>是什么?<br />
<h1>计算机输出格式化文本</h1>
普通文本:<p>
public class HTMlUtils {
private static final int VERSION = 5.0;
}
</p>
计算机代码文本:<br />
<code>
public class HTMlUtils {
private static final int VERSION = 5.0;
}
</code><br />
键盘文本:<br />
<kbd>
public class HTMlUtils {
private static final int VERSION = 5.0;
}
</kbd><br />
计算机代码样本:<br />
<samp>
public class HTMlUtils {
private static final int VERSION = 5.0;
}
</samp><br />
打字机样式文本:<br />
<tt>
public class HTMlUtils {
private static final int VERSION = 5.0;
}
</tt><br />
变量:<var>int x = 0;</var><br />
预格式文本:<pre>
燕雀 安知0
鸿鹄之 志
哉
</pre><br />
</body>
</html>
第二十五页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html; charset=UTF-8">
<title>格式化</title>
</head>
<body>
<h1>引用,术语格式化</h1>
缩写:<abbr title="abbreviation">abbr</abbr><br />
首字母缩写:<acronym title="贾晓晨">HTML</acronym><br />
地址:<address>北京市东城区王府井大街10号</address><br />
文字方向从左往右:<bdo dir="ltr">北京欢迎你,welcome to beijing</bdo><br />
文字方向从右往左:<bdo dir="rtl">北京欢迎你,welcome to beijing</bdo><br />
长引用:<blockquote>To be or not to be.that is a question</blockquote><br />
短引用:<q>莎士比亚</q>一个人,诠释了整个世界<br />
引用:<cite>北京欢迎你</cite>是北京奥运会宣传曲<br />
定义:<dfn>HTML</dfn>是一种标记语言<br />
</body>
</html>
第二十六页
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>图片</title>
</head>
<body>
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png" alt="Baidu Logo" />
</body>
</html>
第二十七页
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png"
alt="Baidu Logo" width="117"height="38" /><br />
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png"
alt="Baidu Logo" width="234" height="76" /><br />
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png"
alt="Baidu Logo" width="351" height="114" /><br />
</body>
</html>
第二十八页
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>超链接————文本链接</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a><br>
<a href="index.html">本站首页</a>
</body>
</html>
第二十九页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html; charset=UTF-8">
<title>超链接——描点链接</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body class="main">
<h1 id="main">首页</h1>
<a href="#html_base">跳转到HTML基础</a><br>
<a href="#css_base">跳转到CSS基础</a><br>
<a href="#js_base">跳转到JavaScript基础</a><br>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h1 id="html_base">HTML基础</h1>
<a href="#main">回到顶部</a><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h1 id="css_base">CSS基础</h1>
<a href="#main">回到顶部</a><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h1 id="js_base">JavaScript基础</h1>
<a href="#main">回到顶部</a><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
第三十页
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>超链接————图像链接</title>
</head>
<body>
<a href="http://www.baidu.com"><img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png" alt="Baidu Logo"/></a>
</body>
</html>
第三十二页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html; charset=UTF-8">
<title>超链接————图片热区链接</title>
</head>
<body>
<map name="image_link">
<area shape="circle" coords="50,50,30" href=""alt=""/>
<area shape="rect" coords="90,20,150,80" href="" alt="" />
<area shape="poly" coords="200,30,300,10,280,70,260,100,220,50" href="" alt="" />
</map>
<img usemap="#image_link" src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png" alt="Baidu Logo" width="351" height="114"/>
</body>
</html>
第三十三页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html; charset=UTF-8">
<title>超链接————E-mail链接</title>
</head>
<body>
<a href="mailto:244048880@qq.com">联系我们</a>
</body>
</html>
第三十四页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html; charset=UTF-8">
<title>超链接————Javascript链接</title>
</head>
<body>
<a href="javascript:alert('Hello World');">点击弹窗</a>
<a href="">这是一个空链接</a><br/>
<a href="#">这是一个空链接</a><br/>
</body>
</html>
第三十五页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html; charset=UTF-8">
<title>无序列表</title>
</head>
<body>
<style type="text/css">
.text1 {
color: #0000FF;
}
.text2 {
color: #FF0000;
}
.text3 {
color: #FFC0CB;
}
.text4 {
color: #FFFF00;
}
</style>
<ul type="circle" class="text1">
<li>北京</li>
<li>上海</li>
<li>重庆</li>
</ul>
<ul type="square" class="text2">
<li>北京</li>
<li>上海</li>
<li>重庆</li>
</ul>
<ul type="disc" class="text3">
<li>北京</li>
<li>上海</li>
<li>重庆</li>
</ul>
<ul type="none" class="text4">
<li>北京</li>
<li>上海</li>
<li>重庆</li>
</ul>
</body>
</html>
第三十六页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<ol type="A">
<li>老大王器</li>
<li>老二王宇</li>
<li>老三王轩</li>
<li>老四王昂</li>
</ol>
<ol type="I">
<li>老大王器</li>
<li>老二王宇</li>
<li>老三王轩</li>
<li>老四王昂</li>
</ol>
<ol type="1" start="1">
<li>老大王器</li>
<li>老二王宇</li>
<li>老三王轩</li>
<li>老四王昂</li>
</ol>
</body>
</html>
第三十七页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html; charset=UTF-8">
<title>定义列表</title>
</head>
<body>
<dl>
<dt>电影</dt>
<a href="https://list.iqiyi.com/www/1/1-------------11-1-1-iqiyi--.html"><dd>国产电影</dd></a>
<a href="https://list.iqiyi.com/www/1/4-------------11-1-1-iqiyi--.html"><dd>日韩电影</dd></a>
<a href="https://list.iqiyi.com/www/1/2-------------11-1-1-iqiyi--.html"><dd>欧美电影</dd></a>
<dd>电视剧</dd>
<dd>国产电视剧</dd>
<dd>日韩电视剧</dd>
<dd>欧美电视剧</dd>
<dd>综艺</dd>
<dd>国产综艺</dd>
<dd>日韩综艺</dd>
<dd>欧美综艺</dd>
</dl>
</body>
</html>
第三十九页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<table>
<caption>职业调查</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>职业</th>
</tr>
<tr>
<th>张三</th>
<th>男</th>
<th>学生</th>
</tr>
<tr>
<th>李四</th>
<th>女</th>
<th>教师</th>
</tr>
</table>
<table border="1" cellpadding="10" cellspacing="10">
<caption>职业调查</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>职业</th>
</tr>
<tr>
<th>张三</th>
<th>男</th>
<th>学生</th>
</tr>
<tr>
<th>李四</th>
<th>女</th>
<th>教师</th>
</tr>
</table>
</body>
</html>
第四十页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html; charset=UTF-8">
<title>表格</title>
</head>
<body>
<table border="1" width="300" height="300" cellspacing="1">
<tr>
<td colspan="2" style="background-color: #0000FF;"></td>
<td rowspan="2" style="background-color: #FF0000;"></td>
</tr>
<tr>
<td rowspan="2" style="background-color: #00ff7f;"></td>
<td style="background-color: #000000;"></td>
</tr>
<tr>
<td colspan="2" style="background-color: #ffff00;"></td>
</tr>
</table>
<table border="1" width="600" height="600" cellspacing="1">
<tr>
<td colspan="2" style="background-color: #0000FF;"></td>
<td rowspan="2" style="background-color: #FF0000;"></td>
</tr>
<tr>
<td rowspan="2" style="background-color: #00ff7f;"></td>
<td style="background-color: #000000;"></td>
</tr>
<tr>
<td colspan="2" style="background-color: #ffff00;"></td>
</tr>
</table>
</body>
</html>
第四十一页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html; charset=UTF-8">
<title>表格</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<td></td>
<td>收入</td>
<td>支出</td>
<td>结余</td>
</tr>
</thead>
<tbody>
<tr>
<th>丈夫</th>
<th>1000</th>
<th>500</th>
<th>500</th>
</tr>
<tr>
<td>妻子</td>
<td>500</td>
<td>800</td>
<td>-300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总计</td>
<td>1500</td>
<td>1300</td>
<td>200</td>
</tr>
</tfoot>
</table>
</body>
</html>
第四十二页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<table>
<tbody>
<colgroup>
<col bgcolor="#f79d03" />
<col bgcolor="#ffd4f5" />
<col bgcolor="#e80063" />
<col bgcolor="##24ff45" />
</colgroup>
<tr>
<th>排名</th>
<th>公司</th>
<th>营收</th>
<th>利润</th>
</tr>
</tbody>
</table>
</body>
</html>
第四十五页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/style45.css" />
<title></title>
</head>
<body class="main">
<form action="regist" method="post">
<h1>注册账号</h1>
用户名:
<input type="text"name="username" id="username" value="" />
<input type="button"name="checkusername" id="checkusername"value="检查用户名是否被注册" /><br />
密码:
<input type="password" class="form-control" name="" id="password" value="" /><br />
确认密码:
<br><input type="password" class="form-control" name="" id="re_password" value="" /><br />
性别:
<input type="radio" name="sex" id="sex_man" value="man" checked="checked" />男
<input type="radio"name="sex" id="sex_woman" value="woman" />女<br>
兴趣爱好:
<input type="checkbox" name="interest" id="ins_football" value="football" />足球<input type="checkbox"name="checkbox" name="interest" id="ims_volleyball" value="volleyball" />排球
<input type="checkbox" name="interset" id="ins_ping-pong" value="ping-pong" />乒乓球<br />
选择头像:
<br><input type="file" name="file" id="file" value="" /><br />
<input type="image" width="80" height="80" src="image/css.jpg" /><br />
<input type="reset"value="重置信息" />
<input type="submit" id="submit"class="btn btn-primary" value="注册账号" />
<input type="hidden"name="refist" id="" value="default" />
</form>
</body>
</html>
第四十六页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html; charset=UTF-8">
<title>表单</title>
</head>
<body>
<form action="homeplace" method="get">
<select name="homeplace">
<option value="Beijing">北京</option>
<option value="Tianjin">天津</option>
<option value="Shanghai">上海</option>
<option value="Chongqing">重庆</option>
<option value="Hebei">河北</option>
<option value="Henan">河南</option>
<option value="Shanxi">山西</option>
<option value="SHandong">山东</option>
<option value="Liaoning">辽宁</option>
<option value="Jilin">吉林</option>
<option value="Heilongjiang">黑龙江</option>
<option value="Jiangsu">江苏</option>
<option value="Zhejiang">浙江</option>
<option value="Anhui">安徽</option>
<option value="Fujian">福建</option>
<option value="Jiangxi">江西</option>
<option value="Hubei">湖北</option>
<option value="Hunan">湖南</option>
<option value="Guangdong">广东</option>
<option value="Guangxi">广西</option>
<option value="Hainan">海南</option>
<option value="Sichuan">四川</option>
<option value="Guizhou">贵州</option>
<option value="Yunnan">云南</option>
<option value="Shanxi">陕西</option>
<option value="GAnsu">甘肃</option>
<option value="Qinghai">青海</option>
<option value="Ningxia">宁夏</option>
<option value="Xinjiang">新疆</option>
<option value="Neimenggu">内蒙古</option>
<option value="Xizang">西藏</option>
<option value="Taiwan">台湾</option>
<option value="Xianggang">香港</option>
<option value="Aomen">澳门</option>
</select>
<input type="submit" id="" name="" />
</form>
</body>
</html>
第四十八页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html; charset=UTF-8">
<title>表单</title>
</head>
<body>
<h1>调查</h1>
<form action="require" method="post">
<select name="computer" multiple="multiple">
<option value="edit">图文标记</option>
<option value="game">玩游戏</option>
<option value="video">看电视,电影</option>
<option value="sns">网络社交</option>
<option value="develop">程序开发</option>
</select><br>
你大约从什么时候开始接触计算机?<br />
<select name="age" size="3">
<option value="0+">0-10岁</option>
<option value="10+">11-20岁</option>
<option value="20+">21-30岁</option>
<option value="30+">31-40岁</option>
<option value="40+">41岁以上</option>
</select><br />
<input type="submit" id="" name="" />
</form>
</body>
</html>
第四十九页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html; charset=UTF-8">
<title>表单</title>
</head>
<body>
<h1>调查</h1>
<form action="inquire" method="get">
自我评价<br />
<textarea rows="10" cols="50" name="introduce"></textarea><br />
<input type="submit" id="" name=""/>
</form>
</body>
</html>
第五十二页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html; charset=UTF-8">
<title>框架集</title>
</head>
<frameset rows="50%,50%">
<frame src="http://www.taobao.com"/>
<frameset cols="50%,50%">
<frame src="http://www.baidu.com" />
<frame src="http://www.sina.com" />
</frameset>
<noframes>
<body>您的浏览器无法处理框架!请更换浏览器打开</body>
</noframes>
</frameset>
<body>
</body>
</html>
第五十四页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html; charset=UTF-8">
<title>框架集</title>
<frameset cols="100,*">
<frame src="nav.html"/>
<frame src="http://www.baidu.com" name="showframe"/>
<noframes>
<body>您的浏览器无法处理框架!请更换浏览器打开</body>
</noframes>
</frameset>
</head>
<body>
</body>
</html>
nav.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html; charset=UTF-8">
<title>导航</title>
</head>
<body>
<a href="http://www.baidu.com" target="showframe">百度</a><br>
<a href="http://www.taobao.com" target="showframe">淘宝</a><br>
<a href="http://www.sina.com" target="showframe">新浪</a><br>
</body>
</html>
第五十五页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html; charset=UTF-8">
<title>框架集</title>
</head>
<body>
百度:
<iframe src="http://www.baidu.com" width="600" height="300"></iframe><br />
必应:
<iframe src="http://www.bing.com"width="600" height="300"></iframe><br />
淘宝:
<iframe src="http://www.taobao.com" width="600"height="300"></iframe><br />
</body>
</html>
第五十九页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<link type="text/css" rel="stylesheet" href="css/style59.css" />
</head>
<body>
</body>
</html>
第六十一页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html; charset=UTF-8">
<title>继承</title>
</head>
<body>
<span><cite>北京欢迎你</cite>是北京奥运会宣传曲</span><br>
<span style="font-size: 30px;"><cite>北京欢迎你</cite>是北京奥运会宣传曲</span><br>
</body>
</html>