前端开发HTML&css入门——一些其他常用…

2019-08-26 05:44:13来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

前端开发HTML&css入门——一些其他常用的文本标签

 

em标签和strong标签 i标签和b标签 small标签 cite标签 q标签和blockquote标签
em主要表示语气上的强调,em在浏览器中默认使用斜体显示
strong表示强调的内容,比em更强烈,默认使用粗体显示

i标签中的内容会以斜体显示,b标签中的内容会以加粗显示

h5规范中规定,对于不需要着重的内容而是单纯的加粗或者是斜体,
就可以使用b和i标签

在h5中使用small标签来表示一些细则一类的内容
比如:合同中小字,网站的版权声明都可以放到small

网页中所有的加书名号的内容都可以使用cite标签,表示参考的内容,
比如:书名 歌名 话剧名 电影名 。。。

q标签表示一个短的引用(行内引用)

blockquote标签表示一个长引用(块级引用)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <p>
            已经连着下了<em>一周雨</em></p>
        <p>
            <strong>
                再见不到太阳要死了!
            </strong>
        </p>
                 <p>
            <i>我是i标签中的内容</i>
            <b>我是b标签中的内容</b>
        </p>
               <p>
            我是p标签中的内容<small>我是small标签中的内容</small>
              </p>
               <p>
            <cite>《浪潮之巅》</cite>是最喜欢的一本书
               </p>
                <p>
            子曰:<q>学而时习之不亦说乎!</q>
              </p>
            /*
           需要注意的是,blockquote标签是块元素标签,不能放在p标签里
            */
                <div>
            鲁迅:
            <blockquote>
                时间,就象海棉里的水,只要愿挤,总还是有的。
            </blockquote>
        </div>
    </body>
</html>                                
sup标签 sub标签 del标签 ins标签 pre标签和code标签
设置一个上标 表示一个下标 del标签中的内容,会自动添加删除线 ins中的的内容,会自动添加下划线

pre是一个预格式标签,会将代码中的格式保存,不会忽略多个空格
code专门用来表示代码

我们一般结合使用pre和code来表示一段代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
      <!-- 
            2的平方
        -->
    <p>2<sup>2</sup></p>
    <!-- 
            百科经常用上标和超链接结合
        -->
        <p>赵薇<sup><a href="#">[1]</a></sup></p>
     <!-- 
            水的分子式
        -->
    <p>H<sub>2</sub>O</p>    
    <p>
            <del>17.75</del> <br />
            15.54 <br />
        </p>    
      <p>
            台毒必遭<ins>灭亡</ins></p>
    <pre>
            <code>
                window.onload = function(){
                    alert("Hello World");
                };
            </code>
        </pre>
    </body>
</html>

   列表标签:

无序列表 有序列表 定义列表

使用ul标签来创建一个无序列表
使用li在ul中创建一个一个的列表项,
一个li就是一个列表项

有序列表和无序列表类似,只不过它使用ol来代替ul
有序列表使用有序的序号作为项目符号
ol也是块元素

type属性,可以指定序号的类型
可选值:1, 默认值,使用阿拉伯数字
           2,  a/A 采用小写或大写字母作为序号
           3,  i/I 采用小写或大写的罗马数字作为序号

定义列表用来对一些词汇或内容进行定义
使用dl来创建一个定义列表
dl中有两个子标签
dt : 被定义的内容
dd : 对定义内容的描述
同样dl和ul和ol之间都可以互相嵌套

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
                
        </style>
    </head>
    <body>
    <!--
    无序列表
  -->
        <ul>
            <li>馒头</li>
            <li>包子</li>
            <li>饺子</li>
            <li>豆包</li>
        </ul>     
 <!--
    有序列表
  -->  
<ol type="I">
            <li>结构</li>
            <li>表现</li>
            <li>行为</li>
        </ol>    
</body>
</html>

            列表之间可以互相嵌套。列表项目符号可以删除。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            /*
                 去掉项目符号
             * */
            ul{
                list-style: none;
            }
    </style>
    </head>
    <body>
                        <ul>
            <li>包子</li>
            <li>馒头</li>
            <li>饺子</li>
            <li>豆包</li>
            </ul>
<p>电脑</p>
        <ul>
            <li>
                主机
                <ol>
                    <li>CPU</li>
                    <li>内存</li>
                    <li>硬盘</li>
                </ol>
            </li>
            <li>
                外设
                <ul>
                    <li>键盘</li>
                    <li>鼠标</li>
                </ul>
            </li>
            <li>显示器</li>
        </ul>
        
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        
    </head>
    <body>
        <dl>
            <dt>cpu</dt>
            <dd>中央处理器</dd>
            <dd>计算机系统的运算和控制核心</dd>
            <dt>硬盘</dt>
            <dd>计算机的最主要的存储设备</dd>
        </dl>
    </body>
</html>

 


原文链接:https://www.cnblogs.com/KLExTt/p/11365268.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS样式表可以挂网页木马

下一篇:layui 复选框checkbox 实现全选全选