web前端标签的应用

一、什么是web前端？

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

包含了以下技术：

基础技术：

• HTML
• CSS
• JavaScript
• jQuery
• BT（Bootstrap）

更高端的前端技术：

• Angular

• AngularJS

• VUE

• React

• webpack

• nodejs

二、什么是HTML？

HTML全称Hyper Text Mark-up Language 翻译过来就是超文本标签语言，标签也可称作标记或者元素。

HTML是目前网络上运用最广泛的前端技术之一，也是网页构成最主要的部分之一。

HTML文本是由HTML标签构成的描述性文本，HTML文本可以表述 文字 表格 声音 图形 动画 链接等。

HTML是WEB编程的基础，HTML之所以被称为超文本标签语言，是文本包含了所谓的“超级链接”和媒体文件。

HTML结构由头部（head）和主体（body）构成

• 头部描述了浏览器所需的信息
• 主体包含要说明的具体内容

需要说明的是HTML语言不是一种编程语言而是一种描述性语言，用于描述超文本内容的显示方式。比如，文字以什么颜色大小显示，图片以什么尺寸位置显示。

HTML的特点有：

1、简单灵活；

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

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

三、学了哪些标签？

strong/b---加粗字体

em/i---斜体

u/del---u是给字体加下划线 del是删除线

br/hr---br表示换行 hr表示分割线

p---表示段落，两个相邻的p标签之间会空一行 

其中的align是p的一个属性，right center left对align的值 分别代表右对齐 中心对齐 和左对齐。p标签与br标签有一些相似都能换行，但是br换行时行与行之间不空行。

font：标签用来修饰字体 color表示字体的颜色 “#ff0000”是颜色值，表示红色。

注意：网页中的颜色用 # 开头，连接 6 位十六进制数表示，如 #336699。

sub/sup---sub是文字下标 sup是文字上标

如2₂ = 4,a<sup>[2]<sup>表示数组a有下标2

pre---表示原格式输出

span---表示标准行内输出，一般用来装饰和包裹文本内容

<span style="color:purple;font-size:20px">这是一个标准输出</span>

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

div---div标签是一个标准的块标签，主要用来布局。

块标签：占据整行空间，对宽高等属性生效。

img---引入图片到页面

目前在网页中使用的图片主要有 GIF、JPG、PNG、BMP 格式，但以 GIF、PNG 和 JPG 使用居多。

GIF 支持动画和背景透明，同时图片通常比较小，但仅支持 256 色以内的图像，因此色彩不够丰富。

JPEG 支持 1670 万种颜色，但不支持动画和背景透明。当想要背景透明的时候，一般会使用PNG格式的

图片，所以我们可以根据两者的优缺点来选择图像的格式。

四、使用以上HTML标签制作如图所示的页面