3 前端（上）： Web开发相关概念、HTML语法、CSS语法

文章目录

前言：导学
- 1 Web开发相关概念
- 2 Web标准（网页标准）
- 3 软件架构（CS/BS）
- - （1）C/S: Client/Server 客户端 / 服务器端
  - （2）B/S: Browser/Server 浏览器 / 服务器端
VSCode配置前段开发环境
一、HTML概念
- 1 概念
- 2 HTML快速入门
- - （1）语法快速入门
  - （2）VSCode一个！（快捷键）快速生成html框架和对html框架做一个简单的解释
  - （3）敲html技巧：只需要输入标签名 + 回车就能自动不全，不需要手动输入尖括号哪些
二、HTML标签
- 1 文件标签：构成html最基本的标签
- - （1）< html >< /html >:根标签，定义 HTML 文档的根（表示是最顶层的标签，其他标签都是其儿子）。
  - （2）< head >< /head >:头标签，定义关于文档的信息，用于指定html文档的一些属性。引入外部的资源
  - （3）< title >< /title >：标题标签，用来定义浏览器最顶端的那个标题（注意不是具体的展示文本的那个标题）
  - （4）< body >< /body >：定义文档的主体（就是具体的网页具体要展示的那部分的主题）。
- 2 文本标签：和文字有关的标签
- - （1）< h1 >< /h1>: (h1-h6) 文本里面一级到六级标题
  - （2）< p >< /p >：段落标签，段落标签就是让段落间间距变大仅此而已
  - （3）< br > 或者 < br/ > ：换行
  - （4）< hr > 或者 < hr/ > ：水平线标签，产生一条水平线
  - （5）< b > < /b > ：字体加粗
  - （6）< i >< /i > ：斜体
  - （7）< font >< /font > ：对字体进行一些样式设置
  - （8）< center>< /center>：文本居中标签，可以前提font使用
  - （9）补充：属性定义
  - - color：颜色属性
    - - < font color = "red">举头望明月，低头思故乡。< /font>
      - < font color = "rgb(34,56,10)">举头望明月，低头思故乡。< /font>
      - < font color = "#2D1475">举头望明月，低头思故乡。< /font>
    - width：宽度属性（单位是像素点）
    - - < hr color = "red", width="300">
      - < hr color = "red", width="50%"> 设置水平线宽度为50%,这个50相对是是父级串口，一般就是你打开的那个窗口
    - size: 大小属性、高度（如果是字体就是字体大小）
    - - < font size = "5">举头望明月，低头思故乡。< /font>
  - （10）html中常见特殊字符的占位符
  - 文本标签小案例练习
- 3 图片标签 < img src="1.png" alt="加载失败">
- 4 列表标签
- - （1）有序列表 < ol >< li > < /li >...< /ol >
  - （2）无序列表： < ul >< li > < /li >...< /ul >
- 5 超链接标签：< a href="目标URL">链接文本< /a>
- 6 表格标签
- - （1）基本语法
  - （2）综合案例：使用表格来完成界面布局（后面有时间会将这部分补上，待定。。。）
- 7 表单标签：（控件）用于采集用户输入信息
- - （1）< form >< /form > ：表单容器（所有的搜集信息的控件都必须被其包裹，不然控件就是一个空架子）
  - （2）标签控件：< label >< /label >
  - （3）输入控件
  - （4）下拉菜单控件
  - （5）多行文本输入控件
  - （6）按钮控件
  - （7）分组和标题
  - （8）结合CSS的一个完整演示
  - （9）练习：使用表格和表单布局一个注册界面（待定。。。。）
- 8 特殊标签
- - （1）< div >< /div > ：块标签（块级元素）
  - （2）< span >< /span >：行内标签（行级元素）
  - （3）语义化标签（html5新特性）
  - - ---- < header >< /header >：定义页面的头部区域，通常包含网站标题、导航栏等
    - ---- < nav >< /nav >：定义导航栏，通常包含链接到其他页面或部分的菜单
    - ---- < footer >< /footer >：定义页面的底部区域，通常包含版权信息、联系方式等
