HTML

发表于 2024-11-13 分类于前端， html

简单介绍html的知识为后面学vue作准备

前后端分离开发

什么是前后端分离？

在前后端分离的开发模式中，后端仅返回前端所需的数据，前端负责渲染HTML⻚⾯，后端不再控制前端的效果，⽤户看到什么样的效果，从后端请求的数据如何加载到前端中，都由前端⾃⼰决定，后端仅仅需要提供⼀套逻辑对外提供数据即可，并且前端与后端的耦合度相对较低，在这种模式中，我们通常将后端开发的每个视图都成为⼀个接⼝，或者API，前端通过访问接⼝来对数据进⾏增删改查。总结⼀句话，后台负责提供数据，前端负责数据展示，职责分离，分⼯明确。对应的数据交互如下图：

总结

经典的JSP+Servlet+JavaBean的MVC时代，到SSM（Spring + SpringMVC + Mybatis）和SSH（Spring + Struts2 + Hibernate）的Java 框架时代，再到前端框架（VueJS、AngularJS、ReactJS）为主的MV*时代，然后是NodeJS引领的全栈时代，技术和架构⼀直都在进步。虽然“基于NodeJS的全栈式开发”模式很让⼈兴奋，但是把基于Node的全栈开发变成⼀个稳定，让⼤家都能接受的东⻄还有很多路要⾛。创新之路不会⽌步，⽆论是前后端分离模式还是其他模式，都是为了更⽅便得解决需求，但它们都只是⼀个“中转站”。前端项⽬与后端项⽬是两个项⽬，放在两个不同的服务器，需要独⽴部署，两个不同的⼯程，两个不同的代码库，不同的开发⼈员。前端只需要关注⻚⾯的样式与动态数据的解析及渲染，⽽后端专注于具体业务逻辑。

大前端？

简单来说，⼤前端就是所有前端的统称，⽐如Web、Android、iOS、Watch等，最接近⽤户的那⼀层也就是UI层，然后将其统⼀起来，就是⼤前端。
由于node的出现，前端⼯程师不需要依赖于后端程序⽽直接运⾏，从⽽前后端分离起来。所以当开发⼀个新产品的时候服务只需要写⼀次，但是⾯向⽤户的产品可能有很多，例如⽹站、Android客户端、iOS客户端和微信⼩程序等。由于各个平台使⽤的技术栈都不⼀样，代码⽆法复⽤，⾮常浪费⼈⼒、物⼒。那么有没有什么技术能够解决这⼀痛点呢？⼤前端应运⽽⽣，其实⼤前端的主要核⼼就是跨平台技术，有了跨平台技术，各个平台的差异性就抹平了，开发者只需要⼀套技术栈就可以开发出适⽤于多个平台的客户端。
⼤前端的学习流程：HTML5/CSS3->云服务器->JavaScript(核⼼)->jQuery->HTML5 API->ES6(核⼼)->Vue（React）->原⽣App/混合式开发App/⼩程序->NodeJs->MySQL
前端开发环境的搭建安装nodejs，Vue等安装编译⼯具VSCode，webstrom等
web前端基础 HTML CSS JavaScript(ES5,ES6)
web前端框架 jQuery Vue React Angular 第三⽅组件库(elementUI，iView)
原⽣移动端(可选) iOS Android
混合移动端开发⼩程序，微信⼩程序，⽀付宝⼩程序等 ReactNative Flutter、uni-app等
Node后端开发 CommonJS RequireJS Node.js

HTML

超⽂本标记语⾔（英语：HyperText Markup Language，简称：HTML）是⼀种⽤于创建⽹⻚的标准标记语⾔。学习⽹站：https://www.w3school.com.cn/html/index.asp HTML5和HTML4的关系：

HTML5是应⽤超⽂本标记语⾔（HTML）的第五次修改，代表html语⾔第5版本。

HTML4是应⽤超⽂本标记语⾔（HTML）的第四次修改，代表html语⾔第4版本。

HTML4是为了适应 PC （Personal Computer）时代产⽣的，HTML5是为了适应移动互联⽹时代产⽣的。

HTML5和HTML4都是w3c（World Wide Web）推荐的标准语⾔.

HTML5在HTML4的基础上新增了⼀些特性。⽐如，让标签更具有语义化，新增了⼀些表单控件，新增了Web API等。

文档头信息

使⽤VSCode⼯具可以快速⽣成⽂档头信息，在VSCode中新建1-hello.html，在该⽂件内容中输⼊英⽂!，回⻋即可快速⽣成完整的⽂档头信息。以.html或者.htm结尾的⽂件中使⽤!或者html:5来快速产⽣⽂档头信息。

<!-- <!DOCTYPE> 不是 HTML 标签。它为浏览器提供⼀项信息（声明），即 HTML 是⽤HTML5版本编写的。 -->
 <!DOCTYPE html>
 <!-- 语⾔是English -->
 <html lang="en">
 <!-- ⽂档的头部，不在⽹⻚的视⼝区显示 -->
 <head>
  <!-- 元信息，字符编码UTF-8 -->
  <meta charset="UTF-8">
  <!-- 元信息，设置浏览器优先使⽤什么模式来渲染⻚⾯，以下代码告诉IE浏览器，IE8/9及以后的版本都会以最⾼版
