当前位置: 首页>编程语言>正文

第3章 认识标签(第二部分)

3-1 使用ul,添加新闻信息列表

在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表、图片列表,如下图所示。


第3章 认识标签(第二部分),第1张
52d383cd0001085503320216.jpg

新闻列表

第3章 认识标签(第二部分),第2张
52d3840f0001575f03260138.jpg

图片列表
这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。
语法:

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

举例:

<ul>
 <li>[精彩少年]</li> 
 <li>[美丽突然出现]</li> 
 <li>[触动心灵的旋律]</li>
</ul>

ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点,如下图所示:

第3章 认识标签(第二部分),第3张
1.jpg

3-2 使用ol,添加图书销售排行榜

如果想在网页中展示有前后顺序的信息列表,怎么办呢?如,当当网上的书籍热卖排行榜,如下图所示。这类信息展示就可以使用<ol>
标签来制作有序列表来展示。

第3章 认识标签(第二部分),第4张
52d3884a00014b0702270264.jpg

语法:
<ol>
   <li>[信息]</li> 
   <li>[信息]</li>
    ......
</ol>

举例:
下面是一个热点课程下载排行榜:

<ol> 
  <li>前端开发面试心法 </li>
  <li>[零基础学习html]</li>
  <li>JavaScript全攻略</li>
</ol>

ol 在网页中显示的默认样式一般为:每项<li>
前都自带一个序号,序号默认从1开始,如下图所示:

第3章 认识标签(第二部分),第5张
2.jpg

3-3 认识div在排版中的作用

在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>
标签中,这个<div>标签的作用就相当于一个容器。
语法:<div>…</div>

确定逻辑部分:
什么是逻辑部分?它是页面上相互关联的一组元素。如网页中的独立的栏目版块,就是一个典型的逻辑部分。如下图所示:图中用红色边框标出的部分就是一个逻辑部分,就可以使用<div>标签作为容器。

第3章 认识标签(第二部分),第6张
3.jpg

3-4 给div命名,使逻辑更加清晰

在上一小节中,我们把一些标签放进<div>里,划分出一个独立的逻辑部分。为了使逻辑更加清晰,我们可以为这一个独立的逻辑部分设置一个名称,用id属性来为<div>提供唯一的名称,这个就像我们每个人都有一个身份证号,这个身份证号是唯一标识我们的身份的,也是必须唯一的。
如下两图进行比较,如果设计师把两个图给你,哪个图你看上去能更快的理解呢?是不是右边的那幅图呢。

第3章 认识标签(第二部分),第7张
4.jpg

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

3-5 table标签,认识网页上的表格

有时候我们需要在网页上展示一些数据,如某公司想在网页上展示公司的库存清单。如下表:

第3章 认识标签(第二部分),第8张
5.jpg

想在网页上展示上述表格效果可以使用以下代码:

第3章 认识标签(第二部分),第9张
6.jpg

创建表格的四个元素:
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、表格中列的个数,取决于一行中数据单元格的个数。

上述代码在浏览器中显示的默认的样式为:

第3章 认识标签(第二部分),第10张
7.jpg

总结:
1、table表格在没有添加css样式之前,在浏览器中显示是没有表格线的
2、表头,也就是th标签中的文本默认为粗体并且居中显示

3-6 用css样式,为表格加入边框

Table 表格在没有添加 css 样式之前,是没有边框的。这样不便于我们后期合并单元格知识点的讲解,所以在这一节中我们为表格添加一些样式,为它添加边框。
在右侧代码编辑器中添加如下代码:

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

上述代码是用 css 样式代码(后面章节会详细讲解),为th
,td单元格添加粗细为一个像素的黑色边框。
结果窗口显示出结果样式:

第3章 认识标签(第二部分),第11张
8.jpg

3-7 caption标签,为表格添加标题和摘要

表格还是需要添加一些标签进行优化,可以添加标题摘要。代码如下:

第3章 认识标签(第二部分),第12张
9.jpg

摘要
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法:<table summary="表格简介文本">

标题
用以描述表格内容,标题的显示位置:表格上方。
语法:

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

3-8 <a>标签,链接到另一个页面

使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。
语法:
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
例如:
<a href="http://www.baidu.com" title="点击进入百度">click here!</a>
上面例子作用是单击click here!文字,网页链接到www.baidu.com这个网页。
title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)
注意:还有一个有趣的现象不知道小伙伴们发现了没有,只要为文本加入a标签后,文字的颜色就会自动变为蓝色(被点击过的文本颜色为紫色),颜色很难看吧,不过没有关系后面我们学习了css样子就可以设置过来(a{color:#000}),后面会详细讲解

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>
</head>
<body>
    <ul>
       <li><a href="#" title="前端开发面试心法">前端开发面试心法</a> </li>
       <li><a href="#" title="零基础学习html">零基础学习html</a></li>
       <li><a href="#" title="JavaScript全攻略">JavaScript全攻略</a></li>
    </ul>
    <p>1922年的春天,一个想要成名名叫尼克•卡拉威(<a  href="http://www.m1905.com/mdb/star/3316/">托比•马奎尔Tobey Maguire 饰</a>)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的美国梦,他搬入纽约附近一海湾居住。</p>
    <p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>
</html>

3-9 在新建浏览器窗口中打开链接

a标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开。
如下代码:
<a href="目标网址"target="_blank">click here!</a>

3-10 使用mailto在网页中链接Email地址

a标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto
做许多其它事情。下面一一进行讲解,请看详细图示:

第3章 认识标签(第二部分),第13张
1.jpg

注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?
”开头,后面的参数每一个都以“&”分隔。
下面是一个完整的实例:
第3章 认识标签(第二部分),第14张
2.jpg

在浏览器中显示的结果:

第3章 认识标签(第二部分),第15张
3.jpg

3-11 认识<img>标签,为网页插入图片

在网页的制作中为使网页炫丽美观,肯定是缺少不了图片,可以使用<img>标签来插入图片。
语法:
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

举例:
<img src = "myimage.gif" alt = "My Image" title = "My Image" />

讲解:
1、src:标识图像的位置;
2、alt:
指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
3、title:**提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
**4、图像可以是GIF,PNG,JPEG格式的图像文件。


https://www.xamrdz.com/lan/5x42016577.html

相关文章: