🐲【前端技术】 一文搞懂 HTML

一、Web开发要解决的问题

  • 展示用户操作界面
  • 从后端获取数据,在用户界面上显示
  • 在前端『收集』用户填写的数据发送给后端执行『保存』或『更新』

二、Web开发相关概念

1、C/S模式

  • C:Client客户端

  • S:Server服务器

  • 缺点:不同操作系统平台下,同样的功能需要开发很多套不同的程序

    • Android平台
    • IOS平台
    • Windows平台
    • ......

2、B/S模式

  • B:Browser浏览器
  • S:Server服务器

在浏览器端开发一套用户界面即可,由于主流浏览器都遵循W3C组织定义的网页技术规则,所以同一套网页程序在不同浏览器上能够呈现相同的界面,大大提高开发效率

3、Web应用

  • 应用:Application,特指一款应用程序,我们学编程就是学习开发『应用程序』
  • 桌面应用:Microsoft Office、QQ、英雄联盟......等等,在PC端使用的应用程序,我们不做
  • Web应用:一款可以通过Web方式访问的应用程序,通常是指通过浏览器访问的应用程序
    • Web应用的前端部分:前端工程
    • Web应用的后端部分:后端工程

4、请求和响应

前端程序和后端程序交互访问的最基本形式:

  • 请求:点菜
  • 响应:上菜

三、学习的目标

  • 手段:知识、技术、语法......
  • 目的:开发业务功能,给学框架打基础
    • 登录、注册
    • 登录状态检查
    • C:Create 新增、保存
    • R:Retrieve 查询
    • U:Update 更新
    • D:Delete 删除
    • ......

Talk is cheap,show me the code.

------林纳斯·托瓦兹(Linux之父)

四、技术栈

1、前端技术栈

  • HTML:定义网页主体结构
  • CSS:定义网页布局和显示样式
  • JavaScript:编程实现网页动态效果
  • Vue:页面渲染和组件化开发框架
  • axios:Ajax异步交互框架
  • ES6:JavaScript的新语法标准
  • Node.js:JavaScript代码执行引擎,让JavaScript代码可以脱离浏览器运行
  • npm:JavaScript代码的打包和依赖管理工具
  • Vite:帮助我们生成前端工程的目录结构和必要的资源文件
  • router:Vue组件化开发环境下,实现组件路由
  • Pinia:在前端维护应用程序的全局状态数据
  • Promise:JavaScript异步编程,类似于我们Java中的Thread
  • ElementPlus:简单、易用、美观的页面控件集

2、后端技术栈

  • XML:常用配置文件格式
  • Tomcat:一个可以执行Java代码的Web服务器
  • Servlet:一个可以处理请求的特殊的Java类
  • HTTP:前后端交互报文的格式规定
  • Cookie&Session:会话控制解决方案
  • Filter:实现Servlet处理请求之前和之后的统一处理
  • Listener:服务器端特定事件的监听与回调

3、总体机制

一、Web2.0规范

Web2.0规范主张在前端开发中,把结构、表现、行为三者分开,告别此前三者耦合在一起导致代码繁杂难以维护的时代

  • 结构:HTML负责实现
  • 表现:CSS负责实现
  • 行为:JavaScript负责实现

二、HTML简介

1、HTML

HTML:Hyper Text Markup Language超文本标记语言。

  • 超文本:HTML代码本身是文本,但浏览器却可以基于文本显示多媒体信息
  • 标记语言:HTML代码主要是由标签组成的

2、HTML5

HTML5简称H5,2008年正式发布的HTML新语法标准。相比于之前的语法,H5更简洁、更规范。

三、First Blood

1、创建文件

在电脑任意目录下创建一个文本文件,修改文件名(连同扩展名一起修改)为:index.html

2、编辑文件

使用文本编辑工具打开刚刚创建的文件,编写如下代码:

html 复制代码
<html>
	<head>
        <title>我的第一个网页</title>
    </head>
    <body>
        hello html!!!
    </body>
</html>

四、HTML语法

1、概念

①注释

