学习html（6）_图片标签是内联块状元素是对还是错-CSDN博客

本文链接：https://blog.csdn.net/u011822862/article/details/46757913

1.html学习思维导图

doctype 文档类型声明。

head 浏览器，搜索引擎看。

body 各种标签。

div 各种布局从上到下，从左到右，从大到小。

盒子模型各种属性浮动布局。

CSS效果 1.选择器 2.控制效果：段落控制、文字控制、背景控制 3.引入方式：四种 4.初始化。

html标签无语义标签有语义标签。

2.h标签和p标签

h标签：从h1到h6，不同等级的标题，大小不同，表示文本的不同位置，子越来越小。

p标签：p表示段落，在新闻中，一般h和p经常一起出现，表示每一段的内容。

3.img图片标签

自闭和标签，src引入一个图片文件的路径（绝对路径和相对路径）；alt显示图片信息，既给浏览器看，又给人看；title鼠标放上去，就显示出来效果。

同时可以通过src来盗链其他网站的图片，例如http://address.jpg进行索引到其他网站的图片。

4.img是内联元素还是块状元素

内联元素不换行，块状元素必须要换行。

img不换行，所以是内联元素。但是却是一个特殊的内联元素，是内联替换元素（replaced element），真正的内容来自图片本身。

一般初始化的时候，都将图片设置成块状，display:block，然后再相应对应块状元素来处理。

5.有序列表和无序列表

无序列表：<ul><li></li></ul>。

list-style-type:cricle;空心圆

list-style-type:square;方块

有序列表：<ol><li></li></ol>。

list-style-type:upper-roman;罗马字符

但是一般list-style-type都为none，为了不同的浏览器保持兼容。

通过给li加上背景图片，来添加前面的小图标，增加显示效果。

6.整齐的表格

表格：<table></table>

行：<tr></tr>

列：<td></td>

表格需要利用CSS设置边框才能够显示出效果。

border-collapse：separate（默认独立）和collapse（设置破列融合），在table中设置，边框进行分裂和融合。

border-spacing：默认边框距离。

colspan=”4”，横跨四列，在td中设置。

Rowspan=”4”，横跨四行，在td中设置。

7.table实践，课程表

<!DOCTYPE html>
<html>
<head>
<title>table课程表</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
table{
        border-collapse:collapse;
}	
td{
        border: 2px solid blue;
        width: 70px;
        height: 15px;
        text-align: center;
}
</style>
</head>
    <body>
    	<table>
                      <tr>
                             <td>时间日期</td>
                             <td>1</td>
                             <td>2</td>
                             <td>3</td>
                             <td>4</td>
                             <td>5</td>
                      </tr>
                      <tr>
                            <td rowspan="2">上午</td>
                            <td>语文</td>
                            <td>地理</td>
                            <td>代数</td>
                            <td>数学</td>
                            <td>英语</td>
                     </tr>
                     <tr>
                            <td>语文</td>
                            <td>地理</td>
                            <td>代数</td>
                            <td>数学</td>
                            <td>英语</td>
                     </tr>
                     <tr >
                        <td colspan="6"></td>
                     </tr>

                      <tr>
                            <td rowspan="2">下午</td>
                            <td>语文</td>
                            <td>地理</td>
                            <td>代数</td>
                            <td>数学</td>
                            <td>英语</td>
                     </tr>
                      <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                     </tr>
          </table>
    </body>
</html>