鱼C论坛

 找回密码
 立即注册
查看: 4384|回复: 19

[庖丁解牛] 0 0 1 7 - 文本与超链接

[复制链接]
发表于 2017-1-12 12:08:43 | 显示全部楼层 |阅读模式
购买主题 已有 33 人购买  本主题需向作者支付 2 鱼币 才能浏览

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-4-20 09:23:10 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>链接属性和字体样式类别</title>
  6.         <link href="0009CSS.css" rel="stylesheet" type="text/css">
  7. </head>
  8. <body>
  9. <div id="container">
  10.         <h1>我爱鱼C</h1>
  11.         <p>让编程改变世界!<br/>Change the world by program!</p>
  12.         <a href="http://www.fishc.com/" style="color: blue; text-decoration: none">鱼C传送门</a>
  13.         <a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539" style="color: blue;text-decoration: none">HTML5-庖丁解牛</a>
  14.         <a href="http://bbs.fishc.com/home.php?mod=space&uid=426569&do=index" style="color: blue;text-decoration: none">传送门</a>
  15.         <a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=595" target="_blank">
  16.                 <!--target:规定在何处打开链接文档。-->
  17.                 <section>
  18.                         <h3>JS-庖丁解牛</h3>
  19.                         <p>哇塞,好好玩儿,谁来谁知道</p>
  20.                 </section>
  21.         </a>

  22.         <p>三原色,<span style="color:red">红</span>
  23.                 <span style="color:blue">蓝</span>
  24.                 <span style="color: green">绿</span>
  25.         </p>
  26.         <p><em>欢迎</em>
  27.                 <small>来到</small>
  28.                 <br><strong><q>小天才养殖场</q></strong>
  29.         </p>
  30.         <!--em,斜体,语义加强
  31.                 strong,粗体,突出重要性。
  32.                 big,放大字体
  33.                 small,缩小字体-->
  34. </div>
  35. </body>
  36. </html>
复制代码
0013.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-4-20 09:54
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-1-26 14:56:41 | 显示全部楼层
本帖最后由 type_J 于 2017-1-26 15:05 编辑

这个span元素的应用,我有一个疑问。如果CSS中对p做了样式处理,color:black;  那在语句中的span会是什么效果?我回去试试了。~~

经过确认,是按span内样式执行的。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-1-26 16:50:23 | 显示全部楼层
type_J 发表于 2017-1-26 14:56
这个span元素的应用,我有一个疑问。如果CSS中对p做了样式处理,color:black;  那在语句中的span会是什么效 ...

你说的这个是选择器的优先级

通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选择器a:hover{...} < ID选择器#title{...}
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-1-26 20:00:01 | 显示全部楼层
不二如是 发表于 2017-1-26 16:50
你说的这个是选择器的优先级

通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选 ...

学习了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-27 18:31:45 | 显示全部楼层
不二如是 发表于 2017-1-26 16:50
你说的这个是选择器的优先级

通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选 ...

这应该不是选择器问题吧,两个都是同级别的标签。
这应该是"样式取决于最接近的标签的样式"吧。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-6-26 14:35:53 | 显示全部楼层
一档起步。
  1. <!doctype html>
  2. <html >
  3. <head>
  4.                 <meta  charset="utf-8">
  5.                 <title>文本和超链接</title>
  6.                
  7. </head>
  8. <body>
  9.         <div  id="a">
  10.           <h1>超链接样式</h1>
  11.           </hr />
  12.           <p>超链接样式修炼大法</p>
  13.           <a href="http://www.baidu.com/" target="_blank">
  14.                         <section>
  15.                                         <h1>百度传送门</h1>
  16.                                         <p>纵里寻她千百度,蓦然回首,她还在那个犄角旮旯里</p>
  17.                         </section>
  18.           </a>
  19.           <p>三原色,<span style="color:red">红</span>
  20.             <span style="color:blue">蓝</span>
  21.                 <span style="color:green">绿</span>
  22.           </p>
  23.           <p><em>欢迎</em><small>来到</small><br>
  24.           <strong><big>老司机部落联盟</big></strong><br>
  25.           <cite><big><q>fishman</q></big></cite>
  26.           </p>
  27.         </div>
  28. </body>
  29. </html>
复制代码

点评

我很赞同!: 5.0
我很赞同!: 5
老司机潜力  发表于 2017-6-26 18:20

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 热爱鱼C^_^

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-7-9 10:29:57 | 显示全部楼层
本帖最后由 MSK 于 2017-7-9 10:40 编辑

