关于HTML

勇敢的皮皮虾2号
80 阅读5分钟

概述

1.工作职位

前端开发工程师
web前端开发工程师
H5开发工程师
nodejs开发工具

2.工作内容

开发桌面版web APP
开发移动端web APP
开发小程序（微信，支付宝，今日头条等等）
开发嵌入式原生APP的网页
开发基于nodejs服务器0

3.技语介绍

3.1web
* 万维网（world wide web）

* 一般称为**WWW**，**W3**,或**web**，是通过internet访问公共网页的互联系统。

3.2web标准

web标准不是一个标准，而是一系列标准的结合。
网页主要是由三个部分组成：
        结构(structure)
        表现（performance）
        行为（behavior）
对应的标也分为三个方面：

结构化标准语言主要包括XHTML和HTML，表现的标准语言主要包括css，行为标准主要包括对象模型（例如w3cDOM），ECMAScript等。

这些标准大部分由万维网联盟（外语缩写W3C）起草和发布，也有一些是其他标准组织制定的标准例如：ECMA(European Computer Manufacturers Association)的ECMAScript标准。

3.3 W3C-万维网联盟提姆

w3c 创建和维护WEB标准。
蒂姆·伯纳斯·李（Tim Berners-Lee）是万维网联盟的创始人又被称为互联网之父。
万维网联盟的创建时间为1994年，是一个国际性的联盟，其宗旨是投身于“引领WEB以激发其全部潜能”
  • W3C表示万维网联盟
  • W3C创建于1994年10月
  • W3C被web开发者蒂姆·伯纳斯·李Tim Berners-Lee创建。
  • W3C为成员国结构组织
  • w3c的工作是进行标准化网络
  • W3C创建和维护的是www标准
  • W3C的标准有W3C建议

最重要的标准有：

  • html

  • css

  • xml

  • dom

浏览器解析过程

  1. 打开浏览器
  2. 输入网址并搜索
  3. 浏览器解析网址并发送DNS服务器
  4. 服务器接收到信息后价相应的HTML,CSS,JS文件等外部资源发送给浏览器。
  5. 浏览器解析将我们的HTML代码称为DOM树结构。
  6. 将CSS代码解析为CSSOM结构（css object model）。
  7. 结合DOM和CSSOM结构渲染树
  8. 生成布局，将所有渲染树的页面进行合并生成。
  9. 将布局会给屏幕

DOCTYPE

1. 什么是DOCTYPE？

DOCTYPE是document type 的缩写，他并不是html标签，也没有结束标签，它是标记语言的文档类型声明，即告诉你浏览器当前HTML是用什么版本缩写的。
注意：DOCTYPE的声明必须是在HTML文档的第一行，在html头标签之前。

2.DOCTYPE的作用

声明文档的解析类型（document.compatmodel），避免浏览器为怪异模式。

document.compatmodel

BackCompat：怪异模式， 浏览器使用自己的怪异模式解析渲染页面 CSS1Compat：标准模式，浏览器使用W3C的标准解析并且渲染页面。

这个属性会被浏览器识别并且使用，但是如果你的页面中没有DOCTYPPE的声明，那么compatmodel默认是BackCompat，浏览器按照自己的方式解析渲染页面，那么不同的浏览器就会显示不同的样式。如果页面添加DOCTYPE,那么就等同于开启了标准模式，那么浏览器就会按照W3C的标准去渲染页面。

3.DOCTYPE取值

HTML5:
    <!DOCTYPE HTML>
HTML 4.01 Stritc
该DTD包含所有的HTML元素和属性，但是不包含展示性的和弃用元素(比如 font)，不允许框架集（Framesets）

HTML 4.01 Frameset
该DTD等同于，允许框架集内容5·   1`

什么是HTML:

HTML(HYPER TEXT MARKUP LANGUAGE)超文本标记语言，使用各种的标签描述内容。

什么是超文本

  1. 超文本比纯文本更加丰富
  2. 超文本可以包含颜色，字体大小等等样式。
  3. 超文本可以包含列表项，段落，表单，表格等等高级结构。
  4. 超文本可以包含图片，视频，音频。
  5. 超文本可以包含链接相互跳转。
  6. 超文本可以描述自身。

以上内容通过标签实现

什么是HTML5:

广义HTML5:和HTML5一同成为标准的WEB前端开发技术的统一名称
HTML5:
- 本地存储
- 定位
- EWBSOCKET(是HTML5开始提供的一个在单个TCP链接上进行全双工通讯的协议)
- 音频の视频
- canvas画布
- 数据库
- 多线程
- 语义化
- 触控手势

CSS3：

- 多列布局
- 边框园角
- 背景渐变
- 阴影
- 动画效果

狭义HTML5:HTML标记语言的最新版本（第5版本），已经是正式标准了。

添加了语义化标签
添加了视频与音频
CANVAS 2D/3D标签称为正式标准

浏览器的工作原理：

一个网页的本质是一个HTML文件，HTML文件本身是为纯文本文件，当我们使用开发工具（文本编辑器）打开一个HTML 文件时，看到的是页面的源代码，而是用浏览器打开HTML 文件时，浏览器会对HTML文本就行解析，将解析后的页面显示在浏览器窗口中。

HTML5的基本用法：

  1. html标签分为两种：单标签，双标签。

    单标签写法<标签名/> 例如: <br/>
双标签写法<头标签><尾标签>; 
例如：<div></div>

  2. 一个html标签分为3部分：标签名，html属性，内容。 例如:< xxx yyy="zzz">aaa< /xxx> 其中xxx代表标签名，yyy代表html属性，zzz代表了属性值，aaa代表了标签内容。

一个标签可以有多个html属性，多个之间可以以空格隔开，属性值使用双引号包括，

HTML属性可以只有属性，没有属性值，开始标签和结束标签之间的文本是标签的内容，单标签没有内容。

avatar
文章
阅读
粉丝