0 0 1 4 - head元素之#五壮士
本帖最后由 不二如是 于 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的链接时，该链接地址实际是“”
代码如下：
<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>
这位鱼油，如果喜欢本帖子，请订阅 专辑-->（传送门）（不喜欢更要订阅{:10_278:} ）
官方 Web 课程：
https://www.bilibili.com/video/BV1QW411N762 本帖最后由 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: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>
{:9_218:} 781318059 发表于 2017-1-11 14:18
{:9_240:} {:10_266:} 流月飞星 发表于 2017-2-26 09:53
{:10_278:} 标题里面有乱码咋办。。 向一朵朵鲜花 发表于 2017-3-4 17:27
标题里面有乱码咋办。。
<meta charset="utf-8"> 不二如是 发表于 2017-3-4 17:28
加了。。。还是有。。 不二如是 发表于 2017-3-4 17:28
MMAK{%5DM5T%(YD94R`_0$T`V 这里。。 向一朵朵鲜花 发表于 2017-3-4 17:36
这里。。
你在web专区，发帖，问题求助
把代码贴上
我来看 {:5_100:} <!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:37
你在web专区，发帖，问题求助
把代码贴上
嗯 。。。你先看 不能再求助0-0 向一朵朵鲜花 发表于 2017-3-4 17:39
嗯 。。。你先看 不能再求助0-0
没看到有乱码啊。。。 不二如是 发表于 2017-3-4 17:44
没看到有乱码啊。。。
刚试了下 把utf-8去掉了才不显示乱码 这是成仙了吗。。{:5_111:}【表情】 向一朵朵鲜花 发表于 2017-3-4 17:50
刚试了下 把utf-8去掉了才不显示乱码 这是成仙了吗。。【表情】
<meta charset="gb2312"> 这个肯定没问题
我这个拿safari编译的，浏览器默认支持utf-8
你那边应该是ie，默认浏览器的编码格式是gbk，所以utf-8仍然是乱码
不二如是 发表于 2017-3-4 17:56
这个肯定没问题
我这个拿safari编译的，浏览器默认支持utf-8
感谢0--0 好了 {:5_93:} 他那个乱码应该是没将代码转换成UTF-8格式 交作业
<!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>
页:
[1]
2