web前端第一节课

V先生137

已于 2022-10-24 19:28:29 修改

阅读量291

点赞数

文章标签：前端 1024程序员节

于 2022-10-23 18:02:55 首次发布

本文链接：https://blog.csdn.net/qq_61739597/article/details/127478043

版权

web前端第一节课

2022年9月15日

21:02

什么是web前端？

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

多种技术包括如下：

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

更高端技术：

AngurlarJS

VUE

React

Webpack

Nodejs

。。。

第一章HTML

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

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

组成：

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

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程序

<!DOCTYPE html>

<html>

<head>

<title>这是一个标题</title>

<style>

/* */

</style>

</head>

<body>

djskdffesifwoe

</body>

</html>

3.2常用标签

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

b/strong(bold)

斜体标签，italic/

i/em

下划线，uderLine

删除线，delete

Del

换行线

段落标签 paragraph

格式化输出

Pre

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

Span

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

Div

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

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

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

下标标签

Sub

上标标签

Sup

分割线标签

标题标签

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

3.3 语义化标签

优点：

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

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

3.4 多媒体标签

显示图片信息

img（image）标签

1，2相对路径

3绝对路径

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

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
<h1 style="display: inline;">将进酒</h1>  <h2 style="display: inline">君不见黄河之水天上来</h2>
<pre>
<img src="C:\Users\17901\Desktop\新建文件夹\屏幕截图 2022-10-24 143853.png" height="470" width="272"style="float:left"/">
<h3>君不见黄河之水天上来，奔流到海不复回。<br />
君不见高堂明镜悲白发，朝如青丝暮成雪。<br />
人生得意须尽欢，莫使金樽空对月。<br />
天生我材必有用，千金散尽还复来。<br />
烹羊宰牛且为乐，会须一饮三百杯。<br />
岑夫子，丹丘生，将进酒，君莫停。<br />
与君歌一曲，请君为我侧耳听。<br />
钟鼓馔玉不足贵，但愿长醉不愿醒。<br />
古来圣贤皆寂寞，惟有饮者留其名。<br />
陈王昔时宴平乐，斗酒十千恣欢谑。<br />
主人何为言少钱，径须沽取对君酌。<br />
五花马，千金裘，</br>
呼儿将出换美酒，与尔同销万古愁。</h3></pre>
   </body>
</html>