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样式。
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" />
8. <base target="_blank" />
9. </head>
11. <body>
12. <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">
13. 
14. 请注意，我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准URL，浏览器将在如下地址寻找图片：
15. 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
16. </body>
17. </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" />
请注意，我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片：
"http://xxx.fishc.com/forum/201612/05/164019axvzvv9wwoxsxmam.gif"
</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">
"其实显示的是这个图片（bbs.fishc.com/template/dreambred_c_apple/images/common//midavt_shadow.gif）"
</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">
显示的是百度logo
网址是https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png
可以理解成在（https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/）这个文件夹中显示（bd_logo1_31bdc765.png）这张图片
</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'>
请注意，我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准URL，浏览器将在如下地址寻找图片
http://img4.imgtn.bdimg.com/it/u=768106160,4208866998&fm=26&gp=0.jpg
</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" />
"http://xxx.fishc.com/forum/201612/05/164019axvzvv9wwoxsxmam.gif"
</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>
<meta charset="UTF-8">
<title>head中的五壮士学习</title>
<link rel="stylesheet" type="text/css" href="0009CSS.css">
<base href="http://bbs.fishc.com/static/image/smiley/ali/">
<base target="_blank"/>
</head>
<body>
<div id="container">
<img src="ali18.gif"/>
我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片：
"http://bbs.fishc.com/static/image/smiley/ali/ali18.gif"
一幅动画图像：
<img src="eg_cute.gif"/>
如果想展示该图片则应该去掉base
</div>
</body>
</html>

复制代码

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

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

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

评分

本帖被以下淘专辑推荐:

点评

点评

评分

浏览过的版块