简单解释HTML5

最新推荐文章于 2022-04-17 07:30:00 发布

山上农夫

最新推荐文章于 2022-04-17 07:30:00 发布

阅读量640

点赞数

分类专栏： HTML5 文章标签： HTML5

本文链接：https://blog.csdn.net/qq_41803637/article/details/80073725

版权

HTML5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

第一章、HTML5篇

一、介绍HTML5

1、介绍：

其是一种由标签组成的超文本标记语言，而非编程语言，一个html5文档就是一个网页。

2、特点

a、html文档描述网页

b、包含标签和纯文本

c、浏览器不会显示HTML标签，而是使用标签解释页面内容

d、标签不会在区分大小写

e、允许属性值不加引号

f、允许部分属性的属性值省略

二、基本的HTML5文档

  <!doctype html>--------------------文档说明：声明文档类型
  <html dir="rtl" lang="zh-CN">---------------标签；lang="zh-cn" 性属说明内容是以中文为显示和阅读基础。
  <head>------------------------------------------------------------------------------------------|
  <meta charset="utf-8">------------编码方式                                                      |
  <base href=”http://www.runoob.com.images/” target=”_blank”>--------页面中所有的链接的默认地址     |
  <meta name="Auston" content="作者">--------作者                                                 |
  <meta name="Keywords" content="关键字">--------这是seo优化的时候                                 头
  <meta name="Description" content="描述">---------这是seo描述的时候                               部
  <meta http-equiv=”refresh”  content="30">------刷新跳转页面                                      |
  <link rel=”stylesheet” type=”text/css” href=”mystyle.css”>-----引用css样式                       |
  <title>无标题文档</title>--------标题                                                            |
  </head>-----------------------------------------------------------------------------------------|
  
  <body>------------------------------------------------------------------------------------------|
  <header>显示头部信息</header>                                                                    |
  <nav>导航信息</nav>                                                                             主
      <main>网页主体内容</main>                                                                   体
      <footer>显示版权等尾部信息</footer>                                                          |
  </body>-----------------------------------------------------------------------------------------|
  </html>

三、HTML标签、元素及属性

1、标签

（1）介绍：

标签是标记和标签的总称，用与标记内容块和元素内容的意义（即语意）的关键字。

（2）形式：

成对标签和单独标签

a、成对标签：包含开始标签和结束标签；

格式：<开始标签>内容<介绍标签>例：<p> </p>;

【附】<head>的内容不会在浏览器中显示出来；<body>标签中的内容会在浏览器中显示出来

例

  
  <br>:换行标签
  <area>：标签定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。
  <base> ：标签为页面上的所有的相对链接规定默认 URL 或默认目标。
  <img>：图片

（2）元素

1）介绍：

由开始标签到结束标签的所有代码

例：

  
  <head><title>我的第一个网页</title></head>   其中<head>是元素，<title>又是嵌套在<head>的另一个元素

【附】元素可以忽视开始标签，甚至结束标签，但是不建议这样做，所以不介绍了

2）属性的定义

a、定义：于元素相关的特性

b、注意：无顺序要求，无大小写要求（推荐小写），不能出现同名，多个之前以空格区分

3）属性值的定义

属性值都是字符串

a、不定义属性值：如果属性值有默认值，可以不定义属性值，如果没有，则要定义属性值

b、属性值中的空白：属性值可以有空白，但是这时候，必须加引号；或者将空白处用“%20”替代（空白的URL编码）

c、属性值的引号：双引号和单引号只能交替使用；或者双引号用“&#39”替代；单引号用"& #39"；单引号之前有空格

四、HTML5的注释

  
  格式：<!--注释内容-->
  使用范围：<body>与</body>之间

五、辅助性元素

（1）添加标题：<title>

标题标记<title>用于设置HTML页面的标题，页面标题将设置与浏览器的左上角，一般为30字以内。

  
  <title>要添加的标题内容</title>

（2）设置基础URL:<base>

基底网址标记<base>一般用于设定浏览器中文件的绝对路径，然后在网页文件的后续的HTML代码中只需要写下文件的相对路径，在浏览器中浏览的时候这些相对位置会自动附在绝对路径后面，成为完整的路径。在网页文档中所有相对地址形式的URL都是相对于这里的URL而言。

  
  <base href="http:wwww.baidu.com">
  格式：<base href="链接地址"
  【附】一个文档中只能出现一个<base>标签，并且只能在头部定义

（3）定义文档关系链接<link>

