上一篇聊了一些HTML
的发展历史,以及HTML
的规范,现在聊一些基本的标签,以及标签的意义。
其实HTML
有标签的同时,还有一些标签上的属性,其也会让标签的形式的变得多种多样。两者再下面代码演示的时候会同时说,这样更好的理解。
一直说html
标签时HTML
的根节点,其上面也有属性。
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
网页内容
</body>
</html>
上面的lang="en"
就是对html
标签的属性设置,如果看页面显示,似乎不设置,页面演示的内容没有不同,但是为什么还要写呢?
其实这个是对浏览器友好的一种方式,提示浏览器页面的内容主要是用英语还是汉字显示而已。
常见的一些语言代码:
语言 | 缩写 |
---|---|
汉字简体 | zh-CH 甚至可以设置台湾zh-TW ,香港zh-HK |
英语 | en |
这个时候首先我们说一下head
标签下面的一些常用的标签,以及属性。
其实在标签html
下有两个分两个部分一个<head>
和<body>
head
下标签
<head>
元素包含了所有的头部标签元素。在<head>
元素中你可以插入脚本(scripts
), 样式文件(CSS
),及各种meta
信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>
和 <base>
。
下面就演示一下这些标签,以及标签中的属性。
title
其定义不同文档的标题,在HTML文档中是必须的。
定义了有什么意义:
-
定义浏览器工具栏的标题
-
当网页添加到收藏夹时,显示在收藏夹中的标题
-
显示在搜索引擎的结果页面的效果
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>我的文档标题</title> </head> <body> 文档内容...... </body> </html>
其实可以看一下其它网站中title
标签下的内容:
可以看出标签的一些特征,同样大家可以多打开几个网页,看其主要站title
,文章网页的title
以及商品网站的单个商品的title
。可以看出
主页: 网站名称以及主要的关键字或者关键词的描述
详情页:详情的名称以及网站名称和简介
列表页:分页名称以及关键字和网站名称
文章页:标签以及分类和网站名称(截图中演示的可以看出)
meta
meta
标签描述了一些基本的元数据,其提供的元数据,不显示在页面上,但会被浏览器解析。其通常用来网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。其
可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。
其很多时候也是为浏览器引擎服务。
属性 | 作用 |
---|---|
name |
name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。 |
http-equiv |
http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。 |
charset |
告诉浏览器这个页面是什么编码格式,比如UTF-8等 |
name
下的参数
参数 | 作用 | 例子 |
---|---|---|
Keywords |
keywords用来告诉搜索引擎你网页的关键字是什么。 | <meta name="keywords" content="关键字内容"> |
description |
description用来告诉搜索引擎你的网站主要内容。 | <meta name="description" content="主要内容"> |
robots |
robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。 | <meta name="robots" content="none"> |
author |
标注网页的作者 | <meta name="author"content="作者名"> |
http-equiv
下的参数
参数 | 作用 | 例子 |
---|---|---|
Expires(期限) |
可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。 | <meta http-equiv="expires" content="Fri,12Jan200118:18:18GMT"> |
Pragma(cache模式) |
禁止浏览器从本地计算机的缓存中访问页面内容 | <meta http-equiv="Pragma" content="no-cache"> :这样设定,访问者将无法脱机浏览 |
Refresh(刷新) |
<meta http-equiv="Refresh" content="2;URL=http://www.baidu.com">(注意后面的引号,分别在秒数的前面和网址的后面) :其中的2是指停留2秒钟后自动刷新到URL网址。 |
|
Set-Cookie(cookie设定) |
如果网页过期,那么存盘的cookie将被删除 | <metahttp-equiv="Set-Cookie"content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/"> :必须使用GMT的时间格式。 |
content-Type(显示字符集的设定) |
设定页面使用的字符集 | <metahttp-equiv="content-Type"content="text/html;charset=gb2312"> |
content-Language |
显示语言的设定 | <metahttp-equiv="Content-Language"content="zh-cn"/> |
Window-target(显示窗口的设定) |
强制页面在当前窗口以独立页面显示。 | <metahttp-equiv="Window-target"content="_top"> :用来防止别人在框架里调用自己的页面。 |
Cache-Control |
指定请求和响应遵循的缓存机制 | Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached,响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下 Public指示响应可被任何缓存区缓存Private指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效 ;no-cache指示请求或响应消息不能缓存 ;no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。 ,max-age指示客户机可以接收生存期不大于指定时间(以秒为单位)的响应 ;min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应 ;max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。 |
-
为搜索引擎定义关键词
<meta name="keywords" content=""> <!-- keywords 其content 一般其长度不会超过100个字符。 主要内容包含网站名称,分类等 -->
-
为网页定义描述内容:
<meta name="description" content=""> <!-- description 其content描述信息 一般长度为80-120汉字 主要内容为综合的title的内容以及keywords中信息的简单描述 -->
补充:搜索引擎认知的优先级:title>description>kewords
-
每30秒钟刷新当前页面
<meta http-equiv="refresh" content="30">
-
页面字符编码
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>我的文档标题</title> </head> <body> 文档内容...... </body> </html>
编码格式有:
UTF-8(万国码 几乎有全世界上所有语言文字)
,GBK2312(中国信息处理国家标准码定义的简体中文编码)
,GBK(汉字扩展规范,包含了更多的汉字,以及繁体少数民族等)
base
标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<base href="https://blog.csdn.net/u011863822/article/details/121775164" target="_blank">
<title>我的文档标题</title>
</head>
<body>
<!--暂时不用理解a标签,先看效果.后面会讲解这个标签-->
<!--a标签就是超链接标签-->
<a href="https://www.baidu.com/">百度</a>
<br />
<a href="">base的默认的链家</a>
</body>
</html>
link
标签定义了文档与外部资源之间的关系。这个标签通常用于链接到样式表:
<head>
<!-- CSS 这个后面单独在聊一篇吧,大家暂时记住有这个即可 -->
<link rel="stylesheet" type="text/css" href="CSS格式.css">
</head>
style
标签定义了HTML文档的样式文件引用地址.在<style>
元素中你也可以直接添加样式来渲染 HTML 文档,这个有点<script>
标签的格式的感觉
<head>
<!-- CSS 这个后面单独在聊一篇吧,大家暂时记住有这个即可 -->
<style type="text/css">
body {
background-color:yellow}
p {
color:blue}
</style>
</head>
script
这个是HTML
中写JavaScript
逻辑以及导入js文件的标签。
标签用于定义客户端脚本,比如 JavaScript。
元素既可包含脚本语句,也可以通过 “src” 属性指向外部脚本文件。
<script>
document.write("Hello World!")
</script>
因为HTML
的语言一般是由上而下执行的,如果将脚本会调用body中的元素时候,就会报错。
补充
那就问一个神奇的问题,既然JavaScript
可以放在head
和body
两个标签下面,那他们的区别是什么呢?
不同位置的JavaScript的效果
-
JavaScript写在
<body></body>
中
当浏览器载入网页Body部分的时候,就执行其中的JavaScript语句,执行之后输出的内容就显示在网页中。因为HTML
是一般是从上而下执行,JavaScript
也遵守这个原则,所以一般放在body标签中最后面,不然会报错。为什么放在最下面:
首先与 js 的加载有关。js 不同于图片与 css 资源,它是阻塞式的加载。在浏览器加载 js 时,其它资源都不可以并行加载。并且 js 的下载和执行都属于加载,只有 js 执行完成,其它资源才开始加载。 其次,js 引擎线程与 GUI 渲染线程是互斥的,js 在解析执行过程中 GUI 渲染线程会被挂起(渲染的当前状态会被保存)。当 js 执行结束后,渲染线程才会继续。 因此,如果 js 放到 body 中间,会使界面的显示不连贯。
-
JavaScript写在
<head></head>
中
有时候并不需要一载入HTML就运行JavaScript,而是用户点击了HTML中的某个对象,触发了一个事件,才需要调用JavaScript。这时候,通常将这样的JavaScript放在HTML的<head></head>
里。