Web前端

MYSzero

已于 2022-10-29 17:35:34 修改

阅读量121

点赞数

分类专栏： Web前端文章标签： html 前端

于 2022-10-29 15:12:59 首次发布

本文链接：https://blog.csdn.net/MYSzero/article/details/127586694

版权

Web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

课程概述

什么而是Web前端？

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

那这里的所谓的多种开发技术就是我们本次课程要学习的东西，其中包含：

HTML
CSS
JavaScript
jQuery
BT（Bootstrap）

更高端的前端技术：

Angular
AngularJS
VUE
React
webpack
nodejs

第一章初识HTML

1.1HTML历史

HTML的前身是SGML，而SGML脱胎于GML语言，GML是一种文档语言。 1990年，web之父Tim Berners-Lee 发布了《HTML标签》的论文，借用SGML的标记语法，自此web诞生。

由IETF组织再完善制定出HTML2.0，之后HTML不断的完善，不同的组织对HTML的语法标记等有不同的处理模式，出现百家争鸣的现象。随着发展，W3C组织替代了IETF成为了HTML的新的标准制定者，后续HTML发展迅速，至99年，HTML4.01发布成为HTML发展中不可忽视的里程碑，在web中大量沿用直至今日。

之后W3C研发了XHTML1.0，期望以XML的标准来约束HTML使其更加规范，但是并未添加新的标签或者特性。这本来是好事，规范了语法标准。可是，后续非常大胆的推出的XHTML2.0，它放弃了兼容HTML，这对web来说就是灾难性的了。

1.2HTML简介

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

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

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

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

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

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

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

1.3HTML特点

1、简单灵活；

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

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

第二章开发准备工作

2.1 环境的安装和配置

开发环境：记事本工具即可，建议使用sublime软件，因为他是专门为书写代码而设计的，具有一些辅助作用。
运行环境：只要你有电脑，装有操作系统，那一定有浏览器，有这个就足够。这里建议大家使用google chrome。

2.2 浏览器简介

什么是浏览器

简单来说浏览器是一种显示和渲染网页的软件。早起浏览器只支持文本的显示。
浏览器的历史

93年伊利诺斯州的超级计算应用国家中心发布了第一款支持图形渲染的浏览器——mosiac，从那年起互联网呈爆炸式增长，mosiac为图形化网页设计奠定了基础。

94年Netscape发布了navigator浏览器，继承了mosaic的商业模式，在网上免费提供产品，迅速的抢占了市场份额，替代掉了mosaic，成为用户首选。

95年微软看到了互联网的潜力，发布了Internet explorer浏览器，也就是现如今的IE。由于微软将IE内置在windows系统之中，用户购买了windows之后就无须再下载浏览器，导致IE不断的蚕食navigator的市场份额，最终微软大获全胜，网景宣布破产。

百足之虫死而不僵，Netscape在失去市场份额之后，心知靠一己之力无法战胜强大的微软帝国，于是，Netscape选择开源其浏览器源代码并成立Mozilla公司，来试图再次抢回浏览器市场。开源之处，吸引了大量的开发者为之贡献代码和智慧，厚积薄发之后，02年Mozilla 1.0发布，同年衍生出Phoenix浏览器后改名firebird最终更名现如今如雷贯耳的浏览器firefox，通过几年的城店，与04年发布了Firefox 1.0版本。

另外，webkit开源浏览器也被许多浏览器产品所使用的。苹果将webkit移植到了自家mac os上与03年发布了基于webkit的浏览器Safari，08年google发布了基于webkit的浏览器Chrome，至此第二次浏览器大战拉起序幕。10年微软放弃了对IE的维护和开发，同样也是使用webkit的内核研发了edge浏览器，试图找回丢失的市场份额，但目前看来用处不大，浏览器份额一哥还是chrome。
浏览器排名

一哥chrome

二哥firefox

三哥edge IE Opera

2.5 HTML的基础语法

语法结构：HTML标签

<标签属性 = "值">内容</标签>
```
<p align = "center">标签内容</P>
```
语法格式：

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

语法解析

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

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

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

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

2.6 网页分类

静态网页

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

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

第三章 HTML常用的标签

3.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是html语言head区的一个辅助性标签，位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对。

meta元素可提供相关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词，包括作者、关键字、网页编码、自动刷新等信息。

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

3.2 常用标签

3.2.1 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>

3.2.2 br、hr标签

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

我们还是以代码为例来演示下效果。

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

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

3.2.3 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。

3.2.4 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>

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

3.2.5 hn、div标签

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

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

h1<!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>

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

3.3 语义化标签

优点：

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

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

3.4 多媒体标签

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="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>