一、前序知识
1. 认识两位先驱
2. 计算机基础知识
1. 计算机 俗称电脑,是现代一种用于高速计算的电子计算机器,可以进行数值计算、逻辑计算,还具有存储记忆功能。
2. 计算机由 硬件 + 软件 成:
硬件:看得见摸得着的物理部件。
软件:可以指挥硬件工作的指令。
3. 软件的分类:
系统软件:Windows、Linux、Android、Harmony 等。 应用软件:微信、QQ、王者荣耀、PhotoShop 等。 整体图示:
3. C/S架构与B/S架构
1. 上面提到的应用软件,又分为两大类:
C/S架构 ,特点:需要安装、偶尔更新、不跨平台、开发更具针对性。
B/S架构 ,特点:无需安装、无需更新、可跨平台、开发更具通用性。
名词解释:C => client(客户端)、B => browser(浏览器)、S => server(服务器)。
服务器 :为软件提供数据的设备(在背后默默的付出)。
2. 前端工程师,主要负责编写 B/S架构中的网页(呈现界面、实现交互) 。
备注:大前端时代,我们可以用前端的技术栈,做出一个C/S架构的应用、甚至搭建一个服务器。
4. 浏览器相关知识
浏览器是网页运行的平台,常见的浏览器有:谷歌(Chrome)、Safari、IE 、火狐(Firefox)、欧 朋(Opera)等,以上这些是常用的五大浏览器。
1 .各大浏览器市场份额:
2 .常见浏览器的内核:
5. 网页相关概念
1. 网址:我们在浏览器中输入的地址。
2. 网页:浏览器所呈现的每一个页面。
3. 网站:多个网页构成了一个网站。
4. 网页标准:
二、HTML 简介
1. 什么是 HTML?
全称:HyperText Markup Language(超文本标记语言)。
超文本:暂且简单理解为 “超级的文本”,和普通文本比,内容更丰富。
标 记:文本要变成超文本,就需要用到各种标记符号。
语 言:每一个标记的写法、读音、使用规则,组成了一个标记语言。
2. 相关国际组织(了解)
1. IETF
全称:Internet Engineering Task Force(国际互联网工程任务组),成立于 1985 年底,是一个权威
的互联网技术标准化组织,主要负责互联网相关技术规范的研发和制定,当前绝大多数国际互联网
技术标准均出自IETF。官网: https://www.ietf.org
2. W3C
全称:World Wide Web Consortium(万维网联盟),创建于 1994 年,是目前Web技术领域,最具影
响力的技术标准机构。共计发布了 200 多项技术标准和实施指南,对互联网技术的发展和应用起到
了基础性和根本性的支撑作用,官网: https://www.w3.org
3. WHATWF
全称:Web Hypertext Application Technology Working Group(网页超文本应用技术工作小组)成立
于 2004 年,是一个以推动网络HTML 5 标准为目的而成立的组织。由Opera、Mozilla基金会、苹果,
等这些浏览器厂商组成。官网: https://whatwg.org/
3. HTML 发展历史(了解)
从 HTML 1. 0 开始发展,期间经历了很多版本,目前HTML的最新标准是:HMTL 5 ,具体发展史如图(了解即可)。
三、准备工作
1. 常用电脑设置
1. 查看文件夹内容的几种布局。
2. 展示文件扩展名(文件后缀)。
3. 使用指定程序打开文件。
4. 配置文件的默认打开方式。
2. 安装Chrome浏览器
下载地址: https://www.google.cn/chrome 。 若上述地址打不开,或无法安装,请使用资料中的离线安装包。 详细步骤请参考视频。
四、HTML 入门
1. HTML 初体验
1. 第一步:鼠标右键 => 新建 => 文本文档 => 输入以下内容,并保存。
2.第二步:修改后缀为.html,然后双击打开即可。
这里的后缀名,使用.htm也可以,但推荐使用更标准的.html。
3. 程序员写的叫 源代码 ,要交给浏览器进行渲染。
4. 借助浏览器看网页的 源代码 ,具体操作:
在网页空白处:鼠标右键 ==> 查看网页源代码
2. HTML 标签
1. 标签 又称 元素 ,是HTML的基本组成单位。
2. 标签分为: 双标签 与 单标签 (绝大多数都是双标签)。
3. 标签名不区分大小写,但推荐小写,因为小写更规范。
4. 双标签:
示例代码:
5. 单标签:
示例代码:
6. 标签之间的关系:并列关系、嵌套关系,可以使用tab键进行缩进:
HTML,CSS,JS
3. HTML 标签属性
1. 用于给标签提供 附加信息 。
2. 可以写在: 起始标签 或 单标签中 ,形式如下:
例如:
HTML,CSS,JS
3. 有些特殊的属性,没有属性名,只有属性值,例如:
4. 注意点:
1. 不同的标签,有不同的属性;也有一些通用属性(在任何标签内都能写,后面会详细总结)。
2. 属性名、属性值不能乱写,都是W 3 C规定好的。
3. 属性名、属性值,都不区分大小写,但推荐小写。
4. 双引号,也可以写成单引号,甚至不写都行,但还是推荐写双引号。
5. 标签中不要出现同名属性,否则后写的会失效,例如:
4. HTML 基本结构
1. 在网页中,如何查看某段结构的具体代码?—— 点击鼠标右键,选择“检查”。
2. 【检查】 和 【查看网页源代码】的区别:
【查看网页源代码】看到的是:程序员编写的源代码。
【检查】看到的是:经过浏览器 “处理” 后的源代码。
备注:日常开发中,【检查】用的最多。
3. 网页的 基本结构 如下:
1. 想要呈现在网页中的内容写在body标签中。
2. head标签中的内容不会出现在网页中。
3. head标签中的title标签可以指定网页的标题。
4. 图示:
5. 代码:
......
5. 安装 VSCode
1. 安装中文语言包。
2. 使用 VSCode打开文件夹的两种方式。
3. 调整字体大小。
4. 设置主题。
5. 安装图标主题:vscode-icons。
备注:详细安装步骤请参考视频。
6. 安装 Live Server 插件
1. 可以更加方便的打开网页。
2. 打开网页的方式更贴近项目上线。
3. 代码出现改动后,可以自动刷新。
4.根据自己的情况,去配置一下 VSCode 的自动保存。
注意 1 :务必使用VSCode打开的是文件夹,否则 Live Server 插件无法正常工作!
注意 2 :打开的网页必须是标准的HTML结构,否则无法自动刷新!
7. HTML 注释
1. 特点:注释的内容会被浏览器所忽略,不会呈现到页面中,但源代码中依然可见。
2. 作用:对代码进行解释和说明。
3. 写法:
4. 注释不可以嵌套,以下这么写是错的(反例)。
-->
8. HTML 文档声明
1. 作用:告诉浏览器当前网页的版本。
2. 写法:
旧写法 :要依网页所用的HTML版本而定,写法有很多。
具体有哪些写法请参考 : W 3 C官网-文档声明 (了解即可,千万别背!)
新写法: 一切都变得简单了!W 3 C 推荐使用 HTML 5 的写法。
3.注意:文档声明,必须在网页的第一行,且在html标签的外侧。
9. HTML 字符编码
1. 计算机对数据的操作:
存储时,对数据进行: 编码 。
读取时,对数据进行: 解码 。
2. 编码、解码,会遵循一定的规范 —— 字符集 。
3. 字符集有很多中,常见的有(了解):
1. ASCII :大写字母、小写字母、数字、一些符号,共计128个。
2. ISO 8859-1 :在 ASCII 基础上,扩充了一些希腊字符等,共计是256个。
3. GB2312 :继续扩充,收录了 6763 个常用汉字、682个字符。
4. GBK :收录了的汉字和符号达到 20000+ ,支持繁体中文。
5. UTF-8 :包含世界上所有语言的:所有文字与符号。—— 很常用。
4. 使用原则是怎样的?
原则 1 :存储时,务必采用合适的字符编码 。
否则:无法存储,数据会丢失!
原则 2 :存储时采用哪种方式编码 ,读取时就采用哪种方式解码。
否则:数据错乱(乱码)!
例如下面文字中,包含有:中文、英文、泰文、缅甸文
我爱你
I love you! ฉันรักเธอนะ
က နမ်က ိချစ်တယ။်
若使用 ISO8859- 1 编码存储,在存入的那一刻,就出问题了,因为ISO8859- 1 仅支持英文!
为保证所有的输入,都能正常存储和读取,现在几乎全都采用:UFT- 8 编码。
所以我们编写html文件时,也都统一用UFT- 8 编码。
5. 总结:
平时编写代码时,统一采用UTF- 8 编码(最稳妥)。
为了让浏览器在渲染html文件时,不犯错误,可以通过meta标签配合charset属性指定字符编码。
10. HTML 设置语言
1. 主要作用:
让浏览器显示对应的翻译提示。
有利于搜索引擎优化。
2. 具体写法:
3.扩展知识:lang 属性的编写规则(作为一个课外扩展知识,了解即可)。
1. 第一种写法( 语言-国家/地区 ),例如:
zh-CN :中文-中国大陆(简体中文)
zh-TW :中文-中国台湾(繁体中文)
zh :中文
en-US :英语-美国
en-GB :英语-英国
2. 第二种写法( 语言—具体种类)已不推荐使用,例如:
zh-Hans :中文—简体
zh-Hant :中文—繁体
3. W3School 上的说明: 《语言代码参考手册》 、 《国家/地区代码参考手册》
4. W3C官网上的说明: 《Language tags in HTML》
11. HTML标准结构
HTML标准结构如下:
输入!,随后回车即可快速生成标准结构。
生成的结构中,有两个meta标签,我们暂时用不到,可以先删掉。
配置VScode的内置插件emmet,可以对生成结构的属性进行定制。
在存放代码的文件夹中,存放一个favicon.ico图片,可配置网站图标。
五、HTML 基础
1. 开发者文档
W3C官网:www.w3c.org
W3School:www.w3school.com.cn
MDN:developer.mozilla.org —— 平时用的最多。
2. 排版标签
标签名标签含义单/双标签h1 ~ h6标题双p段落双div没有任何含义,用于整体布局(生活中的包装袋)。双
h1最好写一个,h2~h6能适当多写。 h1~h6不能互相嵌套,例如:h1 标签中最好不要写h2 标签了。 p 标签很特殊!它里面不能有:h1~h6、p、div标签(暂时先这样记,后面会说规律)。
3. 语义化标签
概念:用特定的标签,去表达特定的含义。
原则:标签的默认效果不重要(后期可以通过CSS随便控制效果),语义最重要!
举例:对于h1标签,效果是文字很大(不重要),语义是网页主要内容(很重要)。
优势: 代码结构清晰可读性强。 有利于 SEO (搜索引擎优化)。 方便设备解析(如屏幕阅读器、盲人阅读器等)。
4. 块级元素 与 行内元素
1. 块级元素 :独占一行(排版标签都是块级元素)。
2.行内元素 :不独占一行(目前只学了:input,稍后会学习更多)。
3.使用原则 :
1. 块级元素 中能写 行内元素 和 块级元素 (简单记:块级元素中几乎什么都能写)。
2. 行内元素 中能写 行内元素 ,但不能写 块级元素 。
3. 一些特殊的规则:
h1~h6 不能互相嵌套。
p中不要写块级元素。
备注:marquee元素设计的初衷是:让文字有动画效果,但如今我们可以通过CSS来实现
了,而且还可以实现的更加炫酷,所以marquee标签已经: 过时了 (废弃了),不推荐使
用。我们只是在开篇的时候,用他做了一个引子而已,在后续的学习过程中,这些已经废弃
的标签,我们直接跳过。
5 .文本标签_常用的
1. 用于包裹:词汇、短语等。
2. 通常写在排版标签里面。
3. 排版标签更宏观(大段的文字),文本标签更微观(词汇、短语)。
4. 文本标签通常都是行内元素。
标签名标签语义单/双标签em要着重阅读的内容双strong十分重要的内容(语气比em要强)双span没有语义,用于包裹短语的通用容器双
生活中的例子:div 是大包装袋,span 是小包装袋。
6.文本标签_不常用的
标签名标签语义单/双标签cite作品标题(书籍、歌曲、电影、电视节目、绘画、雕塑)双dfn特殊术语^ ,或专属名词双del 与 ins删除的文本^ 【与】^ 插入的文本双sub与 sup下标文字 【与】 上标文字双code一段代码双samp从正常的上下文中,将某些内容提取出来,例如:标识设备输出双kbd键盘文本,表示文本是通过键盘输入的,经常用在与计算机相关的手册中双abbr缩写,最好配合上title属性双bdo更改文本方向,要配合dir属性,可选值: ltr(默认值)、rtl双var标记变量,可以与code 标签一起使用双small附属细则,例如:包括版权、法律文本。—— 很少使用双b摘要中的关键字、评论中的产品名称。—— 很少使用双i本意是:人物的思想活动、所说的话等等。 现在多用于:呈现字体图标(后面要讲的内容)。双u与正常内容有反差文本,例如:错的单词、不合适的描述等。—— 很少使用双q短引用 —— 很少使用双blockquote长引用 —— 很少使用双address地址信息双
备注:
1. 这些不常用的文本标签,编码时不用过于纠结(酌情而定,不用也没毛病)。
2. blockquote 与 address 是块级元素,其他的文本标签,都是行内元素。
3. 有些语义感不强的标签,我们很少使用,例如:
small 、b 、u 、q 、blockquote
4. HTML标签太多了!记住那些:重要的、语义感强的标签即可;截止目前,有这些:
h1~h6 、p 、div 、em 、strong 、span
7.图片标签
1. 基本使用
标签名标签语义常用属性单 / 双 标签img图片src :图片路径(又称:图片地址)—— 图片的具体位置alt :图片描述width :图片宽度,单位是像素,例如:200px 或 200height :图片高度, 单位是像素,例如:200px 或200单
总结:
1. 像素(px )是一种单位,学到CSS 时,我们会详细讲解。
2. 尽量不同时修改图片的宽和高,可能会造成比例失调。
3. 暂且认为img 是行内元素(学到CSS 时,会认识一个新的元素分类,目前咱们只知道:
块、行内)。
4. alt 属性的作用:
搜索引擎通过alt 属性,得知图片的内容。—— 最主要的作用。
当图片无法展示时候,有些浏览器会呈现alt 属性的值。
盲人阅读器会朗读alt 属性的值。
2. 路径的分类
相对路径 :以 当前位置 作为参考点,去建立路径。
已有结构符号含义举例(在测试.html 中)./同级引入【怪兽.jpg】:/上一级引入【喜羊羊.jpg】:…/下一级引入【奥特曼.jpg】:
注意点:
相对路径中的 ./ 可以省略不写。
相对路径依赖的是当前位置,后期若调整了文件位置,那么文件中的路径也要修改。
2. 绝对路径 :以 根位置 作为参考点,去建立路径。
1. 本地绝对路径:E:/a/b/c/奥特曼.jpg。(很少使用)
2. 网络绝对路径:http://www.atguigu.com/images/index_new/logo.png。
注意点:
使用本地绝对路径,一旦更换设备,路径处理起来比较麻烦,所以很少使用。
使用网络绝对路径,确实方便,但要注意:若服务器开启了防盗链,会造成图片引入失败。
3. 常见图片格式
1. jpg 格式:
概述:扩展名为.jpg 或 .jpeg,是一种有损的压缩格式(把肉眼不容易观察出来的细节
丢弃了)。
主要特点: 支持的颜色丰富、占用空间较小 、不支持透明背景、不支持动态图。
使用场景:对图片细节 没有极高要求 的场景,例如:网站的产品宣传图等 。—— 该格式网
页中很常见。
2. png 格式:
概述:扩展名为.png,是一种无损的压缩格式,能够更高质量的保存图片。
主要特点: 支持的颜色丰富 、占用空间略大、 支持透明背景 、不支持动态图。
使用场景:①想让图片有透明背景;②想更高质量的呈现图片;例如 :公司logo图、重要配
图等。
3. bmp格式:
概述:扩展名为.bmp,不进行压缩的一种格式,在最大程度上保留图片更多的细节。
主要特点: 支持的颜色丰富、保留的细节更多 、占用空间极大、不支持透明背景、不支持动
态图。
使用场景:对图片细节 要求极高 的场景,例如:一些大型游戏中的图片 。(网页中很少使
用)
4. gif 格式:
概述:扩展名为.gif,仅支持 256 种颜色,色彩呈现不是很完整。
主要特点:支持的颜色较少、 支持简单透明背景、支持动态图 。
使用场景:网页中的动态图片。
5. webp格式:
概述:扩展名为.webp ,谷歌推出的一种格式,专门用来在网页中呈现图片。
主要特点:具备上述几种格式的优点,但兼容性不太好,一旦使用务必要解决兼容性问题。 使用场景:网页中的各种图片。
6. base64格式
1. 本质:一串特殊的文本,要通过浏览器打开,传统看图应用通常无法打开。
2. 原理:把图片进行base64 编码,形成一串文本。
3. 如何生成:靠一些工具或网站。
4. 如何使用:直接作为img 标签的src 属性的值即可,并且不受文件位置的影响。
5. 使用场景:一些较小的图片,或者需要和网页一起加载的图片。
图片的格式非常多,上面这些,只是一些常见的、我们前端人员常接触到的。
8. 超链接
主要作用:从当前页面进行跳转。
可以实现:①跳转到指定页面、②跳转到指定文件(也可触发下载)、③跳转到锚点位置、④唤起指定应用。
标签名标签语义常用属性单 / 双 标签a超链接href : 指定要跳转到的具体目标。target : 控制跳转时如何打开页面,常用值如下:_self :在本窗口打开。 _blank :在新窗口打开。id : 元素的唯一 标识,可用于设置锚点。name : 元素的名字,写在a 标签中,也能设置锚点。双
1. 跳转到页面
注意点:
1. 代码中的 多个空格 、 多个回车 ,都会被浏览器解析成一个空格!
2. 虽然a是行内元素,但a元素可以包裹除它自身外的任何元素!
想展示多个回车或空格,怎么办呢? —— 后面会讲。
2. 跳转到文件
注意 1 :若浏览器无法打开文件,则会引导用户下载。
注意2:若想强制触发下载,请使用download 属性,属性值即为下载文件的名称。
3. 跳转到锚点
什么是锚点?—— 网页中的一个标记点。
具体使用方式:
第一步:设置锚点
我是一个位置
注意点:
1. 具有 href 属性的 a标签是 超链接 ,具有 name 属性的 a标签是 锚点 。
2. name和id都是区分大小写的,且id最好别是数字开头。
第二步:跳转锚点
4. 唤起指定应用
通过a标签,可以唤起设备应用程序。
9. 列表
1. 有序列表
概念:有顺序或侧重顺序的列表。
要把大象放冰箱总共分几步
- 把冰箱门打开
- 把大象放进去
- 把冰箱门关上
2. 无序列表
概念:无顺序或不侧重顺序的列表。
我想去的几个城市
- 成都
- 上海
- 西安
- 武汉
3. 列表嵌套
概念:列表中的某项内容,又包含一个列表(注意:嵌套时,请务必把解构写完整)。
我想去的几个城市
- 成都
上海
- 外滩
- 杜莎夫人蜡像馆
- 迪士尼乐园
- 西安
- 武汉
注意:li 标签最好写在 ul 或 ol 中,不要单独使用。
4. 自定义列表
1. 概念:所谓自定义列表,就是一个包含 术语名称 以及 术语描述 的列表。
2. 一个dl就是一个自定义列表,一个dt就是一个术语名称,一个dd就是术语描述(可以有多个)。
如何高效的学习?
- 做好笔记
- 笔记是我们以后复习的一个抓手
- 笔记可以是电子版,也可以是纸质版
- 多加练习
- 只有敲出来的代码,才是自己的
- 别怕出错
- 错很正常,改正后并记住,就是经验
10. 表格
1. 基本结构
1. 一个完整的表格由: 表格标题 、 表格头部 、 表格主体 、 表格脚注 ,四部分组成。
2. 表格涉及到的标签:
table :表格
caption :表格标题
thead :表格头部
tbody :表格主体
tfoot :表格注脚
tr :每一行
th 、td :每一个单元格(备注:表格头部中用th ,表格主体、表格脚注中用:td )
3. 具体编码:
姓名 | 性别 | 年龄 | 民族 | 政治面貌 |
---|---|---|---|---|
张三 | 男 | 18 | 汉族 | 团员 |
李四 | 女 | 20 | 满族 | 群众 |
王五 | 男 | 20 | 回族 | 党员 |
赵六 | 女 | 21 | 壮族 | 团员 |
共计:4人 |
2. 常用属性
标签名标签语义常用属性单 / 双 标签table表格width :设置表格宽度。height :设置表格最小高度,表格最终高度可能比设置的值大。border :设置表格边框宽度。cellspacing : 设置单元格之间的间距。双thead表格头部height :设置表格头部高度。align : 设置单元格的水平对齐方式,可选值如下: 1. left :左对齐 2. center :中间对齐 3. right :右对齐valign :设置单元格的垂直对齐方式,可选值如下: 1. top :顶部对齐 2. middle :中间对齐 3. bottom :底部对齐双tbody表格主体常用属性与thead 相同。双tr行常用属性与thead 相同。双tfoot表格脚注常用属性与thead 相同。双td普通单元格width :设置单元格的宽度,同列所有单元格全都受影 响。heigth :设置单元格的高度,同行所有单元格全都受影 响。align :设置单元格的水平对齐方式。 valign :设置单元格的垂直对齐方式。 rowspan :指定要跨的行数。colspan :指定要跨的列数。双th表头单元格常用属性与td 相同。双
注意点:
1.
发表评论