一.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可以使用在广泛的平台上；
·HTML的基础语法
语法结构：HTML标签
<标签 属性=“值”>内容</标签>
例如：<p align="center">标签内容</p>
<p align="center">表示标签的开始、</p>表示属性名、align表示属性名、center表示属性值
语法解析
标签通常成对出现，分为开始标签和结束标签，结束标签只是开始标签前面加一个“/”
标签可以有属性，属性必须有值
标签开始和标签结束中的内容称之为区域
标签不区分大小写p跟P是相同的。
·网页分类
1.静态网页：是指不修改网页的源代码前提下，网页无论在何时何地被浏览都将显示相同的内容。静态网页一般以html、htm结尾。
2.动态交互网页：交互网页是指用户提供给网站信息，网站根据用户提交的信息响应用户的要求。比如网上注册、论坛、调查等等。这种网页一般以aspx、jsp、php、asp等。
三.HTML常用标签
·第一个HTML程序
1.创建一个文本文件，名字自取，修改文本文件的后缀名为.html
2.使用工具(sublime)打开这个文本文件。
<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
·常用标签
strong/b、em/i、 u、del 标签
strong/b标签：这两标签显示效果一样，都是加粗效果，strong有强调语气的意味，但对于程序员讲显示效果一致的话，选择简单的，主要使用b标签表示加粗。
em/i标签：em、i标签都是加斜文本标签，现在我们一般使用i标签加斜问题，em标签有存在强调的意思，现在随着css3的使用，而慢慢的用来标注css的字体图标。
u和del标签：u表示下划线，del的表示删除线。
<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标签：br标签表示换行。 hr标签：hr标签表示分割线
<html> <head> <meta charset = "utf-8"> <title>换行|分割线</title> </head> <body> <br>这是一个换行符测试<hr width = 400 size = 1 noshade>这是一条分割线 </body> </html>
p标签：p标签表示段落
<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标签：表示文字下标。
pre标签：原样输出文本内容。
spanb标签：是一个标准行内输出，一般用来装饰包裹的文本内容，常见于装饰文本。
<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标签：hn标签中的n指的是标题1-6对应了不同级别的6个级别，主要用来装饰标题。
div标签：它是一个 标准的块标签，主要用来布局。
<html> <head> <meta charset="utf-8"> <title>标题和div</title> </head> <body> <h1 style="display:inline;">1级标题</h1><!--hn标签会自动换行，h1和h2后面的修饰语句是禁止其自动换行--> <h2 style="display:inline;">2级标题</h2> <h3>3级标题</h3> <h4>4级标题</h4> <h5>5级标题</h5> <h6>6级标题</h6> <div style="font-size: 15px;">文字大小</div><!--设置div区域内文字大小。--> </body> </html>
·语义化标签
优点:
增强代码可读性，提高程序员的维护效率，降低维护成本。
可以为搜索引擎起到引导作用。
·多媒体标签
img标签：
目前在网页中使用的图片主要有 GIF、JPG、PNG、BMP 格式，但以 GIF、PNG 和 JPG 使用居多。
GIF 支持动画和背景透明，同时图片通常比较小，但仅支持 256 色以内的图像，因此色彩不够丰富。
JPEG 支持 1670 万种颜色，但不支持动画和背景透明。当想要背景透明的时候，一般会使用PNG格式的
图片，所以我们可以根据两者的优缺点来选择图像的格式。
<html > <head> <meta charset="UTF-8"> <title>在网页中插入图片</title> </head> <body> <!-- img标签用来引入图片到页面中 src是一个必须的属性，该属性表示图片的地址 如下面的就是表示在当前文件夹下有个images文件夹，里面有个图片， 名称叫做rose.jpg，这种叫做相对路径寻找法 --> <img src="images/rose.jpg"> <!-- 当然也可以这样写，和上面一个意思 --> <img src="./images/rose.jpg"> <!-- 这样写表示绝对路径查找，一般很少这样写，因为这个路径只是这台电脑的路径， 换一台电脑就没有这张图片了 --> <img src="c://images/rose.jpg"> <!-- 如果路径是网络路径也可以滴哦~~ --> <img src="http://www.xianoupeng.com/uploadfile/2019/0428/20190428101229423.png"> </body> </html>
常用标签的使用
<html> <head> <!--head标签中的内容一般是浏览器所需要的信息--> <!--charset是meta标签的属性--> <!--布尔型标签：只能写了就自带效果 比如 checked--> <!--常用的字符集：gdk是GB2312的补充 BIG5繁体中文 UTF-8它是通用字符集 GB2312简体中文--> <meta charset="UTF-8" name="author" name="description" name="keywords"> <title>Web前端</title> <style> </style> </head> <body> <!--body标签中一般书写的网页的具体内容--> <!--bold=b italic=i del=delete u=underline p=paragraph--> <b>Web前端</b> <strong>就是</strong> <i>有多种技术制作</i>，<br><em>用来给用户展示的网页，</em> <p><del>也可以</del> <u>认为是网站的</u>前台部分。 <pre> 静态网页：是指不修改源码的前提， 无论何时何地去访问都将显示相同的内容。 动态网页：通过用用户提交的信息给网站， 而反馈出的页面结果。 </pre> <!--行内标签：指它只修饰被包裹的内容,他不能直接支持宽高属性--> <span style="color:red;border:1px solid red;">I love you</span> <!--块标签:占满一行的标签，即使他的内容不够，并且它支持宽高属性--> <div style="border:1px solid red;height:100px;">111111</div> 0<sub>2</sub> 10<sub>5</sub> <hr width="100"> <!--hn:h1-h6--> <h1>8888888</h1> <h2>8888888</h2> <h3>8888888</h3> <h4>8888888</h4> <h5>8888888</h5> <h6>8888888</h6> <p align="right"> <font color="0x00ff0000">15882367496PL</font> </p> <div id="top" style="border:1px solid yellow;"height=200>它用来编写顶部空间区域</div> <div id="content">它用来编写页面主体内容</div> <div id="bottom">它用来编写页面底部信息</div> <!--语义化标签--> <header id="top" style="border:1px solid yellow;"height=200>它用来编写顶部空间区域</header> <!--src:source填写图片的资源路径，三种填写方式：1.绝对路径 2.相对路径 3../式路径访问方式 alt:如果图片不能正常显示，那么alt中的文字就会显示在图片位置 title:当你把鼠标移动到图片的位置上悬停，会显示图片的title /Users/musicbear/10.22web/new_file.html--> <img src="网络.png" title="计算机网络"> <img src="./pic/网络.png"> <img src="pic/网络.png"> <img src="c://Windows//System32//风景.png"> </body> </html>
·总结
以上就是Web前段的简介以及HTML的简介，部分HTML标签的使用。在Web前端的学习中,一定要多写多记，牢记各类标签的作用。