1. 认识web

1.1 认识网页

网页主要由文字、图像和超链接等元素构成，还可以包含音频、视频以及Flash等。

1.2 常用的浏览器

浏览器是网页显示、运行的平台。常见的IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera，称为五大浏览器

浏览器占市场份额(知晓)

查看网站： http://tongji.baidu.com/data/browser

⭐浏览器内核(理解)

浏览器内核可以分成两部分：渲染引擎(Rendering Engine)和 JS 引擎

JS 引擎则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果

现在，浏览器内核指渲染引擎

作用：负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等)，以及计算网页的显示方式，然后会输出至显示器或打印机

浏览器的内核的不同，对于网页的语法解释会有不同，所以渲染的效果也不相同

常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit

| 浏览器 | 内核 | 备注 |

| :------ | :------------: | :----------------------------------------------------------- |

| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |

| firefox | Gecko | 可惜这几年已经没落了，打开速度慢、升级频繁 |

| Safari | webkit | 现在很多人错误地把 webkit 叫做 chrome内核(即使 chrome内核已经是 blink 了) |

| chrome | Chromium/Blink | Blink 其实是 WebKit 的二次开发。大部分国产浏览器最新版都采用Blink内核。 |

| Opera | Presto | Presto(已经废弃) 是挪威产浏览器 opera 的 "前任" 内核，最新的 opera 浏览器用blink内核。 |

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

Android手机而言，使用率最高的就是Webkit内核

iOS以及WP7平台上，一般是Safari或者IE内核Trident的

1.3 Web标准(重点)

Web 标准的好处

1、让Web的发展前景更广阔

2、内容能被更广泛的设备访问

3、更容易被搜寻引擎搜索

4、降低网站流量费用

5、使网站更易于维护

6、提高页面浏览速度

⭐Web 标准构成

Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。

主要包括结构(Structure)、表现(Presentation)和行为(Behavior)

结构标准：用于对网页元素进行整理和分类 HTML

表现标准：用于设置网页元素的版式、颜色、大小等外观样式 CSS。

行为标准：是指网页模型的定义及交互的编写 Javascript

2. HTML 初识

Hyper Text Markup Language “超文本标签语言”，用来描述网页的一种语言

所谓“超文本”

因为加入了图片、声音、动画、多媒体等内容，还可从一个文件跳转到另一个文件

注意

体会文本标签语言几个词语

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 不是一种编程语言，而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)

总结： HTML 作用就是用标记标签来描述网页，把网页内容在浏览器中展示出来。

2.1 HTML骨架格式

get start

1.HTML标签

最大的标签根标签

2.head标签

文档的头部，描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。

注意：在head标签中，必须设置title

3.title标签

文档的标题

4.body标签

文档的主体包含文档的所有内容

2.2 HTML标签分类

1.双标签

内容标签名>

2.单标签(或空标签)

比如
、

、、、、、、

2.3 HTML标签关系

1.嵌套关系

2.并列关系

补充：快捷键

再页面中输入以下2个单词

1. html: 5

2. !

在vs code里面然后按下enter键盘即可生成HTML骨架

3. ⭐文档类型

标签位于文档的最前面

用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范

浏览器才能按指定的文档类型进行解析

4. 字符集

utf-8是目前最常用的字符集编码方式，常用还有gbk和gb2312

gb2312 简单中文包括6763个汉字

BIG5 繁体中文港澳台等用

GBK包含全部中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312

UTF-8则包含全世界所有国家需要用到的字符

统统使用UTF-8 字符集, 避免出现字符集不统一而引起乱码的情况

5. HTML标签的语义化

⭐为什么要有语义化标签

方便代码的阅读和维护

便于浏览器或网络爬虫解析，从而更好分析其中的内容

使用语义化标签会具有更好地搜索引擎优化

核心

合适的地方给一个最为合理的标签

语义是否良好

去掉CSS后，网页结构依然组织有序，有良好的可读性

白话

一眼看去，就知道哪个是重点，结构是什么，每块的内容是干啥的

6. HTML常用标签

6.1 排版标签(熟记)

排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

1. 标题标签 hn

文档标题

页面标题，依次重要性递减，单词缩写 head

、

和

其基本语法格式如下：

标题文本

注意：一般h1 都是给logo使用，或者页面中最重要标题信息。

2. 段落标签p

