基本标签

一、HTML结构

HTML的基本结构:

  • 文档声明:<!DOCTYPE html>
  • html标签对:<html></html>
  • head标签对:<head></head>
  • body标签对:<body></body>

1、文档声明

<!DOCTYPE html>是一个文档声明,表示这是一个HTML页面。

2、HTML标签

HTML标签的作用是告诉浏览器这个页面是从<html>开始,然后到</html>结束的。

在实际的开发中,我们可能会看到这样一行代码:

<html xmlns = "http://www.w3.org/1999/xhtml">

这句代码的作用是告诉浏览器,当前页面使用的是W3C的XHTML标准。这个仅需要了解即可,一般情况下不需要添加这行代码。

3、head标签

<head></head>是网页的“头部”,用于定义一些特殊的内容,如页面标题、定时刷新、外部文件等。

4、body标签

<body></body>是网页的“身体”。对于一个网页来说,大部分代码都是在这个标签内部编写的。

二、head标签

在HTML中,一般来说,只有6个标签能放在head标签中:

  • title标签
  • meta标签
  • link标签
  • style标签
  • script标签
  • base标签

1、title标签

在HTML中,title标签唯一的作用就是定义网页的标题。

2、meta标签

在HTML中,meta标签一般用于定义页面的特殊信息,如页面关键字、页面描述等。这些信息不是提供给用户看的,而是提供给搜索引擎蜘蛛(如百度蜘蛛、谷歌蜘蛛)看的。简单的说,meta标签就是告诉“搜索蜘蛛”这个页面是做什么的。

<meta>标签位于文档的头部,不包含任何内容。<meta>标签的属性定义了与文档相关联的名称/值对。

注:<meta>没有结束标签;<meta>标签永远位于head元素内部;元数据总是以名称/值得形式被成对传递。

必需的属性
属性描述
contentsome_text定义与http-equiv或name属性相关的元信息。

注意:content属性提供了名称/值中的值,该值可以是任何有效的字符串;content属性始终要和name属性或http-equiv属性一起使用。

可选的属性
属性描述
nameauthor ; description ; keywords ; copyright ; generator ; revised ; others把content属性关联到一个名称
http_equivcontent-type ; expires ; refresh ; set-cookie把content属性关联到HTTP头部
schemesome_text定义用于翻译content属性值的格式

(1)name属性

name属性取值
属性值说明
keywords网页的关键字,可以是多个
description网页的描述
author网页的作者
copyright版权信息

(2)http-equiv属性

在HTML中,meta标签的http-equiv属性只有两个重要的作用:定义网页所使用的编码,定义网页自动刷新跳转。

定义网页所使用的编码
语法:

<meta http-equiv = "Content-Type" content = "text/html"; charset = "utf-8"/>

上面这段代码是告诉浏览器该页面所使用的编码是utf-8。不过在HTML5标准中,可以简写为:

<meta charset = "utf-8"/>

如果发现页面打开时乱码,很可能就是没有加上这一句代码。在实际开发中,为了确保不出现乱码,必须在每个页面中加上这句代码。

<meta charset = “utf-8”/>的作用是防止页面出现乱码,在每一个HTML页面中,我们都要加上这句代码。此外<meta charset = “utf-8”/>这一句必须放在title标签以及其它meta标签前面。

定义网页自动刷新跳转
语法:

<meta http-equiv = "refresh" content = "6; url = "http://www.baidu.com"/>

这段代码表示当前页面在6秒后会自动跳转到http://www.baidu.com这个页面。实际上很多“小广告”网站就是这样实现页面定时跳转的。

3、link标签

<link>标签定义文档与外部资源的关系。
<link>标签最常见的用途是链接样式表。

注意:link元素是空元素,它仅包含属性;此元素只能存在于head部分,不过它可出现任何次数。

属性
属性描述
charsetchar_encodingHTML 5中不支持
hrefURL规定被链接文档的位置
hreflanglanguage_code规定被链接文档中文本的语言
mediamedia_query规定被链接文档将显示在什么设备上
relalternate ; author ; help ; icom ; licence ; next ; pingback ; prefetch ; prev ; search ; sidebar ; stylesheet ; tag规定当前文档与被链接文档之间的关系
revreversed relationshipHTML5中不支持
sizesheightxwidth ; any规定被链接资源的尺寸。仅适用于rel = “icon”
target_blank ; _self ; _top ; _parent ; frame_nameHTML5中不支持
typeMIME_type规定被链接文档的MIME类型

4、style标签

style标签用于定义元素的CSS样式,规定在浏览器中如何呈现HTML文档。type属性是必须的,定义style元素的内容。唯一可能的值是“text/css"。

必需的属性
属性描述
typetext/css规定样式表的MIME类型
可选的属性
属性描述
mediascreen ; tty ; tv ; projection ; handheld ; print ; braille ; aural ; all为样式表规定不同的媒介类型。

5、script标签

script标签用于定义客户端脚本,script元素既可以包含脚本语句,也可以通过src属性指向外部脚本文件。必需的type属性规定脚本的MIME类型。JavaScript的常见应用是图像操作、表单验证以及动态内容更新。

必选的属性
属性描述
typeMIME-type指示脚本的MIME类型
可选的属性
属性描述
asyncasync规定异步执行脚本(仅适用于外部脚本)
charsetcharset规定外部脚本文件中使用的字符编码
deferdefer规定是否对脚本执行进行延迟,直到页面加载为止
languagescript不赞成使用。规定脚本语言。请使用type属性替代它
srcURL规定脚本文件的URL
xml:spacepreserve规定是否保留代码中的空白

6、base标签

<base>标签为页面上的所有链接规定默认地址或默认目标。
通常情况下,浏览器会从当前文档的URL中提取相应的元素来填写相对URL中的空白。使用<base>标签可以改变这一点。浏览器随后将不再使用当前文档的URL,而使用指定的基本URL来解析所有相对URL。这其中包括<a>、<img>、<link>、<form>标签中的URL。

必需的属性
属性描述
hrefURL规定页面中所有相对链接的基准URL
可选的属性
属性描述
target_blank ; _parent ; _self ; _top ; framename在何处打开页面中所有的链接

三、HTML注释

在HTML中,对一些关键代码进行注释有很多好处,如方便理解、方便查找以及方便同一个项目组的人员快速理解你的代码。

在HTML中使用”<!–"和“–>"进行注释,注释的内容在浏览器中不会进行显示。在HTML中,浏览器遇到HTML标签就会进行解释,然后显示HTML标签中的内容。但是浏览器遇到”注释标签“就会自动跳过,因此不会显示注释标签中的内容。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值