基本标签
一、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元素内部;元数据总是以名称/值得形式被成对传递。
属性 | 值 | 描述 |
---|---|---|
content | some_text | 定义与http-equiv或name属性相关的元信息。 |
注意:content属性提供了名称/值中的值,该值可以是任何有效的字符串;content属性始终要和name属性或http-equiv属性一起使用。
属性 | 值 | 描述 |
---|---|---|
name | author ; description ; keywords ; copyright ; generator ; revised ; others | 把content属性关联到一个名称 |
http_equiv | content-type ; expires ; refresh ; set-cookie | 把content属性关联到HTTP头部 |
scheme | some_text | 定义用于翻译content属性值的格式 |
(1)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部分,不过它可出现任何次数。
属性 | 值 | 描述 |
---|---|---|
charset | char_encoding | HTML 5中不支持 |
href | URL | 规定被链接文档的位置 |
hreflang | language_code | 规定被链接文档中文本的语言 |
media | media_query | 规定被链接文档将显示在什么设备上 |
rel | alternate ; author ; help ; icom ; licence ; next ; pingback ; prefetch ; prev ; search ; sidebar ; stylesheet ; tag | 规定当前文档与被链接文档之间的关系 |
rev | reversed relationship | HTML5中不支持 |
sizes | heightxwidth ; any | 规定被链接资源的尺寸。仅适用于rel = “icon” |
target | _blank ; _self ; _top ; _parent ; frame_name | HTML5中不支持 |
type | MIME_type | 规定被链接文档的MIME类型 |
4、style标签
style标签用于定义元素的CSS样式,规定在浏览器中如何呈现HTML文档。type属性是必须的,定义style元素的内容。唯一可能的值是“text/css"。
属性 | 值 | 描述 |
---|---|---|
type | text/css | 规定样式表的MIME类型 |
属性 | 值 | 描述 |
---|---|---|
media | screen ; tty ; tv ; projection ; handheld ; print ; braille ; aural ; all | 为样式表规定不同的媒介类型。 |
5、script标签
script标签用于定义客户端脚本,script元素既可以包含脚本语句,也可以通过src属性指向外部脚本文件。必需的type属性规定脚本的MIME类型。JavaScript的常见应用是图像操作、表单验证以及动态内容更新。
属性 | 值 | 描述 |
---|---|---|
type | MIME-type | 指示脚本的MIME类型 |
属性 | 值 | 描述 |
---|---|---|
async | async | 规定异步执行脚本(仅适用于外部脚本) |
charset | charset | 规定外部脚本文件中使用的字符编码 |
defer | defer | 规定是否对脚本执行进行延迟,直到页面加载为止 |
language | script | 不赞成使用。规定脚本语言。请使用type属性替代它 |
src | URL | 规定脚本文件的URL |
xml:space | preserve | 规定是否保留代码中的空白 |
6、base标签
<base>标签为页面上的所有链接规定默认地址或默认目标。
通常情况下,浏览器会从当前文档的URL中提取相应的元素来填写相对URL中的空白。使用<base>标签可以改变这一点。浏览器随后将不再使用当前文档的URL,而使用指定的基本URL来解析所有相对URL。这其中包括<a>、<img>、<link>、<form>标签中的URL。
属性 | 值 | 描述 |
---|---|---|
href | URL | 规定页面中所有相对链接的基准URL |
属性 | 值 | 描述 |
---|---|---|
target | _blank ; _parent ; _self ; _top ; framename | 在何处打开页面中所有的链接 |
三、HTML注释
在HTML中,对一些关键代码进行注释有很多好处,如方便理解、方便查找以及方便同一个项目组的人员快速理解你的代码。
在HTML中使用”<!–"和“–>"进行注释,注释的内容在浏览器中不会进行显示。在HTML中,浏览器遇到HTML标签就会进行解释,然后显示HTML标签中的内容。但是浏览器遇到”注释标签“就会自动跳过,因此不会显示注释标签中的内容。