整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

「HTML+CSS」html修饰标签介绍,为页面元素添加独立效果

篇文章继续为大家介绍html常用修饰标签介绍。我们今天主要说下样式标签<span>、内容修饰标签<b><i>等的语法以及使用技巧。

1)样式标签<span>

使用语法:<span>文章内容</span>

<span>标签是没有语义的,它的作用就是为了设置单独的样式用的。如果现在我们想要修改一篇文章中的几个字字体效果,为它设置和其它文字不同的样式,所以这样情况下就可以用到<span>标签了。比如我们设置字体颜色为蓝色,并设置字号大小为30px,代码如下图所示:

代码在浏览器中显示的效果就如下图所示:我们可以清楚的看到被span标签包裹的文字内容已经变成了蓝色,字体大小也变成了30px;

2)内容修饰标签

内容修饰标签有很多,这里我们简单的来列举一下标签的名称以及标签的作用。

文字斜体标签: <i></i>、<em></em>

文字加粗标签: <b></b>、<strong></strong>

文字下标标签: <sub></sub>

文字上标标签: <sup></sup>

文字下划线标签: <ins></ins>

文字删除线标签: <del></del>

具体的代码如下所示:

代码在浏览器中显示的效果就如下图所示:每个被标签包裹的内容都赋予了其独立的效果。

好了以上就是我们所说的修饰标签,每个标签都有单独的意义,在以后练习的时候可以自己多实践一下,只有自己亲自动手去写了才能明白其中的含义以及效果。