三、CSS：页面美化和布局
- 1 CSS与HTML结合快速入门（三种结合调用方式）
- - （1）内联样式（当前标签中生效）
  - （2）内部样式（当前html中生效）
  - （3）外部样式（所有引入了css的样式表的html中生效）
- 2 CSS基本语法
- - （1）基本选择器
  - - ---- id选择器
    - ---- 元素选择器（标签名称选择器）：根据标签名称来控制对应的CSS
    - ---- 类选择器：选择具有相同class属性值的元素
  - （2）扩展选择器（选择器的高级使用）
  - - ---- 选择所有元素
    - ---- 并集选择器
    - ---- 子选择器
    - ---- 后代选择器
    - ---- 属性选择器
    - ---- 伪类选择器：选择具有某些状态的元素
- 3 CSS属性
- - （1）字体、文本
  - （2）背景
  - （3）边框轮廓
  - （4）尺寸
- 4 传统的div进行页面布局：盒子模型（待定.....）

前言：导学

1 Web开发相关概念

Web: 全球广域网，也称为万维网(www World Wide Web)，能够通过浏览器访问的网站。
前后端分离开发模式（Web网站工作流程）：
混合开发模式（不建议）：前后端不分离

2 Web标准（网页标准）

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C(WorldWide Web Consortium，万维网联盟)负责制定。
三个组成部分:
- HTML: 负责网页的结构(页面元素和内容)。
- CSS: 负责网页的表现(页面元素的外观、位置等页面样式，如:颜色、大小等)，布局等。
- JavaScript: 负责网页的行为(交互效果)。

3 软件架构（CS/BS）

（1）C/S: Client/Server 客户端 / 服务器端

在用户本地有一个客户端程序，在远程有一个服务器端程序
如:QQ，迅雷…

优点:
用户体验好
缺点:
开发、安装，部署，维护麻烦

（2）B/S: Browser/Server 浏览器 / 服务器端

只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序

优点:
开发、安装，部署，维护简单
缺点:
如果应用过大，用户的体验可能会受到影响
对硬件要求过高
资源分类:
- 1 静态资源: 使用静态网页开发技术发布的资源。
  - 所有用户访问，得到的结果是一样的。
  - 如:文本，图片，音频、视频，HTML, CSS, JavaScript
  - 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
  - 网页上的静态资源，基本就是HTML, CSS, JavaScript这三种
- 2 动态资源 : 使用动态网页及时发布的资源。
  - 所有用户访问，得到的结果可能不一样。
  - 如: jsp / servlet, php, asp…技术都是处理动态资源的
    如果用户请求的是动态资源，那么服务器会先将动态资源转换成静态资源，再将转换成的静态资源发送给浏览器展示
  - 举个例子说明，对于CSDN的个人主页，每个人的个人信息都不一样，要展示的当然都不一样。这些信息都是从数据库中根据每个用户不同而获取展示的。动态资源就是用来描述这种情形，说人话就是业务层根据用户不同发送的数据不同，和静态资源没区别。

VSCode配置前段开发环境

VSCode在前端开发中使用最多，用这个来编辑html和css等前端的技术比较好用，还有很多前段技术都使用vscode快速可以配置很方便。

安装VSCode：这个直接装就行，基本没有什么注意事项
安装插件：
- Chinese (Simplified) Language Pack：适用于 VS Code 的中文（简体）语言包
- HTML CSS Support：在编写样式表的时候，自动补全功能大大缩减了编写时间
- JavaScript (ES6) code snippets：支持ES6语法提示
- Mithril Emmet：一个能大幅度提高前端开发效率的一个工具，用于补全代码
- Path Intellisense：路径提示插件
- Vue 3 Snippets：在 Vue 2 或者 Vue 3 开发中提供代码片段，语法高亮和格式化的 VS Code 插件，能极大提高你的开发效率。
- VueHelper：vscode最好的vue代码提示插件，不仅包括了vue2所有api，还含有vue-router2和vuex2的代码
- Auto Close Tag：自动闭合HTML/XML标签
- Auto Rename Tag：自动完成另一侧标签的同步修改
- Beautify：格式化 html ,js,css
- Bracket Pair Colorizer：给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色
- open in browser：vscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari
- Vetur：Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。
- File Utils：File Utils插件,可以方便快捷的来创建、复制、移动、重命名文件和目录
- IntelliJ IDEA Keybindings：安装VSCode的插件 IntelliJ IDEA Keybindings 即可在VSCode中使用IDEA的快捷键。
- Code Spell Checker
  拼写检查器。比如 banana 单词写错成 banane ，会提示你是否修改成 banana ，也可以将 banane 添加至检查器的字典中