html 复制代码
<!-- 这是一个 HTML 注释,不会在浏览器窗口内显示 -->

②标签

html 复制代码
<!-- 双标签:开始标签、结束标签 -->
<p>文本标签体</p>

<!-- 单标签 -->
<br>

③属性

html 复制代码
<!-- 属性名="属性值" -->
<input type="text" name="userName">

2、规则

  • 根标签必须是html标签
  • 双标签必须正确关闭
  • 标签可以嵌套但不能交叉嵌套
  • 注释不能嵌套
  • 属性必须有值,除非属性值和属性名一致
  • 属性值必须加引号,单引号、双引号都可以
  • 不区分大小写

五、安装VScode【可选】

1、安装过程

2、安装插件

复制插件名称,搜索安装

插件名称 作用
Auto Rename Tag 自动修改标签对插件
Chinese Language Pack 汉化包
HTML CSS Support HTML CSS 支持
Intellij IDEA Keybindings IDEA快捷键支持
Live Server 实时加载功能的小型服务器
open in browser 通过浏览器打开当前文件的插件
Prettier-Code formatter 代码美化格式化插件
Vetur VScode中的Vue工具插件
vscode-icons 文件显示图标插件
Vue 3 snipptes 生成VUE模板插件
Vue language Features Vue3语言特征插件

3、打开工作区

  • 在电脑上新建目录
  • 使用VScode打开新建的目录

4、新建前端工程

5、新建文件

6、生成HTML代码主体结构

7、运行HTML文件查看效果

六、应用场景:文章

1、标题标签

html 复制代码
    <h1>一级标题</h1>

    <h2>二级标题</h2>

    <h3>三级标题</h3>

    <h4>四级标题</h4>

    <h5>五级标题</h5>

    <h6>六级标题</h6>

标题标签就是用来显示标题的,不要用它们来控制字体大小

Web2.0开发思想主张根据 HTML 标签本身的语义来开发网页

结构(HTML)、表现(CSS)、行为(JavaScript)三者分开

三者分开能够很好的保证各不同技术之间彼此解耦,让代码更简洁、更优雅、更易于维护

所以这里再次体现了:"高内聚、低耦合"的开发理念

2、段落标签

html 复制代码
    <p>段落的特点是每个段落独占一行</p>

    <p>段落的特点是每个段落独占一行</p>

    <p>段落的特点是每个段落独占一行</p>

3、换行标签

html 复制代码
    <!-- 使用br标签换行 -->
    <p>每一个段落,<br/>自己独占一行。</p>

4、分割线标签

html 复制代码
<p>段落内容</p>
<hr/>
<p>段落内容</p>

5、无序列表

html 复制代码
<!-- ul是unorder list的缩写 -->
<ul>
	<!-- li是list item的缩写 -->
	<li>中国</li>
	<li>美国</li>
	<li>俄罗斯</li>
</ul>

6、超链接

①标签语法

  • a标签:a字母是anchor单词的第一个字母,anchor是锚的意思
  • href属性:指定目标资源的地址(访问路径)
  • target属性:取值_blank时,表示在新窗口打开目标页面

②路径说明

【1】物理路径

  • 概念:从物理磁盘的根目录开始的完整路径
text 复制代码
D:\location\module01-HTML\target\page-target.html
  • 问题:完全不具备可迁移性,只能在当前开发人员自己的电脑上运行。而实际开发时,肯定是需要把程序部署到服务器上运行,程序代码必须具备可迁移性。
  • 结论:坚决不用!!!

【2】相对路径

  • 概念:以当前页面自身为基准,逐层查找目标资源
text 复制代码
以当前目录为基准:target\page-target.html
以当前目录为基准:.\target\page-target.html
以上一级目录为基准:..\xxx\target\page-target.html
  • 问题:将来遇到Servlet里面请求的转发,相对路径参照的基准就会发生变化
  • 结论:暂时可用

【3】绝对路径

  • 概念:以斜杠开头的目录
  • 基准:开头的斜杠代表服务器根目录,然后根据实际目录结构逐层查找资源
