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格式的图像文件
更多功能请期待后续更新博文!