• HTML课上小结


    HTML翻译为超文本标记语言
    <标签名>内容</标签名>
    静态网页动态网页的区别是看是否从数据中提取数据
    一般网页由几部分组分组成
    <html>开始标签
    <head>头,即为网页上的控制信息
    <title>页面上的标题</title>
    </head>

    <body,其属性一般有bgcolor页面背景色,text文字颜色,tpmargin上页边距,leftmar左页边距,backgroung背景壁纸>
    页面显示内容,一般的标签
    <font color="" size="" face=""></font>颜色,大小,字体
    <strong>加粗</strong>
    <b>加粗</b>
    <em>倾斜</em>
    <i>倾斜</i>
    <u>下划线</u>
    <del>删除线</del>
    <sub>下标</sub>
    <sup>上标</sup>
    <center>居中</center>
    <br>回车
    &nbsp空格
    <h1>一级标题</h1>
    ......
    <h6>六级标题</h6>
    标题会自动换行
    <p>段落标签</p>
    有序标签
    <ol type="">
    <li></li>
    <li></li>
    </ol>
    无序标签
    <ul type="">
    <li></li>
    <li></li>
    </ul>

    超链接:<a href="网址">要点的内容</a>
    <a href="网址" target="_blank">在空白页面打开,self就是在自身页面打开
    锚点:<a href="#top"></a>直接返回到页面顶部
    <a name=""></a>
    <a href=""></a>返回到命名处
    <img src="图片地址" width="宽度" height="高度" title="图片标题" alt="图片无法加载时显示文字">
    相对路径:从当前页面开始查找
    绝对路径:从网站的根开始查找
    表格:内容必须在单元格,单元格必须在行里,行必须在表格里。
    <table width宽度 border边框 bgcolor背景颜色 background背景图>
    <tr>行:
    <td></td>单元格
    <th></th>内容自动居中加粗
    </tr>
    </table>
    align水平对齐 left center right
    valign垂直对齐 top middle bottom
    rowspan合并行
    colspan合并列

    </body>
    </html> 结束标签

    以下面作业为例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>作业20161221</title>
    </head>

    <body bgcolor="#000000" topmargin="200px" leftmargin="200px" >

    <p>
    <font face="微软雅黑" color="#FFFFFF" size="+3">
    <em>
    <strong>作业</strong>
    </em>
    <sub>20161221</sub>
    </font>
    </p>

    <p>
    <font face="微软雅黑" color="#FFFFFF" size="-1">
    <del>可以不完成
    </del>
    </font>
    </p>
    <font face="微软雅黑" color="#FFFFFF" size="-1">
    <p>One may fall in love with many people during the lifetime.</p>
    <p>When you finally get your own happiness,</p>
    <p>you will understand the preious sadness is kind of treasure,</p>
    <p>which makes you better to hold and cherishthe people you love.</p>
    </font>
    <p>
    <font face="微软雅黑" color="#FFFFFF" size="-1">字体是:<br>
    <u>微软雅黑</u>
    </font>
    </p>
    <a href="#top">
    <img src="新建文件夹/QQ图片20161221090944.gif" width="100px" height="100px" title="哈哈哈" alt="图裂了">
    </a>
    <br>
    <font face="微软雅黑" color="#FFFFFF" size="-1">图裂了
    </font>
    <br>
    <br>
    <font face="微软雅黑" color="#FFFFFF" size="+2">要求:
    </font>
    <font face="微软雅黑" color="#FFFFFF" size="-1">
    <ol type="A">
    <li>独立完成</li>
    <li>今天所讲的都要练一遍</li>
    <li>做好博客的笔记</li>
    </ol>
    </font>
    <br>
    <font face="微软雅黑" color="#FFFFFF" size="+2">PS:
    </font>
    <br>
    <font face="微软雅黑" color="#FFFFFF" size="-1">
    <ul type="square">
    <li>注意有序/无序列表的使用</li>
    <li>图片长宽都是100px,点击图片可以链接到网页顶端</li>
    <li>要求完成度在70%以上</li>
    <li>不会的可以<font color="#660066">
    <a href="http://www.baidu.com" target="_blank">百度</a>
    </font>(此链接在新页面打开)</li>
    <li>网页左边距和上边距为200px</li>
    <li>鼠标移动到图片上显示“哈哈哈”</li>
    <li>坏图上显示“图裂了”</li>
    </ul>

    <table width="400px" height="200px" border="1" cellspacing="0" cellpadding="0">
    <font color="#FFFFFF">
    <tr>
    <th width="100px" align="center" valign="middle">宽度/高度</th>
    <th width="100px" align="center" valign="middle">对齐方式</th>
    <th width="100px" align="center" valign="middle">背景颜色</th>
    <td rowspan="2" align="center" valign="middle" >合并单元格</td>
    </tr>
    <tr>
    <td bgcolor="#999999" align="center"valign="bottom">400px/200px;</td>
    <td bgcolor="#999999" valign="bottom" align="right">靠右/靠下</td>
    <td bgcolor="#999999"align="right" valign="bottom">gray</td>

    </tr>
    </font>
    </table>


    </body>
    </html>

  • 相关阅读:
    磁盘映射命令
    CentOS 配置XWIN/VNC
    生成一个随机数,让用户输入猜这个数字,有三次机会
    自己练习读取写入txt
    python学习笔记:文件操作和集合(转)
    接口测试基础
    nginx_tomcat负载均衡环境
    mysql索引
    shell脚本
    linux基础知识(四)
  • 原文地址:https://www.cnblogs.com/li1056822533/p/6208807.html
Copyright © 2020-2023  润新知