鱼C论坛

 找回密码
 立即注册
查看: 5211|回复: 39

[庖丁解牛] 0 0 1 4 - head元素之#五壮士

[复制链接]
发表于 2017-1-11 11:26:28 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2021-8-11 09:11 编辑

13中我们简单介绍了html根元素的两个属性。

其实最后一个manifest属性,暂时不掌握也没关系。。。

这次我们说一说head元素

head元素是HTML文档中所有元数据(Metadata)的集合之处。

由五个主要部分组成:


  • title

    title元素即网页的标题。

    尽可能方便用户直观了解整个页面内容。
    1. <title>文档的标题</title>

    复制代码



  • link

    link元素,定义了文档与外部资源的关系。

    实现添加RSS订阅、调用CSS文件、调用图标等功能。

    记住,link是没有结束标签
    1. <link rel="stylesheet" type="text/css" href="theme.css" />
    复制代码



  • style

    style元素,用于在页面中定义样式。

    0005中我们用来定义CSS样式。
    Snip20170111_165.png



  • base

    base元素,用于标记文档的基础URL地址。

    例如,将"https://timgsa.baidu.com/timg"设为页面的URL

    则当,页面中存在x.jpg的链接时,该链接地址实际是“[url=https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498368188113&di=f28554e7dabdebf14f2b4eb6d1fcd479&imgtype=0&src=http%3A%2F%2Fimgqn.koudaitong.com%2Fupload_files%2F2015%2F02%2F19%2FFkN1RlDlZ2OxgLmMqdxeinFCPStt.JPG%2521580x580.jpg[/url]”

    代码如下:
    1. <base href="https://timgsa.baidu.com/timg" />
    复制代码


    还可以用来设置全局的浏览器打开方式

    例如,设置所有的链接均在新窗口中打开,代码如下:
    1. <!doctype html>
    2. <html>
    3. <head>
    4.     <meta charset="utf-8">
    5.     <title>五壮士</title>
    6.     <base href="https://timgsa.baidu.com/timg" />

    7.     <base target="_blank" />
    8. </head>

    9. <body>
    10. <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498368188113&di=f28554e7dabdebf14f2b4eb6d1fcd479&imgtype=0&src=http%3A%2F%2Fimgqn.koudaitong.com%2Fupload_files%2F2015%2F02%2F19%2FFkN1RlDlZ2OxgLmMqdxeinFCPStt.JPG%2521580x580.jpg">
    11. <br />
    12. <p>请注意,我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准URL, 浏览器将在如下地址寻找图片:</p>
    13. <p>https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498368188113&di=f28554e7dabdebf14f2b4eb6d1fcd479&imgtype=0&src=http%3A%2F%2Fimgqn.koudaitong.com%2Fupload_files%2F2015%2F02%2F19%2FFkN1RlDlZ2OxgLmMqdxeinFCPStt.JPG%2521580x580.jpg</p>
    14. </body>
    15. </html>
    复制代码

    Snip20170625_3.png


  • meta

    meta元素是head属性中种类最为丰富的一类元素。

    meta元素虽然包含了多种多样的元数据,但他被规定:

    必须包含name(元素名称)、http-equiv(编译指令)、charset(字符编码)三种中的一种。


综合实战:
  1. <!doctype>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>五壮士学习</title>
  6. <base href="http://xxx.fishc.com/forum/201612/05/" />

  7. <base target="_blank" />
  8. </head>

  9. <body>
  10. <img src="164019axvzvv9wwoxsxmam.gif" /><br />
  11. <p>请注意,我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL,浏览器将在如下地址寻找图片:</p>
  12. <p>"http://xxx.fishc.com/forum/201612/05/164019axvzvv9wwoxsxmam.gif"</p>
  13. </body>
  14. </html>
复制代码

Snip20170111_168.png


这位鱼油,如果喜欢本帖子,请订阅 专辑-->传送门)(不喜欢更要订阅


官方 Web 课程:

评分

参与人数 3荣誉 +13 鱼币 +10 贡献 +7 收起 理由
睦ちゃん她爹 + 5 + 5 + 3 鱼C有你更精彩^_^
ttyhtg + 3 + 1 支持楼主!
alltolove + 5 + 5 + 3 感谢楼主无私奉献!

查看全部评分

本帖被以下淘专辑推荐:

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

使用道具 举报

发表于 2017-5-8 16:25:59 | 显示全部楼层
本帖最后由 lyzklkl 于 2017-5-8 16:28 编辑

不知道为什么,我的图片不能加载在文字中间
交作业,最近好久没上过鱼C了,都是为了工作上的那点事,感觉很对不去老二老师

我在打算写作业的时候打算将老二老师的头像弄下来,
然后就做了这样的尝试
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>llyxz</title>
  6.         <base href="http://bbs.fishc.com/template/dreambred_c_apple/images/common/">
  7.         <base target="_blank">
  8. </head>

  9. <body>
  10. <img src="midavt_shadow.gif">
  11. <p>
  12.         "其实显示的是这个图片 (bbs.fishc.com/template/dreambred_c_apple/images/common//midavt_shadow.gif)"
  13. </p>

  14. </body>
  15. </html>
复制代码


但是发现显示的居然是一个白色的条条
图片1



感觉对啊
熟悉老二老师的大家应该知道人家的头像是这样的
图片2


然后我就查找问题
图片3



在网上看到的说是php动态网页,搞了半天我也不懂
所以我就暂时不搞了,感觉这个东西跨度有点大

---------------------------承上启下---------------------------

没办法,我就开始做了第二份作业

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>llyxz</title>
  6.         <base href="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/">
  7.         <base target="_blank">
  8. </head>
  9. <body>
  10. <img src="bd_logo1_31bdc765.png">
  11. <p>显示的是百度logo</p>
  12. <p>网址是https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png</p>
  13. <p>可以理解成在(https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/)这个文件夹中显示(bd_logo1_31bdc765.png)这张图片</p>
  14. </body>
  15. </html>
复制代码


终于这次的正常了
图片4



最后我有一个问题要问老二老师,这个地方加“/”有什么意义呢
图片5



我这里不用加斜杠也正常





求解T.T





                       (我发现我最近脑子有点笨)
1.png
2.png
3.png
4.png
5.png

点评

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

使用道具 举报

发表于 2017-7-7 23:47:32 | 显示全部楼层
本帖最后由 MSK 于 2017-7-7 23:49 编辑

交!作!业!

  1. <!doctype html>html
  2. <html>
  3.     <head>
  4.         <title>标题</title>
  5.         <meta charset='utf-8'>
  6.         <style text='text/css'>
  7.             html{
  8.                 height:100%;
  9.                 width:100%;
  10.             }
  11.             body{
  12.                 position:relative;
  13.             }
  14.         </style>
  15.         <base href='http://img4.imgtn.bdimg.com/it/' />
  16.     </head>
  17.     <body>
  18.         <div id='img_test'>
  19.             <img src='u=768106160,4208866998&fm=26&gp=0.jpg'>
  20.             <p>请注意,我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准URL, 浏览器将在如下地址寻找图片</p>
  21.             <p>http://img4.imgtn.bdimg.com/it/u=768106160,4208866998&fm=26&gp=0.jpg</p>
  22.         </div>
  23.     </body>
  24. </html>
复制代码


turtle_看图王.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-7-8 05:58

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 加油~

查看全部评分

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

使用道具 举报

发表于 2017-1-11 14:18:15 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2017-1-11 14:21:41 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-2-26 09:53:59 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2017-2-26 10:06:38 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-4 17:27:30 | 显示全部楼层
标题里面有乱码咋办。。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-3-4 17:28:06 | 显示全部楼层
向一朵朵鲜花 发表于 2017-3-4 17:27
标题里面有乱码咋办。。

<meta charset="utf-8">
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-4 17:32:18 | 显示全部楼层

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

使用道具 举报

发表于 2017-3-4 17:33:43 | 显示全部楼层


                               
登录/注册后可看大图
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-4 17:36:42 | 显示全部楼层
这里。。
MMAK{]M5T%(YD94R`_0$T`V.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2017-3-4 17:37:07 | 显示全部楼层

你在web专区,发帖,问题求助

把代码贴上

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

使用道具 举报

发表于 2017-3-4 17:37:43 | 显示全部楼层
SZSQF@C0(E2PE]2V9K3TZJJ.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-3-4 17:39:07 | 显示全部楼层
  1. <!doctype>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>五壮士</title>
  6. <base href="http://xxx.fishc.com/forum/201612/05/" />

  7. <base target="_blank" />
  8. </head>

  9. <body>
  10. <img src="164019axvzvv9wwoxsxmam.gif" /><br />
  11. <p>"http://xxx.fishc.com/forum/201612/05/164019axvzvv9wwoxsxmam.gif"</p>
  12. </body>
  13. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-4 17:39:42 | 显示全部楼层
不二如是 发表于 2017-3-4 17:37
你在web专区,发帖,问题求助

把代码贴上

嗯 。。。你先看 不能再求助0-0
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-3-4 17:44:20 | 显示全部楼层
向一朵朵鲜花 发表于 2017-3-4 17:39
嗯 。。。你先看 不能再求助0-0

没看到有乱码啊。。。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-4 17:50:52 | 显示全部楼层
不二如是 发表于 2017-3-4 17:44
没看到有乱码啊。。。

刚试了下 把utf-8  去掉了  才不显示乱码   这是成仙了吗。。【表情】
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-3-4 17:56:37 | 显示全部楼层
向一朵朵鲜花 发表于 2017-3-4 17:50
刚试了下 把utf-8  去掉了  才不显示乱码   这是成仙了吗。。【表情】

<meta charset="gb2312"> 这个肯定没问题

我这个拿safari编译的,浏览器默认支持utf-8

你那边应该是ie,默认浏览器的编码格式是gbk,所以utf-8仍然是乱码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-4 17:58:55 | 显示全部楼层
不二如是 发表于 2017-3-4 17:56
这个肯定没问题

我这个拿safari编译的,浏览器默认支持utf-8

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

使用道具 举报

发表于 2017-3-17 12:19:28 | 显示全部楼层
他那个乱码应该是没将代码转换成UTF-8格式
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-4-19 12:01:58 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>    <!--head元素是HTML文档中所有元数据(Metadata)的集合之处。-->
  4.         <meta charset="UTF-8">    <!--元数据总是以名称/值的形式被成对传递的.必须包含name(元素名称)、http-equiv(编译指令)、charset(字符编码)三种中的一种。-->
  5.         <title>head中的五壮士学习</title>        <!--<title> 元素可定义文档(网页)的标题。-->
  6.         <link rel="stylesheet" type="text/css" href="0009CSS.css">
  7.         <!--link元素,定义了文档与外部资源的关系。用途: 可以实现添加RSS订阅、调用CSS文件、调用图标等功能。-->
  8.         <base href="http://bbs.fishc.com/static/image/smiley/ali/">    <!--<base> 标签为页面上的所有链接规定默认地址或默认目标。-->
  9.         <base target="_blank"/>    <!--target:在何处打开页面中所有的链接。-->
  10. </head>
  11. <body>
  12. <div id="container">
  13.         <img src="ali18.gif"/><br/>
  14.         <p>我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL,浏览器将在如下地址寻找图片:</p>
  15.         <p>"http://bbs.fishc.com/static/image/smiley/ali/ali18.gif"</p>
  16.         <p>
  17.                 一幅动画图像:
  18.                 <img src="eg_cute.gif"/>
  19.                 如果想展示该图片则应该去掉base
  20.         </p>
  21. </div>
  22. </body>
  23. </html>
复制代码
0010.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-3-28 23:49

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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