一、HTML概念

html官方手册：还是要学会查询官方手册
现在HTML已经发展到HTML5了，所以我们直接就按照HTML5来学习了

1 概念

概念: 是最基础的网页开发语言
- Hyper Text Markup Language 超文本标记语言
- 超文本: 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
  人话就是：超级文本语言，能够放文字、图片、音频等各种数据的一种语言（理解成一种文本表示的形式即可）
- 标记语言:
  - 由标签构成的语言。<标签名称> 如 html，xml等
  - 标记语言不是编程语言

2 HTML快速入门

（1）语法快速入门

语法:
- （1）html文档后缀名 .html 或者 .htm
- （2）标签分为
  - 围堵标签: 有开始标签和结束标签。如<html></html>
  - 自闭和标签: 开始标签和结束标签在一起。
    如**<br/> 换行符标签**和 <img src=“1.png”/> 图片标签
    另外，这种自闭和标签，最后面/可以省略 <br> 、 <img src=“1.png”> 就可以了
- （3）标签可以嵌套
  需要正确嵌套，不能你中有我，我中有你
  错误: <a><b></a></b>
  正确: <a><b></b></a>
- （4）在开始标签中可以定义属性，属性是由键值对构成
  <font color = ‘red’>Hello World</font> 这个里面的color = 'red’就是属性
  值需要用引号(单双都可)引起来
- （5）html的标签不区分大小写，但是建议使用小写。

在这里插入图片描述

<html>          <!-- 声明文档类型 --><head>      <!-- 头部标签，用于存放元数据 --><title>HTML快速入门</title>      <!-- 设置网页标题 --></head><body>                     <!-- 主体标签，用于存放网页内容 --><h1>Hello World</h1>         <!-- h1标题标签 --><font color = 'red'>Hello World</font><br/>      <!-- 字体标签，设置字体颜色 -->  <!-- <br>标签用于换行 --><font color = 'green'>Hello World</font><br/><img src="1.png"/>         <!-- 图片标签，用于插入图片 --></body>
</html>

在这里插入图片描述

（2）VSCode一个！（快捷键）快速生成html框架和对html框架做一个简单的解释

<!DOCTYPE html>      <!-- 声明文档类型 -->
<html lang="en">     <!-- 这个里面lang属性声明这个html是那个国家的，这里en表示英国，其实随便写，不写也行 -->
<head><meta charset="UTF-8">    <!-- 设置字符编码 --><meta name="viewport" content="width=device-width, initial-scale=1.0">    <!-- 设置视口,设置浏览器的兼容性 --><title>HTML快速入门</title>
</head>
<body><h1>Hello World</h1>      <font color = 'red'>Hello World</font><br/><font color = 'green'>Hello World</font><br/><img src="1.png"/></body>
</html>

（3）敲html技巧：只需要输入标签名 + 回车就能自动不全，不需要手动输入尖括号哪些

二、HTML标签

官方文档：快速查询标签

1 文件标签：构成html最基本的标签

（1）< html >< /html >:根标签，定义 HTML 文档的根（表示是最顶层的标签，其他标签都是其儿子）。

（2）< head >< /head >:头标签，定义关于文档的信息，用于指定html文档的一些属性。引入外部的资源

比如这样在这里指定html的编码，后面学了CSS还可以再这里引入一些其他外部资源，类似python中的导包操作。

