katacoda和dash都是很不错的在线学习网站
<h1>Anna Dowlin</h1>
<p>Hi! I'm Anna Dowlin, a NYC-based marketer. Say hello!</p>
<input type="email" placeholder="Your email">
<input type="submit">
HTML documents use
<tag>to tell the browser how to format our content
[Input标签(tag)的属性(http://www.w3school.com.cn/tags/att_input_type.asp)
CSS controls the style of the HTML content. It lets you change colors, fonts, layout, and more.
<!DOCTYPE html>
<head>
<title>Anna Dowlin</title>
<style>
body {
text-align: center;
background: url("http://dash.ga.co/assets/anna-bg.png");
background-size: cover;
background-position: center;
color: white;
font-family: helvetica;
}
p {
font-size: 22px;
}
input {
border: 0;
padding: 10px;
font-size: 18px;
}
input[type="submit"] {
background: red;
color: white;
}
</style>
</head>
<body>
<img src="/assets/anna.png">
<p>Hi! I'm Anna, a NYC-based marketer. Say hello!</p>
<input type="email" placeholder="Your email">
<input type="submit">
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>movie</title>
</head>
<body>
<ol start="1">
<li>
肖申克的救赎
<dl>
<dt>简介</dt>
<dd>20世纪40年代末，小有成就的青年银行家安迪（蒂姆·罗宾斯 Tim Robbins 饰）因涉嫌杀害妻子及她的情人而锒铛入狱。在这座名为肖申克的监狱内，希望似乎虚无缥缈，终身监禁的惩罚无疑注定了安迪接下来灰暗绝望的人生。未过多久，安迪尝试接近囚犯中颇有声望的瑞德（摩根·弗里曼 Morgan Freeman 饰），请求对方帮自己搞来小锤子。以此为契机，二人逐渐熟稔，安迪也仿佛在鱼龙混杂、罪恶横生、黑白混淆的牢狱中找到属于自己的求生之道。他利用自身的专业知识，帮助监狱管理层逃税、洗黑钱，同时凭借与瑞德的交往在犯人中间也渐渐受到礼遇。表面看来，他已如瑞德那样对那堵高墙从憎恨转变为处之泰然，但是对自由的渴望仍促使他朝着心中的希望和目标前进。而关于其罪行的真相，似乎更使这一切朝前推进了一步…… </dd>
<dt>导演</dt>
<dd>Frank Darabont</dd>
<dt>主演</dt>
<dd>Tim Robbins</dd>
<dd>Morgan Freeman</dd>
</dl>
</li>
<li>
乱世佳人
<dl>
<dt>简介</dt>
<dd>美国南北战争前夕，南方农场塔拉庄园的千金斯嘉丽（费雯·丽 Vivien Leigh 饰）爱上了另一个农场主的儿子艾希礼（莱斯利·霍华德 Leslie Howard 饰），遭到了拒绝，为了报复，她嫁给了自己不爱的男人，艾希礼妻子梅兰（奥利维娅·德哈维兰 Olivia de Havilland 饰）的弟弟查尔斯。
战争期间，斯嘉丽成为寡妇，失去母亲，挑起生活的重担， 不再是当初的千金小姐；战争结束后，她又两度为人妻，嫁给了爱她多年的投机商人瑞德（克拉克·盖博 Clark Gable 饰）。
然而，纵使经历了生活的艰苦，斯嘉丽对艾希礼的感情仍然没有改变。艾希礼妻子梅兰的去世，给了斯嘉丽一个机会，一边是深爱自己的丈夫瑞德，一边是心心念念多年的艾希礼？斯嘉丽会给自己怎样一个不一样的明天？</dd>
<dt>导演</dt>
<dd>Victor Fleming</dd>
<dd>George Cukor</dd>
<dt>主演</dt>
<dd>Clark Gable</dd>
<dd>Vivien Leigh</dd>
</dl>
</li>
<li>
教父
<dl>
<dt>简介</dt>
<dd>40年代的美国，“教父”维托·唐·柯里昂（马龙·白兰度 饰）是黑手党柯里昂家族的首领，带领家族从事非法的勾当，但同时他也是许多弱小平民的保护神，深得人们爱戴。
因为拒绝了毒枭索洛索的毒品交易要求，柯里昂家族和纽约其他几个黑手党家族的矛盾激化。圣诞前夕，索洛索劫持了“教 父”的参谋汤姆，并派人暗杀“教父”；因为内奸的出卖，“教父”的大儿子逊尼被仇家杀害；小儿子麦克（阿尔·帕西诺 饰）也被卷了进来，失去爱妻。黑手党家族之间的矛盾越来越白热化。
年老的“教父”面对丧子之痛怎样统领全局？黑手党之间的仇杀如何落幕？谁是家族的内奸？谁又能够成为新一代的“教父”？ </dd>
<dt>导演</dt>
<dd>Francis Ford Copp</dd>
<dt>主演</dt>
<dd>Marlon Brando</dd>
<dd>Alfredo James Pacino</dd>
</dl>
</li>
<li>
消失的爱人
<dl>
<dt>简介</dt>
<dd>结婚五周年纪念日的早上，尼克·邓恩（本·阿弗莱克 Ben Affleck 饰）来到妹妹玛戈（凯莉·库恩 Carrie Coon 饰）的酒吧，咒骂抱怨那个曾经彼此恩爱缠绵的妻子艾米（罗莎蒙德·派克 Rosamund Pike 饰）以及全然看不见希望的婚姻。当他返回家中时， 却发现客厅留下了暴行的痕迹，而妻子竟不见了踪影。女探员朗达·邦妮（金·迪肯斯 Kim Dickens 饰）接到报案后赶来调查，而现场留下的种种蛛丝马迹似乎昭示着这并非是一件寻常的失踪案，其背后或许隐藏着裂变于夫妻之情的谋杀罪行。艾米的失踪通过媒体大肆渲染和妄加揣测很快闻名全国，品行不端的尼克被推上风口浪尖，至今不见踪影的爱人对他进行无情审判，你侬我侬的甜言蜜语早已化作以血洗血的复仇与折磨…… </dd>
<dt>导演</dt>
<dd>David Fincher</dd>
<dt>主演</dt>
<dd>Ben Affleck</dd>
<dd>Rosamund Pike</dd>
</dl>
</li>
<li>
看不见的客人
<dl>
<dt>简介</dt>
<dd>艾德里安（马里奥·卡萨斯 Mario Casas 饰）经营着一间科技公司，事业蒸蒸日上，家中有美丽贤惠的妻子和活泼可爱的女儿，事业家庭双丰收的他是旁人羡慕的对象。然而，野心勃勃的艾德里安并未珍惜眼前来之不易的生活，一直以来，他和一位名叫劳拉（芭芭拉·蓝妮 Bárbara Lennie 饰）的女摄影师保持着肉体关系。
某日幽会过后，两人驱车离开别墅，却在路上发生了车祸，为了掩盖事件的真相，两人决定将在车祸中死去的青年丹尼尔联同他的车一起沉入湖底。之后，劳拉遇见了一位善良的老人，老人将劳拉坏掉的车拉回家中修理，然而，令劳拉没有想到的是，这位老人，竟然就是丹尼尔的父亲。</dd>
<dt>导演</dt>
<dd>Oriol Paulo</dd>
<dt>主演</dt>
<dd>Ana Wagener</dd>
<dd>Mario Casas</dd>
</dl>
</li>
</ol>
</body>
</html>
-
预格式化文本采用
<pre>标签，可以保留在标签内部的文本样式。 -
在HTML标签中，表示强调的几个标签其实使用场景：
- strong：重要性、严重性和紧急性
- em：从一句话中突出某个词语
- b：将词语从视觉上和其它部分区分，比如一篇论文摘要中的关键词
- i：换一种语调去说一句话时，比如其它语言翻译，对话中的旁白
-
引用一共有如下三种写法
<blockquote>、<cite>、<q>
<blockquote>标签会有段落的缩进，<cite>标签引用的内容会是内容倾斜，<q>标签引用的内容会在内容外面加上双引号。 -
嵌套网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>baidu</title>
</head>
<body>
<iframe src="https://www.baidu.com" width="500" height="500" style="border: black 2px solid">
</iframe>
</body>
</html>
- margin: auto 和 margin: 0 auto区别
- 意思不同。margin:auto=margin:auto auto auto auto，表示上下左右都为auto；margin:0 auto=margin:0 auto 0 auto，表示上下为0，左右为auto；
- 居中方式不同。margin:auto表示横竖都居中，margin: 0 auto表示横居中，竖不居中；
- margin后面一般会跟4个参数，如margin:1px、1px、1px、1px，分别表示上外边距为1px、右外边距为1px、下外边距为1px、左外边距为1px。
- 如果后面只写2个参数的话，如margin：1px、2px，则表示上下外边距为都为1px，左右外边距都为2px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video&Audio</title>
<style>
video {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div style="width: 500px; height: 100%; margin: 0 auto;" >
<video src="./oocl.mp4" controls poster="timg.jpg">
<p>Your browser doesn't support HTML5 video. Here is a <a href="https://v.youku.com/v_show/id_XMTgwNTc3ODky.html?refer=seo_operation.liuxiao.liux_00003310_3000_nUF3ai_19042900">link to the video</a> instead.</p>
</video>
</div>
<div style="width: 500px; height: 100%; margin: auto auto">
<audio controls>
<source src="Delacey%20-%20Dream%20It%20Possible.mp3" type="audio/mp3">
</audio>
</div>
</body>
</html>
- 表格
table标签详细描述：- table - 定义表格
- thead - 表格的页眉
- tbody - 表格的主体
- tr - 表格的一行
- th - 表格的表头
- td - 表格中的单元格
- border - 表格是否有边框，数值代表边框的宽度
table标签要有正确的嵌套方式，有table定义表格，子层嵌套thead和tbody，在页眉和主体内部分别嵌套表格的一行tr，最内层是表格的单元格td。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九九乘法表</title>
<style>
table{
/*border: red 1px solid;*/
width: 600px;
border-collapse: collapse;
}
table th{
border: black 2px solid ;
}
table td {
text-align: center;
}
</style>
</head>
<body>
<script type="text/javascript">
//通过生成一个表格，在每个格子里面输出
document.write("<table>");
//运用2层for循环来进行
for (var x = 1; x <= 9; x++)
{
document.write("<tr>");
for (var y = 1; y <= x; y++)
{
document.write("<th>"+y+"*"+x+"="+y*x+"</th>");
}
}
document.write("</table>");
</script>
</body>
</html>
- rowspan 代表该列跨多少行，以此来合并行，同样我们可以通过 colspan 来表示该行跨了多少列
<table border="1">
<thead>
<tr>
<th>浏览器</th>
<th>渲染引擎</th>
<th>JavaScript 引擎</th>
</tr>
</thead>
<tbody>
<tr>
<th>Chrome</th>
<td rowspan="2">Blink</td>
<td rowspan="2">V8</td>
</tr>
<tr>
<th>Opera</th>
</tr>
</tbody>
</table>
- 还可以通过 caption 标签表示table的标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<script>
window.onload = function () {
//根据id获取值
var p1 = document.getElementById("p1").innerHTML;
var p2 = document.getElementById("p2").innerHTML;
var p3 = document.getElementById("p3").innerHTML;
var p4 = document.getElementById("p4").innerHTML;
console.log(p1);
console.log(p2);
m = p1*p2;
n = p3*p4;
l = m + n;
document.getElementById("fuck1").append(m + "元");//给最后一行添加计算结果列
document.getElementById("fuck2").append(n + "元");
document.getElementById("fuck3").append(l + "元");
}
</script>
</head>
<body align="center">
<table border="1" align="center">
<caption>购物车</caption>
<tr>
<th rowspan="2">名称</th>
<th colspan="2">2016-11-22</th>
<th rowspan="2">小计</th>
</tr>
<tr>
<th>重量</th>
<th>单价</th>
</tr>
<tr>
<th>苹果</th>
<td><span id="p1">3</span><span>公斤</span></td>
<td><span id="p2">5</span><span>/公斤</span></td>
<td id="fuck1"></td>
</tr>
<tr>
<th>香蕉</th>
<td><span id="p3">2</span><span>公斤</span></td>
<td><span id="p4">6</span><span>/公斤</span></td>
<td id="fuck2"></td>
</tr>
<tr>
<td colspan="3">总价</td>
<td id="fuck3"></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
<style>
table {
font-size: smaller;
margin-top: 100px;
}
td {
width: 200px;
height: 25px;
}
</style>
</head>
<body align="left">
<table align="center" bgcolor="black" cellspacing="1">
<tr bgcolor="white">
<td></td><td>Knocky</td><td>Flor</td><td>Ella</td><td>Juan</td>
</tr>
<tr bgcolor="white">
<td>Breed</td><td>Jack Russell</td><td>Poodle</td><td>Streetdog</td><td>Cocker Spaniel</td>
</tr>
<tr bgcolor="#ffffff">
<td>Age</td><td>16</td><td>9</td><td>10</td><td>5</td>
</tr>
<tr bgcolor="white">
<td>Owner</td><td>Mother-in-law</td><td>Me</td><td>Me</td><td>Sister-in-law</td>
</tr>
<tr bgcolor="white">
<td>Eating Habits</td><td>Eats everyone's leftovers</td><td>Nibbles at food</td><td>Hearty eater</td><td>Will eat till he explodes</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
<style>
table {
font-size: smaller;
margin-top: 100px;
}
td {
width: 200px;
height: 25px;
}
</style>
</head>
<body align="left">
<table align="center" bgcolor="black" cellspacing="1">
<tr bgcolor="white">
<td></td><td>Knocky</td><td>Flor</td><td>Ella</td><td>Juan</td>
</tr>
<tr bgcolor="white">
<td>Breed</td><td>Jack Russell</td><td>Poodle</td><td>Streetdog</td><td>Cocker Spaniel</td>
</tr>
<tr bgcolor="#ffffff">
<td>Age</td><td>16</td><td>9</td><td>10</td><td>5</td>
</tr>
<tr bgcolor="white">
<td>Owner</td><td>Mother-in-law</td><td>Me</td><td>Me</td><td>Sister-in-law</td>
</tr>
<tr bgcolor="white">
<td>Eating Habits</td><td>Eats everyone's leftovers</td><td>Nibbles at food</td><td>Hearty eater</td><td>Will eat till he explodes</td>
</tr>
</table>
</body>
</html>
-
表单
其中包含的小组件主要有以下几种：- 单行文本框 -
<input type='text'> - 密码输入 -
<input type='password'> - 多行文本框 -
<textarea> - 单选按钮 -
<radio>- 注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。
- 多选按钮 -
<checkbox> - 下拉选择（单选） -
<select> - 下拉选择（多选） -
<select multiple> - 文件选择 -
<input type='file'> - 时间和日期 -
<input type="date"><input type="datetime-local"><input type="month"><input type="week"><input type="time"> - HTML 表单中常用的属性
action - 向服务器发送的请求地址
method - 要发送的HTTP请求类型
name - 表单的名称
target - 用于发送请求和接收响应的窗口名称
value - 某一个具体的表单项所对应的值
placeholder - 输入框的占位符，当输入框中为空时占位符会显示
checked - 针对多选框/单选框，默认的状态时选中状态
表单设计的几个原则：
尽量帮助用户不出差错
尽早提示用户填写错误
尽可能的扩大选择/点击区域
当表单中控件较多是要分组
在设计表单时要分清主要动作和次要动作 - 单行文本框 -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>信用卡申请表单</title>
</head>
<body>
<h1>信用卡申请表单</h1>
<form>
<table>
<tr>
<td>请选择城市</td>
<td><select>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>珠海</option>
</select></td>
</tr>
<tr>
<td>姓名（中文）</td>
<td><input placeholder="请与证件一致"></td>
</tr>
<tr>
<td>身份证</td>
<td><input placeholder="请与证件一致"></td>
</tr>
<tr>
<td>手机号码</td>
<td><input placeholder="请输入您的手机号"></td>
</tr>
<tr>
<td>短信验证码</td>
<td><input placeholder="点击后发送">
<button type="button">发送</button>
</td>
</tr>
<tr>
<td>办理类型</td><td><input type="radio" name="radio">白金卡 <input type="radio" name="radio">钻石卡 </td>
</tr>
</table>
</form>
<div style="margin-left: 350px">
<button type="submit">申请信用卡</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
<style>
div {
width: 100%;
text-align: -webkit-center;
}
button {
margin: 2px;
}
td {
text-align: left;
}
</style>
</head>
<body align="center">
<div>
<form action="/echo" method="POST" id="form1">
<table>
<tr>
<td>账号：</td>
<td><input type="text" name="username" placeholder="请输入想注册的账号"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="text" name="password" placeholder="请设置您账号的登入密码"></td>
</tr>
<tr>
<td>重复密码：</td>
<td><input type="text" name="repassword" placeholder="再次输入密码"></td>
</tr>
<tr>
<td>验证码：</td>
<td><input type="text" name="captcha" placeholder="请输入六位验证码"></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="radio">男 <input type="radio" name="radio">女</td>
</tr>
<tr>
<td>玩过什么游戏：</td>
<td><input type="checkbox" name="checkbox1">英雄联盟 <input type="checkbox" name="checkbox2">穿越火线 <input
type="checkbox" name="checkbox3">魔兽世界 <input type="checkbox" name="checkbox4">守望先锋
</td>
</tr>
<tr>
<td>
<select>
<option value="volvo">年</option>
<option value="saab">1997</option>
<option value="opel">1998</option>
<option value="audi">1999</option>
</select>
</td>
</tr>
<tr>
<td>
<button type="button">按钮</button><button type="submit">提交</button><button type="reset">重置</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
- 试卷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>统一建模语言理论测试</title>
<style>
div {
width: 100%;
text-align: -webkit-center;
}
table {
width: max-content;
}
td {
text-align: left;
}
li {
text-align: left;
}
</style>
</head>
<body align="center">
<h1 style="text-align: left">统一建模语言理论测试</h1>
<form>
<table>
<tr>
<td>考试科目：</td>
<td>统一建模语言</td>
<td>时间：</td>
<td>100分钟</td>
<td>得分：</td>
<td>100</td>
</tr>
<tr>
<td>班级：</td>
<td><input type="text" value="1班"></td>
<td>学号：</td>
<td><input type="text" value="001"></td>
<td>姓名</td>
<td><input type="text" value="王小闹"></td>
</tr>
</table>
<h2 style="text-align: left">一、填空题（每空5分，共20分）</h2>
<ol start="1">
<li>UML的中文全称是：<input type="text" value="统一建模语言"></li>
<li>对象最突出的特征是：<input type="text" value="封装性"> <input type="text" value="继承性"> <input type="text" value="多态性">
</li>
</ol>
<h2 style="text-align: left">二、选择题（每题10分，共20分</h2>
<ol start="1">
<li>
UML与软件工程的关系是：
<p><input type="radio" name="radio1"> (A) UML就是软件工程</p>
<p><input type="radio" name="radio1" checked> (B) UML参与到软件工程中软件开发过程的几个阶段</p>
<p><input type="radio" name="radio1"> (C) UML与软件工程无关</p>
<p><input type="radio" name="radio1"> (D) UML是软件工程的一部分</p>
</li>
<li>
Java语言支持：
<p><input type="radio" name="radio2" checked> (A) 单继承</p>
<p><input type="radio" name="radio2"> (B) 多继承</p>
<p><input type="radio" name="radio2"> (C) 单继承与多继承都支持</p>
<p><input type="radio" name="radio2"> (D) 单继承与多继承都不支持</p>
</li>
</ol>
<h2 style="text-align: left">三、多择题（每题10分，共20分）</h2>
<ol start="1">
<li>
用例的粒度分为以下哪三种：
<p><input type="checkbox" name="cb1" checked> (A) 概述级</p>
<p><input type="checkbox" name="cb2" checked> (B) 需求级</p>
<p><input type="checkbox" name="cb3"> (C) 用户目标级</p>
<p><input type="checkbox" name="cb4" checked> (D) 子功能级</p>
</li>
<li>
类图由以下哪三部分组成：
<p><input type="checkbox" name="cb5" checked> (A) 名称(Name)</p>
<p><input type="checkbox" name="cb6" checked> (B) 属性(Attribute)</p>
<p><input type="checkbox" name="cb7"> (C) 操作(Operation)</p>
<p><input type="checkbox" name="cb8" checked> (D) 方法(Function)</p>
</li>
</ol>
<h2 style="text-align: left">四、判断题（每题10分，共20分）</h2>
<ol start="1">
<li>用例图只是用户和客户交流和沟通的，用于确定需求。 <input type="radio" name="radio3"> ✔ <input type="radio" name="radio3" checked> × </li>
<li>在状态图中，终止状态在一个状态图中允许有任意多个。 <input type="radio" name="radio4" checked> ✔ <input type="radio" name="radio4"> × </li>
</ol>
<h2 style="text-align: left">五、简答题（每题20分，共20分）</h2>
<ol start="1">
<li>
<p>简述什么是模型以及模型的表现形式？</p>
<p><textarea style="width: 700px; height: 100px">模型是对现实世界的简化和抽象，模型是对所研究的系统、过程、事物或概念的一种表达形式。 可以是物理实体； 可以是某种图形； 或者是一种数学表达式。</textarea></p>
</li>
</ol>
<button type="submit">计算分数</button>
</form>
</body>
</html>
客观题
- 可以添加在头部区域的元素标签为:
<title>, <style>, <meta>, <link>, <script>, <no script>and<base> <link>标签定义了文档与外部资源之间的关系。
扫一扫
1733
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
