HTML+CSS基础课程学习（2）

课程来源看这里

HTML标签（2）

接着上次博文继续学习html标签

这部分标签比较乱，所以我以编号区别。（1-）

1：<ul><li>标签，用以添加新闻信息列表（无前后顺序），默认样式为每项li前自带一个圆点，具体语法如下：

<ul>
<li>信息一</li>
<li>信息二</li>
……
</ul>

若信息列表有前后顺序（比如排行榜）则用<ol>标签，用法同<ul>默认样式一般为每项<li>前自带一个序号。

2：<div>标签，用于排版，<div>的作用类似于一个容器，将全屏内容分为几块分别装入不同容器中，具体语法如下：

<div>具体信息</div>

为了更好区别每个容器（即<div>），我们用id属性将<div>进行标号，相当于每个人有自己独一无二的身份证号，语法如下：

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

3:网页常常需要展示表格，而创建表格需要五个元素：
（1）：table，整个表格部分以<table>开始，以</table>结尾
（2）：tbody，若表格很长，则可用<tbody>，</tbody>进行分段，然后一部分一部分显示，其特点为：加上<tbody>标签后，<tbody>所包含的行内容下载完优先显示，无需等到表格全部加载完。
（3）：tr，表格的一行，有几行就有几对<tr>,</tr>标签
（4）：th，表格头部的一个单元格，语法：<th>……</th>
（5）：td，表格的一个小单元格，一行中包含几个<td>,</td>就说明一行中有几列表格
此时table表已经建成，但是展示时我们会发现table表上没有表格线，所以我们添加如下代码：（后面学习CSS时会有具体讲解）

<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
此时我们会发现我们为th,td单元格添加粗细为一个像素的黑色边框

一个常用的表格不只有行列单元格和边框，还要有标题，以及摘要，摘要的内容往往不显示，作用仅为增加表格的可读性，使搜索引擎更好的读懂表格内容，也可使屏幕阅读器更好的帮助特殊用户读取表格内容，语法如：<table summary="表格简介文本">而标题则用以描述表格内容，显示位置为表格上方，语法如下：

<table>
<caption>标题文本</caption>
<tr>
<td>……</td>
<td>……</td>
……
</tr>
……
</table>

注：<th>，</th>标签中的文本默认为粗体且居中

4：<a>标签，用于超链接（在当前页面打开新链接），具体语法：

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

例如：<a href="https://www.csdn.net/" title="点击进入CSDN首页">Click Here!</a>
作用为通过单击“Click Here!”文字，超链接到https://www.csdn.net/这个网页

若要在新建浏览器窗口打开链接，则需用到如下代码：

<a href="目标网址" target="_blank">Click Here!</a>

<a>标签还能链接Email地址，举例如下

邮箱地址：mailto
<a href="mailto:yy@csdn.com">发送</a>
抄送地址：cc
<a href="mailto:yy@csdn.com?cc=csdnAdmin@csdn.com">发送</a>
密件抄送地址：bcc
<a href="mailto:yy@csdn.com?bcc=pp@csdn.com">发送</a>
多个收件人，抄送，密件抄送地址： ；
<a href="mailto:yy@csdn.com;pp@csdn.com">发送</a>
邮件主题：subject=
<a href="mailto:yy@csdn.com?subject=发送电子邮件">发送</a>
邮件内容：body=
<a href="mailto:yy@csdn.com?body=欢迎来到CSDN">发送</a>

注：如果mailto后面同时有多个参数，第一个参数必须以“？”开头，后面的每一个参数都以“&”分隔。

例如：<a href="mailto:aa@csdn.com?cc=bb@csdn.com&bcc=dd@csdn.com&subject=主题&body=邮件内容">发送</a>

5：<img>标签，为网页插入图片，语法如下：

<img src="图片地址" alt="下载失败时的替换文件" title="提示文本"/>
其中：
src:标识图像位置
alt:指定图像的描述性文本
title:提供在图像可见时对图像的描述（鼠标滑过时所显示文本）
图像可为GIF PNG JPEG格式的图像文件

更多功能请期待后续更新博文！