Web前端.1——Web前端的简介，HTML的简介，部分HTML标签的使用

一.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标签

<标签 属性=“值”>内容 

例如：

标签内容

表示标签的开始、

表示属性名、align表示属性名、center表示属性值

   语法解析

标签通常成对出现，分为开始标签和结束标签，结束标签只是开始标签前面加一个“/”

标签可以有属性，属性必须有值

标签开始和标签结束中的内容称之为区域

标签不区分大小写p跟P是相同的。

 ·网页分类

1.静态网页：是指不修改网页的源代码前提下，网页无论在何时何地被浏览都将显示相同的内容。静态网页一般以html、htm结尾。

2.动态交互网页：交互网页是指用户提供给网站信息，网站根据用户提交的信息响应用户的要求。比如网上注册、论坛、调查等等。这种网页一般以aspx、jsp、php、asp等。 

三.HTML常用标签

·第一个HTML程序

1.创建一个文本文件，名字自取，修改文本文件的后缀名为.html

2.使用工具(sublime)打开这个文本文件。

  
    
    
  
  
    这是一个主体内容
  

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的表示删除线。

  
    
    
  
  
    粗体
    也是粗体
    斜体
    还是斜体
    下划线
    删除线
  

br、hr标签

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

  
    
    
  
  
    
这是一个换行符测试
这是一条分割线
  

 

 p标签：p标签表示段落

  
    
    
  
  
    

      第一行
    
    
第二段落
  

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

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

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

sub、sup、pre、span标签 

sub标签：表示文字下标。

pre标签：原样输出文本内容。

spanb标签：是一个标准行内输出，一般用来装饰包裹的文本内容，常见于装饰文本。

  
    
    
  
  
      22=4

      数组a的2下标：a[2]

      

      这是一个标准输出

      
      静夜思 —— 李白
       床前明月光，
        疑是地上霜。
         举头望明月，
          低头思故乡
      
  

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

hn、div标签

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

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

  
    
    
  
  
     
1级标题

     
2级标题
    
3级标题
    
4级标题
    
5级标题
    
6级标题
    
    
文字大小

  

 ·语义化标签

 

优点:

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

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

·多媒体标签

img标签：

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

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

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

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

 常用标签的使用

   
      
	  
	  
	  
	  
	  
	  
   
   
       
	   
	   Web前端
	   就是
	   有多种技术制作，
用来给用户展示的网页，
	   
也可以
	   认为是网站的前台部分。
	   
静态网页：是指不修改源码的前提，
无论何时何地去访问都将显示相同的内容。
			  
动态网页：通过用用户提交的信息给网站，
而反馈出的页面结果。
	   
	   
	   I love you
	   
	   
111111
	   02
	   105
	   

	   
	   
8888888
	   
8888888
	   
8888888
	   
8888888
	   
8888888
	   
8888888
	   

	     15882367496PL
	   
	   
它用来编写顶部空间区域
	   
它用来编写页面主体内容
	   
它用来编写页面底部信息
	   
	   
	   
它用来编写顶部空间区域
	
	   
	   
	   
	   
	   
   
   

·总结 

以上就是Web前段的简介以及HTML的简介，部分HTML标签的使用。在Web前端的学习中,一定要多写多记，牢记各类标签的作用。