（3）< title >< /title >：标题标签，用来定义浏览器最顶端的那个标题（注意不是具体的展示文本的那个标题）

在这里插入图片描述

（4）< body >< /body >：定义文档的主体（就是具体的网页具体要展示的那部分的主题）。

2 文本标签：和文字有关的标签

（1）< h1 >< /h1>: (h1-h6) 文本里面一级到六级标题

<!-- 标题标签 h1~h6演示 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

演示：
在这里插入图片描述

（2）< p >< /p >：段落标签，段落标签就是让段落间间距变大仅此而已

<!-- <p></p> 段落标签演示：段落标签就是让段落间间距变大仅此而已 -->
那年冬天，祖母死了，父亲的差使⑴也交卸了，正是祸不单行的日子。我从北京到徐州，打算跟着父亲奔丧⑵回家。到徐州见着父亲，看见满院狼藉⑶的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说：“事已如此，不必难过，好在天无绝人之路！”<br>
回家变卖典质⑷，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨澹⑸，一半为了丧事，一半为了父亲赋闲⑹。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。<br><br><br><p>那年冬天，祖母死了，父亲的差使⑴也交卸了，正是祸不单行的日子。我从北京到徐州，打算跟着父亲奔丧⑵回家。到徐州见着父亲，看见满院狼藉⑶的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说：“事已如此，不必难过，好在天无绝人之路！”</p>
<p>回家变卖典质⑷，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨澹⑸，一半为了丧事，一半为了父亲赋闲⑹。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。</p>

演示：
在这里插入图片描述

（3）< br > 或者 < br/ > ：换行

< br > 或者 < br/ >: html语法并没有那么严格，所以这种自闭和标签，最后面/可以省略 <br>

（4）< hr > 或者 < hr/ > ：水平线标签，产生一条水平线

【注】：< hr > 还存在一些属性可以控制样式，例如color等。这里我们了解一下，学习了CSS后这些样式都是要用CSS控制的
因为html5中已经废弃了这些属性，后面大家都统一使用CSS来控制即可。

属性:
- color: 颜色
- width: 宽度
- size: 高度，大小（如果是字体就是字体大小）
- align: 对其方式（html5已经废弃，所以有点浏览器不能出现效果，还是默认居中）
  - center: 居中
  - left: 左对齐
  - right: 右对齐
    对齐方式默认是居中对齐的

<!-- hr 水平线标签演示 -->
<hr>
<hr color="red">    <!-- 设置水平线颜色 --><!-- width : 宽度属性演示 -->
<hr color = "green", width="300">    <!-- 设置水平线宽度为300像素点 -->
<hr color = "green", width="50%">    <!-- 设置水平线宽度为50%,这个50相对是是父级串口，一般就是你打开的那个窗口% -->

演示：
在这里插入图片描述

（5）< b > < /b > ：字体加粗

<!-- <b></b> 加粗标签演示 -->
床前明月光，疑是地上霜。<br>
<b>床前明月光，疑是地上霜。</b>

演示：
在这里插入图片描述

（6）< i >< /i > ：斜体

<!-- <i></i> 斜体标签演示 -->
举头望明月，低头思故乡。<br>
<i>举头望明月，低头思故乡。</i>

演示：
在这里插入图片描述

（7）< font >< /font > ：对字体进行一些样式设置

属性:
- color: 字体颜色
- size: 字体大小
- face: 字体（“楷体”，“宋体”等等）

 <!-- font演示 -->
<font color = "red">举头望明月，低头思故乡。</font><br>
<font color = "rgb(34,56,10)">举头望明月，低头思故乡。</font><br>     
<font color = "#2D1475">举头望明月，低头思故乡。</font><br><br><!-- size : 字体大小属性演示 -->
<font size = "5">举头望明月，低头思故乡。</font><br>
<font size = "10">举头望明月，低头思故乡。</font><br>
<font size = "15">举头望明月，低头思故乡。</font><br>

演示：
在这里插入图片描述

（8）< center>< /center>：文本居中标签，可以前提font使用