本IE来渲染⻚⾯，是针对IE浏览器的设置 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 元信息，设置可使⽤的宽度为设备的宽度，初始缩放⽐例为1 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- ⽂档的标题，在选项卡上显示 -->
  <title>Document</title>
 </head>
 <!-- ⽂档的体部，在⽹⻚的视⼝区显示 -->
 <body>
  <!-- 该内容会显示在⽹⻚中 -->
  Hello
 </body>
 </html>

注释：

1	<!--注释的内容-->

<body>
  <table>
    <caption>信息表</caption>
    <thead>
      <tr>
        <th>列的标题</th>
        <th>列的标题</th>
        <th>列的标题</th>
        <th>列的标题</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
      </tr>
      <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
      </tr>
      <tr>
        <td>31</td>
        <td>32</td>
        <td>33</td>
        <td>34</td>
      </tr>
    </tbody>
  </table>
 </body>

效果

如果想要有边框和宽度

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 设置表格标签样式 */
table {
/* 表格宽度 */
width: 400px;
/* 表格内⽂字⽔平对⻬⽅式 */
text-align: center;
   }
/* 设置table标签、td标签、th标签的样式 */
table,
table td,
table th {
/* 设置边框为1px的宽度、实线、颜⾊为⿊灰⾊ */
border: 1px solid #444;
/* 表格内边框合并 */
border-collapse: collapse;
   }
</style>
</head>
<body>
<table>
<caption>信息表</caption>
<thead>
<tr>
<th>列的标题</th>
<th>列的标题</th>
<th>列的标题</th>
<th>列的标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
</tbody>
</table>
</body>
</html>

效果

表单

表单可以⽤来采集⽤户信息和⽤户需求的，⽤户可以在表单控件⾥输⼊或选择内容。

<body>
 <form action="">
 <div>
⽤户名：<input type="text" name="username">
 </div>
 <div>
密码：<input type="password" name="password">
 </div>
 <div>
性别：<label for="male"><input id="male" type="radio" name="gender" value="male">
男</label>
 <label for="female"><input id="female" type="radio" name="gender" value="female">
⼥</label>
 </div>
 <div>
爱好：
<label for="basketball">
 <input id="basketball" type="checkbox" name="hobby" value="basketball">
篮球
</label>
 <label for="swimming">
 <input id="swimming" type="checkbox" name="hobby" value="swimming">
游泳
</label>
 <label for="dancing">
 <input id="dancing" type="checkbox" name="hobby" value="dancing">
跳舞
</label>
 </div>
 <div>
出⽣⽇期：<input type="date" name="birth">
 </div>
 <div>
城市：
<select name="city">
 <option value="">请选择</option>
 <option value="beijing">北京</option>
 <option value="shanghai">上海</option>
 <option value="guangzhou">⼴州</option>
 </select>
 </div>
 <div>
个⼈介绍：
<textarea name="info" cols="30" rows="3"></textarea>
 </div>
 <div>
 <button>提交按钮</button>
 </div>
 </form>
</body>

效果：

图像

<!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 设置img标签样式 */
    img {
      /* 设置宽 */
      width: 400px;
      /* 设置⾼ */
      height: 200px;
    }
  </style>
 </head>
 <body>
       <img 
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F11
 14%2F0F620092Q5%2F200F6092Q5-6
1200.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg
 ?sec=1621259882&t=62897e09599d5a6e40d740b9f865fae0" alt="">
 </body>
 </html>

超链接a标签

a标签的target属性代表⽬标链接打开的⽅式，_blank代表在新⻚⾯打开

1	<a href="http://www.baidu.com" target="_blank">这是⼀个链接</a>

音视频

1 2	<!-- autoplay⾃动播放 controls控制条 loop循环播放 --> <audio autoplay controls loop src="./images/稻⾹.mp3"></audio>

1 2	<!-- 视频 --> <video autoplay controls loop src="./images/1.mp4"></video>

iframe标签

1	<iframe src="https://echarts.apache.org/zh/index.html" frameborder="0"></iframe

使用iframe标签在当前⽹⻚内嵌⼊其他⻚⾯

展示天气

<iframe width="300" height="30" frameborder="0" scrolling="no" hspace="0" 
src="https://i.tianqi.com/?c=code&a=getcode&id=34&py=chongqing&icon=1"></iframe>
 <iframe width="280" height="300" frameborder="0" scrolling="no" hspace="0" 
src="https://i.tianqi.com/?c=code&a=getcode&id=55&icon=1"></iframe>

网页选项卡图标

1	<link rel="icon" sizes="any" mask href="https://www.baidu.com/favicon.ico">

HTML

前后端分离开发

大前端？

HTML

文档头信息

标签

标签的结构

常用标签

表格标签

表单

图像

超链接a标签

音视频

iframe标签

网页选项卡图标