HTML笔记 ( 一 ) HTML, HEAD 和 BODY 标签

最新推荐文章于 2021-09-18 19:28:42 发布

leon9dragon

最新推荐文章于 2021-09-18 19:28:42 发布

阅读量1.6k

点赞数 1

分类专栏： HTML + CSS 基础文章标签： html

本文链接：https://blog.csdn.net/leon9dragon/article/details/103806867

版权

HTML + CSS 基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文章目录

0. 前言
1. !DOCTYPE 标签
2. html 标签
3. head 标签
4. body 标签

博主的 Github 地址

0. 前言

一个最基本的 html 文件, 必须包含 <html>, <head> 和 <body> 三个标签以及 <!doctype> 声明

1. !DOCTYPE 标签

作用:

它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令.

注意:

声明必须是 HTML 文档的第一行，位于 <html> 标签之前. 但声明的不是 <html> 标签;
在 H5 中只有一种声明形式: <!DOCTYPE html>

2. html 标签

作用:

是用于定义一个html文档, 用于告知浏览器当前文件是html文档并加以识别.
该标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体.

标签中的两个常见属性:

lang 属性:

作用:
规定元素内容的语言.

xmlns 属性:

作用:
可以在文档中定义一个或多个可供选择的命名空间. 该标签支持HTML中的全局属性.

注:

不建议在 html 标签中用标签自带的某些属性来完成用 CSS 实现的样式
html 标签最好只用于网页结构的布置, 不要用于网页样式的排布修饰

3. head 标签

作用:

是所有头部元素的容器, 绝大多数头部标签的内容不会显示给读者
该标签下所包含的部分可加入的标签有 <base>, <link>, <meta>, <script>, <style> 和
<title>

注意:

该标签必须包含文档的标题 <title> 标签

base 标签

作用:

可以为页面中所有链接规定默认地址或目标

标签两种常见属性:

herf 属性:

作用:
用以填充 <a>, <img>, <link>, <form> 标签中的相对url中的空白部分,
举例:
若设置 <base> 的 herf 属性为 "http://www.leon9dragon.com/img/",
然后设置 <img> 标签中的src属性为 “test.jpg”,
最终会让浏览器从"http://www.leon9dragon.com/img/test.jpg" 这个路径获取图片

target 属性:

作用:
可以通过设置 target 属性来试得在当前页面打开的链接是在父窗口打开还是新窗口打开等新页面打开情况
举例
target="_blank" 则为在新窗口打开页面,
target= “_self” 则覆盖当前窗口打开新页面
还有其它属性, 可自行探究

meta 标签

作用:

该标签的目的是为了告诉搜索引擎爬虫, 关于该网站是关于什么内容的, 该标签中的属性与网站搜索索引有关.

要注意的属性:

content 属性:

作用:
定义与 http-equiv 或 name 属性相关的元信息
始终要和 name 属性或 http-equiv 属性一起使用
若要使用 meta 标签, 这个属性是必要属性

name 属性:

作用:
把 content 属性关联到一个名称
提供了名称 / 值对中的值. 该值可以是任何有效的字符串
name 属性提供了名称/值对中的名称. HTML 和 XHTML 标签都没有指定任何预先定义的名称.
通常情况下, 可以自由使用对自己和源文档的读者来说富有意义的名称.
“keywords” 是一个经常被用到的名称, 为文档定义了一组关键字,
某些搜索引擎在遇到这些关键字时, 会用这些关键字对文档进行分类.
举例
<meta name="keywords" content="HTML,ASP,PHP,SQL">

http-equiv 属性:

作用:
把 content 属性关联到 HTTP 头部

http-equiv 属性为名称/值对提供了名称. 并指示服务器在发送实际的文档之前,
先在要传送给浏览器的 MIME 文档头部包含名称/值对.
当服务器向浏览器发送文档时, 会先发送许多名称/值对. 虽然有些服务器会发送许多这种名称/值对,
但是所有服务器都至少要发送一个: content-type:text/html.
这将告诉浏览器准备接受一个 HTML 文档.
举例
<meta http-equiv="charset" content="iso-8859-1">