运营零基础转前端-HTML篇

BYYDCGZ_Hj

已于 2023-09-05 18:06:36 修改

阅读量120

点赞数

文章标签：前端 html

于 2023-05-17 14:47:04 首次发布

本文链接： https://blog.csdn.net/BYYDCGZ_Hj/article/details/129790762

版权

一、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的关系