Web前端

什么而是Web前端？

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

那这里的所谓的多种开发技术包含：

HTML

CSS

JavaScript

jQuery

BT（Bootstrap）

更高端的前端技术：

Angular

AngularJS

VUE

React

webpack

nodejs

HTML

一、HTML简介

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

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

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

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

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

头部描述了浏览器所需的信息

主体包含要说明的具体内容

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

二、HTML特点

简单灵活；
可扩展性，HTML采取子类元素的方式，为系统扩展带来保证；
平台无关性，HTML可以使用在广泛的平台上；

三、HTML的基础语法

语法结构：HTML标签

<标签属性 = “值”>内容</标签>
例：
```
<p align = "center">标签内容</P>
```

语法格式：

<p align = "center">标签内容</p>
<p align = "center">表示标签开始
</p>表示标签结束
align表示属性名
center表示属性值

语法解析

标签通常成对出现，分为其实标签和结束标签，结束标签只是开始标签前面加一个“/”
标签可以有属性，属性必须有值
标签开始和标签结束中的内容称之为区域
标签不区分大小写p跟P是相同的。

四、网页的分类

静态页面：在不修改源代码的前提下，无论何时何地你去访问这个网页都会得到相同的结果。
通常文件后缀名为 html、htm

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

五、HTML常用的标签

1、第一个HTML程序

第一步：创建一个文本文件，名字随你喜好随便起，修改文件的后缀名为.html（如何显示扩展名，如何新建文本文件需要提一下）

第二步：使用工具（sublime）打开这二个文本文件。

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

html标签

html标签表示网页的开始，应该把它放在最外层，其他所有的标签出去文件头声明都该放在html标签内。

head标签

表示头部标签，通常放title、meta、style等标签。从这些名字就能看出来，head标签的作用是用来定义页面属性。

body标签

表示主体标签，网页上所有要显示的内容都放在这个标签内。

meta标签

meta标签下载head标签内，meta提供了网页的信息，包括作者、关键字、网页编码、自动刷新等信息。

常用的网页编码有：GB2312 UTF-8 BIG5 GBK

2、常用标签

strong/b em/i del等常用标签

strong/b 标签

这俩标签显示效果一样，都是加粗的效果，strong有强调语气的意味，但对我们程序员来说显示效果一致的话，选简单的。主要使用b标签表加粗

em/i 标签

em、i标签都是加斜文本的标签，现在我们一般使用i标签加斜问题，em标签有存在强调的意思，现在随着css3的使用，而慢慢的用来标注css的字体图标。

u和del标签

u表示下划线，del的表示删除线。

<!DOCTYPE html>
<html><head><meta charset = "utf-8"><title>粗体|斜体|下划线|删除线</title></head><body><strong>粗体</strong><b>也是粗体</b><em>斜体</em><i>还是斜体</i><u>下划线</u><del>删除线</del></body>
</html>

br、hr标签

br标签表示换行
hr标签表示分割线

<html><head><meta charset = "utf-8"><title>换行|分割线</title></head><body><br>这是一个换行符测试<hr width = 400 size = 1 noshade>这是一条分割线</body>
</html>

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

p标签

p标签表示段落

<html><head><meta charset = "utf-8"><title>段落</title></head><body><p align = "center"><font color = "#ff0000">第一行</font></p><p align = "left">第二段落</p></body>
</html>

p标签表示段落，两个相邻的p标签之间会空一行，align是p段落的一个属性，right center left对align的值分别代表右对齐中心对齐和左对齐。

p标签与br标签有一些相似都能换行，但是br换行时行与行之间不空行。

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

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

sub、sup、pre、span标签

sub表示文字下标；
sup表示文字的上标；
pre标签原样输出文本内容；
span是一个标准行内输出，一般用来装饰包裹的文本内容，常见于装饰文本。

<!DOCTYPE html>
<html><head><meta charset = "utf-8"><title>sub sup pre span</title></head><body>2<sup>2</sup>=4<br>数组a的2下标：a<sub>[2]</sub><br><hr><span style="color:purple;font-size:20px">这是一个标准输出</span><br><pre>静夜思 —— 李白床前明月光，疑是地上霜。举头望明月，低头思故乡</pre></body>
</html>

行内标签：占据内容部分，对宽高等属性不能直接起作用。

hn、div标签

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

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>标题和div</title></head><body><h1>1级标题</h1><h2>2级标题</h2><h3>3级标题</h3><h4>4级标题</h4><h5>5级标题</h5><h6>6级标题</h6><div></div></body>
</html>

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

多媒体标签

img标签