1）定义关系链接地址

在<link>标签中，href属性用来指向所链接文档的URL，它的值可以是任何有效的文档URL。

  
  <link href="链接地址">

2）向前链接或者反转链接

向前链接（rel）：指定了从当前文档到目标文档的关系（即在本页看到的href属性的URL标明的网页之间的关系）

反转链接（rev）：指定目标文件到当前文档的关系（即从href属性值URL标明的网页看到的与当前网页之间的关系)

两个属性可以在同一个<link>标签中

  
  <link rel="next" href="index.html"/>

属性值

值	描述
alternate	文档的可选版本（例如打印页、翻译页或镜像）。
stylesheet	文档的外部样式表。
start	集合中的第一个文档。
next	集合中的下一个文档。
prev	集合中的前一个文档。
contents	文档目录。
index	文档索引。
glossary	文档中所用字词的术语表或解释。
copyright	包含版权信息的文档。
chapter	文档的章。
section	文档的节。
subsection	文档的子段。
appendix	文档附录。
help	帮助文档。
bookmark	相关文档。

3）链接到外部样式表

type属性

type属性指定目标URL的多用途国际邮件扩展（MIME）类型，最常用的值包括用于外部样式表的text/css，用于JavaScript文件的text/javascript和利用于GIF图像文件的image/gift。MIME类型告诉浏览器所下载的文件的类型是什么以及应该如何处理

  
  格式
  <link rel="stylesheet" type="样式" href="链接文件的地址">
  例
  <head>
  <link rel="stylesheet" type=“text/css” href="main.css">
  </head>

（4）创建内部样式表：<style>

1）介绍：<style>标签的唯一用途就是为文档创建内部样式表

【在后面有专门的介绍，就不雷同了】

（5）添加脚本程序：<script>

1）设置脚本的类型

  
  例
  <head>
  <script type="text/javascript">
  </head>

2）包含外部的脚本

介绍：我们通常把javascript代码和HTML代码文档剥离开，存放在后缀名为“.js”文档中，然后利用“src”属性引用这些外部文件。

  
  格式
  <head>
  <script type="text/javascript" src="文件名">
  </script>
  </head>
  
  例
  <head>
  <script type="text/javascript" src="main.js">
  </script>
  </head>

（6）为文档定义元数据：<meta>

Meta（元数据）是用来描述HTML文档信息的，通过使用<meta>标签为HTML文档定义元数据。这些元数据不会再浏览器上显示，但是对网页的显示和网站的排名很重要。

Meta（元数据）包含了文档的关键字、作者、描述、编码和语言等多种信息，可以在HTML的头部中包括任意梳理的Meta(元数据)。

1）name使用

值	描述	实例
robot	定义搜索引擎的搜索方式，【content属性值在下表】	content="all\|none"其中“\|”代表“或”只去一个
author	规定文档的作者的名字。	meta name="author" content="Hege Refsnes"
description	为搜索引擎提供一份简单的说明	meta name="description" content="Free web tutorials"
generator	用于说明创建网页所用的编辑工具	meta name="generator" content="FrontPage 4.0"
keywords	搜索用的关键字，多个用逗号分开	meta name="keywords" content="HTML, meta tag, tag reference"

content属性值	搜索方式
index	允许搜索到的该网页收录到搜索引擎数据库，noindex反之
follow	允许搜索引擎机器人通过该网页的链接链接到其他网站，nofollow反之
all	都允许，none反之

  
  <head>
  <mata name="author" content="刘二">
  </head>

2）http-equiv使用

介绍：http-equiv：通过指定关键字定义元数据通常用来定义HTTP消息报头的响应式

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

值	描述	例
content-type	设置网页的内容类型和使用的字符集	meta http-equiv="content-type" content="text/html; charset=UTF-8"
default-style	规定要使用的预定义的样式表。注释：上面 content 属性的值必须匹配同一文档中的一个 link 元素上的 title 属性的值，或者必须匹配同一文档中的一个 style 元素上的 title 属性的值。	meta http-equiv="default-style" content="the document's preferred stylesheet"
refresh	定义文档自动刷新的时间间隔。注释：值 "refresh" 应该慎重使用，因为它会使得页面不受用户控制。	meta http-equiv="refresh" content="300"
expires	设置网页的到期时间	meta http-equiv="refresh" content="Tue，24 Jan 2013"
window-target	设置网页加载到那个框架中	meta http-equiv="refresh" content="_top"