前端开发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>
      
    <p>2<sup>2sup>p>
    
        <p>赵薇<sup><a href="#">[1]a>sup>p>
     
    <p>H<sub>2sub>Op>    
    <p>
            <del>17.75del> <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>CPUli>
                    <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>cpudt>
            <dd>中央处理器dd>
            <dd>计算机系统的运算和控制核心dd>
            <dt>硬盘dt>
            <dd>计算机的最主要的存储设备dd>
        dl>
    body>
html>

 

转载于:https://www.cnblogs.com/KLExTt/p/11365268.html

你可能感兴趣的:(前端)