运营零基础转前端-HTML篇

一、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(理解)字符编码的由来

  • 计算机的由来

    •  

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值