web第一次课总结

最新推荐文章于 2024-07-18 15:48:23 发布

芝诺的乌龟104

最新推荐文章于 2024-07-18 15:48:23 发布

阅读量99

点赞数

分类专栏：笔记文章标签：前端

本文链接：https://blog.csdn.net/qq_63811749/article/details/127581282

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

什么是web前端

Web前端是给用户展示的网页页面，即网站的前台部分，可能包含设计、特效、用户交互等。web即全球广域网，也称为万维网，是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。

Web前端一般由多种开发技术制作，是给用户展示的网页页面，即网站的前台部分。

多种技术包含：

HTML
CSS
JavaScript
jQuery
BT（Bootstrap）
更高端的前端技术：
Angular
AngularJS
VUE
React
webpack
nodejs

什么是HTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language)。是制作超级文本文档的简单标记语言，可以从一个平台移植到另一个平台，通常用于制作网页。html文件是asci文本，包括格式标记和超级文本链的嵌入代码。

HTMLtext是由 HTML命令组成的描述性文本，它能够描述文字，图形，动画，声音，表格，链接等。网页结构由标题和正文两部分组成。Header描述浏览器需要的信息，并且主体包含要描述的具体内容。

Html是网页设计的基础。在网站结构中，静态网页被称为基于 HTML的网页。

总结：

1），html通常被称为静态网页。

2），HTML是带html或Htm扩展名的文件。

3），HTML的一些标签代码规则将内容呈现在浏览器中所需的风格。

4），HTML可以使用记事本创建，并以.html或.htm为扩展名保存。

Html文件中的代码包含一些规则、规则、标签和内容。形成具有指定的html结构和内容的完整的HTML文件。可以直接用浏览器打开它来查看网页的效果。

若要在浏览器中显示各种网页，则需要 html文件(HTML基本结构+内容+标签)和 css文件(css风格)才能实现所需的漂亮网页。

HTML特点
1、简单灵活；

2、可扩展性，HTML采取子类元素的方式，为系统扩展带来保证；

3、平台无关性，HTML可以使用在广泛的平台上

HTML的语法结构
1.标签通常是由开始标签和结束标签构成，自由标签例外
2.标签可以有属性，属性必有值
3.开始标签和结束标签之间包裹的内容成为区域
4.标签不区分大小写

网页的分类
静态网页：是指不修改源码的前提下，无论何时何地去访问都将显示相同内容。后缀html htm
动态网页：通过用户提交的信息给网站，而反馈出的页面结果。后缀 asp aspx js php

本节课都学习了那些标签

<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>这是一个标题内容</title>
</head>
<body>
这是一个主体内容
</body>
</html>

1.加粗字体 strong b(bold)
2.斜体 i em 现在我们一般使用i标签加斜问题，em标签有存在强调的意思，现在随着css3的使用，而慢慢的用来标注css的字体图标。
3.删除字体 del
4.下划线 u
5.按自己想法换行br
6.段落标签 p <p align = "center"> p标签表示段落，两个相邻的p标签之间会空一行，align是p段落的一个属性，right center left对align的值分别代表右对齐中心对齐和左对齐。p标签与br标签有一些相似都能换

7.分割线hr 例如<hr width=400 size=1 noshade>

注意：网页源代码中的回车在浏览器中并不表示换行。

8.修饰字体 font <font color = "#ff0000">第一行</font> color表示字体的颜色 “#ff0000”是颜色值，表示红色。注意：网页中的颜色用 # 开头，连接 6 位十六进制数表示，如 #336699。

9.sub表示文字下标；10.sup表示文字的上标；

9<sub>2</sub> 12<sup>2</sup>

11.pre标签原样输出文本内容；

12.span是一个标准行内输出，一般用来装饰包裹的文本内容，常见于装饰文本。行内标签：占据内容部分，对宽度等属性不能起直接作用。

<pre><span style ="color : blue;">君不见，黄河之水天上来，
奔流到海不复回。</span> </pre>

13.hn hn标签中的n指的是标题1-6对应了不同级别的6个级别，主要用来装饰标题。

14.div div标签是一个标准的块标签，主要用来布局。块标签：占据整行空间，对宽高等属性生效。<div style ="border: 1px solid red; height :50px;">岑夫子，丹丘生，将进酒，杯莫停。</div>

15.img 是image的缩写

img标签有三个重要属性需要掌握：src、alt和title，其中src是图片的路径，alt用于向探索引擎描述图片，title用于向用户描述图片。img标签的语法是：<img src=” ” alt=” ” title=” ” />

目前在网页中使用的图片主要有 GIF、JPG、PNG、BMP 格式，但以 GIF、PNG 和 JPG 使用居多。GIF 支持动画和背景透明，同时图片通常比较小，但仅支持 256 色以内的图像，因此色彩不够丰富。JPEG 支持 1670 万种颜色，但不支持动画和背景透明。当想要背景透明的时候，一般会使用PNG格式图片，所以我们可以根据两者的优缺点来选择图像的格式。

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>在网页中插入图片</title>
</head>
<body> --img标签用来引入图片到页面中 src是一个必须的属性，该属性表示图片的地址如下面的就是表示在当前文件夹下有个images文件夹，里面有个图片，名称叫做1.jpg.

相对路径：

绝对路径：一般很少这样写，因为这个路径只是这台电脑的路径，换一台电脑就没有这张图片了

网络路径：
<img src="http://www.xianoupeng.com/uploadfile/2019/0428/20190428101229423.png">
</body>
</html>