HTML+CSS学习笔记（二）

认识标签(二)

1、使用ul，添加没有前后顺序的信息列表
语法：

<ul>
  <li>信息</li>
  <li>信息</li>
   ......
</ul>

默认样式每项li前都自带一个圆点()，ul-li是没有前后顺序。

2、使用ol，展示有前后顺序的信息列表。
语法：

<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>

每项li前都自带一个序号，序号从1开始。

3、div在排版中的作用

语法：

<div>…</div>

可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。(div标签就是一个框，将里面的东西框起来，然后通过css来使这个框按照所需要的样式显示出来)

4、给div命名，使逻辑更加清晰
语法：

<div  id="版块名称">…</div>

为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为<div>提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。

5、使用table标签展示表格效果
例：

<table>
  <tbody>
    <tr>
      <th>...</th>
      <th>...</th>
      <th>...</th>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>

    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        </tr>
  </tbody>
</table>

创建表格的四个元素：

table、tbody、tr、th、td

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。

3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

5、<th>…</th>：表格的头部的一个单元格，表格表头。

6、表格中列的个数，取决于一行中数据单元格的个数。

7、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的

8、表头，也就是th标签中的文本默认为粗体并且居中显示

6、用css样式，为表格加入边框

<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>

添加粗细为一个像素的黑色边框。

7、caption标签，为表格添加标题和概要

例：

<table summary = "表格简介文本">
  <caption> 表格标题 </caption>
  <tr>
    <th>...</th>
    <th>...</th>
    <th>...</th>
    <th>...</th>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
</table>

摘要的内容是不会在浏览器中显示出来的，标题的显示位置：表格上方。

8、使用<a>标签，链接到另一个页面

语法：

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。
href：Hypertext Reference的缩写。意思是超文本引用。

8、在新建浏览器窗口中打开链接

<a href="目标网址" target="_blank">click here!</a>

_blank – 在新窗口中打开链接

_parent – 在父窗体中打开链接

_self – 在当前窗体打开链接,此为默认值

_top – 在当前窗体打开链接，并替换当前的整个窗体(框架页)

<a>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
例如：
<a href = "mailto:xx@samdunk.com?subject=学习计划(主题)&body=好好学习，天天向上(内容)">samdunk的学习计划</a>

9、认识<img>标签，为网页插入图片

语法：

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

1、src：标识图像的位置；

2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

4、图像可以是GIF，PNG，JPEG格式的图像文件。

注意：<a>标签链接Email地址时的格式。