<!-- -->
<!-- 1.标签 - 承载内容 -->
<!-- 2.层叠样式表 - 渲染页面-->
<!-- 3.JavaScript - 交互式行为-->
<!DOCTYPE html> <!-- 页面文档声明 -->
<html><!--最开头 -->
<head><!-- 层叠样式表必须写在这里面 -->
<meta charset="utf-8">
<title>愚人节</title><!-- 网页标题-->
<!-- css - cascading style sheet-->
<style type="text/css">
h1{
color:cyan;/*颜色*/
font-size: 2cm;/*字体大小*/
font-family: "楷体";/*字体选择*/
}
p{
color:cyan;/*颜色*/
font-size: 1cm;/*字体大小*/
font-family: "楷体";/*字体选择*/
}
p:first-letter{
font-size: 3cm;
color: blue;
}
.a{/*加.类名-单独改变一行的样式*/
color: green;
}
.b{
color: red;
}
a{
color: red;
text-decoration: none;
}
a:hover {
color: green;
}
</style>
</head><!-- 层叠样式表必须写在这里面 ^^^^^-->
<body> <!--js脚本挨着body最后面写-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=957658&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:957658:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
<a name="too"></a><!--锚点-->
<a href ="#too2">回下面</a><!--点击去锚点-->
<h1>愚人节的博客 ™</h1> <!--一级标题 -->
<hr> <!--大横线 水平标尺 - horizontal ruler-->
<h2>大黄喜欢吃的饭</h2>
<ol><!--有序列表-->
<li>香蕉</li>
<li>饭</li>
<li>水</li>
</ol>
<ul><!--无序列表-->
<li>香蕉</li>
<ol>
<li>好吃</li>
<li>很好吃</li>
<li>非常好吃</li>
</ol>
<li>饭</li>
<li>水</li>
</ul>
<dl><!--定义列表-->
<ol><!--有序列表-->
<li>香蕉</li>
<li>饭</li>
<li>水</li>
</ol>
<ul><!--无序列表-->
<!--1.网络页面连接-->
<!--2.锚点标签-->
<!--2.功能标签-->
<li><a href="https://www.baidu.com/" target="_blank">百度</a></li>
<li><a href="https://www.taobao.com/" target="_blank">淘宝</a></li>
<li><a href="a1.html">自己</a></li>
<ol>
<li><a href="https://www.iqiyi.com/" target="_blank">爱奇艺</a></li>
<li><a href="https://v.qq.com/" target="_blank">腾讯视频</a></li>
<li><a href="https://www.youku.com/" target="_blank">优酷</a></li>
</ol>
<dt>
<p><img title='鼠标放上面提示信息' src="http://icon.nipic.com/BannerPic/20190401/original/20190401105300_1.jpg" align='center' alt = '图片加载失败'>python</p><!--获取网络图片 文字直接写后面 align = 和文字的对齐方式 alt = 图片加载失败替换文字 title='鼠标放上面提示信息'-->
</dt>
<dt>
<img src="day 4444/a2.jpg" alt = '图片加载失败'>
</dt>
<dt>这是标题</dt>
<dd>这是标题的说明</dd>
<dd>这还是标题的说明</dd>
</dl>
床 前明月光<sup>上标</sup><br><!--换行 上标sup 和下标sub-->
疑是地上霜<sub>下标</sub><br>
<p class="a">举<ins>头望</ins><em><strong>明月</strong></em></p><!-- 换行并且有间距 // 加粗斜体 em><strong>明月</strong></e>
ins 下划线 del 删除线-->
<p class="b">低<del>头思</del><em>故乡</em></p><!-- 声明一个类,单独改变一行的// -->
<button onclick="showWriter()">确定</button><!--按钮-->
<button onclick="abc()">关闭</button><!--按钮-->
<a href ="#too">回顶部</a><!--点击去锚点-->
<a name = "too2"></a><!-- 锚点-->
<a href="mailto:1436714495@qq.com">联系站长</a><!--联系站长发邮件-->
<script type="text/javascript">/*js脚本开始*/
//驼峰命名法 - Camel Notation
function showWriter(){//声明函数 用function
for (var i = 1; i<= 3; i+=1){//循环弹窗3次
window.alert("你好!作者是李白");//弹窗->警告
}
}
function abc(){
if (window.confirm('确定要关闭吗')){//给弹窗加确定按钮是否关闭?
window.close();//关闭网页
}
}
</script><!--js脚本结束-->
<!--js脚本挨着body最后面写-->
</body>
</html><!-- 最结尾-->
表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1"><!--前面的是表格 后面border宽度1-->
<caption>考试成绩表</caption><!--表格标题-->
<thead><!--没什么用 表头-->
<tr>
<th width="100">姓名</th><!--表格横向 宽度100-->
<th width="100">语文</th><!--表格th 是加粗-->
<th width="100">数学</th>
<th width="100">英语</th>
<th width="100">体育</th>
</tr>
</thead><!--没什么用 表头结尾-->
<center><!--没什么用 表中-->
<tr>
<td>以</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td rowspan="2">二狗</td><!--跨列-->
<td colspan="3" align="center">2</td><!--跨行 居中-->
<td>3</td>
</tr>
<tr>
<td>45</td>
<td>4</td>
<td>3</td>
<td>3</td>
</tr>
<center><!--没什么用 表中结尾-->
<foot><!--没什么用 表尾开始-->
</foot><!--没什么用 表尾结尾-->
</tfoot>
</table>
</body>
</html>
