TML基本标签，即超文本标记语言（HyperText Markup Language）。

标签是由小于号(<)+中间字符+大于号(>)组成的代码（英文字符）组成的，主要是用来标记内容模块的，也可以用来标明元素内容的意义。标签一般使用尖括号包围，例如：、,这两个标签都是表示一个HTML文件。

作用是给用户展示特定内容或是告诉浏览器与搜索引擎关于网页的部分信息。

单标签<只有开始标签；双标签开始标签和结束标签成双出现；"/”：网页上如果某个标签的小于号后面有此符号的即为结束标签，没有此符号的则为双标签 的专业术语称为注释标签。

我们可以将一行代码的作用、含义、意图等信息写在这四个减号中间，让自己后期能够看懂之前写的什么。

标签的使用有两种形式，一种是成对出现的标签，另一种是段度出现的标签。无论是哪种标签，都不能含有空格。

1、成对式标签成对式标签也是包含开始标签和结束标签的形式。比如，前端布局中常用的网页内容，这是一个标准的成对出现的标签。起始标记标志代表内容段的开始，而结束标记则代表内容段的结束。

2、虽然不是所有的开始标签都要有对应的结束标签，但是最好都有，这样网站页面更容易阅读，也更容易需要更改。如果开始标记和结束标记之间没有内容，可以写成。
3、标签属性的定义

和元素相关的特性就是属性，可以为属性赋值。正常情况下，可以不使用引号来包含属性值，这时候属性值应该包含数字、字母、符号。使用引号可以更好的表现，因为这符合W3C的标准，并且可以顺利的链接未来的标准。

4、大小写规范

项目名称及属性均不分大小写，但仍建议使用者标签以大写字母为主，属性以小写字母为主，以便于浏览及了解。

5、基本标签：

（1）段落标签

在html中如果你输入两段话，那么他显示的还是显示在一行上，这个时候就需要我们在分段的地方加上 段落标签 才能正常换行

（2）标题字

标题字就像我们的word文章标题一样，需要明确那些文字是标题

（3）换行符

输入一段话我们想要在某一段在下一行显示，那么就需要进行换行。

（4）水平线

我们常常用一条线来分割上下文，那么就会用到 水平线 这个标签

（5）预留格式

当我们在html页面中写如一些东西的时候他往往不会按照你输入的格式来，那么就需要用到 预留格式 这个标签

（6）粗体字 斜体字 插入字 删除字

粗体字 粗体字

斜体字 斜体字

插入字 插入字

删除字 删除字 就是删除字中间有一条横线

（7）右上角加字 右下角加字

右上角加字： 10²

右下角加字： CO2

（8）字体标签

有些时候我们想在一些文字加上一些修饰，那么就需要用到字体标签有些时候我们想在一些文字重点强调加上修饰。效果如下：有些时候我们想在一些文字重点强调，加上修饰。

如果想学习更多前端知识，欢迎移步我们官网，上面有很多免费在线课程，各个方向的都有。

、系统结构：

① B/S架构：Browser/Server（浏览器/服务器的交互形式。）

• Browser支持的语言：HTML、CSS、JavaScript；S是服务器端Server支持的语言有：C、C++、Java等
• B/S架构系统有什么优点和缺点？ 优点：升级方便，只升级服务器代码即可，维护成本低。缺点：速度慢、体验不好、界面不炫酷
• 企业大部分使用B/S架构
• B/S架构的系统代表有：京东、百度、天猫等

② C/S架构：Client/Server（客户端/服务器的交互形式。）

• C/S架构的优点和缺点？
• 优点：速度快、体验好、界面炫酷（娱乐性多数是C/S架构）
• 缺点：升级麻烦、维护成本较高。
• C/S架构的系统代表有：QQ、微信、支付宝等

2、 HTML概述

① 什么是HTML？② 怎么开发HTML？③ 怎么运行HTML?

• ① HTML：Hyper Text Markup Language（超文本标记语言）

•由大量的标签组成，每一个标签都有开始标签和结束标签。

•超文本：图片、声音、视频等

• ② HTML开发使用普通的文本编辑器就行，创建扩展名是.html或.htm

•编辑器有：HBuilder、vscode等

③ 直接采用浏览器打开HTML文件就能运行

④ HTML是谁制定的？

• ④ W3C：世界万维网联盟

•W3C制定了HTML的规范：每个浏览器生产厂家都会遵守规范。HTML也会按照规范去写代码

•HTML规范目前最高的版本是：HTML5.0，简称H5

•我们现在主要学的HTML4.0（基本用法）

• 为了方便中国Web前端程序员开发，提供了大量帮助文档。为开发提供方便。

•w3school：先出现的，和W3C无关

•w3cschool：后出现的，和W3C无关

•W3C制定了很多规范：HTML/XML/http协议/https协议……

3、 第一个HTML

4、基本标签