目前在网页中使用的图片主要有 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文件夹，里面有个图片， 名称叫做rose.jpg，这种叫做相对路径寻找法 --><img src="data:images/1.jpg"> <!-- 当然也可以这样写，和上面一个意思 --><img src="./images/1.jpg"> <!--这样写表示绝对路径查找，一般很少这样写，因为这个路径只是这台电脑的路径， 换一台电脑就没有这张图片了--><img src="E:\Web Workplace\images/1.jpg">  <!-- 如果路径是网络路径也可以滴哦~~ --><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.QFdwl07_aviM1ch2KpyyFgHaEo?pid=ImgDet&rs=1"> </body>
</html>

作业

根据所学的标签制作如下页面

<!DOCTYPE html>
<html > <head><meta charset="UTF-8"> <title>将进酒</title> </head> <body><span><b style="font-size: 40px">将进酒</b><b style="font-size: 30px"> 君不见黄河之水天上来</b></span><div><img src="data:images\李白.png" style="float: left;"><p style="line-height: 40px">君不见黄河之水天上来，奔流到海不复回。<br>君不见高堂明镜悲白发，朝如青丝暮成雪。<br>人生得意须尽欢，莫使金樽空对月。<br>天生我材必有用，千金散尽还复来。<br>烹羊宰牛且为乐，会须一饮三百杯。<br>岑夫子，丹丘生，将进酒，杯莫停。<br>与君歌一曲，请君为我倾耳听。<br>钟鼓馔玉不足贵，但愿长醉不愿醒。<br>古来圣贤皆寂寞，惟有饮者留其名。<br>陈王昔时宴平乐，斗酒十千恣欢谑。<br>主人何为言少钱，径须沽取对君酌。<br>五花马、千金裘，<br>呼儿将出换美酒，与尔同销万古愁。<br></p></div></body>
</html>

效果图：

Web前端——什么是web前端，什么是HTML及其常用标签相关推荐

Web前端小白必看【网页开发工具/HTML常用标签】
网页开发工具和HTML常用标签一.网页开发工具vscode的使用 1.1常见的网页开发工具: 1.2vscode为例创建网页文件. 1.3vscode网页制作相关插件安装 1.4vscode出现的网 ...
前端技术栈-----WEB
目录前端技术栈开发工具 HTML静态页面结构常用标签注册表单展现 CSS技术选择器盒子模型用户注册表单 JavaScript JS定义特点和优势 HTML中引入JS JS语法 DO ...
web前端开发流程，前端微信支付流程
第一个阶段,开发环境和工具准备浏览器 (Google,FireFox,-) 下载,安装前端开发工具vscode, 下载.安装 node.npm.webpack.webpack-cli.cnpm,配置 ...
什么人适合学习web前端?怎样学好web前端开发?
web前端在IT互联网行业的发展前景是非常可观的,越来越多的人都在学习web前端技术,那么什么人适合学习web前端?怎样学好web前端开发?相信大家都想了解这些问题,我们来看看下面的详细介绍. 什么人 ...
美团开源Logan Web：前端日志在Web端的实现
来自:美团技术团队 2018 年,美团点评推出大前端日志系统-- Logan,并开源了 Android 与 iOS 端的 SDK.这次,我们又开源了在 Web 环境运行的 SDK.日志分析平台以及服务 ...
eclipese web前端开发教学_Web前端零基础好学吗？新手该怎么学？
众所周知,Web前端是现在很火的行业,找工作的人也多,招聘的公司也多,工作环境也好,各招聘公司给的工资也高,这么火热的行业还是供不应求. Web前端市场的供不应求直接导致前端工程师的待遇提高,另外一方 ...
WijmoJS 使用Web Workers技术，让前端 PDF 导出效率更高效
概述 Web Workers是一种Web标准技术,允许在后台线程中执行脚本处理. WijmoJS 的2018v3版本引入了Web Workers技术,以便在生成PDF时提高应用程序的运行速度. 一般来 ...
web设计师和前端设计师的互动—前端工程师应该具备的三种思维
如果你是一个天才工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你.但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需 ...
web前端技术分享：前端开发与后端开发的区别是什么？
相信很多人在技术岗都听到过前端和后端这两个职位,但是大部分人对前端开发与后端开发的区别是什么?并不是很清楚,下面小千就为大家详细的介绍一下两者的区别之处. web前端分享:前端开发与后端开发的区别是什 ...
《单页Web应用：JavaScript从前端到后端》——1.4 小结
本节书摘来自异步社区<单页Web应用:JavaScript从前端到后端>一书中的第1章,第1.4节,作者:[美]Michael S. Mikowski , Josh C. Powell著, ...

Web前端——什么是web前端，什么是HTML及其常用标签