<!-- 文本居中标签 -->
<center>举头望明月，低头思故乡。</center>
<center><font color = "red">举头望明月，低头思故乡。</font>
</center>

演示：
在这里插入图片描述

（9）补充：属性定义

属性的值我们都习惯" "引号包裹成字符串

color：颜色属性

< font color = “red”>举头望明月，低头思故乡。< /font>

< font color = “rgb(34,56,10)”>举头望明月，低头思故乡。< /font>

< font color = “#2D1475”>举头望明月，低头思故乡。< /font>

主要有三种写法：
- 英文单词: red, green, blue
  < font color = “red”>举头望明月，低头思故乡。< /font>
- rgb(值1，值2，值3): 值的范围:0~255 ,另外部分浏览器不支持这种
  < font color = “rgb(34,56,10)”>举头望明月，低头思故乡。< /font>
- #值1值2值3: 值的范围:00~FF之间。
  < font color = “#2D1475”>举头望明月，低头思故乡。< /font>

【注】：rgb或者16进制的颜色不知道是什么：直接在线取色器就可以了

width：宽度属性（单位是像素点）

< hr color = “red”, width=“300”>

< hr color = “red”, width=“50%”> 设置水平线宽度为50%,这个50相对是是父级串口，一般就是你打开的那个窗口

数值: width=‘20’, 数值的单位，默认是 px(像素)
< hr color = “red”, width=“300”>
数值%:占比相对于父元素的比例
< hr color = “red”, width="50%"> 设置水平线宽度为50%,这个50相对是是父级串口，一般就是你打开的那个窗口

演示：
在这里插入图片描述

size: 大小属性、高度（如果是字体就是字体大小）

< font size = “5”>举头望明月，低头思故乡。< /font>

<!-- size : 字体大小属性演示 -->
<font size = "5">举头望明月，低头思故乡。</font><br>
<font size = "10">举头望明月，低头思故乡。</font><br>
<font size = "15">举头望明月，低头思故乡。</font><br>

演示：
在这里插入图片描述

（10）html中常见特殊字符的占位符

有很多特殊字符都可以上官网去查看，这里只介绍几个比较常见的：

显示结果	描述	实体名称
	空格
<	小于号	<
>	大于号	>
≤	小于等号	≤
≥	大于等号	≥
×	乘号	×
÷	除号	÷

【注】：一般情况下如果不会发生与语法冲突的情况，不必一定要实体名称也可以（空格就必须要使用实体名称，键盘回车是不行的）

文本标签小案例练习

需求：对下面的截图用html排版出来

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>黑马程序员简介</title>
</head>
<body><h1>公司简介</h1>
<hr color="#ffd700"><p>
<font color = "#FF0000">“中关村黑马程序品训练营"</font>是由<b><i>传智播客</i></b>联合中关村 软件园、CSDN，
并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业,解决当 前软件开发技术飞速发
展，而企业招不到优秀人才的困扰。
</p><p>
目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练 基地，并被评为中关村软件园重点扶持人才企业。
</p><p>
黑马程序员的学员多为大学毕业后,有理想、有梦想,想从事IT行业，而没有环境和机遇改 变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在 90%以上的企业招聘流程更为严
格。任何一名学员想成功入学“黑马程序员”,必须经历长达2个月的面试流程,这些流程中不仅包括严格的技术测试、自 学能力测试,还包括性格测试、压力测试、品德测试等等测试。
毫不夸张地说，黑马程序员训练营所有学员 都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。
</p><p>
中关村黑马程序品训练营不仅着重培养学品的基础理论知识，更注重培养项目实施管理能力，并切关注技术革新,不断引入先进的技术,研发更新技术课程，确保学员进入企业后不仅能独
立从事开发 工作，更能给企业带来新的技术体系和理念。
</p><p>
一直以来，黑马程序员以技术视角关注IT产业发展,以深度分享推进产业技术成长,致力于弘扬 技术创新，倡导分享、开放和协作,努力打造高质量的IT人才服务平台。
</p>
<hr color="#ffd700"><font color =