单词缩写： paragraph

文本内容

默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行

3. 水平线标签hr

单词缩写： horizontal 横线 [ˌhɔrəˈzɑntl]

是单标签

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

4. 换行标签br

单词缩写： break 打断 ,换行

文本直接敲回车换行，不起作用了(多个空格只显示一个)

5. div span标签(重点)

单词缩写： division 分割，分区 span, 跨度，跨距；范围

这是头部

今日价格

div span 没有语义，网页布局主要的2个盒子 css+div

6.2 文本格式化标签(熟记)

为文字设置粗体、斜体或下划线效果，使文字以特殊的方式显示

⭐b i s u/strong em del ins

b i s u 只有使用，没有“强调”的意思； strong em del ins 语义更强烈

6.3 标签属性

get start

内容标签名>

注意事项

1.标签可以拥有多个属性

2.属性之间不分先后顺序，以空格分开

3.任何标签的属性都有默认值，省略该属性则取默认值

4.采取键值对的格式 key="value" 的格式

提倡：尽量不使用样式属性

img

6.4 图像标签img (重点)

单词缩写： image 图像

src是img标签的必需属性

6.5 链接标签(重点)

单词缩写： anchor [ˈæŋkə(r)] 锚, 铁锚的

文本或图像

1. ⭐href和target属性

href(

html在线笔记,HTML笔记相关推荐

在线教育业务笔记03
在线教育业务笔记03- 讲师banner(轮播图)管理模块一.新建banner微服务 1.在service模块下创建子模块service-cms 2.使用代码生成器生成banner代码 2.1.sq ...
3.17学堂在线python学习笔记
3.17学堂在线python学习笔记重要笔记 Assertion和控制流的关系 Assertions 四号习题集 asdasda 重要笔记 Assertion和控制流的关系在python中,抛出异 ...
python 学堂在线_(3.17学堂在线python学习笔记)
@[TOC](3.17学堂在线python学习笔记) # 重要笔记 ## Assertion和控制流的关系 1. 在python中,抛出异常作为一种检测和控制代码流的重要方式 2. 一个例子帮我们理解 ...
2.27学堂在线python学习笔记
2.27学堂在线python学习笔记注意重要笔记注意学堂在线的python版本较早,在这个版本里还是把range对象认为是生成了list 但是在3.5python中range已经和list不等 ...
python 学堂在线_(3.7学堂在线python学习笔记)
@[TOC](3.7学堂在线python学习笔记) # 重要笔记 1. 启发式算法启发式算法(heuristic algorithm)是相对于最优化算法提出的.一个问题的最优算法求得该问题每个实例的 ...
傲游浏览器怎么创建笔记傲游浏览器笔记创建方法分享
和某些浏览器不同,傲游浏览器中的笔记功能拥有极清爽.极简约.极免费等三大特性,并因此获得了不少用户的青睐.那么,在傲游浏览器中该怎么创建笔记呢?下面小编就来分享一下傲游浏览器笔记创建的方法,有需要的朋 ...
Linux 常用服务搭建笔记(精简笔记)
Linux 常用服务搭建笔记(精简笔记) 阅读目录部署DNS实现解析部署DNS主从同步部署DNS缓存服务部署DNS加密同步部署DNS分离解析部署DNS负载均衡配置DHCP自动分配IP 配 ...
不懂高数，所以我用这本书入门深度学习 | 在线阅读+配套笔记
铜灵发自凹非寺量子位出品 | 公众号 QbitAI 恼人的数学始终是横在深度学习前的一座从未跨越的大山. 对一部人来说,往往在山脚下钻研数日后,就解锁了"从入门到放弃"的新 ...
在线分享notebook笔记的两种方法
在线分享jupyter notebook笔记方法1-使用GitHub存储库方法2-使用nbviewer (nbviewer好像还可以在线编辑及运行) 方法1-使用GitHub存储库 https:/ ...
功能强大，颜值在线的个人笔记应用 - Notion
无论在学校还是工作中,记笔记都是让生活高效有序的有效方式. 常见的个人笔记软件包括: 微软的OneNote 国产的印象笔记今天,我们将要介绍一款IOS扁平风的宝藏App - Notion.本文是一篇 ...

html在线笔记,HTML笔记

、

、

、

、

和

html在线笔记,HTML笔记相关推荐

最新文章

热门文章