锚点
从一段文字跳转到另一段文字
1 <p><a name=1></a>这是第一段.......</p> 2 <p>这是第二段</p> 3 <p>这是第三段</p> 4 <p>这是第四段</p> 5 <p>这是第五段</p> 6 <a href="#1">跳到第一段</a>
图片 单标记
<img src="路径" alt=" "/> alt 替换文字 当图片加载失败后显示alt中的字
例:
1 <img src="./dolai.jpg" /> 2 等价于 3 <img src="dolai.jpg" />
一个.当前目录,两个..表示上一级目录
如果在同级文件夹内
<img src="images/dolai.jpg" title="***" /> images为文件夹名字,图片也有悬停文本title
相对路径 从自身出发
1.当资源文件和自身处于同一级目录下 路径直接写文件名(后缀名需要写完整) 2.当资源文件的文件夹与自身处于同一级目录下 路径需要加上文件夹
绝对路径 一般是带盘符的或者具体url地址(谷歌浏览器选中图片右击复制图片地址为绝对路径)
列表
给列表赋予列表的含义
无序列表
ul的儿子只能是li,li的父亲是ul。li可以放任何东西,li也是容器级标签
1 <h1>中国直辖市</h1> 2 <ul> 3 <li>北京</li> 4 <li>上海</li> 5 <li>深圳</li> 6 <li>重庆</li>//无序
有序列表
1 <ol> 2 <li>lily</li> 3 <li>jack</li> 4 <li>lucy</li> 5 <li>mike</li> 6 </ol>
自定义列表
1 <dl> 2 <dt><!-- 标题 --> 3 刘德华 4 </dt> 5 <dd> 6 <!-- 描述 --> 7 歌曲:《忘情水》、《冰雨》 8 </dd> 9 <dd> 10 电影:《少年寺》、《天下无贼》 11 </dd> 12 <dt> 13 <!-- 标题 --> 14 张学友 15 </dt> 16 <dd> 17 <!-- 描述 --> 18 歌曲:《祝福》、《吻别》 19 </dd> 20 </dl>
表格 展示数据或制作表格
1 <table border="1"><!--边框宽度为1--> 2 <tr> 3 <th>学号</th><!--定义标题行居中并加粗--> 4 <th>姓名</th> 5 <th>专业</th> 6 </tr> 7 <tr> 8 <!-- 行 --> 9 <td>1-1</td><!-- 单元格 --> 10 <td>1-2</td> 11 <td>1-3</td> 12 </tr> 13 <tr> 14 <td>2-1</td> 15 <td>2-2</td> 16 <td>2-3</td> 17 </tr> 18 <tr> 19 <td>3-1</td> 20 <td>3-2</td> 21 <td>3-3</td> 22 </tr> 23 </table>
合并单元格
横: colspan
竖: rowspan
1 <table border="1"> 2 <tr> 3 <td>1-1</td> 4 <td>1-2</td> 5 <td>1-3</td> 6 </tr> 7 <tr> 8 <td colspan="2">2-1</td> 9 <td rowspan="2">2-3</td> 10 </tr> 11 <tr> 12 <td>3-1</td> 13 <td>3-2</td> 14 </tr> 15 </table>
完整表格
1 <table border="1"> 2 <caption>学生成绩表</caption><!--表格标题--> 3 <thead> 4 <tr> 5 <th>学号</th> 6 <th>姓名</th> 7 <th>班级</th> 8 <th>成绩</th> 9 </tr> 10 </thead><!--表格头--> 11 <tbody> 12 <tr> 13 <td>1001</td> 14 <td>张三</td> 15 <td>计科1</td> 16 <td>90</td> 17 </tr> 18 <tr> 19 <td>1002</td> 20 <td>王五</td> 21 <td>计科2</td> 22 <td>80</td> 23 </tr> 24 </tbody> 25 <tfoot><!--用来统计--> 26 27 </tfoot> 28 </table>
通过css改变边框
1 <style> 2 table,tr,td{ 3 border-collapse: collapse; 4 /* 细线边框 */ 5 } 6 </style>