web前端第一节课

web前端第一节课

2022年9月15日

21:02

什么是web前端/strong>

简单说网页，他是有多种技术参与制作，用于给给用户展示的网页，也是我们网站所谓的前台部分。

多种技术包括如下：

• HTML
• CSS
• JavaScript
• Jquery:write less do more
• BT(bootstrp)

更高端技术：

AngurlarJS

VUE

React

Webpack

Nodejs

。。。

第一章HTML

HTMl：hyper text markup language超文本标签语言，此标签可以理解为标记或元素。目前应用广泛技术之一，也是网页呈现基石。

是一个描述性文本，可以描述文字 表格 声音 视频 动画 链接。。。

组成：

• 头部：提供浏览器所需要的信息
• 主体:   网页主要内容

HTML历史发展：

诞生于90年 Tim Berners Lee

IETF组织在他之上推出HTML 2.0

W3C HTML 4.01 它是一个里程碑标准

W3C XHTML 1.0 他规范了语法 XHTML2.0

opera的小哥向W3C申请提出H5标准

Apple opera Mozilia 联合 WHATWG 来制定H5

W3C放弃维护XHTML 转而研究H5

HTML优点：

1，简单灵活

2，可扩展性高

3，平台无关性（兼容性）

第二章 环境配置和浏览器说明

2.1 环境配置

• 运行环境：具备浏览器PC即可
• 开发环境：课下建议记事本写，上课Hbuilder

2.2 浏览器

用来渲染和呈现网页的软件

浏览器历史：

商用第一款，伊利诺斯州立大学超级计算机应用中心发布的Mosiac，直接促进互联网发展

Netscape网景公司推出Netscape navigator 使互联网得到爆炸式的生长

微软推出IE浏览器，并且于Windows捆绑销售，直接摧毁Netscap，导致Netscape破产

“百足之从死而不僵”，小布（js最初JavaScript）   成立了Mozilla，并且将Navigator开源，沉淀后发布了Phonenix=Firefox，直接搞定IE成为一哥。

真正的一哥起于，webkit，03年苹果推出Safari webkit 如今一哥chrome，内核也是webkit，微软放弃IE也是基于webkit内核发布edge

2.3 HTML的语法结构

特点：

• 标签大多数成对出现，有开始、结束标签，（自结束标签除外）
• 标签可以有属性，有属性必有值（布尔值除外）
• 开始和结束之间内容部分被称为区域
• 不区分大小写

2.4 网页分类

静态页面：在不修改源代码前提下，无论何时访问得到结果相同  通常文件后缀名 htm html

动态交互式页面：用户通过提交数据给网站，网站根据用户提交的数据进行反馈。通常文件后缀名Jsp asp aspx php

第三章 第一个HTML程序

3.1 第一个HTML程序

djskdffesifwoe

3.2常用标签

• 加粗标签，strong带有语气成分

b/strong(bold)

• 斜体标签，italic/

i/em

• 下划线，uderLine

U

• 删除线，delete

Del

• 换行线

Br

• 段落标签 paragraph

P

• 格式化输出

Pre

• 众多行内标签，修饰被他所包裹的内容

Span

• 众多块标签之一，他的内容即使不满一行也会占满一行。

Div

行内标签：修饰他所包裹的内容，不能直接支持宽高属性

块标签：他即使不满一行也会占满一行，支持宽高属性

自结束标签：不需要结束符标签如果有html文件头声明斜杆可以省略

• 下标标签

Sub

• 上标标签

Sup

• 分割线标签

hr

• 标题标签

Hn=h1-h6，h1最大依次减小

3.3 语义化标签

优点：

增加代码可读性，提高程序员的维护效率，降低维护成本。

可以为搜索引擎起到引导作用

3.4 多媒体标签

• 显示图片信息

img（image）标签

1，2相对路径

3绝对路径

作业1.通过三个问题：什么是web前端，什么是HTML，本节课都学习了那些标签，写一篇关于本节课的总结。
2.使用所学过的HTML标签制作如图所示的页面

    

        
        
    
     

将进酒

  

君不见黄河之水天上来

    

 

来源：V先生137