代码改变世界

d01

2017-09-29 12:11  澄序源  阅读(346)  评论(0)    收藏  举报

基础

 

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   
  <title>查看源码笔记</title>
   
  <style>.a01{background:#f09; width:50%; height:50%;}</style>
  <!--双标<style>下.XXX（名字）{xxxxxxx}为class样式
  #XXX{ }为id样式
  -->
  </head>
   
  <body>
  <div style="width:100%; height:500px; background-color:#0ff;">
  <li type="I"><!--列表里写type=“ ”可以改变列表前数字或者符号类型-->
  <center><font color="#f03" size="7" face="华文行楷">
  <!-- 居中 文字样式 颜色 字号 字体 -->
  我就是实验字</font></center>
  </li>
   
   
  <div class="a01" style="height:500px;">
  <!-- class=“xxxxx”为调用<head>里的class
  id=“ ”为调用<heda>里的id
  -->
  <li type="square">wwww</li>
  <!--sype=“square”列表前符号变为黑色小方块-->
  <li>
  <b>加粗</b>
  <i>倾斜</i>
  <u>下划线</u>
  <h1>标题1（最大）</h1>
  <h6>标题6（最小）</h6>
  这是实验用字<br />
  这是实验用字<br>
  这是实验用字<!--<br>换行行间距小 <p></p>换行行间距大-->
  <p>这是实验用字</p>
  <p>这是实验用字</p>
  </li>
   
  </div>
  <div style=" background-color:#0FF;width:100%;height:500px;">
  <!-- 样式 背景颜色 宽 高-->
  <input type="button" value="按钮">
  <!--文本框 样式 按钮 添加文本为“按钮” -->
  <input type="text;" style="width:200px;">
  <!-- 样式 文本框 -->
   
   
  <ol>
  <ul>
   
  <li>有序列表下嵌套无序列表</li>
   
  </ul>
  </ol>
  <img src="" alt=" "/>
  <!--指向图片地址 图片无法显示时显示alt中的内容-->
  <a href="xxxx">超链接</a>
  <!--超链接 链接到xxxx（网址 图片 锚点等）-->
  <a href="#001">点击我会跳转到name为001的地方去</a>
  <a name="001">001</a><!--锚点-->
  <a href="" target="_blank"></a>
  <!-- 在新的页面打开链接地址也可以用new-->
   
   
   
   
   
  </div>
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
  </body>

表格

<body>
  <div>
  <table border="3" bordercolor="#FF9900">
  <!-- 边框宽度 边框颜色-->
  <tr>
  <td>一行一格基本表格形式</td>
  </tr>
  </table>
  <!-- <tr>行 <td>列（单元格） -->
  </div>
  <div>
  <table border="1" bgcolor="#CC0000"><!--表格全部变为xx色-->
  <!-- 边框 像素（厚度） -->
  <tr bgcolor="#003399"><!--一横行变为xx色-->
  <td bgcolor="#00FF66">单元格</td><!--第一行第一列变为xx色，优先级高与行色-->
  <td>单元格</td>
  </tr>
  <tr>
  <td>单元格</td>
  <td>单元格</td>
  </tr>
  </table>
  </div>
  <div>
  <table border="1" width="100%" height="250px;" bgcolor="#99FFFF">
  <!-- 表格总体大小（宽高）-->
  <tr align="center">
  <!-- 水平方向 居中 （作用为表格内容水平方向居中）-->
  <td>单元格</td>
  <td valign="top">单元格</td>
  <!--表格内容垂直方向 靠顶部 -->
  </tr>
  <tr>
  <td align="center">单元格</td>
  <td>单元格</td>
  </tr>
  </table>
  </div>
  <!--单元格合并时相应的会挤出最后面的格子 所以要在代码里面相应的去除多余的格子
  （单元格和并更像是又添加了一格而不是合并）
  -->
  <table border="5" width="100%" height="300"
  bgcolor="#CC33FF" bordercolor="#FFFF00">
  <tr>
  <td colspan="4"></td>
  <!--单元格的合并合并列加上自身合并几个就为及几-->
  </tr>
   
  <tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  </tr>
   
  <tr>
  <td></td>
  <td rowspan="2"></td>
  <!--合并行-->
  <td rowspan="2"></td>
  <td></td>
  </tr>
   
  <tr>
  <td></td>
  <td></td>
  </tr>
  </table>
  </body>