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元素即网页的标题。

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

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

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

记住，link是没有结束标签滴
```
<link rel="stylesheet" type="text/css" href="theme.css" />
```
style

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

在0005中我们用来定义CSS样式。

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]”

代码如下：

<base href="https://timgsa.baidu.com/timg" />

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

例如，设置所有的链接均在新窗口中打开，代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>五壮士</title>
    <base href="https://timgsa.baidu.com/timg" />

    <base target="_blank" />
</head>

<body>
<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">
<br />
<p>请注意，我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准URL， 浏览器将在如下地址寻找图片：</p>
<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>
</body>
</html>

meta

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

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

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

综合实战：

<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>五壮士学习</title>
<base href="http://xxx.fishc.com/forum/201612/05/" />

<base target="_blank" />
</head>

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

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

）

官方 Web 课程：

lyzklkl · 发表于 2017-5-8 16:25:59

本帖最后由 lyzklkl 于 2017-5-8 16:28 编辑

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

我在打算写作业的时候打算将老二老师的头像弄下来，
然后就做了这样的尝试

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>llyxz</title>
        <base href="http://bbs.fishc.com/template/dreambred_c_apple/images/common/">
        <base target="_blank">
</head>

<body>
<img src="midavt_shadow.gif">
<p>
        "其实显示的是这个图片 （bbs.fishc.com/template/dreambred_c_apple/images/common//midavt_shadow.gif）"
</p>

</body>
</html>

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

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

然后我就查找问题
图片3

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

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

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

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>llyxz</title>
        <base href="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/">
        <base target="_blank">
</head>
<body>
<img src="bd_logo1_31bdc765.png">
<p>显示的是百度logo</p>
<p>网址是https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png</p>
<p>可以理解成在（https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/）这个文件夹中显示（bd_logo1_31bdc765.png）这张图片</p>
</body>
</html>

终于这次的正常了
图片4

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

我这里不用加斜杠也正常

求解T.T

（我发现我最近脑子有点笨)

MSK · 发表于 2017-7-7 23:47:32

本帖最后由 MSK 于 2017-7-7 23:49 编辑

交！作！业！

<!doctype html>html
<html>
    <head>
        <title>标题</title>
        <meta charset='utf-8'>
        <style text='text/css'>
            html{
                height:100%;
                width:100%;
            }
            body{
                position:relative;
            }
        </style>
        <base href='http://img4.imgtn.bdimg.com/it/' />
    </head>
    <body>
        <div id='img_test'>
            <img src='u=768106160,4208866998&fm=26&gp=0.jpg'>
            <p>请注意，我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准URL， 浏览器将在如下地址寻找图片</p>
            <p>http://img4.imgtn.bdimg.com/it/u=768106160,4208866998&fm=26&gp=0.jpg</p>
        </div>
    </body>
</html>

781318059 · 发表于 2017-1-11 14:18:15

不二如是 · 发表于 2017-1-11 14:21:41

781318059 发表于 2017-1-11 14:18

流月飞星 · 发表于 2017-2-26 09:53:59

不二如是 · 发表于 2017-2-26 10:06:38

流月飞星发表于 2017-2-26 09:53

向一朵朵鲜花 · 发表于 2017-3-4 17:27:30

标题里面有乱码咋办。。

不二如是 · 发表于 2017-3-4 17:28:06

向一朵朵鲜花发表于 2017-3-4 17:27
标题里面有乱码咋办。。

向一朵朵鲜花 · 发表于 2017-3-4 17:32:18

不二如是发表于 2017-3-4 17:28

加了。。。还是有。。

向一朵朵鲜花 · 发表于 2017-3-4 17:33:43

不二如是发表于 2017-3-4 17:28

登录/注册后可看大图

向一朵朵鲜花 · 发表于 2017-3-4 17:36:42

这里。。

不二如是 · 发表于 2017-3-4 17:37:07

向一朵朵鲜花发表于 2017-3-4 17:36
这里。。

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

把代码贴上

我来看

向一朵朵鲜花 · 发表于 2017-3-4 17:37:43

向一朵朵鲜花 · 发表于 2017-3-4 17:39:07

<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>五壮士</title>
<base href="http://xxx.fishc.com/forum/201612/05/" />

<base target="_blank" />
</head>

<body>
<img src="164019axvzvv9wwoxsxmam.gif" /><br />
<p>"http://xxx.fishc.com/forum/201612/05/164019axvzvv9wwoxsxmam.gif"</p>
</body>
</html>

向一朵朵鲜花 · 发表于 2017-3-4 17:39:42

不二如是发表于 2017-3-4 17:37
你在web专区，发帖，问题求助

把代码贴上

嗯。。。你先看不能再求助0-0

不二如是 · 发表于 2017-3-4 17:44:20

向一朵朵鲜花发表于 2017-3-4 17:39
嗯。。。你先看不能再求助0-0

没看到有乱码啊。。。

向一朵朵鲜花 · 发表于 2017-3-4 17:50:52

不二如是发表于 2017-3-4 17:44
没看到有乱码啊。。。

刚试了下把utf-8 去掉了才不显示乱码这是成仙了吗。。

【表情】

不二如是 · 发表于 2017-3-4 17:56:37

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

向一朵朵鲜花 · 发表于 2017-3-4 17:58:55

不二如是发表于 2017-3-4 17:56
这个肯定没问题

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

感谢0--0 好了

会魔法的魔法 · 发表于 2017-3-17 12:19:28

他那个乱码应该是没将代码转换成UTF-8格式

shishunfu · 发表于 2017-4-19 12:01:58

交作业

<!DOCTYPE html>
<html lang="en">
<head>    <!--head元素是HTML文档中所有元数据（Metadata）的集合之处。-->
        <meta charset="UTF-8">    <!--元数据总是以名称/值的形式被成对传递的.必须包含name（元素名称）、http-equiv（编译指令）、charset（字符编码）三种中的一种。-->
        <title>head中的五壮士学习</title>        <!--<title> 元素可定义文档(网页)的标题。-->
        <link rel="stylesheet" type="text/css" href="0009CSS.css">
        <!--link元素，定义了文档与外部资源的关系。用途： 可以实现添加RSS订阅、调用CSS文件、调用图标等功能。-->
        <base href="http://bbs.fishc.com/static/image/smiley/ali/">    <!--<base> 标签为页面上的所有链接规定默认地址或默认目标。-->
        <base target="_blank"/>    <!--target:在何处打开页面中所有的链接。-->
</head>
<body>
<div id="container">
        <img src="ali18.gif"/><br/>
        <p>我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片：</p>
        <p>"http://bbs.fishc.com/static/image/smiley/ali/ali18.gif"</p>
        <p>
                一幅动画图像：
                <img src="eg_cute.gif"/>
                如果想展示该图片则应该去掉base
        </p>
</div>
</body>
</html>

账号		自动登录	找回密码
密码			立即注册

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

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

评分

本帖被以下淘专辑推荐:

点评

点评

评分