html学习Day2

最新推荐文章于 2024-04-26 19:55:51 发布

fleetingevent

最新推荐文章于 2024-04-26 19:55:51 发布

阅读量283

点赞数

文章标签： html

本文链接：https://blog.csdn.net/fleetingevent/article/details/53487958

版权

一.学习内容：

（1）有关图像的标签：<img> <map> <area>

1.<img>属性：src=“url”里面填写图片所在位置！！alt=“xxxx”当图片无法显示的时候，则显示这个文本！！usemap=“#mapname”如果要和<map>一起使用，则必须要写这个属性

2.<map>属性：name/id=“mapname”就是写在<img>属性usemap的里面，根据不同浏览器写属性id或name。以及xhtml中属性name已经废弃。（我从菜鸟教程看的^__^) ）

3.<area>属性：shape=“rect或者circle或者poly”选择不同的图形把你的地图那一块框起来！！coords=“a b c d”这个真是好麻烦，因为我用的notepad++写的，那个位置就很难确认。。我就自己一个个试，后来发现呀，这个的坐标原点是左上角，不是我们一般认为图像在第一象限，而是在第四象限，只是x，y的值都还是正数。（a，b）确认左上角的位置，（c，d）确认右下角的位置！！href="#xxx"点击之后你想展示啥捏？就写在这里！！

（2）有关表格的标签：<table><tr><td>

1.神奇の属性之colspan：菜鸟里说跨行，我没想明白，但我觉得他是跨列。我自己用了，我就是觉得他是跨列。

2.神奇の属性之rowspan：嗯和上面那个是相对的。

（3）有关列表的标签：

1.无序列列表 <ul><li>：就是列表的前面是黑色小点点

2.有序列列表<ol><li>：就是列表前面是数字或字母！！其中，属性type控制是怎样的方式表达有序！！

3.自定义列表<dl><dt><dd>

（4）区块元素和内联元素：

1.区块：<table><ul><h1~h6><p><div>通常另起新行！

2.内联：<td> <b> <a> <img>

二.代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>这是我第一个HTML</title>
<meta http-equiv="refresh" content="5">
<style>
  body{ font-family:微软雅黑,Arial;}
  a{ text-decoration:none;}
  td{ text-align:center;}
</style>
</head>

<body>
<div style="border:1px solid green;height:auto;width:100%">
  <div style="border:1px solid green;height:auto;width:100%">
    <h3> Welcome to my first HTML Day2</h3>
  </div>
  <div style="border:1px solid green;height:auto;width:100%">
   More Information：
   <a href="http://www.baidu.com" style="text-decoration:none">Baidu</a>
   <a href="http://www.taobao.com">Taobao</a>
   <a href="#tips">tips</a>
  </div>
</div>
<hr>
<div style="border:3px solid yellow;width:100%">
  <div style="border:0.5px solid #000;height:inherit;width:20%;float:left;margin-top:5px">
    <p style="text-align:center"><abbr title="Menu of my html">Menu</abbr></p>
    <p style="text-align:center">Maps</p>
    <p style="text-align:center">Tables</p>
  </div>
  <div style="border:1px solid red;height:auto;width:79%;float:left;margin-top:5px"> 
    <div style="float:left;border:1px solid green">
      <img src="gqico.png" usemap="#testmap" style="margin-left:12px;margin-top:5px;border:1px solid black">
      <map name="testmap">
        <area shape="rect" coords="38px,135px,90px,235px" alt="Hi" href="#xiaoyanta">
        <area shape="rect" coords="100,140,210,210," alt="Hello" href="#tiananmen">
        <area shape="rect" coords="210,0,260,200" alt="Hei" href="#dongfangmingzhu">
      </map>
    </div>
    <div style="float:right;border:1px solid green">
      <table border="1" cellspacing="0" cellpadding="1px" style="margin-right:12px;margin-top:5px">
        <tr>
          <td>Must-See Site:</td>
          <td>The Great Wall</td>
          <td>The Palace</td>
          <td>The West Lake</td>
        </tr>
		<tr>
          <td>Address:</td>
          <td colspan="2">BeiJing</td>
          <td>HangZhou</td>
        </tr>
		<tr>
          <td>Price:</td>
          <td>¥50/person</td>
          <td>¥90/person</td>
          <td>¥0/person</td>
        </tr>
        <tr>
          <td>Comments:</td>
          <td>Long/Great</td>
          <td>Huge/Ancient</td>
          <td>Lake/Ship</td>
        </tr>
      </table>
    </div>
	<div style="float:right;margin-right:13px;margin-top:5px;display:block;border:1px solid black">
	    <h4>The Top5 View</h4>
	    <ol type="i">
		  <li>Li Jiang</li>
		  <li>San Ya</li>
		  <li>Huang Shan</li>
		  <li>Jiu Zhai Gou</li>
		  <li>Gui Lin </li>
		</ol>
	</div>
	<div style="float:right;padding-left:5px;padding-right:5px;margin-right:25px;margin-top:5px;display:block;border:1px solid black">
	    <h4>The Top5 City</h4>
	    <ol type="i">
		  <li>YuNan</li>
		  <li>HangZhou</li>
		  <li>WuHan</li>
		  <li>GuiLin</li>
		  <li>ChangSha</li>
		</ol>
	</div>
	<div style="float:right;padding-left:5px;padding-right:5px;margin-right:25px;margin-top:5px;display:block;border:1px solid black">
	    <h4>The Top5 Food</h4>
	    <ol type="i">
		  <li>Hotpot</li>
		  <li>Dumpling</li>
		  <li>Mooncake</li>
		  <li>Noodles</li>
		  <li>Baozi</li>
		</ol>
	</div>
  </div>

   <br>
   <br>

   <hr>
   <div style="border:1px solid green;width:100%;height:auto;float:left">
     <a id="tips">Here is the tips</a>
     <br>
     <a id="xiaoyanta">263:Hi!This the big wild goose tower!</a>
     <br>
     <a id="tiananmen">263:Hello!This is the Tian An Men!</a>
     <br>
     <a id="dongfangmingzhu">263:Hi!This is the oriental pearl TV tower!</a>
    </div>
</div>
</body>
</html>