交!作!业!


  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <title>文本与超链接</title>
  5.         <meta charset='utf-8'>
  6.     </head>
  7.     <body>
  8.         <h1>
  9.             <span style='font-size:30px'>
  10.             <strong>煎蛋最新资讯</strong>
  11.             </span>
  12.         <h1>
  13.         <hr />
  14.         <section style='font-size:15px'>
  15.             <nav>
  16.                 <ol type=1>
  17.                     <li>
  18.                         <article>
  19.                             <a href='http://jandan.net/2017/07/09/injecting-human-blood.html' target='_blank'>
  20.                                 <h3>瘾君子们注射人血以获得快感</h3>
  21.                             </a>
  22.                             <p><em><small>镜子大王 · 健康</small></em></p>
  23.                             <p><q><big>使用者可能认为以这种方式注射药物会产生更为强烈的感觉,或者这个人是想从血液中获得快感。</big></q></p>
  24.                             <figure>
  25.                                 <img src='http://pic.yupoo.com/jdvip/BQSJzdk5/custom.jpg' alt='图片'>
  26.                             </figure>
  27.                         </article>
  28.                     </li>
  29.                     <li>
  30.                         <article>
  31.                             <a href='http://jandan.net/2017/07/09/fml-1046.html' target='_blank'>
  32.                                 <h3>发霉啦小视频:神出鬼没的球</h3>
  33.                             </a>
  34.                             <p><em><small>Mike · 发霉啦</small></em></p>
  35.                             <p><q><big>发霉啦小视频4发~</big></q></p>
  36.                             <figure>
  37.                                 <img src='http://tankr.net/s/custom/DUW3.png' alt='图片'>
  38.                             </figure>
  39.                         </article>
  40.                     </li>
  41.                     <li>
  42.                         <article>
  43.                             <a href='http://jandan.net/2017/07/09/dog-4-2.html' target='_blank'>
  44.                                 <h3>半夜背后凉飕飕:高高狗-4</h3>
  45.                             </a>
  46.                             <p><em><small>喵熊汪太狼 · 故事</small></em></p>
  47.                             <p><q><big>高高狗来了,大家不用敲碗了!!</big></q></p>
  48.                             <figure>
  49.                                 <img src='http://tankr.net/s/custom/FQMV.jpg' alt='图片'>
  50.                             </figure>
  51.                         </article>
  52.                     </li>     
  53.                 </ol>
  54.             </nav>
  55.         </section>
  56.     </body>
  57. </html>
复制代码
turtle_看图王.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-7-14 00:10:16 | 显示全部楼层
今天继续来学习,目标是学到020!
017讲,交作业!!!
017.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-3-11 15:05:38 | 显示全部楼层
继续学习
<!DOCTYPE html>
<html>
<head>
                <meta charset='utf-8'>
                <title>文本与超链接</title>
</head>
        <body>
                <div id="a">
                        <h1>
                                <span style='font-size:50px'>
                                <span style="color:yellow">Dota2</span>
                                <span style="color:black">直播</span>
                        <h1>
                        <hr />
                        <section style='font-size:30px'>
                                <nav>
                                        <ol type=1>
                                                <li>
                                                        <article>
                                                                <a  target='_blank'>
                                                                        <h3>Dota2在线直播</h3>
                                                                </a>
                                                                <p><em><small>Dota2星计划</small></em></p>
                                                                <p><em><small>妹纸主播</small></em></p>
                                                                <p><em><small>中单solo</small></em></p>
                                                                <p><em><small>后期carry</small></em></p>
                                                                <p><q><big>zsmj直播间,快乐dota</big></q></p>
                                                        </article>
                                                </li>
                                        </ol>
                                </nav>
                        </section>
                </div>
        </body>
</html>
360截图20180311150522067.jpg

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2018-3-11 15:40

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 热爱鱼C^_^

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-4-30 13:08:48 | 显示全部楼层
  这兄弟完成的实例效果,我可以用一个h标签和几个p标签完成,不需要和他用那么多不同类的标签,这样会不会更好一点呢
***********************************************************************************
                           </article>
                                                </li>
                                        </ol>
                                </nav>
                        </section>
                </div>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-7-13 23:01:11 | 显示全部楼层
交作业啦!
  1. <!DOCTYPE HTML>
  2. <head>
  3.     <meta charset='utf-8'>
  4.     <title>0017 文本格式和超链接</title>
  5. </head>
  6. <body>
  7.     <a href="http://www.baidu.com">普通度娘</a><br><br>
  8.    
  9.     <a href="http://www.baidu.com" target="_blank">新窗口度娘</a><br><br>
  10.    
  11.     <a href="http://www.baidu.com" target="_blank">
  12.         <img src="https://www.baidu.com/img/bd_logo1.png">
  13.         <h1 >百 <span style="color:black">熊掌</span> 度</h1>
  14.         <p><em>带图 </em><small>配有</small><strong>文字小弟</strong>的<big>度娘</big></p>
  15.     </a><br><br>
  16.    
  17. </body></html>
复制代码


