HTML学习笔记，对于前端方面，学后端的同学可以看一下这篇基础学习笔记，记一下常用的标签就新了，后面的项目开发前端方面使用的前端模板比较多，所以这篇文章可以让你1小时快速入手html基础知识点。
一.互联网通信介绍
1.什么是互联网通信？
两台以上的计算机通过网络传输实现共享资源文件的传递。
2.互联网通信中角色的划分
客户端计算机：用于发送请求，索要共享资源文件的计算机。
服务端计算机：用于接收请求，并且提供共享资源文件的计算机。
3.互联网通信模型
计算机通过何种软件进行通信。
分类：
C/S通信模型
B/S通信模型
-
C/S通信模型
Client Server 客户端服务 通俗的解释是桌面程序。 桌面快捷方式帮助客户对指定的服务端计算机发送请求， 服务端接收到请求后，对请求进行解析，返回客户端所要的资源文件。 适用场景： 主要应用于个人娱乐市场，在企业日常工作中相对较少。 大型网络游戏：LOL 吃鸡 王者荣耀 个人通信：微信 QQ 优点： 1.有效的对服务器资源文件进行有效的保护。 2.有效分摊服务器的工作压力，导致C/S架构下几乎不用考虑多线程并发安全问题。 缺点： 1.增加用户获取服务的成本 2.更新相对于复杂 -
B/S通信模型
Browser Server 浏览器服务器模型 用户在客户端计算中只需要安装一个浏览器即可向任意服务器发送请求。 服务端计算机接收浏览器发送的请求，解析请求地址，根据地址来决定 响应何种类型的文件或者数据。 适用场景： 既可以在个人娱乐市场，也广泛应用在企业级应用中。 优点： 1.客户获得服务的成本相对较低。 2.维护相对简单。 缺点： 1.无法有效对服务端资源进行保护。 2.无法要求浏览器分摊服务器压力，在B/S结构下一定会存在多线程高并发问题。 -
共享资源文件
可以被任何客户端计算机索取的文件成为共享资源文件。 分类： 静态资源文件 动态资源文件 1.静态资源文件 预先部署在服务器中，其文件内容不变。 无法生成有逻辑含义的数据的文件。 比如： .txt .mp4 ... 2.动态资源文件 文件存放的不是数据而是命令。 并且命令只能在服务端进行编译和执行 动态资源文件负责通过命令来解决用户需求 是由逻辑的文件。 在Java的世界中，只有.class是动态资源文件。
二.HTML基础
1.什么是HTML？
超文本标记语言。HyperText Markup Language
是一种用于设计网页的标记语言，用该语言编写的文件
以.html为后桌，并且只能由浏览器解释执行，生成相应的页面。
2.作用
制作网页，控制网页的内容和显示。
插入图片，音乐，视频，动画等多媒体。
通过链接检索信息。
优化网页，让网络蜘蛛爬取。
使用表单获取用户数据，实现与用户进行交互。
3.编辑器
1.Hbuider X
它是vue.js官方指定编辑器。
可以编写小程序，网页，app...
2.VSCode
它是微软公司开发的万能编辑器。
它可以编写任何类型的语言。
但是需要安装很多的插件。
我这里使用的是Hbuider x ,主要是这个编辑器非常小，响应速度很快，操作非常简单，很适合新生。
下载地址： Hbuiderx
三.HTML文件的基本结构
html的注释：
<!-- --> 这是HTML语言专用的注释语法。
被注释的代码块，不会被浏览器解释。
<!DOCTYPE html> <!-- 定义文档类型 -->
<html> <!-- 根节点 -->
<head> <!-- 网页的头标记一般用于设定网页的元数据和标题以及内部样式，导入外部样式和脚本 -->
<meta charset="utf-8" /> <!-- meta标记是网页的元数据标记，charset属性设置网页的编码格式-->
<title></title> <!-- 网页的标题 -->
</head>
<body> <!-- 网页的体标记。所有页面的也是内容都在该标记中编写 -->
</body>
</html>
HTML是标记语言，标记一般是成对【有开头，有结尾】出现。
比如：
<html></html>
<head></head>
<body></body>
也包含少量的单标记。【只有一个标记】
比如：
<meta />
-
head标记
网页的头标记一般用于设定网页的元数据和标题以及内部样式，导入外部样式和脚本 -
title标记
设置网页的标题 -
meta标记
用来设定网页的元数据信息的。 元数据起到影响整个网页的动作。 比如： keywords：关键字 description：描述 refresh：刷新 ..... -
body标记
网页显示的元素。
四.浏览器【了解】
-
市面主流浏览器
Chrom 谷歌 Firefox 火狐 Edge 斯巴达 Safari 苹果 Opera 欧朋 -
浏览器的作用
浏览器的作用是读取HTML文件，并且以网页的形式来显示。 浏览器不会直接显示HTML标签，而是经过解析来解释网页的内容。
五.基础标签
1.文本标签
h1 - h6 这是标题标签，区别是文字大小不一样。
p 段落标签
span 文本标签
b 加粗
i 斜体
em 斜体
sup 上标
sub 下标
2.超链接
可以点击去往另一个页面，或者请求一个服务器的标签。
超链接的分类：
1.普通链接
2.锚链接
3.功能性链接
4.图片链接
属性：
href 链接去往的地址
target 目标打开的是新窗口，还是原窗口
-
普通链接
语法： <a href="#" target="">普通链接</a> 例子： <a href="https://www.baidu.com" target="_blank">百度</a> -
锚链接
锚链接就是在同一个网页之间进行的跳转。 经常用作于导航。 语法： <!-- 定义锚点 --> <a name="top"></a> <!-- 设置点击锚点 --> <a href="#top">跳转到top</a> -
功能性链接
点击链接产生的是一个事件，或者是一个服务器的提交。 可以下载数据 可以发送邮件 可以执行脚本。 -
图片链接
语法： <a href=""> <img /> </a>
3.图像标签
img标签,它是一个单标记
语法：
<img />
属性：
src 图片的具体位置
width 图片的宽度
height 图片的高度
alt 图片加载发生异常时的提示信息
title 图片的标题
4.列表
分类：
1.有序列表
2.无序列表
3.定义列表
-
有序列表
<ol> <li></li> .... </ol> -
无序列表
<ul> <li></li> .... </ul> -
定义列表
<dl> <dt></dt> <dd></dd> </dl>
5.表格
规则表格：
表格是一个规则的行列结构，每个表格都是由若干行组成，每行由若干列组成。
语法：
<table>
<thead></thead> <!-- 表头 -->
<tbody></tbody> <!-- 表体 -->
<tfoot></tfoot> <!-- 表脚 -->
</table>
行：
<tr></tr>
列：
<td></td>
属性：
border 边框
cellspacing 单元格与单元格之间的距离
cellpadding 内容与单元格之间的距离
width 表格的宽度
height 表格的高度
align 表格居左 中 右 取值：left center right
表格的标题标签
<caption></caption>
不规则表格：
不规则表格就是合并单元格。
1.合并单元格列
<td colspan="2">手机号</td> 该单元格占用2个长度的单元格。
2.合并单元格行
<td rowspan="2">负责人:<br/>联系方式：</td>
6.表单
用于与用户进行交互，提供输入控件获取用户填写的数据。发到服务器。
语法：
<form action="" method="" enctype="">
</form>
属性：
action：表单提交的地址
method：提交方式
enctype：表单在提交的时候采用的何种数据类型。
enctype="application/x-www-form-urlencoded" 一般用于文件上传，将文件采用二进制进行传输。
1.表单控件
-
输入框
<input type="text"/> input标记的type属性默认是text。 -
密码框
<input type="password"/> -
单选框
<input type="radio" name="sex"/> 注意： 单选框是通过name属性达到互斥效果。 -
多选
<input type="checkbox"/> -
文件上传
<input type="file" /> 注意： 在使用文件上传的时候，必须使用enctype属性。 -
邮箱
<input type="email" /> -
电话号码
<input type="tel" /> -
隐藏域
<input type="hidden" /> -
提交按钮
<input type="submit" /> 提交按钮会触发action属性。 -
普通按钮
<input type="button" /> -
下拉选框
<select> <option></option> .... </select> -
大文本输入框
<textarea rows="" cols=""></textarea>
2.表单控件的属性
-
name
用于在提交服务器时，作为用户填写的数据的key。 以便数据到达服务器时，服务器能够获取。 -
value
表单控件的预留值 -
required
必填项 -
placeholder
提示信息 -
readonly
只读 该属性修饰的控件可以将数据发送到服务器。 -
disabled
只读 该属性修饰的控件不可以将数据发送到服务器。 可以使用隐藏域来填补disabled的不足。 -
pattern
校验数据的合法性。 使用正则表达式语法来约束用户的输入行为。 -
minlength
最小长度 -
maxlength
最大长度
7.div
<div></div>
div是一个特殊的标签，自身没有任何的效果。
需要结合css样式才能够显示效果。
它有些类似于一个容器。用来装标签的容器。
所以该标签经常用于网页布局和网页设计。
六.标签的分类
在HTML中，标签分为：
1.单标记
只有开头没有结尾的标记，称为单标记。
比如：<meta />
2.双标记
有开头有结尾的就是双标记。
比如：<body></body>
3.行内标记
内容可以在同一行显示的标记。
比如：<span></span>
4.块级标记
内容不可以在同一行显示的标记。
比如：<h1></h1>
学习网站推荐菜鸟教程：【https://www.runoob.com/】
8956
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
