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

站长

2024年06月12日 20:56 · 阅读数 25

一、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>
	<head>
        <title>我的第一个网页</title>
    </head>
    <body>
        hello html!!!
    </body>
</html>

四、HTML语法

1、概念

①注释

<!-- 这是一个 HTML 注释，不会在浏览器窗口内显示 -->

②标签

<!-- 双标签：开始标签、结束标签 -->
<p>文本标签体</p>

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

③属性

<!-- 属性名="属性值" -->
<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、打开工作区

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

4、新建前端工程

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

5、新建文件

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

6、生成HTML代码主体结构

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

7、运行HTML文件查看效果

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

六、应用场景：文章

1、标题标签

    <h1>一级标题</h1>

    <h2>二级标题</h2>

    <h3>三级标题</h3>

    <h4>四级标题</h4>

    <h5>五级标题</h5>

    <h6>六级标题</h6>

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

标题标签就是用来显示标题的，不要用它们来控制字体大小 Web2.0开发思想主张根据 HTML 标签本身的语义来开发网页结构（HTML）、表现（CSS）、行为（JavaScript）三者分开三者分开能够很好的保证各不同技术之间彼此解耦，让代码更简洁、更优雅、更易于维护所以这里再次体现了：“高内聚、低耦合”的开发理念

2、段落标签

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

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

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

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

3、换行标签

    <!-- 使用br标签换行 -->
    <p>每一个段落，<br/>自己独占一行。</p>

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

4、分割线标签

<p>段落内容</p>
<hr/>
<p>段落内容</p>

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

5、无序列表

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

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

6、超链接

①标签语法

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

②路径说明

【1】物理路径

D:\location\module01-HTML\target\page-target.html

问题：完全不具备可迁移性，只能在当前开发人员自己的电脑上运行。而实际开发时，肯定是需要把程序部署到服务器上运行，程序代码必须具备可迁移性。
结论：坚决不用！！！

【2】相对路径

概念：以当前页面自身为基准，逐层查找目标资源

以当前目录为基准：target\page-target.html
以当前目录为基准：.\target\page-target.html
以上一级目录为基准：..\xxx\target\page-target.html

问题：将来遇到Servlet里面请求的转发，相对路径参照的基准就会发生变化
结论：暂时可用

【3】绝对路径

概念：以斜杠开头的目录
基准：开头的斜杠代表服务器根目录，然后根据实际目录结构逐层查找资源

\module01-HTML\target\page-target.html

好处：不论Servlet怎么转发都不怕，开头斜杠的基准是不变的
结论：建议使用

7、图片标签

img标签：image单词的缩写
src属性：指定图片资源的路径

<img src="\module01-HTML\images\wanghaodong.jpg"/>

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

audio标签：负责显示音乐播放组件
src属性：指定音乐文件资源的路径
controls属性：是否显示音乐播放组件的控制界面
autoplay属性：控制音乐播放组件在打开页面时是否自动播放

<audio src="\module01-HTML\images\music.mp3" controls="controls" autoplay="autoplay"/>

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

width属性：视频播放时的宽度，单位是像素
height属性：视频播放时的高度，单位是像素

<video src="\module01-HTML\images\pain.mp4" controls="controls" autoplay="autoplay"></video>

播放组件的小坑：如果要音频、视频播放器互不干扰，那么把它们二者放在各自的div里

10、HTML实体

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

符号	HTML实体
<	<
>
&	&
空格

官方参考文档点这里

七、应用场景：表格

1、没有任何修饰的表格

<!-- 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标签里，不要自己写：

<style>
	table {
		/* 合并单元格框线 */
		border-collapse: collapse;

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

	th,td {
		border: 1px black solid;

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

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

3、合并单元格

<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、一个简单的表单

<!-- 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方式提交的表单

<!-- 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表示表单提交的数据：

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

3、单选按钮和多选按钮

<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、下拉列表

<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、多行文本框

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

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

	<br/>

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

6、表单隐藏域

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

<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：生成文件上传框

<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 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 代码编写即可。

转载自:https://juejin.cn/post/7344932879351480346

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

一、Web开发要解决的问题

二、Web开发相关概念

1、C/S模式

2、B/S模式

3、Web应用

4、请求和响应

三、学习的目标

四、技术栈

1、前端技术栈

2、后端技术栈

3、总体机制

一、Web2.0规范

二、HTML简介

1、HTML

2、HTML5

三、First Blood

1、创建文件

2、编辑文件

四、HTML语法

1、概念

①注释

②标签

③属性

2、规则

五、安装VScode【可选】

1、安装过程

2、安装插件

3、打开工作区

4、新建前端工程

5、新建文件

6、生成HTML代码主体结构

7、运行HTML文件查看效果

六、应用场景：文章

1、标题标签

2、段落标签

3、换行标签

4、分割线标签

5、无序列表

6、超链接

①标签语法

②路径说明

【1】物理路径

【2】相对路径

【3】绝对路径

7、图片标签

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

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

10、HTML实体

七、应用场景：表格

1、没有任何修饰的表格

2、给表格加样式修饰

3、合并单元格

八、应用场景：表单

1、一个简单的表单

2、以POST方式提交的表单

3、单选按钮和多选按钮

4、下拉列表

5、多行文本框

6、表单隐藏域

7、文件上传框

1、名称简介

2、应用场景

3、XML语法规则

4、XML约束

5、XML学习目标

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