HTML5了解

最新推荐文章于 2021-06-23 10:39:45 发布

weixin_41585208

最新推荐文章于 2021-06-23 10:39:45 发布

阅读量139

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_41585208/article/details/99677331

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML5介绍与特点

Hyper text markup language 超文本标记语言主要是对网页的文本，图片，声音进行描述

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5基础标签

标签描述

 <!DOCTYPE> 		定义文档类型。
 <html>				定义 HTML 文档。
<title>				定义文档的标题。
<body>				定义文档的主体。
<h1> to <h6>		定义 HTML 标题。
<p>					定义段落。
<br>				定义简单的折行。
<hr>				定义水平线。
<!--...-->			定义注释。

浏览器了解

浏览器内核（理解面试题）

浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
JS 引擎则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。

（1）Trident(IE内核)

国内很多的双核浏览器的其中一核便是 Trident，美其名曰 “兼容模式”。

代表： IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。

Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML。

（2）Gecko(firefox)

Gecko(Firefox 内核)： Mozilla FireFox(火狐浏览器) 采用该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。可惜这几年已经没落了，比如打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。

（3） webkit(Safari)

Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。

代表浏览器：傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器，

（4） Bink(chrome)

在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。

大部分国产浏览器最新版都采用Blink内核。

（5） Presto(Opera)

Presto 是挪威产浏览器 opera 的 “前任” 内核，为何说是 “前任”，因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。

了解一点：

移动端的浏览器内核主要说的是系统内置浏览器的内核。

目前移动设备浏览器上常用的内核有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit，Android 4.4 之前的 Android 系统浏览器内核是 WebKit，Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink，Windows Phone 8 系统浏览器内核是 Trident。

Web标准（重点）

由于浏览器的内核不同，所以解析出的页面一定有不同

因此需要一套标准来规范我们的浏览器解析

Web 标准的好处

1.web发展更广阔

2.内容能被更多设备访问

3.更容易被搜索引擎搜索

4.使网站更易维护

Web 标准构成

Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

结构标准：结构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分。
样式标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
行为标准：行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分	js

理想状态我们的源码： .HTML .css .js

专业的人，写专业的代码

文档类型<!DOCTYPE>

<!DOCTYPE html>

这句话就是告诉我们使用哪个html版本？我们使用的是 html 5 的版本。 html有很多版本，那我们应该告诉用户和浏览器我们使用的版本号。

标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。

注意：一些老网站可能用的还是老版本的文档类型比如 XHTML之类的，但是我们学的是HTML5,而且HTML5的文档类型兼容很好(向下兼容的原则)，所以大家放心的使用HTML5的文档类型就好了。

字符集（charset）

**不写出现乱码问题**

gb2312 简体中文六千多个汉字

BIG5 繁体中文

GBK(扩展) 兼容GB2312，同支持繁体字

UTF-8 包含所有语言，全世界用的字符

HTML标签的语义化

指标签的含义

为什么要有语义化标签

1.方便阅读和维护

2.让浏览器，爬虫可以更好的解析，可以分析到更优质的数据

3.为搜索引擎提供优化

HTML标签（*）

排版标签

就是骨架的一些标签

标题标签 (熟记)

  <h1>、<h2>、<h3>、<h4>、<h5>、<h6>

标题标签语义：  作为标题使用，并且依据重要性递减

其基本语法格式如下：

<hn>   标题文本   </hn>

h1 标签很重要，所以少用，一般用于logo或标题

段落标签( 熟记)

单词缩写： paragraph 段落

在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是

<p>  文本内容  </p>

最常见的标签，默认情况下，文本或根据我们的浏览器大小来进行换行

水平线标签(认识)

单词缩写： horizontal 横线

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，

就是创建横跨网页水平线的标签。其基本语法格式如下：

<hr />是单标签

在网页中显示默认样式的水平线。

练习

换行标签(熟记)

单词缩写： break 打断 ,换行

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

<br />

这时如果还像在word中直接敲回车键换行就不起作用了。
为什么不用

演示

div span标签(重点)

<div> 这是头部 </div>    <span>今日价格</span

divsion 区域，划分，切割

span 跨度

文本格式化标签(熟记)

在网页中，有时需要为文字设置粗体、斜体、删除线下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

粗体

图像标签img (重点)

单词缩写： image 图像

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签以及和他相关的属性。其基本语法格式如下：

该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

<img src="图像URL" />

标签属性

链接标签(重点)

标签 anchor 铁锚

锚点定位

通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：

1.使用“a href=”#id名>“链接文本"</a>创建链接文本。

2.使用相应的id名标注跳转目标的位置。

base 标签

base 可以设置整体链接的打开状态

base 写到之间

特殊字符标签（理解）

less than

great than

weixin_41585208

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5了解

HTMLHTML5介绍与特点HTML5基础标签浏览器了解浏览器内核（理解面试题）Web标准（重点）Web 标准的好处Web 标准构成文档类型字符集（charset）HTML标签的语义化为什么要有语义化标签HTML标签（*）排版标签标题标签 (熟记)段落标签( 熟记)水平线标签(认识)换行标签(熟记)div span标签(重点)文本格式化标签(熟记)图像标签img (重点)链接标签(重点)锚点定位...
复制链接

扫一扫