一、HTML
01软件开发
06-10【软件开发-HTML结构-元素剖析】和导学内容一致,跳过。
11【掌握】 软件开发-HTML结构-元素剖析:电脑配置和安装的软件
电脑配置:显示隐藏文件和扩展名
安装的软件:
Chrome浏览器:开发必备浏览器
VScode编辑器:开发推荐编辑器(编写代码)
Xmind Zen思维导图:思维导图笔记
Typora:markdown笔记软件
11.1网页显示的过程和服务器
1、认识网页:打开浏览器查看到的页面,包括文字、链接、音乐、视频...
2、网站:由多(N)个网页组成(N>=1)
3、网页的显示过程--用户角度
-
输入网址-DNS服务器解析-ip地址(=电脑主机:里面有html、css、资源)--发送给用户--渲染引擎(html、css)+js引擎
4、网页的显示过程-前端工程师
-
开发项目(HTML/CSS/JavaScript/Vue/React)
-
打包、部署项目到服务器
5、服务器是什么?
-
日程接触的基本属于客户端、前端的内容:浏览器、微信、小程序
-
服务器到底是什么?:本质上是类似于电脑一样的主机,特点是24小时不关机(稳定运行),没有显示器。一般装Linux系统(比如centos)
-
大部分公司见到的都是云服务器
11.2网页的三大组成部分分析
网页的组成阶段:HTML,HTML+CSS,HTM+CSS+JavaScript
网页由三部分组成:
-
HTML:网页的内容结构
-
CSS:网页的视觉体验
-
JavaScript:网页的交互处理
12【掌握】 软件开发-HTML结构-元素剖析:工具使用与内容回顾
Typora使用:
(1)加#空格,文字变成一级标题;加##空格,变成二级标题...
(2)加*按空格,就变成原点
1、网页的显示过程:用户角度、前端工程师、服务器是什么?
2、网页的组成部分:
-
HTML:网页的结构
-
CSS:网页的样式(美化)
-
JavaScript:网页的交互(灵魂)
13【掌握】 浏览器和浏览器内核
1、浏览器最核心的部分是渲染引擎(Rendering Engine),一般也称为“浏览器内核”
2、作用:解析网页语法,并渲染(显示)网页
3、常见的浏览器内核有
14【掌握】软件开发-HTML-元素剖析-开发自己的第一个网页
开发第一个网页-记事本
15【掌握】软件开发-HTML-元素剖析-HTML语言和基本结构
1、类似于<h2></h2><p></p>这种的符号就是HTML的元素
2、超文本标记语言(HTML:HyperText Markup Language)用于创建网页的标记语言。
3、什么是标记语言
-
由无数个标记(标签、tag)组成
-
对某些内容进行特殊的标记,供其他解释器识别处理
-
比如<h2></h2>标记的文本会被识别为“标题”进行加粗,文字方法显示
-
标签和内容组成的部分称为元素(element)
4、什么是超文本?
-
不仅可以插入普通的文本(Text),还可以插入图片、音频、视频
-
还可以表示超链接(HyperLink),从一个网页跳转到另一个网页
5、HTML的文件名、扩展名
.html/.htm
注:以前因为系统问题,只能使用3个字符.htm,现在统一使用.html
6、HTML文件的特点-结构
16【掌握】VScode的安装-插件-配置
1.专业的前端开发工具
-
webstorm、Sublime Text、Visual Code、Atom、HBullder、InteIIIJ IDEA、Dreamweaver
只能提示、高亮识别、语法检测、集成环境、开发效率高
-
上课使用的工具
(1)webstorm
优:集成开发工具,包罗万象
缺:重(占用系统资源多)收费
(2)VSCode(上课使用,微软
优:轻(相当于一个编辑器),免费
缺点:需要安装插件辅助开发
2.推荐使用的搜索引擎:bing.com
3.安装Vscode-装插件-配置
17[掌握]元素的结构分析和单双元素
1认识元素
-
元素:开始标签+内容+结束标签
2单标签元素:<meta><img>这种不用写结束标签的
3双标签元素<html></html>,<head></head>类似于这种的需要写结束标签的
4元素推荐使用小写
元素表连接:
HTML 元素参考 - HTML(超文本标记语言) | MDN
18【掌握】元素的属性和属性分类
-
元素也可以拥有属性(Atribute)
-
Vscode中写注释:Ctrl+/
问题:超链接元素写不了?
开始标签的右边尖括号需要把属性名称和属性值(网址都包括)才行。
19【掌握】元素的嵌套和关系
快捷键:alt+shift+向下箭头:快速复制上一行
元素之间的关系:父子关系和兄弟关系
20【掌握】注释的作用和HTML注释
-
注释快捷键:Ctrl+/
-
注释格式<!--注释内容-->
-
21【复习】
1、浏览器和浏览器内核:渲染引擎
2、第一个网页:记事本开发
3、网页补充
-
增加标记>元素>浏览器>渲染对应的效果
-
网页结构
-
head
-
title
-
-
-
-
body
-
h1
-
p
-
div
-
span
-
-
02HTML结构-body元素
23HTML常见的元素
-
div,span是最常见的2个元素
24[掌握]文档声明和html元素
快速生成html框架:!ENTER或者tab
1.完整的html包括哪几部分?
-
文档声明[!DOCTYPE html]
-
html元素
-
head元素
-
body元素
-
2.文档声明的作用
3.html元素
-
<html>元素表示一个HTML文档的根(顶级元素),被称为根元素
所有其他元素必须是此元素的后代
-
W3C标准建议为html增加一个lang属性,作用是:
-
常用的规则:
-
lang="en"表示这个HTML文档的语言是英文
-
lang="zh-CN"表示这个HTML文档的语言是中文
-
25[掌握]head元素
1.HTML head元素:规定文档相关的配置信息(称为元数据),包括文档标题,引用的文档样式和脚本
-
元数据(meta data):描述数据的数据
-
理解成对整个页面的配置
2.常见的配置(包括以下2个)
-
网页的标题:title元素
-
网页的编码:meta元素
-
用于设置网页的字符编码,让浏览器更精确的显示每一个文字,不设置或设置错误会导致乱码
-
一般使用utf-8编码,涵盖世界上几乎所有文字
-
26[掌握]body元素
在浏览器窗口中看到的东西,也就是网页的具体内容和结构
1.常用的元素
-
p元素,h元素
-
img元素,a元素,ifram元素(在页面中嵌入其他页面)
-
div元素,span元素
2.下阶段学习的元素(学习css之后再学的)
3.常见元素-h元素
27h元素和p元素的案例联系
-
常见元素-h元素
-
重要的文字作为标题时使用h元素
-
注意:<h1>-<6>标题(heading),h元素通常与SEO优化有关系
-
-
常见元素-p元素
-
p元素是paragraph的缩写,意思是段落,分段
-
p元素多个段落之间会有一定的间距
-
-
案例
-
乔布斯人物介绍案例(标题)
-
人民网文章案例(段落)
-
28[掌握]img元素的两个属性和可替换性
1.img元素:用来告诉浏览器显示一张图片
2.HTML<img>元素将一份图片嵌入文档
-
img是image的缩写,图片,图像的意思
-
img是一个可替换元素(replaced element)
3.img有2个常见的元素
-
src属性:souece单词的缩写,表示源(网络地址)
-
alt属性,不是强制的,有2个作用
-
图片加载失败(错误的地址或者图片资源不存在),就会显示这段文本
-
屏幕阅读器会将这些描述给需要使用阅读器的使用者听,知道图像的含义
-
29[掌握]img元素的相对路径和图片格式
输入!+回车不出现html框架时,检查文件名后面的扩展名是否正确
-
网络图片
-
-
本地图片(绝对路径和相对路径)
-
绝对路径
-
-
相对路径
-
相对路径
-
-
30[掌握]a元素的两个属性和练习
1.常见元素-a元素
-
跳转到另外一个链接时用a元素
-
HTML<a>元素(或称锚anchor 元素)
-
定义超链接,用于打开新的URL
-
-
a元素两个常见属性
-
href:Hypertext Reference的简称
-
制定要打开的URL地址
-
也可以是一个本地地址
-
-
target:该属性制定在何处显示链接的资源
-
-self : 默认值,在当前窗口打开URL
-
-blank : 在一个新窗口中打开URL
-
iframe
-
-
31[掌握]a元素本页面的锚点链接
-
a元素-锚点链接
-
锚点链接:可跳转到网页中的具体位置
-
-
锚点链接有2个重要步骤
-
在要跳转的元素上定义一个id属性
-
定义a元素,并且a元素的href指向对应的id
-
-
注意:a元素指向的时候前面需要加#
-
32[掌握]a元素和img元素结合使用
a元素和img元素结合使用:
33 [理解]a元素其他的URL地址
-
a元素-其他URL地址
-
a元素不一定是用来跳转新网页
-
还可以下载压缩包包
-
(发邮件)指向邮件
-
-
34[理解]iframe的使用和禁止嵌入原因
-
iframe的使用
-
-
禁止嵌入原因:x-frame-options:sameorigin(只允许在同源的情况下可以请求地址)
35[了解]iframe和a元素target的值
-
iframe元素
-
frameboeder属性
用于规定是否显示边框
-
1:显示
-
0:不显示
-
-
-
a元素target的其他值
-
_parernt:在父窗口中打开URL
-
_top:在顶层窗口中打开URL
-
_self:在当前窗口打开url
-
_blank:在新窗口打开url
-
36[掌握]div元素span元素的使用
-
HTML中有两个特殊的元素:div元素,span元素
-
div:divsion,分开,分配
-
span:跨域,涵盖
-
-
div和span的区别
-
37(理解)需要知道的不常用元素
38[掌握]常见的全局属性
39[掌握]字符实体的作用和常见演练
-
字符实体
-
常见的字符实体
-
认识URL
-
url代表同意资源定位符(uniform resource locator)
-
URL是一个给定的独特资源在web上的地址
-
每个有效的URL都指向一个唯一的资源
-
这个资源可以是HTML页面,一个css文档,一幅图像,一个音频
-
-
-
URL格式
-
标准格式
-
-
-
URL和URI的区别
-
URI:Uniform Resource Identifier 统一资源标志符,用于表示web及时使用的逻辑或者物理资源
-
URL:Uniform Resource Locator 统一资源定位符,俗称网络地址,相当于网络中的门牌号
-
-
URL和URI的关系
42(理解)元素语义化和作用
-
元素的语义化:正确的元素做正确的事
-
标签语义化的好处
-
43(理解)SEO优化-爬虫原理
-
SEO:搜索引擎优化(search energine optimization)通过了解搜索引擎的运营规则来调整网站,提高网站在有关搜索引擎内排名的方式
-
爬虫原理图
-
44(理解)字符编码的由来
-
计算机的由来
-