• p：段落标记
• h1~h6：标题字，与word的标题字相同
• br：换行标记（独目标记）
• hr：横线（独目标记）
• color：横线颜色
• width：横线宽度（可以px和%）
• pre：预留格式
• del：删除字
• ins：插入字（有下划线）
• b：粗体字
• i：斜体字
• sup：上标
• sub：下标
• font：字体标签
• color：字体颜色
• size：字体大小（1~7）

页面效果图：

5、实体符号：为了避免和标签冲突，所以需要使用实体符号

• <：<
• >：>
• 空格：
• 注：html中按多个空格键，在网页中只显示一个空格。

6、HTML表格

• table：表格
• tr：行
• td：列
• th：列（比td加粗居中）
• 合并行：rowspan（一个格占两个位置）
• 注：row合并的时候，删除下面的单元格
• 合并列：colspan（一个格占两个位置）
• 注：col合并的时候，删除哪个没有要求

7、thead、tbody、tfoot标签

• thead、tbody、tfoot不是必须的，便于后期JS编写。

8、body的背景颜色和背景图片

• bgcolor：背景色
• background：背景图片
• 背景图片在背景色的上面

9、img标签

• src：图片的路径
• 只设置width，height会等比例缩放
• 只设置height，不起作用
• title：鼠标悬停时显示的信息
• alt：设置图片加载失败时显示的提示信息

10、 超链接或热链接

• href：hot references 热引用；
• 后面一定是一个资源的地址。
• 后面的路径可以是绝对路径也可以是相对路径，可以是网络某个资源的路径。
• target：
• _blank：新窗口
• _self：当前窗口（默认）
• _top：顶级窗口
• _parent：父级窗口

超链接的作用：

通过超链接可以从浏览器向服务器发送请求。

11、request与response的概念

• request：浏览器向服务器发送数据（请求）
• B --》S
• response：服务器向浏览器发送数据（响应）
• S--》B

12、列表

• 有序列表：ol
• type：1、A、a、I、i
• 无序列表：ul
• type：circle（○）、square（□）、disc（●）

13、表单（重点）

• action：写提交的URL地址
• method：默认get；还有post
• 表单有什么用？
• 答：收集用户的信息。表单展现之后，用户填写表单，点击提交。 （submit）
• 怎么画一个表单？
• 答：用form标签
• 一个网页可以有多个表单form
• 表单最终是需要提交数据给服务器的，form标签有一个action属性，这个属性用来指定服务器地址。
• action属性用来指定数据提交给哪个服务器
• action属性和超链接中的href属性一样。都可以向服务器发送请求（request）
• http://192.168.111.3:8080/oa/save 这是请求路径，
• 表单提交数据最终提交给192.168.111.3机器上的8080端口对应的软件。
• input中的type取值:
• radio：单选控件
• checkbox：多选控件
• submit：提交控件
• reset：重置控件
• button：普通控件
• text：文本控件
• password：密码控
• file：文件控件
• 上传文件专用
• hidden：隐藏域
• 网页上看不到，但是表单提交的时候数据会自动提交给服务器。
• input中的value属性用来指定按钮上显示的文本信息。
• 超链接a与表单form的区别？
• 答：表达form可以收集信息，而超链接a无法收集信息。
• 表单提交里面的按钮input中属性必须定义name，不然提交不了。
• 表单是以什么格式提交数据给服务器的？
• 格式：action?name=value&name=value&name=value..
• HTTP协议规定的，必须以这种格式提交给服务器
• java中String split('&');
• 重点强调：表单项写了name属性的，一律会提交给服务器。不想提交就不要写name属性。
• 文本框和密码框的value不需要程序员指定，用户输入什么value就是什么。
• 当name没有写的时候，该项不会提交给服务器
• 但是当value没有写的时候，value的默认值是空字符串"",将空字符串提交给服务器。java代码得到的是：String s = "";

效果图：

地址栏提交的信息：

?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我没有value属性；&position=ln&myFile=&myHidden=

14、表单的说明：

• ① 用户手动输入的文本框，都不需要给value赋值
• ② textarea没有value属性
• ③ radio、checkbox默认选项需要使用，checked="checked"（简写：checked）
• ④ select中的option属性：• selected="selected" 为默认选中 •size：显示条目数量
• multiple="multiple" 支持多选(select的属性)
• ⑤ input的属性
• readonly和disabled：
• 都是只读不能修改
• 数据不会提交
• maxlength：设置文本框中输入的字符数量。

15、HTML中的结点

• 在HTML文档中，任何元素（结点）都有id属性，id属性是该节点的唯一标识。所以在同一个HTML文档中id值不能重复。
• 注意：表单提交数据的时候，只和name有关系，和id无关
• id有什么作用？
• javascript语言：可以对HTML文档中的任何节点进行增删改操作。
• 获取节点时，通常通过id来获取节点
• HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id（DOM树）

16、div和span

• div和span有什么用？
• div和span都可以称为图层。
• 有什么用？
• 图层的作用为了保证页面可以灵活的布局。
• div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
• div和span的区别？
• di独占一行
• span不会独占一行