欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Web前端开发学习笔记 - Day01

程序员文章站 2022-04-20 08:25:14
...

Day01学习笔记

1. 认识网页

网页是如何形成的？
网页学名为HTML文件，主要由文字、图像和超链接构成，还可以包含音频、视频以及动画等。
所见的网页由：前端代码 → 浏览器内核渲染 → 用户页面

2. 常用浏览器内核

浏览器是网页显示、运行的平台，常用的五大浏览器：IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera。
Windows 10的浏览器有两款，除了IE还有一个Microsoft Edge。

2.1 浏览器内核

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

常用的浏览器内核分为四种：Trident、Gecko、Blink、Webkit。

1. Trident（IE内核）
	IE、猎豹安全、360极速浏览器、百度浏览器
2. Gecko（Firefox内核）
	逐渐没落，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
3. Webkit（Safari内核
	谷歌已经不再用Webkit内核，这个内核是苹果的。苹果已经哭晕在厕所了。
4. Chromium/Blink（Chrome内核）
	Blink为Webkit内核的分支。大部分国产浏览器都采用谷歌的Blink内核。
5. Presto（Opera内核）已经废弃
	Opera浏览器现在用Blink内核。
6. EdgeHTML（Microsoft Edge内核）
	微软Win10自带浏览器内核

2.2 移动端浏览器内核

移动端的浏览器内核主要用的是系统内置浏览器的。
Android手机 使用最多的是Webkit内核，国内大部分浏览器的内核基本都属于Webkit二次开发。
IOS以及WP7平台上，系统大部分自带浏览器内核，一般是Safari的Webkit内核或者IE的内核Trident。

☆☆我可以☆☆

熟记对浏览器内核的理解，以及熟记常用的浏览器及对应的内核是什么？

浏览器内核包括两部分，渲染引擎和JS引擎。
渲染引擎负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
JS引擎是解析执行JS代码获取网页的动态效果。
因为现在JS引擎越来越独立，内核倾向于指渲染引擎。
~
IE：Trident内核
Firefox：Gecko内核
Chrome、Safari：Webkit内核
Chrome：Blink内核
Opera：Presto内核、Blink内核（最新版本使用）
Microsoft Edge：EdgeHTML内核

3. Web 标准（重点）

Web标准是由W3C组织和其他标准化组织指定的一系列标准的集合
W3C万维网联盟是国际最著名的标准化组织，1994年成立。

4. Web 标准的好处

  • 让Web的发展前景更广阔
  • 内容能被更广泛的设备访问
  • 更容易被搜寻引擎搜索
  • 降低网站流量费用
  • 使网站更易于维护
  • 提高页面浏览速度

5. Web 标准构成

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

结构标准：结构用于对网页元素进行整理和分类，主要是HTML。
表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要是CSS。
行为标准：行为是指网页模型的定义及交互的编写，主要包括对象模型（DOM）、ECMAScript等，让网页富有生命力和动态。

Web标准总结

  1. 结构标准：决定你是否有个天然好身体
  2. 表现标准：决定你是否打扮的美丽外观
  3. 行为标准：决定你是否有吸引人的行为

☆☆我可以☆☆

能说出网页中Web标准三层的组成，以及能结合人来表述Web标准三层。

Web标准的三层：结构（Structure）、表现（Presentation）和 行为（Behavior）
结构标准：决定你是否有个天然好身体
表现标准：决定你是否打扮的美丽外观
行为标准：决定你是否有吸引人的行为

6. HTML简介

HTML的全称为超文本标记语言（Hyper Text Markup Language）
所谓超文本，是因为它可以加入图片、声音、动画、多媒体等内容，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (Markup Language)
  • 标记语言是一套标记标签 (Markup Tag)

总结

  • 网页是由网页元素组成的 ， 这些元素是利用html标签描述出来，然后通过浏览器解析，就可以显示给用户了。简而言之，HTML语法是用来描述文档内容的。

☆☆我可以☆☆

1. 什么是XHTML？

XHTML是更严格更纯净的 HTML 代码。

