文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS标签有哪些及怎么用

2024-04-02 19:55

关注

这篇文章主要介绍了CSS标签有哪些及怎么用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇CSS标签有哪些及怎么用文章都会有所收获,下面我们一起来看看吧。

1,无序列表

ul-li是没有前后顺序的信息列表。

语法:

<ul>

<li>信息</li>

<li>信息</li>

......

</ul>

举例:

<ul>

<li>精彩少年</li>

<li>美丽突然出现</li>

<li>触动心灵的旋律</li>

</ul>

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

2,有序列表

语法:

<ol>

<li>信息</li>

<li>信息</li>

......

</ol>

举例:

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

<ol>

<li>前端开发面试心法 </li>

<li>零基础学习html</li>

<li>JavaScript全攻略</li>

</ol>

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

<div>容器标签

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

语法:

<div>&hellip;</div>

确定逻辑部分:

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

注释:<div> 是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。

创建表格的五个元素:

table、tbody、tr、th、td

1、<table>&hellip;</table>:整个表格以<table>标记开始、</table>标记结束。

2、<tbody>&hellip;</tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。(这个标签基本上不怎么用了)

3、<tr>&hellip;</tr>:表格的一行,所以有几对tr 表格就有几行。

4、<td>&hellip;</td>:表格的一个单元格,一行中包含几对<td>...<td/>,说明一行中就有几列。

5、<th>&hellip;</th>:表格的头部的一个单元格,表格表头。

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

表格还是需要添加一些标签进行优化,可以添加和摘要

<table summary="本表格记录2012年到2013年库存记录,记录包括U盘和耳机库存量">

<caption>2012年到2013年库存记录</caption>

1,使用<a>标签,链接到别一个页面

使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。

语法:

<a href=”目标网址”>链接显示的文本</a>

例如:

<a href = "http://www.imooc.com">click here!</a>

上面例子作用是单击click here!文字,网页链接到http://www.imooc.com这个网页。

认识<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格式的图像文件。

关于“CSS标签有哪些及怎么用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“CSS标签有哪些及怎么用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