1day-HTML基础

最新推荐文章于 2024-07-08 17:28:27 发布

DaB210

最新推荐文章于 2024-07-08 17:28:27 发布

阅读量434

点赞数 6

分类专栏： HTML&CSS 文章标签： html 前端

本文链接：https://blog.csdn.net/DaB210/article/details/137057605

版权

HTML&CSS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

HTML 基础

什么是 HTML？

html 全称：Hypertext Markup Language — 超文本标记语言，超文本指的就是除了文本之外，还包含有图片、链接、视频等等。

HTML 的由来及作用

由来：

05 年以前，开发和设计是合在一起的；05 年之后 javascript 崛起，分工开始明细；08 年 HTML5 诞生；12 年 HTML5 普及开来，14 年开始迅猛发展至今。

作用：

实现日常生活中所看到的所有网站里面的内容，包括结构布局、文本、图片、段落之间的样式，以及网特的交互行为（不涉及后台和数据）

HTML5 的基本组成

HTML5 不仅仅代表一个版本，它更是三种语言的结合体（html、css、javascript）

HTML：一种前端的脚本语言，主要用于创建网页的结构
css：层叠样式表，主要用于处理页面元素的样式
javascript：主要用于处理网页的交互行为、动作

HTML 基本结构

一个基本的 HTML 文件需要由文档声明和 HTML 标签部分组成。HTML 标签又分为头部标签和主体标签

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

通俗理解这个结构，就是文档声明可以看作我们在地球上我们定义为人， html 标签就是我们个体，head 头部就像我们的身份证记录着我们的信息。body 就像我们的身体，有手、躯干、头、脚组成。

文档声明

DOCTYPE 是 Document Type 的缩写，DocType元素用于声明整个文档类型定义，通过对他进行定义，告知浏览器当前的文件类型是 html，这样浏览器才会以合适的方式去加载它。

标准模式

浏览器按照 W3C 标准解析执行代码，这样用规定的语法去渲染，就可以兼容各个浏览器，保证以正确的形式展示网页。

怪异模式

浏览器使用自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，可能会造成一套代码展示的网页效果不同。所以我们称之为怪异模式。

DOCTYPE 不区分大小写

<!DOCTYPE html>
<!DOCTYPE html>
<!DOCTYPE html>
<!DOCTYPE html>

head 头部

头部中的内容不会展示到网页中，主要放置的是网页标题、元信息、引用的相关文件等等，并且包含一些全局属性

标题 title

这个标题是我们在头部中使用 titlt 标签定义的，他不会显示到网页内容汇总，只会显示在标签栏上

页面标题的内容对搜索引擎优化（SEO）具有重要意义。通常，较长的描述性标题会比简短或一般性的标题更好。标题的内容是搜索引擎算法用来确定在搜索结果中列出页面顺序的组件之一。但是搜索引擎一般只能显示标题的前 55 ～ 60 个字符，所以标题也不要设置的太长。将核心关键字放到前面最好。

meta 元信息

元信息，指的就是对网页进行描述的信息，网页就是一个信息，那么这个网页有什么属性？主要讲解什么？作者是谁？才用了什么语言？这一系列的信息就是在对这个网页进行描述。

meta 的属性有两种：name 和 http-equiv
name 属性主要用于描述网页，对应 content 属性，以便于搜索引擎查找、分类；
http-equiv 属性相当于 http 的头文件作用，他可以向浏览器传递一些有用的信息，以帮助浏览器正确的、精确的吸纳网页的内容，与之对应的也是 content 属性，他的内容就是各个参数的变量值

meta 的基本语法

<meta name="keywords" content="前端  web" />
<meta name="description" content="这是我的第一个网页的描述信息" />
<meta name="author" content="Kern " />
<meta name="copyright" content="Kern" />

name 属性的常用子属性

keywords：关键词，用于向搜索引擎说明这个网页的关键字是什么，通常会填写多个词语
destiption：描述信息，用于向搜索引擎概括性的介绍这个网页的主要内容是什么
author：作者，用于搜索引擎说明网站的作者
copyright：版权，向搜索引擎说明这个网站的版权拥有者

设置字符编码

<meta charset="utf-8" />

UTF-8 是一种编码格式，为世界通用的编码。如果不设置 UTF-8 那么在不支持其他字符集格式的网页中，所有的汉字都会乱码
常见的字符编码有：ASCll、unicode、GBK、GB2312 等

ASCll：表示英文编码
GBK 和 GB2312:表示简体中文、GB2312 包含大约六千多个汉字，GBK 是 GB2312 的扩充
Unicode：包含了世界上所有的字符，并且每一个符号都是独一无二的，其编码标准有很多种：utf-8、utf-16、utf-32

浏览器的内核

浏览器最核心的部分叫做 rendering Engine 渲染引擎，一般叫他浏览器内核，他的作用就是将我们书写的代码编程我们所看到的网页

为什么要了解浏览器内核

现在市面上有数十款流行的浏览器，除了这些还有几十种浏览器，每个浏览器他们的内核可能也不完全相同，不同的内核对网页的编译语法也有所不同，就会导致同一份代码，在不同的浏览器上显示效果不一样

浏览器	内核	浏览器前缀
ie	Trident	-ms-
谷歌浏览器	Blink（以前是 webkit）	-webkit-
火狐浏览器	Gecko	-moz-
苹果浏览器	Webkit	-webkit-
欧朋浏览器	webkit(以前是 presto)	-webkit-