2. HTML和XHTML之间的区别？

  • XHTML 指的是可扩展超文本标记语言
  • XHTML 与 HTML 4.01 几乎是相同的
  • XHTML 是更严格更纯净的 HTML 版本
  • XHTML 是以 XML 应用的方式定义的 HTML
  • XHTML 是 2001 年 1 月发布的 W3C 推荐标准
  • XHTML 得到所有主流浏览器的支持
  • XHTML 元素是以 XML 格式编写的 HTML 元素。XHTML是严格版本的HTML，例如它要求标签必须小写，标签必须被正确关闭，标签顺序必须正确排列，对于属性都必须使用双引号等。

6.1 HTML文档结构

组成文档结构的元素只有4个，文档扩展名为 .html。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网站标题</title>
	</head>
	<body>
		页面内容
	</body>
</html>

文档结构说明

  • <!DOCTYPE html>文档类型和版本的声明（HTML5版本号可以省略）。
  • <head>元素提供了关于这篇文档的信息。
  • <title>定义页面标题。
  • <body>定义文档的主体，用户所看到的内容。
  • charset="UTF-8"字符集
    • utf-8是目前最常用的字符集编码方式。俗称万国码。包含全世界所有国家需要用到的字符。
    • gb2312 简单中文，包括6763个汉字。
    • BIG5 繁体中文，港澳台等用。
    • GBK包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312。
  • lang：HTML 的 lang 属性可用于网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的。
    • 根据 W3C 推荐标准，应该通过<html>标签中的 lang 属性对每张页面中的主要语言进行声明。

6.2 HTML元素

  • 开始标签（Opening tag）： 开始标签有标签名和尖括号组成。
  • 闭合标签（Closing tag）： 闭合标签在标签名之前多了一个斜线（/）。
  • 内容（Content）： 元素的内容。
  • 元素（Element）： 由开始标签、闭合标签以及标签之间的内容组成。

当然，有一些元素是单标签，通常用于在页面中插入一些东西。

6.3 HTML属性

元素可以用属性进行配置。属性由属性名和属性值组成：

  • 属性总是写在开始标签中。
  • 属性名和元素名之间要有一个空格。
  • 属性名后面要跟一个等号（=）。
  • 属性值使用双引号或单引号括起来。如果属性值本身含有引号，那两种引号都要用到。
  • 一个元素可以有多个属性，这些属性之间以空格分隔。

6.4 HTML标签分类

  1. 双标签
    <标签名> 内容 </标签名>
  2. 单标签
    <标签名 />

6.5 HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
例如：<br />换行。

6.6 HTML 标签关系

  1. 嵌套关系
<head>
	 <title></title>
 </head>
  1. 并列关系
<head></head>
<body></body>

7. HTML 标签的语义化

所谓标签语义化，就是指标签的含义。

根据标签的语义，在合适的地方给一个最为合理的标签，让结构更清晰。

7.1 为什么要有语义化标签

  1. 方便代码的阅读和维护
  2. 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
  3. 使用语义化标签会具有更好地搜索引擎优化
  • 核心：合适的地方给一个最为合理的标签。
  • 语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。
  • 一眼看去，就知道那个是重点，结构是什么，知道每块的内容是干啥的。
    遵循的原则：先确定语义的HTML ，再选合适的CSS。

8. HTML常用标签

8.1 排版标签

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

8.1.1 标题标签

单词缩写： head 头部. 标题 title 文档标题

 <h1>一级标题</h1>
 <h2>二级标题</h2>
 <h3>三级标题</h3>
 <h4>四级标题</h4>
 <h5>五级标题</h5>
 <h6>六级标题</h6>

注意： h1 标签因为重要，尽量少用，不要动不动就向你扔了一个h1。 一般h1 都是给logo使用，或者页面中最重要标题信息。

8.1.2 段落标签

单词缩写： paragraph 段落 [ˈpærəgræf]

<p>  文本内容  </p>

是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

8.1.3 水平线标签

单词缩写： horizontal 横线 [ˌhɔrəˈzɑntl]
创建横跨网页水平线的标签

<hr />是单标签

8.1.4 换行标签

单词缩写： break 打断 ,换行

<br />强制换行

8.1.5 div以及span标签

div 和 span 没有语义，主要用于网页布局。

<div> 这是div </div>    <span>这是span</span>

排版标签总结

