首页 > > 网页制作 > css >

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

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

前端开发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>