HTML基础
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>web前端开发day1</title>
<base target="_blank" />
<!--base标签 所有网页都新打开一个窗口-->
</head>
<body>
<h1><a href="#biao">标题</a></h1>
<br /><!--换行标签 单标签-->
<a id="back">a标签(后面的内容不空行)</a>
<hr width="600" color="red"/>
<!--水平线 长度 颜色 单标签-->
<img src="1.jpg" alt="显示图片缺失"/><br />
<!--图像单标签-->
<img src="10.jpg" alt="显示图片缺失"/><br />
<!--图片不能显示时出现的文字-->
<img src="1.jpg" title="bulinggggggg"/><br />
<!-- title 鼠标停留在图片时显示的文字内容-->
<img src="1.jpg" title="bulinggggggg" width="300"/><br />
<!--width height 改变图片的宽高-->
<img src="1.jpg" title="bulinggggggg" width="300" style="border: 10px solid red;"/><br />
<!--border边框:宽度 实线/虚线 颜色-->
<a href="http://www.baidu">百度</a> <br />
<a href="index.html">legao</a> <br />
<a href="http://www.baidu" target="_blank">百度 打开新的页面</a> <br />
<a href="index.html" target="_self">legao 打开自己的页面</a> <br />
<!--链接标签 href链接目标 target="_blank"打开新界面,不覆盖之前的网页
target="_self"打开自己的页面-->
<h1 id="biao">标题跳转</h1>
<h2><a href="#back">返回顶部a标签</a></h2>
<!--链接定位
<a href="#(定义一个名字)">(点击跳转的文字)</a>
<a id="定义的名字">内容</a>
-->
特殊符号
<!--特殊符号-->
<p>-- 空格符号 --</p>
<p>--<小于符号--</p>
<p>-->大于符号--</p>
<p>--&和符号--</p>
<p>--¥人民币符号--</p>
<p>--©版权符号--</p>
<p>--®注册商标符号--</p>
<p>--°摄氏度符号--</p>
<p>--±正负符号--</p>
<p>--×乘号--</p>
<p>--÷除号--</p>
<p>--²平方2--</p>
<p>--³立方3--</p>
无序列表
<!--无序列表-->
<h1>中午吃什么?</h1>
<ul type="circle"><!--空心圆-->
<li>泡面</li>
<li>紫薯粥</li>
<li>拉面</li>
<li>
<h3>寿司</h3>
</li><!--<li> 标签可以放所有元素-->
</ul><br /><br />
<ul type="square"><!--方块-->
<li>泡面</li>
<li>紫薯粥</li>
<li>拉面</li>
<li>
<h3>寿司</h3>
</li><!--<li> 标签可以放所有元素-->
</ul><br /><br />
<ul type="disc"> <!--type默认实心圆-->
<li>泡面</li>
<li>紫薯粥</li>
<li>拉面</li>
<li>
<h3>寿司</h3>
</li><!--<li> 标签可以放所有元素-->
</ul><br /><br />
<ul type="none"><!--空白-->
<li>泡面</li>
<li>紫薯粥</li>
<li>拉面</li>
<li>
<h3>寿司</h3>
</li><!--<li> 标签可以放所有元素-->
</ul><br /><br />
有序列表
<!--有序列表-->
<ol type="1">
<li>泡面</li>
<li>紫薯粥</li>
<li>拉面</li>
<li>
<h3>寿司</h3>
</li><!--<li> 标签可以放所有元素-->
</ol>
<ol type="A">
<li>泡面</li>
<li>紫薯粥</li>
<li>拉面</li>
<li>
<h3>寿司</h3>
</li><!--<li> 标签可以放所有元素-->
</ol>
<ol type="a">
<li>泡面</li>
<li>紫薯粥</li>
<li>拉面</li>
<li>
<h3>寿司</h3>
</li><!--<li> 标签可以放所有元素-->
</ol>
<ol type="I">
<li>泡面</li>
<li>紫薯粥</li>
<li>拉面</li>
<li>
<h3>寿司</h3>
</li><!--<li> 标签可以放所有元素-->
</ol>
<ol type="i">
<li>泡面</li>
<li>紫薯粥</li>
<li>拉面</li>
<li>
<h3>寿司</h3>
</li><!--<li> 标签可以放所有元素-->
</ol>
自定义列表
<!--自定义列表 <dt>下面包含着<dd>-->
<dl>
<dt>北京</dt>
<dd>顺义</dd>
<dd>昌平</dd>
<dd>海定</dd>
</dl>
</body>
<!--单标签 <img /> <br /> <hr /> <base />-->
</html>
四大名著案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>中国四大名著</h1>
<ul>
<li>
<h3><img src=1.jpg width="60">水浒传</h3>
<p>sjdadnasjndoasxnaklsdnx</p>
</li>
<li>
<h3><img src=1.jpg width="60"/>西游记</h3>
<p>sjdadnasjndoasxnaklsdnx</p>
</li>
<li>
<h3><img src=1.jpg width="60"/>红楼梦</h3>
<p>sjdadnasjndoasxnaklsdnx</p>
</li>
<li>
<h3><img src=1.jpg width="60"/>三国演义</h3>
<p>sjdadnasjndoasxnaklsdnx</p>
</li>
</ul>
</body>
</html>
文件链接:
1、
file:///D:/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/day1/Untitled-1.html
2、file:///D:/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/day1/%E5%9B%9B%E5%A4%A7%E5%90%8D%E8%91%97.html