基础
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <title>查看源码笔记</title> | |
| <style>.a01{background:#f09; 50%; height:50%;}</style> | |
| <!--双标<style>下.XXX（名字）{xxxxxxx}为class样式 | |
| #XXX{ }为id样式 | |
| --> | |
| </head> | |
| <body> | |
| <div style="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;100%;height:500px;"> | |
| <!-- 样式 背景颜色 宽 高--> | |
| <input type="button" value="按钮"> | |
| <!--文本框 样式 按钮 添加文本为“按钮” --> | |
| <input type="text;" style="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> |