text 复制代码
\module01-HTML\target\page-target.html
  • 好处:不论Servlet怎么转发都不怕,开头斜杠的基准是不变的
  • 结论:建议使用

7、图片标签

  • img标签:image单词的缩写
  • src属性:指定图片资源的路径
html 复制代码
<img src="\module01-HTML\images\wanghaodong.jpg"/>

8、音乐播放组件【选学】

  • audio标签:负责显示音乐播放组件
  • src属性:指定音乐文件资源的路径
  • controls属性:是否显示音乐播放组件的控制界面
  • autoplay属性:控制音乐播放组件在打开页面时是否自动播放
html 复制代码
<audio src="\module01-HTML\images\music.mp3" controls="controls" autoplay="autoplay"/>

9、视频播放组件【选学】

  • width属性:视频播放时的宽度,单位是像素
  • height属性:视频播放时的高度,单位是像素
html 复制代码
<video src="\module01-HTML\images\pain.mp4" controls="controls" autoplay="autoplay"></video>
  • 播放组件的小坑:如果要音频、视频播放器互不干扰,那么把它们二者放在各自的div里

10、HTML实体

对我们文章中用到的特殊符号进行转义,常用的有:

符号 HTML实体
< &lt;
&gt;
& &amp;
空格 &nbsp;

官方参考文档点这里

七、应用场景:表格

1、没有任何修饰的表格

html 复制代码
<!-- table 标签:定义整个表格 -->
<table>
	<!-- thead 标签:定义表格的头部 -->
	<thead>
		<!-- tr 标签:定义表格中的一行 -->
		<tr>
			<!-- th 标签:定义一个表头单元格,里面文本有加粗效果 -->
			<th>员工id</th>
			<th>员工姓名</th>
			<th>员工年龄</th>
			<th>员工部门</th>
			<th>员工工资</th>
		</tr>
	</thead>

	<!-- tbody 标签:定义表格主体 -->
	<tbody>
		<tr>
			<!-- td 标签:定义普通单元格 -->
			<td>1</td>
			<td>Tom</td>
			<td>25</td>
			<td>RD</td>
			<td>10000</td>
		</tr>
		<tr>
			<!-- td 标签:定义普通单元格 -->
			<td>2</td>
			<td>Jerry</td>
			<td>26</td>
			<td>HR</td>
			<td>8000</td>
		</tr>
		<tr>
			<!-- td 标签:定义普通单元格 -->
			<td>3</td>
			<td>Mary</td>
			<td>35</td>
			<td>FI</td>
			<td>9000</td>
		</tr>
	</tbody>
</table>

2、给表格加样式修饰

整体复制过来,放在head标签里,不要自己写:

html 复制代码
<style>
	table {
		/* 合并单元格框线 */
		border-collapse: collapse;

		/* 左右外边距设置为自动,就是水平居中 */
		margin-left: auto;
		margin-right: auto;
	}

	th,td {
		border: 1px black solid;

		/* 设置内边距 */
		padding: 10px;

		/* 文本居中对齐 */
		text-align: center;
	}
</style>

3、合并单元格

html 复制代码
<table>
	<tr>
		<th>员工id</th>
		<th>员工姓名</th>
		<th>员工年龄</th>
		<th>员工部门</th>
		<th>员工工资</th>
	</tr>
	<tr>
		<td>1</td>
		<!-- rowspan 属性:设置跨行合并单元格 -->
		<td rowspan="2">Tom</td>
		<td>25</td>
		<td>RD</td>
		<td>10000</td>
	</tr>
	<tr>
		<td>2</td>
		<!-- <td>Jerry</td> -->
		<td>26</td>
		<!-- colspan 属性:设置跨列合并单元格 -->
		<!-- col 是 column 的缩写 -->
		<!-- span 是跨越的意思 -->
		<td colspan="2">HR</td>
		<!-- <td>8000</td> -->
	</tr>
	<tr>
		<td>3</td>
		<td>Mary</td>
		<td>35</td>
		<td>FI</td>
		<td>9000</td>
	</tr>