0017.JPG
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-10-14 23:19:38 | 显示全部楼层
  1. <html>

  2. <head></head>

  3. <body>
  4.     <a href="http://bbs.fishc.com/forum-337-1.html" target="_blank">
  5.         <section>
  6.             <h1>小天才养殖场</h1>
  7.             <p>哇塞,好好玩儿,谁来谁知道</p>
  8.         </section>
  9.         传送门</a>
  10.     <p>三原色,<span style="color:red">红</span>
  11.         <span style="color:blue">蓝</span>
  12.         <span style="color:green">绿</span>
  13.     </p>
  14.     <p><em>欢迎</em><small>来到</small><br><strong><big>小天才养殖场</big></strong></p>
  15.     <p><em>欢迎</em><cite>来到</cite><br><strong><big>小天才养殖场</big></strong></p>
  16. </body>

  17. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-11-14 17:19:59 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>0017练习</title>
  6. </head>
  7. <body>
  8.         <a  target="_blank">传送门</a>
  9.         <a  target="_blank">
  10.                 <section>
  11.                         <h1>小天才养殖场</h1>
  12.                         <p>精彩多多,快来围观!</p>
  13.                 </section>
  14.         </a>
  15.         <p>三原色,<span style="color: red">红</span>
  16.                 <span style="color: yellow">黄</span>
  17.                 <span style="color: blue">蓝</span></p>
  18.         <p><em>欢迎</em> <small>来到</small><br><big><strong>小天才</strong>养殖场</big></p>
  19.         <p><em>欢迎</em> <cite>来到</cite><br><big><q><strong>小天才</strong>养殖场</q></big></p>
  20. </body>
  21. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-3-29 12:33:28 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>欢迎来到HTML世界</title>
  6.         <link href="0001.css" rel="stylesheet"><!--获取的文件是style样式表-->
  7. </head>
  8. <body>
  9.         <div id="container"><!--div封装,id区块说明-->
  10.         <h1>我爱鱼C</h1>
  11.                 <p>WWW.FishC.com - 让编程改变世界</p>
  12.         <p>三原色,
  13.                 <span style="color:red">红</span><!--设置局部样式-->
  14.                 <span style="color: blue">蓝</span>
  15.                 <span style="color: green">绿</span>
  16.         </p>
  17.         <p>
  18.                 <em>        斜体</em>
  19.                 <br>
  20.                 <strong>粗体</strong>
  21.                 <br>
  22.                 <big>放大字体</big>
  23.                 <br>
  24.                 <small>缩小字体</small>
  25.                 <br>
  26.                 <cite>不强烈的斜体</cite><em>斜体对比</em>
  27.                 <br>
  28.                 <q>双引号</q>
  29.         </p>
  30.         <a  id="first_Js" target="_blank">传送门
  31.                 </a>
  32.         </div>
  33.        
  34.         <!--<script type="text/javascript"> 直接写在body
  35.                 var first_Js = document.getElementById('first_Js');
  36.                 /*alert(first_Js);测试*/
  37.                 first_Js.onclick = function(e)
  38.                         {
  39.                                 e.preventDefault();
  40.                                 first_Js.innerHTML = "穿越成功";
  41.                         }
  42.         </script>
  43.         -->
  44.         <script src ="0001js.js"></script>

  45. </body>
  46. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-10-26 15:14:48 | 显示全部楼层
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>让编程改变世界</title>
</head>
<body>
    <a href="http://bbs.fishc.com/forum-337-1.html" target="_blank">传送门</a>
    <a href="http://bbs.fishc.com/forum-337-1.html" target="_blank">
        <section>
                <h1>给这段文字添加了超链接</h1>
                <p>谁都可以有超链接,就是超链接不能给超链接加超链接。。。真绕口</p>
        </section>
    </a>
    </a>
    <span>为了给文字加样式,那就使用span标签</span>
    <p>三原色,
    <span style="color:red" >红</span>
    <span style="color:blue">蓝</span>
    <span style="color: green">绿</span>
    </p>
    <em>"em" 斜体,语义加强</em>
    <strong>"strong" 粗体,突出重要性</strong>
    <big>"big" 标签放大字体</big>
    <small>"small" 缩小字体</small>
    <cite>cite 轻微的斜体字 </cite>
    <q>q元素 添加双引号</q>
    <script>

    </script>
</body>
</html>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-8-16 21:15:37 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <base href="http://xxx.fishc.com/forum/201612/05/">
  6.         <base target="_blank">
  7.         <title>RGB</title>
  8.     </head>

  9.     <body>
  10.         <a href="http://bbs.fishc.com/forum-337-1.html" target="_blank">
  11.             <section>
  12.                 <h1>小天才养殖场</h1>
  13.                 <p>哇塞,好好玩儿,谁来谁知道</p>
  14.             </section>
  15.         </a>
  16.         <p>三原色:
  17.             <span style="color: red">红</span>
  18.             <span style="color: green">绿</span>
  19.             <span style="color: blue">蓝</span>
  20.         </p>
  21.     </body>
  22. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 02:11

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表