标题标签： <hx></hx> 作为标题使用，并且依据重要性递减
段落标签： <p></p> 可以把HTML文档分隔为若干段落
水平线标签： <hr /> 页面出现一条水平线
换行标签： <br /> 强制换行
div标签： <div></div> 用来布局，作为容器，一行一个
span标签： <span></span> 用来布局，作为容器，一行可以多个

8.2 文本格式化标签

加粗标签： <b></b>和<strong></strong>
斜体标签： <i></i>和<em></em>
删除线标签： <s></s>和<del></del>
下划线标签： <u></u>和<ins></ins>
b、 i 、s、 u 只有使用 没有 强调的意思 strong、em 、del 、ins 语义更强烈

8.3 图像标签 img

单词缩写： image 图像

<img src="图像URL" />

必要属性：

  • src：该属性指定图片文件所在的位置，可以是相对路径，也可以是绝对路径。
  • alt：该属性指定一段文本，用来作为该图片的提示信息。

可选属性：

  • height：指定图片的高度，属性值可以是百分比，也可以是像素值。
  • width：指定图片的宽度，属性值可以是百分比，也可以是像素值。
  • title：提示条(tooltip)呈现给用户，在光标于图片上停下后显示出来。

8.4 链接标签

单词缩写： anchor 的缩写 [ˈæŋkə®] 。基本解释 锚, 铁锚 的

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

必要属性：

  • href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用。
  • target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

注意：

  1. 外部链接 需要添加 http://
  2. 内部链接 直接链接内部页面名称即可 比如 < a href="index.html">
  3. 没有目标时，暂时用#代替
  4. 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

8.5 锚点定位

创建锚点链接分为两步：

1. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的） （对暗号）  暗号一致是组织的人员
  <a href="#two">   

2. 使用相应的id名标注跳转目标的位置。 (找目标)
  <h3 id="two">第2集</h3>

8.6 head 元素

 <head> 元素包含了所有的头部标签元素。在 <head>元素中可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

<head> 定义了文档的信息
<title> 定义了文档的标题
<style> 定义了文档的样式文件
<link> 定义了文档和外部资源的关系
<meta> 定义了文档的元数据
<script> 定义了客户端的脚本文件

提示：

  • link:除使用外部文档外,给网页添加小图标也经常使用link标签。
给网页添加icon小图标的两种方式
<link rel="shortcut icon" href="url" type="image/x-icon"> 
<link rel="icon" href="url" type="image/x-icon">
  • meta用法举例
<meta name="keywords" content="网站关键字" />
<meta name="description" content="网站介绍" />

8.7 特殊字符

常用的有：&nbsp；半角空格、&emsp；全角空格、&lt；左尖括号、&gt；右尖括号。

8.8 注释字符

<!-- 注释内容 -->

9. 路径

路径分为： 相对路径和绝对路径

9.1 相对路径

以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

  1. 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="xx.jpg" />。
  2. 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="xx/xx/xx.jpg" />。
  3. 图像文件位于HTML文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如<img src="../xxx.jpg" />。

9.2 绝对路径

绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。
D:\xxx\xxx\xxx，或完整的网络地址，例http://www.baidu.com/images/logo.gif。

Day01 总结

  1. 了解了网页是如何形成的。
  2. 加深了对浏览器内核的理解，以及了解了常用的浏览器和对应的浏览器内核。
  3. 认识了Web标准，了解了Web标准的构成以及W3C组织。
  4. 认识了HTML的基本简介，了解了HTML的用法和构成。也了解了什么是XHTML，XHTML和HTML之间的区别。
  5. 学会了HTML的文档结构，以及HTML的元素构成、HTML属性、HTML标签分类、HTML标签关系及HTML标签的语义化。
  6. 熟练掌握了HTML的一些常用标签，例如排版标签、文本格式化标签、图像标签、链接标签。
  7. 学会了head元素内部元素的用法。
  8. 学会了使用特殊字符。
  9. 学会了注释标签
  10. 学会了相对路径和绝对路径。
相关标签： Web前端开发学习之路 html web

上一篇： linxu下安装nginx详细图解教程-附带安装包下载地址

下一篇： 软键盘弹起遮掩 input 解决方案

推荐阅读