<!--
html/head/body
文本 - h1-h6 p / br / hr / sub / sup / strong / b / em / del / ins /
列表 - ul(li) / ol(li) / dl(dt/dd) /
图像 - img / figure / figcaption
链接 - a(页面链接/锚链接/功能链接)
表格 - table / tr / td / th / thead / tbody / tfoot
表单 - form / input (text / password / radio / checkbox / file / submit / reset / email / date url/ search) / select / textarea
音视频 - audio / video / (source)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5笔记</title>
</head>
<body>
<!--controls 控件 autoplay 自动播放 loop -->
<audio autoplay loop>
<source src="resources/xiaochou.mp3">
</audio>
<dl id="top">
<dt>
<figure>
<figcaption style="text-align: center;">FOR DREAM <br />
<img src="img/bg2.jpg">
</figure>
</dt>
<dd style="text-align: center;">火拳 艾斯</dd>
</dl>
<table border="" cellspacing="" cellpadding="">
<caption>海贼王名言</caption>
<!--
作者：[email protected]
时间：2018-04-01
描述：thead tbody tfoot
-->
<tr>
<th>姓名</th>
<th>名言</th>
</tr>
<tr>
<td>白胡子</td>
<td>红发</td>
<td>路飞</td>
<td>艾斯</td>
<td>索隆</td>
<td>海贼王</td>
</tr>
<tr>
<td>做我儿子吧！</td>
<td>请各位务必给我这个面子</td>
<td>我不是天生的王者 但我骨子里流动着不让我低头的血液</td>
<td>为什么遇到如此强大的敌人你也不愿逃跑？—— 那是因为身后，有至爱之人。</td>
<td>我不管这个世上的人怎么说我，我只想依照我的信念做事，绝不后悔，不管现在将来都一样！</td>
<td>这个世界并不是掌握在那些嘲笑者的手中，而恰恰掌握在能够经受得住嘲笑与批评仍不断往前走的人手中。</td>
</tr>
</table>
<form action="" method="post">
<fieldset id="">
<legend>表框名</legend>
<input type="text" name="" id="" value="" required=""/>
<input type="password" name="" id="" value="" placeholder="占位华语"/>
<input type="radio" name="1" id="" value="" />单选一
<input type="radio" name="1" id="" value="" />单选二
<input type="checkbox" name="2" id="" value="" />复选1
<input type="checkbox" name="2" id="" value="" />复选2
<input type="date" name="" id="" value="" />
<input type="email" name="" id="" value="" />
<select name="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="" selected>666</option>
</select>
<textarea name="" rows="" cols="">我是文本框</textarea>
<input type="file" name="photograph" id="photograph" value="浏览文件" />
<input type="submit" name="" id="" value="提交" />
<input type="reset" name="" id="" value="重置" />
</fieldset>
</form>
<a href="http://www.runoob.com" style="text-decoration: none;color: red;">超链接</a>
<a href="#top" style="text-decoration: none;color: red;">锚定</a>
<a href="" style="text-decoration: none;color: red;">功能链接</a>
</body>
</html>
CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS笔记</title>
</head>
<body>
<div class="header">
<h1 style="text-align: center;">基础</h1>
<ul style="list-style: none; line-height: 30px;text-align:center;">
<li>标签选择器 id class nthon-child</li>
<li>间距 word-spacing 行高 line-height font-size 大小 </li>
<li>font-weight 粗细，bold bolder font-style 样式，italic 斜体 letter-spacing </li>
<li>text-align: center top bottom left right</li>
<li>overflow: hidden scroll;</li>
<li>text-decoration: line-through 删除线;</li>
<li>块级元素，行级元素，内联元素 用display转换</li>
<li>转义字符</li>
<li>html是显示，是超文本语言，css是装饰，js是脚本，显示行为</li>
<li>样式分为3种，常用的是内部和外联， 内联很少用。样式表冲突时的三大原则</li>
<li>就近原则；具体性原则；重要性原则</li>
</ul>
<iframe src="https://www.liaoxuefeng.com/" frameborder="0" width="800" height="400"></iframe>
<iframe src="http://www.runoob.com/js/js-examples.html" frameborder="0" width="800" height="400"></iframe>
</div>
<div class="nav">
<ul style="list-style: none;text-align: center;">
<li>display 类型转化 - block inline-block</li>
<li>position :relative absolute fixed 相对，绝对，固定定位</li>
<li>z-index配合定位使用，决定谁在最上面，值越大，在上面，下面被覆盖</li>
</ul>
</div>
<div class="main"></div>
<div class="footer"></div>
<div class="bottom"></div>
</body>
</html>
JS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js笔记</title>
</head>
<body>
<div>
<h2>天赐大酒店</h1>
<hr />
<h1 >剩余房间数<input type="text" value="10" id="demo" /></h1>
<hr />
<input id="join" type="button" onclick="myfunction1()" value="申请入住">
<input id="quit" type="button" onclick="myfunction2()" value="申请退房">
</div>
<div>
<h2>九九乘法表</h2>
<hr />
<div id="tableNine" style="height: 230px;background-color: yellow;"></div>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
function jiujiu(){
var row, col;
var string = "<table>";
for (row = 1; row < 10; row++){
string += "<tr>";
for (col = 1; col < row + 1;col++){
string += "<td>";
string += row + "×" + col + "=" + col * row;
string += ‘</td>‘
}
string += "</tr>";
}
document.getElementById("tableNine").innerHTML = string + "</table>";
};
jiujiu();
</script>
<script type="text/javascript">
function myfunction1(){
var number =parseInt(document.getElementById("demo").value);
if (number > 0) {
document.getElementById("demo").value = number - 1;
window.alert("订房成功");
} else{
window.alert("订房失败")
}
}
function myfunction2(){
var number =parseInt(document.getElementById("demo").value);
if (number < 15) {
document.getElementById("demo").value = number + 1;
window.alert("退房成功");
} else{
window.alert("退房失败")
}
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/zl666/p/8689062.html
时间： 2024-08-29 16:16:46