学习html（6）

来源：互联网发布：php 按小时区间时间轴编辑：程序博客网时间：2024/06/12 20:51

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>

0 0