目录
1.html概述
? ? ? ? html，即hyper Text Mark Language，超文本标记语言。前端工作人员入门制作简易网页内容所必须学习的计算机语言，是一种较为简单的语言，其不需要编译就可以直接在浏览器上运行。
? ? ? ? 超文本就诸如流媒体，声音，视频，图片等非纯文本内容；
? ? ? ? 标记语言：这种语言是由大量的标签组成。
????????例如：<标签>:开始标签? </标签>：结束标签
? ? ? ? html严格意义上来说只是一种规范，一种在浏览器上显示的规范，（标签语言）并不能称为编程语言，是因为html中并没有变量，数据类型，或者是控制语句if，for。这些编程语言的特点内容html都不具备。
2.html运行环境
? ? ? ? html运行在浏览器上。
? ? ? ? 现在世界上主流的几大浏览器分别为：edge，chrome，火狐等。
? ? ? ? html运行的环境较为简单，在此不作赘述。
3.html开发环境
? ? ? ? html开发仅需新建一个.html或者.htm结尾的文件，再用记事本方式打开进行编写即可开发，不需要编译就可以直接再浏览器上运行。
? ? ? ? 但是，为了提高开发效率以及规范代码，在此推荐使用一些主流编译器，如vscode和webstorm，小编用的是vscode，其界面简洁舒适。
? ? ? ? 关于vscode的安装以及环境搭建可以在官网直接下载最新版，配置环境相关的内容可以查询csdn中获得内容。
4.html基本标签
HTML的基本标签主要是靠记忆，多写写就能很好的运用起来。
<!--这是HTML的注释信息-->
<!--这是根-->
<html>
<!--头-->
<head>
<!--标题栏-->
<title> 基本标签 </title>
</head>
<!--网页体-->
<body>
<!--这里的内容显示到网页上-->
<p>段落标记</p><!--分段-->
<p>段落标记</p>
<!--标题字-->
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<!--一共有6种标题字，由h1到h6-->
<!--换行标记-->
hello
world<!--不可行-->
hello<br>world!<!--独目标记-->
<!--画一条水平线-->
<hr><!--独目标记-->
<!--color是一个属性，用来指定属性-->
<!--color是属性名，red是属性值-->
<hr color="red">
<hr color='red'>
<hr color=green>
<!--HTML语法较为松散，大小写，有无单双引号也不影响-->
<!--文本框-->
<input>
</body>
</html> <!--预留格式-->
<!--保留格式，在HTML源码上是什么格式，到网页上还是什么格式，保持不变。-->
<pre>
for i in range(10):
print(i)
if i >=5:
brek
</pre>
<!--粗体字-->
<b>粗体字</b>
<!--斜体字-->
<i>斜体字</i>
<!--插入字-->
<ins>插入字</ins>
<!--删除字-->
<del>删除字</del>
<!--右上标-->
10<sup>2</sup>
<!--右下标-->
m<sub>2</sub>
<!--font字体标签-->
<font>hello world</font>? ? ? ? HTML的基本标签众多，但有些标签常用性比较广，所以不要求全部记忆，只需有个印象即可。
5.html实体符号
<!--凡是html页面中第一行是以下代码的，表示该页面是一个html5页面，h5-->
<!DOCTYPE html>
<html>
<head>
<!--这个是告诉浏览器采用哪一种字符编码方式打开该页面，一般与文件编码方式相同，否则会乱码-->
<!--windows操作系统的浏览器在没有指定任何编码方式的时候，浏览器默认采用GBK的简体中文方式打开
，这是因为我们的windows操作系统是简体中文环境-->
<!--而我们程序员工作区当中文件的编码方式是utf-8，因为unicode更加通用-->
<!--当前这个文件就是utf-8的编码方式，如果不写如下代码，浏览器就会默认用GBK打开，会乱码-->
<meta charset="utf-8">
<title>实体符号</title>
</head>
<body>
<!--空格-->
a bc
<br>
<!-- 这是一个空格，属于实体符号-->
a bc
<!--大小于号-->
a<b>c<!--<是小于号>是大于号-->
</body>
</html>
? ? ? ?html中实体符号较少，但是要注意大于号小于号的使用，因为html中<>这两个符号有特殊含义，所以不能使用起来表示大小于号，另外需要注意的便是文件编码格式的问题，为防止在浏览器打开我们编写的html网页时文本出现乱码现象，我们需要注意规定文本编辑格式与打开的编码格式。
6.html表格
? ? ? ? 在html中编写并在网页上实现表格需用到table。
<html>
<head>
<meta charset="utf-8">
<title>html表格table</title>
</head>
<body>
<!--border 用来设置边框的宽度，1px表示一像素-->
<table border="1px" width='300px' height='200px' align="center">
<!--width,height分别表示表格的宽度和高度-->
<!--高度宽度还可以写成百分比的方式-->
<!--align表示表格的对齐方式-->
<!--tr表示表格中的一行，td表示一行中的一个单元格-->
<!--第一行-->
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<!--第二行-->
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<!--第三行-->
<tr>
<td>1</td>
<td>2</td>
<td align="center">3</td>
</tr>
</table>
</body>
</html>? ? ? ? 对html中的单元格进行合并操作，分为纵向合并和横向合并。
<tr>
<td>1</td>
<td colspan="2">xy</td>
<!--<td>y</td>-->
<!--同一行中左右单元格合并为一个，这项操作为纵向合并，只需要保留其中一个单元格
在使用clospan来表示合并的单元格数量-->
</tr>
<!--第二行-->
<tr>
<td>1</td>
<td>2</td>
<td rowspan="2">king queen</td>
<!--同一列中上下单元格合并为一个，这项操作为横向合并，只需要保留其中一个单元格
在使用rowspan来表示合并的单元格数量-->
</tr>
<!--第三行-->
<tr>
<td>1</td>
<td>2</td>
<!-- <td>queen</td> -->
</tr>? ? ? ? 还有一个是关于html表格中th的运用，使用th代替td，可以让表格中的内容自动加粗以及居中。
<html>
<head>
<title>th标签</title>
</head>
<body>
<table border='5px' wider='1000px' height='200px'>
<tr>
<!-- <td>员工编号</td>
<td>员工姓名</td>
<td>员工薪资</td> -->
<th>员工编号</th>
<th>员工姓名</th>
<th>员工薪资</th>
<!--th可以代替td做单元格，th中的内容可以自动加粗自动居中。-->
</tr>
<tr>
<td>369</td>
<td>小编</td>
<td>0.00</td>
</tr>
<tr>
<td>370</td>
<td>小小编</td>
<td>1.00</td>
</tr>
</table>
</body>
</html>? ? ? ? 我们还可以用thead，tbody，tfoot将表格分割为三部分。
<!--一个table可以被thead tbody tfoot分割为三部分-->
<!--这个语法主要是为了后期JavaScript提供方便-->
<table border='5px' wider='50%' height='200px'>
<thead>
<tr>
<th>员工编号</th>
<th>员工姓名</th>
<th>员工薪资</th>
</tr>
</thead>
<tbody>
<tr>
<td>369</td>
<td>小编</td>
<td>0.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>370</td>
<td>小小编</td>
<td>1.00</td>
</tr>
</tfoot>
</table>7.html背景颜色以及背景图片
<html>
<head>
<title>背景颜色以及背景图片</title>
</head>
<!--body标签的bgcolor属性指定背景颜色-->
<!--body标签的background属性指定背景图片-->
<body background="images/公子.jpg">
</body>
</html>? ? ? ? 需注意若想要设置背景图片，则需要保证文件目录下有所需放置的图片，建议在html文件夹中新建images文件夹来存储需要用到的图片。
8.html中的图片img
? ? ? ? html中图片与背景图片是不同的，图片是网页中的一个元素，是漂浮在背景之上的。对于图片我们有一系列的操作来进行设置。
<html>
<head>
<title>图片</title>
</head>
<!--背景图片与图片不同-->
<body>
<!--图片是网页中的一个元素-->
<!--<img src="images/百度.png"></img>-->
<!--开始标签结束标签之间没有内容的话可以将结束标签删除，在开始标签末尾加上/-->
<img src="images/百度.png"/>
<!--img 这个标签有什么属性？-->
<!--scr属性指定图片的路径-->
<!--width属性，用来指定图片的宽度，高度会等比例缩放，
尽量不要自定义高度，容易导致图片失真-->
<!--title属性用来设置鼠标悬停在该图片上的提示信息-->
<img src="images/百度.png" width ='200px' title="点击我跳转到百度哦" />
<!--alt属性，当图片加载失败时的提示信息-->
<img scr = 'abc/公子.jpg' alt="图片找不到哦！"/>
</body>
</html>9.超链接
? ? ? ? 我们经常会在网页上遇到这样一种情况：一些网页上有某一段字会有下划线，鼠标放到该段字体上时会自动变成小手，点击该字体之后就会进入一个（或者开辟）新窗口，这就是超接。?而且，超链接的类型不仅仅是文字，一张图片也可以变成超链接。
<!--链接到百度的超链接-->
<!-- href属性表示，hot reference，用来指定链接的路径-->
<a href="http://www.baidu.com">百度</a>
<br>
<!-- 链接路径可以时一个网络中的路径，也可以是本地的一个路径 -->
<a href="html表格.html">链接到本地表格</a>
<!-- 超链接特点：1.鼠标停留在超链接上时自动变成小手2.超链接自动添加下划线 -->
<!-- 图片也可以做热链接（起始标签和结束标签中的内容会变成链接） -->
<a href="http://map.baidu.com"><img src="images/百度.png" title="点击我跳转到百度地图哦"></a>
? ? ? ? 在此，还需要了解一下超链接的一个属性：target。这对于后续开发有帮助。
<!-- 关于超链接的target属性 -->
<!-- targer属性用来设置最终打开窗口的位置 -->
<!--
target:
_self:当前窗口
_blank:新窗口
_parent:当前窗口的父窗口
_top:当前窗口的顶级窗口
-->
<a href="http://www.baidu.com" target="_self" >百度（当前窗口）</a><br>
<a href="http://www.baidu.com" target="_blank" >百度（新开窗口）</a>
<br>*10.题外话。
? ? ? ? 关于B/S架构的原理：（粗略讲一下）
第一步：用户在浏览器上输入URL。
第二步：回车（这一步相当于通过浏览器向服务器发送了一个请求）请求（request）
Browser-->Server（浏览器向服务器发送请求）
第三步：服务器会给浏览器一个响应，最终响应一段html代码给浏览器，浏览器对html代码进行执行展示一个结果。 响应（response）
Server-->Browser（服务器向浏览器回复一个响应）
? ? ? ? 日常生活中我们1.输入网址访问页面，或者2.点击超链接来访问新页面，都是B/S架构的功劳。
11.无序列表与有序列表
? ? ? ? 无序列表较为简单，不作多的叙述。
? ? ? ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<!-- 无序列表 -->
<!-- ul的tyoe属性是指定列表前的标识 -->
<ul type='circle'>
<!-- 列表项 -->
<li>中国</li>
<ul>
<li>北京</li>
<ul>
<li>烤鸭</li>
<li>爆肚</li>
<li>炒肝</li>
<li>糖葫芦</li>
</ul>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
<li>华夏</li>
<li>东方</li>
<li>雄狮</li>
</ul>
</body>
</html>? ? ? ? 有序列表与无序列表的区别仅在有无排序标号。
<!DOCTYPE html>
<html>
<head>
<title>有序列表</title>
</head>
<body>
<!-- 有序列表 -->
<ol type='A'>
<li>水果</li>
<ol type="1">
<li>香蕉</li>
<li>苹果</li>
<li>哈密瓜</li>
<li>菠萝</li>
</ol>
<li>蔬菜</li>
<li>茶</li>
<ol type="I">
<li>普洱</li>
<li>龙井</li>
<li>铁观音</li>
<li>绿茶</li>
<ol>
<li>毛尖</li>
</ol>
</ol>
<li>肉</li>
</ol>
</body>
</html>12.重点———表单
12.1表单概述
? ? ? ? 可以说表单是学习html最重要的一部分，如果没有掌握表单的使用，那么可以说你的html学习是不过关的。
? ? ? ? 那么。表单到底是什么呢？我们来看一张图片：
?这是一张百度注册账号页面的截图，上面所展示的就是表单！
1.什么是表单？有什么用？
?????????发送请求并且携带数据给服务器
?????????表单和超链接有共同的特征，就是都可以向服务器发送请求
?????????只不过超链接是用户直接点击发送请求，不能填写数据
?????????而用户点击表单提交的时候，不但可以发送请求，而且请求中还可以携带输入的数据。????????
?????????表单最主要的作用就是收集用户的信息
?????????表单对应的单词：form
????????2.怎么定义一个表单对象呢？语法格式
?????????<form>
?????????????表单项1：
?????????????表单项2：
?????????</form>
?????????另外注意：一个网页上可以有多个表单对象????????
?????????3.form标签中有一个action属性，这个属性和超链接的href相同，都需要填写url
12.2如何制作登录表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录的表单</title>
</head>
<body>
<!-- 画一个登录的表单 -->
<!-- "http://192.168.145.2:8080/crm/login"
协议：http协议
访问的服务器IP地址是：192.168.145.2
访问这个服务器上的哪个软件：8080端口对应的一个服务
/crm/login:是这个服务器上的某个资源名！（他可能是一段处理登录的java程序） -->
<!-- 重点*****重点*****重点*****重点*****重点*****重点*****重点*****
表单最终提交的时候，表单项的name属性非常重要，有name属性才会提交
并且浏览器向服务器提交数据的格式是：
url?name=value&name=value&name=value&name=value&name=value
以上提交数据的格式，是W3C制定的格式，所有浏览器都是这样的。
这个格式非常重要，必须背会，所有浏览器都是这样提交数据的。
重点*****重点*****重点*****重点*****重点*****重点*****重点***** -->
<form action="http://192.168.145.2:8080/crm/login">
<!--input是输入域，type不同，展示样式不同-->
<!-- type="text"是文本框 -->
<!-- value属性是不需要填写 -->
用户名：<input type="text" name="x"/>
<br>
<!-- type="password"表示密码框，输入的内容会被修饰 -->
密码：<input type="password" name="y"/>
<br>
<!-- 提交表单的按钮 -->
<input type="submit" value="登录"/>
</form>
</body>
</html>表单制作的过程中，我们需要牢记表单项数据的传输方式，这样才有利于我们后续开发的进程。
12.3用户注册表单的制作
? ? ? ? 该表单中涉及了很多不同的input选项表达，建议多亲自写写代码来体会一下input选项不同属性设置的所呈现的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册表单</title>
</head>
<body>
<!--若表单项是由用户自己填写，则value不需要程序员提供，若是由用户选择，则需要提供value-->
<!--表单中，如果有一些项用户没有填写，默认提交的就是空字符串-->
<form action="http://localhost:80/cr/register">
用户名：<input type="text"name='username'/><!--value不需要程序员提供-->
<br>
密码：<input type="password"name="userpwd"/><!--value不需要程序员提供-->
<br>
性别：<!--最终提交给服务器的数据是，sex=1或sex=0-->
<!--同一组的单选按钮，name是需要一致的-->
<!--checked表示默认选择-->
<input type="radio" name="sex" value="1" checked/>男
<input type="radio" name="sex"value="0"/>女
<br>
兴趣：<!--复选框（可以同时选择多项），同一组的复选框name也是一致的-->
<input type="checkbox" name="aihao" value="basketball" checked/>打篮球
<input type="checkbox" name="aihao" value="yuanshen"/>原神
<input type="checkbox" name="aihao" value="duanlain"/>锻炼
<br>
学历：<!--下拉列表-->
<select name="xueli" ><!--假设选择**，则提交的是xueli=**-->
<!-- selected表示默认选中 -->
<option value="gz">高中</option>
<option value="zk">专科</option>
<option value="bk" selected>本科</option>
<option value="yjs">研究生</option>
</select>
<br>
简介：<!--文本域,其中value也是用户来填写的-->
<textarea name="jianjie" cols="60" rows="10">
</textarea>
<br>
<input type="submit"value="提交注册">
<!--提交按钮不可以由name，不然提交按钮也会提交给服务器-->
<!-- reset是重置表单 -->
<input type="reset" value="重置">
</form>
</body>
</html>13.零碎知识点整理
13.1下拉列表多选
? ? ? ? 制作下拉列表时，可以设置显示的最多项数和支持多选择。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉列表多选</title>
</head>
<body>
<!--multiple表示下拉列表支持多选-->
<!--size是设置下拉列表一次最多显示的条目数量-->
<select name="province" size="3" multiple>
<option value="hebei">河北省</option>
<option value="henan">河南省</option>
<option value="shandong">山东省</option>
<option value="shanxi">山西省</option>
<option value="hunan">湖南省</option>
<option value="hubei">湖北省</option>
</select>
</body>
</html>13.2file控件
? ? ? ? 该控件的主要功能就是传输文件。
<!DOCTYPE html>
<html>
<head>
<title>file控件</title>
</head>
<body>
<!--后台java程序使用IO六的方式接收这个文件-->
<form action="http://www.baidu.com">
文件：<input type="file"/>
<br>
<input type="submit" value="文件上传">
</form>
</body>
</html>?13.4hidden隐藏域
? ? ? ? 用于隐藏一些不想被用户看到但又需要提交到服务器的信息。
<!DOCTYPE html>
<html>
<head>
<title>hidden控件</title>
</head>
<body>
<!-- hidden的隐藏域空间 -->
<form action="http://127.0.0.1:8080/crm/save">
<!--隐藏域-->
<!-- 不希望用户在浏览器上看到，但希望可以将这个数据提交过去 -->
<input type="hidden" name="uesrcode" value="111111"/>
<!--提交按钮-->
<input type="submit" value="提交"/>
</form>
</body>
</html>13.5readonly和disable
? ? ? ? 建议直接敲代码亲自体会。
<!DOCTYPE html>
<html>
<head>
<title>readonly和disable</title>
</head>
<body>
<!-- readonly和disable 都是只读的 -->
<!-- readonly修饰的表单项可以提交给服务器，但是disable修饰的不会提交 -->
<form action="http://127.0.0.1:8080/crm/save">
机构代码 <input type="text" name="orgcode" value="1111" readonly/>
<br>
用户代码 <input type="text "name="usercode" value = "2222" disabled/>
<br>
<input type="submit" value="提交">
</form>
</body>
</html>13.6表单项的maxlength属性
? ? ? ? 简单来说就是限制一个表单项允许输入的最大数量字符。
<!DOCTYPE html>
<html>
<head>
<title>maxlength属性</title>
</head>
<body>
<!-- 最多输入maxlenth个字符 -->
<input type="text"maxlength="3">
</body>
</html>13.7html中元素的id属性
? ? ? ? html中每个节点都有其特有的id属性，该属性用途会在后续JavaScript学习中用到。
????????1.在html中任何一个节点上，都有id属性
????????2.在同一个网页中，id属性是不能重复的
????????3.id代表这个节点，id是这个节点的身份证号
????????4.后期学习了JavaScript之后，我们要通过JavaScript对html的节点进行增删改的时候
????????首先需要获取该节点对象，id属性可以让我们方便获取到该节点对象。
????????5。通过id属性可以很方便的在JavaScript中获取到该节点，
????????然后对这个节点进行操作，最终产生网页的动态效果。
13.8div和span图层
????????1.两者都是图层
????????2.图层的含义以及作用：
?????????每一个图层在网页当中都是一个独立的盒子
?????????图层最主要的作用是：网页布局
????????3.table表格不是可以布局吗？为什么还要图层？
?????????table表格布局不够灵活
?????????div和span布局更加灵活
????????4.每一个div和span左上角的顶点，都有x和y的坐标，
????????通过这个坐标可以定位div在网页当中的位置。后面学习css的时候，
????????我们可以通过css样式进行定位。
????????5.很久以前都是采用table布局，但是现代化的网页都是采用div+span进行布局
????????6.对于web前端来说，调试程序：
????????????每一个浏览器都内置了调试器
????????????使用快捷键f12可以调出调试器
????????7.div和span的区别：
????????????div默认情况下独自占用一行
????????????span不会占用一行? ? ??
? ? ? ? 8. div可以嵌套div和span
?14.总结
? ? ? ? html的学习主要以记忆为主，一些关键的标签使用，一些控件的安排，以及一些属性的设置等等；另外也需要多亲自去打代码，熟能生巧这是学习的根本！坚持下去吧！！