html刷新页面_前端 - HTML基础（1）

最新推荐文章于 2024-01-17 22:55:53 发布

weixin_39610085

最新推荐文章于 2024-01-17 22:55:53 发布

阅读量177

点赞数

文章标签： html刷新页面 html刷新页面不闪烁 html弹出悬浮窗口 html弹出悬浮窗口模版 html弹出窗口 html背景图片铺满网页

HTML基础

HTML基本知识与结构
HTML常见标签
标签写法与嵌套的讨论

HTML、CSS、javascript三者的关系

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

指示 web 浏览器关于页面使用哪个 HTML 版本进行编写,必须写在所有代码的第一行!

如果你的页面添加了，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。

这就是的作用。

固定结构

结构如下：

 ... ...

代码讲解：

称为根标签，所有的网页标签都在中。
标签用于定义文档的头部，它是所有头部元素的容器。头部元素有、标签：
- 在和标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。
meta标签
- meta是html中的元标签，其中包含了对应html的相关信息，客户端浏览器或服务器端的程序会根据这些信息进行处理。
- HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。
- content(内容类型)：重要！！这个网页的格式是文本的，网页模式
- charset(编码)：特别重要！！！这个网页的编码是utf-8，中文编码，需要注意的是这个是网页内容的编码，而不是文件本身的，其他类型的编码中文可能会出现乱码。
- http-equiv="Content-Type" 表示描述文档类型
content="text/HTML; 文档类型，这里为html,如果JS就是text/javascript，
charset=utf-8 页面字符集，编码，eg:gb2312,iso-8859-1,utf-8
- meta标签
meta是html语言head区的一个辅助性标签。几乎所有的网页里，我们可以看到类似下面这段的html代码：
```
  
```
也许你认为这些代码可有可无。其实如果你能够用好meta标签，会给你带来意想不到的效果，例如加入关键字会自动被大型搜索网站自动搜集；可以设定页面格式及刷新等等。
- meta标签的组成
meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
1、name属性
name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
meta标签的name属性语法格式是：
其中name属性主要有以下几种参数：
```
1)Keywords(关键字)　　说明：keywords用来告诉搜索引擎你网页的关键字是什么。　　举例： 2)description(网站内容描述)　　说明：description用来告诉搜索引擎你的网站主要内容。　　举例： 3)robots(机器人向导)　　说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。　　content的参数有all,none,index,noindex,follow,nofollow。默认是all。　　举例： 4)author(作者)　　说明：标注网页的作者　　举例： 
```
2、http-equiv属性
http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
meta标签的http-equiv属性语法格式是：
```
 
```
其中http-equiv属性主要有以下几种参数：
```
1)Expires(期限)　　说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。　　用法： 　　注意：必须使用GMT的时间格式。2)Pragma(cache模式)　　说明：禁止浏览器从本地计算机的缓存中访问页面内容。　　用法： 　　注意：这样设定，访问者将无法脱机浏览。3)Refresh(刷新)　　说明：自动刷新并指向新页面。　　用法： (注意后面的引号，分别在秒数的前面和网址的后面)　　注意：其中的2是指停留2秒钟后自动刷新到URL网址。4)Set-Cookie(cookie设定)　　说明：如果网页过期，那么存盘的cookie将被删除。　　用法： 　　注意：必须使用GMT的时间格式。5)Window-target(显示窗口的设定)　　说明：强制页面在当前窗口以独立页面显示。　　用法： 　　注意：用来防止别人在框架里调用自己的页面。6)content-Type(显示字符集的设定)　　说明：设定页面使用的字符集。　　用法： 7)content-Language(显示语言的设定)　　用法： 
```
meta标签的功能
- 帮助主页被各大搜索引擎登录；
- 定义页面的使用语言
- 自动刷新并指向新的页面
- 实现网页转换时的动画效果
- 控制页面缓冲
- 控制网页显示的窗口
3、style中的属性
- font-size:数值px; 文字大小控制
- color:#六进制的颜色值; 文字颜色控制
- text-align:left/center/right; 文字的居左、居中、居右控制。
标题标签

文章的段落用
标签，那么文章的标题用什么标签呢？下面我们将使用标签来制作文章的标题。
标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。
是最高的等级。
语法：
```
标题文本 (x为1-6)
```
文章的标题前面已经说过了，可以使用标题标签，另外网页上的各个栏目的标题也可使用它们。
例如：
```
 
```
一级标题

二级标题

三级标题

四级标题

五级标题
HTML注释

代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。
语义化

标签的用途：我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途(在什么情况下使用此标签合理)比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。
讲了这么多语义化，但是语义化可以给我们带来什么样的好处呢？
1. 更容易被搜索引擎收录。
2. 更容易让屏幕阅读器读出网页内容。
后面会带领大家学习了解html中每个标签的语义(用途)。

喜欢前端的小伙伴们可以在评论区留言，寻找和小冯童鞋一样热爱前端的友人，让我们一起玩转前端的世界！