</table>

八、应用场景:表单

1、一个简单的表单

html 复制代码
<!-- form 标签:定义一个表单 -->
<!-- action 属性:指定表单提交的目标地址 -->
<!-- 运行效果:表单提交时默认是GET请求方式,请求参数都被附着到了URL地址后面,在浏览器上能看到。 -->
<!-- 危害1:密码在浏览器地址栏明文显示出来,不安全。 -->
<!-- 危害2:URL地址后面附着请求参数容量有限。如果请求参数非常多,就会导致后面的请求参数丢失。 -->
<form action="target/page-target.html">
	<!-- input 标签配合 type 属性取值 text:生成普通文本框 -->
	<!-- name 属性:设定请求参数的名字,便于服务器端识别和提取 -->
	账号:<input type="text" name="username"><br/>
	
	<!-- input 标签配合 type 属性取值 password:生成密码框 -->
	<!-- name 属性:设定请求参数的名字,便于服务器端识别和提取 -->
	密码:<input type="password" name="userPwd"><br/>

	<!-- button 标签配合 type 属性取值 submit:生成表单的提交按钮 -->
	<button type="submit">登录</button>
</form>

2、以POST方式提交的表单

html 复制代码
<!-- method 属性:指定提交表单时采用的请求方式,默认是GET方式,建议使用POST方式。 -->
<!-- ※提示:在VSCode中使用Live Server方式会看到HTTP ERROR 405,此时我们不经过服务器,直接在Windows系统中打开页面即可。 -->
<!-- 运行效果:通过POST方式提交表单,不会把请求参数暴露到浏览器地址栏,而是在请求体中携带请求参数。 -->
<!-- 使用建议:开发中,建议大家所有表单都通过POST方式提交。 -->
<form action="target/page-target.html" method="post">
	<!-- 文本框使用 value 属性设置默认值 -->
	账号:<input type="text" name="username" value="haodongge"><br/>
	
	密码:<input type="password" name="userPwd" value="555666"><br/>

	<button type="submit">登录</button>

	<!-- 重置按钮可以把各个表单项的值恢复为默认值 -->
	<button type="reset">重置</button>

	<!-- 设置一个普通按钮,不会提交表单,点击后没有任何效果 -->
	<button type="button">普通按钮</button>
</form>

Form Data表示表单提交的数据:

3、单选按钮和多选按钮

html 复制代码
<form action="target/page-target.html" method="post">
	<!-- input 标签配合 type 属性取值 radio:生成单选按钮 -->
	<!-- value 属性:设置要给服务器提交的值。 -->
	<!-- checked 属性:设置默认被选中的选项 -->
	你最喜欢的季节:<br/>
	<input type="radio" name="season" value="spring"/>春天<br/>
	<input type="radio" name="season" value="summer" checked="checked"/>夏天<br/>
	<input type="radio" name="season" value="autumn"/>秋天<br/>
	<input type="radio" name="season" value="winter"/>冬天<br/>

	<br/><br/>

	你的性别:<br/>
	<!-- 单选框的互斥性是由name属性设定的。name相同的被设定为一组,组内互斥。 -->
	<input type="radio" name="gender" value="directMan"/>直男<br/>
	<input type="radio" name="gender" value="commonSelfConfidentMan"/>普信男<br/>
	<input type="radio" name="gender" value="downHeadMan" checked="checked"/>下头男<br/>
	<input type="radio" name="gender" value="badHandsomeMan"/>渣男<br/>

	<br/><br/>

	<!-- input 标签配合 type 属性取值 checkbox:生成多选按钮 -->
	<!-- value 属性:设置要给服务器提交的值。 -->
	<!-- checked 属性:设置默认被选中的选项 -->
	你最喜欢的球队:<br/>
	<input type="checkbox" name="team" value="German"/>德国<br/>
	<input type="checkbox" name="team" value="France" checked/>法国<br/>
	<input type="checkbox" name="team" value="Brazil"/>巴西<br/>
	<input type="checkbox" name="team" value="China" checked/>中国<br/>

	<button type="submit">保存</button>

