HTML常用标签及简单网站做法(5.6)

    昨天刚学的东西基本上融化了,今天有学习了很多的HTML通用标签,理解慢一点,有些东西需要静下心来慢慢理解。昨天学的东西觉得自己能理解了,今天一做任务,才发现自己运用到实践中的不多,很多东西还是不太理解,做起来很慢,看到别的同学做的很快,告诉自己不要着急,用心去理解,去一点点弄明白。明天休息,看来自己休息不了了,把自己还不熟练的东西去弄明白。下面是今天学习的一些通用标签,我做了一下总结:

  HTML常用标签:

  一:<a></a>

    (1)超级链接:<a href="URL"></a>

    (2)锚点:

        1:<a href="#"></a>

        2:<a href="#name"></a>

    (3)下载:图片  html php aspx jsp等文件不会直接下载

  二:<img/>

    (1)属性:1:alt   2:title

  三:列表

    (1)无序列表

      1:<ul></ul>

        a:type

        b:disc 实心圆

        c:square 方形   

        d:circle  空心圆

      2:<ul type="disc">

          <li>1</li>

          <li>2</li>

          <li>3</li>

        </ul>

     (2)有序列表

        1:<ol></ol>

        2:<ol type="1”>

             <li>1</li>

               <li>2</li>

             <li>3</li>

           </ol>

    四:常用的语法:

        空格(&nbsp;) 换行<br/>  分隔符<hr/> 注释(ctrl+k+c) 取消注释(ctrl+k+u)

  下面是今天的练习,做了一个简单的页面,多加练习才会更加熟练。

     

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>山东理工大学</title>
</head>
<body>
  <table width="1000" align="center">
    <tr>
      <td align="centter" valign="top" width="500"><img src="img/MMS8[DLDOIQMBX@U_K0N`7N.png" /> </td>
      <td ></td>
      <td align="right" valign="top">
        <a href="http://jwch.sdut.edu.cn/">在校生</a>&nbsp;+
        <a href="http://my.sdut.edu.cn/">教职工</a>&nbsp+
        <a href="http://zszx.sdut.edu.cn/">考生</a>&nbsp;+
        <a href="http://xy.sdut.edu.cn/">校友</a>&nbsp;+
        <a href="http://www.baidu.com">访客</a>&nbsp;+<br />
      </td>
  </table>
  <hr />
  <table width"="1000" height="50" align="center">
    <tr>
      <td align="right">
        <a href="http://www.sdut.edu.cn/main.htm">首页</a>
      </td>
      <td align="right">
        <a href="http://lgwindow.sdut.edu.cn/">新闻网</a>
      </td>
      <td align="right">
        <a href="http://www.sdut.edu.cn/729/list.htm">学校概况</a>
      </td>
      <td align="right">
        <a href="http://www.sdut.edu.cn/730/list.htm">机构设置</a>
      </td>
      <td align="right">
        <a href="http://www.sdut.edu.cn/731/list.htm">师资队伍</a>
      </td>
      <td align="right">
        <a href="http://www.sdut.edu.cn/732/list.htm">科学研究</a>
      </td>
      <td align="right">
        <a href="http://www.sdut.edu.cn/733/list.htm">人才培养</a>
      </td>
      <td align="right">
        <a href="http://www.sdut.edu.cn/734/list.htm">招生就业</a>
      </td>
      <td align="right">
        <a href="http://www.sdut.edu.cn/735/list.htm"大学文化></a>
      </td>
      <td align="right">
        <a href="http://oice.sdut.edu.cn/">国际交流</a>
      </td>
      <td align="right">
        <a href="http://xy.sdut.edu.cn/">校友联谊</a>
      </td>
    </tr>
  </table>
      <img src="img/aafbbef6-2a0d-43da-bd82-d25460b2a2f2.jpg" width="100%" />
  <table align="center" width="1000" height="60" >
    <tr>
      <td align="left" valign="top">学校新闻</td>

      <td align="top" valign="top"><a href="http://lgwindow.sdut.edu.cn/1058/list.htm"><font color="red">更多</font></a><br /></td>

      <td align="center" valign="top">图说理工&nbsp;&nbsp;&nbsp;&nbsp;视频理工</td>
      <td valign="top"><a href="http://www.sdut.edu.cn/splg/list.htm"><font color="red">更多</font></a></td>
      <td valign="top">学术活动</td>
      <td valign="top" align="right"><a href="http://www.sdut.edu.cn/740/list.htm"><font color="red">更多</font></a></td>
    </tr>
  </table>
  <table border="1" width="1000" height="500" align="center" valign="middle">
    <tr>
      <td valign="top" width="30%" height="30%"><a href="http://lgwindow.sdut.edu.cn/2017/0503/c1058a75187/page.htm"><p>校党委常委会学习        贯彻全省推进“两学一做”...</p><br />

        &nbsp; &nbsp; &nbsp; &nbsp;本网讯5月2日下午,校党委书记吕传毅在鸿远楼九楼会议室主持召开党委常委会,学习贯彻全省推进“两学一做”学习教育常态        化制度化工作座谈会...[详细]
    </a>
        <ul type="square" align="left" valign="top">
          <li><a href="http://lgwindow.sdut.edu.cn/2017/0505/c1058a75394/page.htm">校领导赴省科技厅交流科研体制改革试点情况                      &nbsp;&nbsp;&nbsp;&nbsp;05-05 </a></li>
          <li><a href="http://lgwindow.sdut.edu.cn/2017/0505/c1058a75355/page.htm">我校本科教学工作审核预评估全面展开                         &nbsp;&nbsp;&nbsp;&nbsp;05-05 </a></li>
          <li><a href="http://lgwindow.sdut.edu.cn/2017/0504/c1058a75340/page.htm">学校举行共青团工作表彰会&nbsp;&nbsp;&nbsp;&nbsp;05-              04</a></li>
          <li><a href="http://lgwindow.sdut.edu.cn/2017/0504/c1058a75340/page.htm">我校本科教学工作审核预评估全面展开                         &nbsp;&nbsp;&nbsp;&nbsp;05-05 </a></li>
          <li><a href="http://lgwindow.sdut.edu.cn/2017/0504/c1058a75340/page.htm">贵州理工学院客人来访&nbsp;&nbsp;&nbsp;&nbsp;05-                03</a></li>
          <li><a href="http://lgwindow.sdut.edu.cn/2017/0502/c1058a75161/page.htm">辅导员孙婷获全国辅导员职业能力大赛复赛                       一...&nbsp;&nbsp;&nbsp;&nbsp;05-02 </a></li>
          <li><a href="http://lgwindow.sdut.edu.cn/2017/0502/c1058a75152/page.htm">王晓原教授、分析测试中心电镜机组获淄博                       市...&nbsp;&nbsp;&nbsp;&nbsp;05-02</a></li>
    <br />
          <li>通知公告 

                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多                                                      
          </li>
        </ul>
      </td>
      <td width="40%" height="40%"></td>
      <td width="30%" height="30%"></td>
    </tr>

  </table>

</body>
</html>

  做完这个练习,接下来的作业也会熟练一些,很多东西当时记住了,等到用的时候就会忘,很多需要记忆的东西必须记熟,才会更方便。加油吧!不要浪费时间。

 

posted @ 2017-05-06 18:00  小程序员//  阅读(335)  评论(0编辑  收藏  举报