附赠一句经典语录:每一天,都要尽心尽力的工作,每一件小事情,都力争高效的完成,不是为了看到老板的笑脸,而是为了自身不断的进步。喜欢我的文章的小伙伴记得关注一下哦,每天将为你更新最新知识。

  • TML标签:

  1. 所有内容都在<html></html>标签之内;

  2. <head></head>内放的是头部信息,是对页面的描述,不会直接显示在页面中。

  3. <head></head>内的<title></title>中设置的是页面的标题,<title></title>只能放在<head></head>中;

  4. <body></body>是页面的主体,大部分显示内容都定义在这里。

  • HTML注释:<!-- -->:

    1. 注释不允许嵌套

  • html常用标签:

    1. h标签(标题),HTML定义了<h1></h1>到<h6></h6>六个h标签,分别表示不同大小的字体。h1最大,h6最小。

    2. <br/>只是回车,<p>是段落。<p>前后会有比较大的空白,而<br/>则没有。

    3. <center>居中显示.

    4. <b>、<strong>粗体,<i>、<em>斜体。<u>下划线。

    5. <sub>2</sub>下标,如:H<sub>2</sub>O

    6. <sup>2</sup>上标,如:10<sup>2</sup>

    7. <font></font>字体标签,<font color=“red“ size=“7” face=“隶书”>红色</font>。color(设置颜色) size(1-7) face(设置字体,设置字体是注意用户计算机中必须有该字体才能正常显示)

    8. <hr> color size(厚度) width(长度) align=left/center/right (默认为剧中显示)

    9. <pre> 预格式化 保持本色;

    10. HTML特殊字符:&lt;(小于号,less than);&gt;(大于号,greater than);&nbsp;(空格)。

    11. 超链接:<a>标签的一些常用属性:href、title、target、name

    12. 插入图片:<img src=“路径”/>

    13. 列表:dl→(定义列表),ul→(无序列表), ol→(有序列表)。

    14. 表格:<table>;创建行:<tr>;创建单元格:<td>;表页眉:<thead>;表主体:<tbody>;表页脚:<tfoot>;表头:<th>。

    15. rowspan(合并行)、colspan(合并列)

    16. <input>是主要的表单元素,type的可选值:submit(提交按钮)、button(普通按钮)、checkbox表单标签:(复选框)、file(文件选择框)、hidden(隐藏字段)、image(图片按钮)、password(密码框)、radio(单选按钮)、reset(重置按钮)、text(文本框)。

    • meta标签:(包括在head标签中。主要用来描述页面自身信息,元信息)

    1. <meta name="keywords" content="C#学习资料,4k8k.net,.net开发,软件开发,编程自学网"/>

    2. <meta name="description" content="免费更新最新C#相关技术知识,主要包括:.net基础,网页前端,三层架构,SQL数据库..."/>

    3. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />网页编码

    4. <meta http-equiv="Refresh" content="3" />三秒钟后刷新此网页。

    5. <meta http-equiv="Refresh" content="3;url=http://www.4k8k.net" />三秒钟后重定向到新网页。

    6. <meta http-equiv="Cache-Control" content="no-cache" /> 禁止浏览器缓存页面。

    7. <meta name="名字" content="值" />关于网页的描述信息。

    8. <meta http-equiv="名字" content="值" />模拟http响应头信息。

    C#编程自学_做最好的.net自学资料站_更多文章请访问:http://www.4k8k.net/

    欢迎订阅。

    ss的标签有很多,本篇文章为大家总结以下常用的一些标签以及简单说明这些标签的作用。

    (1) css的文字属性标签

    文字颜色: color: #ffffff;

    文字样式: font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)

    字体大小:font-size:16px;

    文字行高: line-height: 30px;

    文字粗细: font-weight: bold;(粗体) lighter;(细体) normal;(正常)

    文字修饰: text-decoration:line-through; (加删除线)overline;(加顶线)underline;(加下划线)none;(无修饰线)

    对齐方式: text-align:right; (文字右对齐)left;(文字左对齐)center;(内部元素居中)justify;(文字分散对齐)

    使用练习:我们随机书写一段文字,设置文字的颜色为红色,字体样式为斜体,字体大小为20px,行高为35px,字体加粗,加下划线,并是文字居中对齐;那么我们的代码就如下所示:

    在网页中的显示效果就如下图所示:

    (2)css背景样式

    背景样式:background:#f00; (红色背景)background-image : url(/image/bg.gif); (背景图片)background-repeat : repeat;(重复排列-网页默认)background-repeat : no-repeat;(不重复排列)background-repeat : repeat-x; (在x轴重复排列)background-repeat : repeat-y; (在y轴重复排列)

    (3)css边框样式

    边框样式:border-top : 1px solid #f00; (上框线)border-bottom : 1px solid #f00; (下框线)border-left : 1px solid #f00; (左框线)border-right : 1px solid #f00; (右框线)border:1px solid #f00;(上下左右边框)

    其他框线样式:solid(实线框)dotted(虚线框)double(双线框)groove(立体内凸框)ridge(立体浮雕框)inset(凹框)outset(凸框)

    (4)css内边距以及外边距属性

    内边距样式:padding-top:10px; (上边框留空白)padding-right:10px;(右边框留空白)padding-bottom:10px; (下边框留空白)padding-left:10px;(左边框留空白)

    也可以简写成padding:10px 10px 10px 10px;(分别对应上右下左)padding:10px 10px;(上下、左右)padding:10px 10px 10px;(上、左右、下)

    外边距样式:margin-top:10px; (上边界留空白)margin-right:10px;(右边界留空白)margin-bottom:10px; (下边界留空白)margin-left:10px;(左边界留空白)

    也可以简写成margin:10px 10px 10px 10px;(分别对应上右下左)margin:10px 10px;(上下、左右)margin:10px 10px 10px;(上、左右、下)

    使用练习:我们随机书写一段文字,设置文字的背景为灰色,边框为红色 2px 实线框,内边距为10px,外边距为10px;那么我们的代码就如下所示:

    在网页中的显示效果就如下图所示:

    对于css的常用标签今天就先介绍到这里,大家在平时可以自己多加练习练习,熟练一下各个标签的作用。


    每日金句:有时候死扛下去总是会有机会的。喜欢我的文章的小伙伴记得关注一下哦,每天将为你更新最新知识。