</form>

4、下拉列表

html 复制代码
<form action="target/page-target.html" method="post">
	请选择你最希望穿越回去的朝代:<br/>
	<!-- select 标签:定义整个下拉列表 -->
	<!-- name 属性:请求参数的名字 -->
	<select name="period">
		<!-- option 标签:下拉列表项 -->
		<!-- value 属性:设置被选中的option要给服务器提交的值 -->
		<!-- selected 属性:设置默认被选中 -->
		<!-- option 标签的文本标签体:设置给用户看的数据 -->
		<option value="qin">秦朝</option>
		<option value="han">汉朝</option>
		<option value="tang" selected="selected">唐朝</option>
		<option value="song">宋朝</option>
		<option value="yuan">元朝</option>
	</select>

	<br/>

	<button type="submit">保存</button>
</form>

5、多行文本框

在多行文本框中输入内容时,敲回车不会导致表单提交

html 复制代码
<form action="target/page-target.html" method="post">
	<!-- textarea标签:定义多行文本框 -->
	<!-- name 属性:设置请求参数名字 -->
    <!-- 在 textarea 标签的文本标签体中设置默认值 -->
	<textarea name="userDesc">请在这里输入用户介绍</textarea>

	<br/>

	<button type="submit">保存</button>
</form>

6、表单隐藏域

表单隐藏域是用来设置那些不希望或不必用户看到,但是又必须和表单一起提交的数据

html 复制代码
<form action="target/page-target.html" method="post">
	<input type="hidden" name="userId" value="5533"/>
	<button type="submit">提交</button>
</form>

7、文件上传框

  • 上传文件要求 form 标签必须设置 method 为 POST
  • 上传文件要求 form 标签必须设置 enctype 为 multipart/form-data
  • input 标签配合 type 属性取值 file:生成文件上传框
html 复制代码
<form action="target/page-target.html" method="post" enctype="multipart/form-data">
	请选择你的头像:<input type="file" name="headPicture"/><br/>
	<button type="submit">上传</button>
</form>

1、名称简介

XML:eXtensible Markup Language 可扩展标记语言

  • 可扩展:XML允许自定义标签
  • 标记语言:主要由标签组成

2、应用场景

  • 跨平台数据传输格式(目前已经被 JSON 取代)
  • 配置文件
    • Tomcat:server.xml、context.xml
    • Mybatis:mybatis-config.xml、EmployeeMapper.xml
    • 后端Web应用:web.xml
    • Spring框架:applicationContext.xml
    • ......
xml 复制代码
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd"
         version="5.0">
    <servlet>
        <servlet-name>EmpServlet</servlet-name>
        <servlet-class>com.atguigu.servlet.EmpServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>EmpServlet</servlet-name>
        <url-pattern>/EmpServlet</url-pattern>
    </servlet-mapping>

</web-app>

3、XML语法规则

  • XML文档开头必须有XML声明
  • 根标签有且只能有一个
  • 双标签必须正确关闭
  • 标签可以嵌套但不能交叉嵌套
  • 注释不能嵌套
  • 属性必须有值
  • 属性值必须加引号,单引号、双引号都可以
  • 不区分大小写

4、XML约束

XML约束规定了XML文档中可以包含哪些标签、标签有哪些子标签、标签有哪些属性、属性有哪些值......常用的两种约束形式是:

  • DTD约束
  • Schema约束

所以虽然XML允许自定义标签,但是官方通过XML约束做好规定之后,我们就必须按照约束的要求来写,不能随便写了。

这也解释了为什么XML语法规则和HTML这么像:XML语法规则+HTML约束=HTML语法规则

5、XML学习目标

在 IDEA 的辅助下能够完成 XML 代码编写即可。

相关推荐
GIS程序媛—椰子19 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_00126 分钟前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端29 分钟前
Content Security Policy (CSP)
前端·javascript·面试
木舟100932 分钟前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤439143 分钟前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安1 小时前
前端第二次作业
前端·css·css3
啦啦右一1 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
半开半落1 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt