h5

锚点

  从一段文字跳转到另一段文字    

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>

 

posted @ 2020-03-06 13:27  潜伏r  阅读(142)  评论(0编辑  收藏  举报