前言
后端开发也需要了解前端的一些基础知识，文章参考老杜和狂神的视频所写
一、初步了解html在开发中的作用
1.html是什么
Hyper Text Markup Language 超文本标记语言 超文本：比如声音，视频，图片等
标记语言：这种语言是由大量的标签组成 任何一个标签都有开始标签和结束标签，比如： <标签> :开始标签 </标签> :结束标签
html是一种规范，一种浏览器上的规范
标签语言，不能称为编程语言，因为html中没有变量，数据类型
控制语句if、for等这些都没有的
2.html运行在哪里
html运行在浏览器 世界五大主流浏览器：
IE：微软的
FireFox：火狐（FF）
Chrome：谷歌
Opera：欧朋
Safari：MAC OS专用（苹果专用的浏览器）
国内前端程序员主要安装三个： IE FF Chrome
前端的程序员开发完成之后需要在不同的浏览器上运行程序， 以便发现浏览器兼容问题。
3.html怎么开发
- 新建一个.htm或.html结尾的文件
- 浏览器打开就可以运行，不需要编译
4. web是什么
web就是网站开发
5.html是哪个组织制定的标准
- W3C. 万维网联盟制定
- html实际上是w3c制定的一套标准，有不同的版本，例如：HTML4.0、HTML5.0(简称H5)
W3C是一个什么组织呢？
W3C是World Wide Web Consortium（万维网联盟）的缩写
tim berners-lee 万维网联盟创始人。万维网之父。（地位等同于爱因斯坦…）
因为有了他，才有了现如今的互联网时代，他让我们能够上网了。
HTTP协议：超文本传输协议，也是W3C制定的。
HTTP协议是一种什么协议？
浏览器和web服务器传消息的协议。
6.B/S架构初步了解
- 用户在浏览器地址栏输入URL
- 回车(相当于发送了请求)
- 服务器会给浏览器一个响应，最终响应一段html代码给浏览器，浏览器对html代码进行执行展示一个结果
二、第一个html页面
<!--、
1.这个是html的注释
2.加上以下代码的第一行就表示html5语法
去掉表示html4.0
3.html不区分大小写，语法松散不严格
-->
<!DOCTYPE html>
<!--根-->
<html>
<!--头-->
<head>
<!--标题，显示在网页左上角-->
<title>
网页标题
</title>
</head>
<!--主题，显示在网页上-->
<body>
网页的主题内容，欢迎学习html
</body>
</html>
三、基本标签
1.段落标记(用来分段)
<p> </p>
2.标题字
h1到h6来表示
<!--标题字-->
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
3.换行
单目标记
<br>
<!--换行标记用br-->
<!-- 长了一只眼睛，独目标记-->s
hello <br> world！
4.水平线
<hr>
<!--color是一个属性名，red是属性值，用来指定颜色值
HTML的字符串可以用双引号，单引号，也可以去掉引号，HTML的语法很松散
HTML不区分大小写
width和color是hr的属性-->
<hr color="blue">
<hr color="red" width="50%">
5.预留格式
在HTML源码是是什么样子，在网页上还是什么样子
<pre><pre/>
<pre>
for(int i=0; i<100;i++){
System.out.println("i="+i)
}
</pre>
6.黑体字
<b>黑体字<b/>
7.斜体字
<i>斜体字<i/>
8.插入字和删除字
<ins><ins/>会加下划线
<del><del/>
9.右上角加字和右下角加字
10<sup>2<sup/>
m<sub>2<sub/>
10.字体标签
<!--font字体标签-->
<font color="yellow" size="12">hello world!</font>
11、实体符号
实体符号以&开始，以;结束
<是小于号
>是大于号
 空格 牛逼的空格键
只有当我们在html页面上用的符号有特殊意义才要用实体符号
五、表格
1.基本表格
table表示表格
tr是一行
td是一个单元格
刚开始就写tr,td是不会有边框的，还要通过属性来设置参数值
<html>
<head>
<title>
表格
</title>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>
表格
</title>
</head>
<body>
<center><h1>员工信息列表</h1></center>
<!--border=1px设置表格的边框为1像素宽度-->
<table align="center" border="1px" width="50%" height="150px">
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
2.表格的合并
相邻单元格才能合并
注意事项
row合并的时候，删除下面的单元格
col合并的时候，删除哪一个没有要求
colspan或rowspan右边的参数表示的是合并的单元格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格单元格的合并</title>
</head>
<body>
<table width="50%" border="1px">
<tr>
<td>1</td>
<!-- colspan表示列合并，合并2个。 -->
<td colspan="2">xy</td>
<!-- <td>y</td> -->
</tr>
<tr>
<td>1</td>
<td>1</td>
<!-- rowspan表示行合并，2表示合并两个。 -->
<td rowspan="2">KINGford</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<!-- <td>ford</td> -->
</tr>
</table>
</body>
</html>
3.th标签(也是单元格标签)
相当于加粗和居中的作用,可以代替td标签
4.thead,tbody,tfoot(不是必须的)
以后写js代码，为了操作HTML页面，更方便，把表格分成三部分
<html>
<head>
<title>
表格
</title>
</head>
<body>
<center><h1>员工信息列表</h1></center>
<!--border=1px设置表格的边框为1像素宽度-->
<table align="center" border="1px" width="50%" height="150px">
<thead>
<tr >
<th>员工编号</th>
<th>员工薪资</th>
<th>部门名称</th>
</tr>
<thead/>
<tbody>
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="2">1</td>
<!-- <td>2</td> -->
<td>3</td>
</tr>
<tbody/>
<tfoot>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tfoot/>
</table>
</body>
</html>
六、背景颜色和背景图片
<!DOCTYPE html>
<html>
<head>
<!--设置打开的编码方式，不是设置当前页面的编码方式-->
<meta charset="utf-8">
<title>背景颜色和背景图片</title>
</head>
<body bgcolor="blue">
</body>
</html>
背景颜色 bgcolor
背景图片 background
都是对背景进行设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景颜色和背景图片</title>
</head>
<!-- body标签的bgcolor属性指定背景颜色。 -->
<!-- <body bgcolor="red"> -->
<!-- body标签的background属性指定背景图片。 -->
<body background="images/dyzh.jpg">
</body>
</html>
写的是相对路径
七、图片
图片是浮在网页上的元素，和背景无关
背景图是贴在网页的背景上
../代表上一级目录
我们可以设置图片的宽度，当我们设置宽度的时候，高度会等比例缩放，但是我们要是也设置了高度，就会失真，只设置高度不管用
- img是图片标签
- src是图片路径
- title是用来设置鼠标悬停时的图片信息
- alt是当图片加载失败的时候，网页的提示信息
<!DOCTYPE html>
<html>
<head>
<!--设置打开的编码方式，不是设置当前页面的编码方式-->
<meta charset="utf-8">
<title> 图片</title>
</head>
<body>
<img src="基本标签2.png" alt="找不到" width="300" title="点击我哦" >
</body>
</html>
八、超链接(重点)
<a href=链接地址> </a>
后面的路径可以是绝对路径也可以是相对路径，可以是网络的某个资源路径，也可以是本地的
也可以是图片超链接
超链接有target属性，可以设置超链接点击以后，窗口显示的位置
self 本窗口
_blank 在新的页面打开 默认
top 顶级窗口
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<!-- 链接到百度 -->
<!-- href 属性表示：hot references，用来指定链接的路径 -->
<a href="http://www.baidu.com">百度</a>
<br>
<!-- 链接路径可以是一个网络中的路径，也可以是一个本地的路径！ -->
<!-- 超链接的特点：鼠标停留在超链接上自动变成小手，超链接自动添加下划线！ -->
<a href="004-表格.html">链接到本地的表格！</a>
<br>
<a href="http://www.jd.com">京东商城</a>
<br>
<a href="http://www.126.com">126邮箱</a>
<br>
<a href="https://map.baidu.com">百度地图</a>
<!-- 图片可以做热链接吗？可以 -->
<a href="https://map.baidu.com">
<!-- 标签嵌套使用！ -->
<img src="images/bd.png" width="200px" title="点击我跳转到百度地图哦!" />
</a>
<hr>
<!-- 关于超链接的target属性 -->
<!-- target属性用来设置，最终打开窗口的位置 -->
<!--
target ：
_blank：新窗口
_self：当前窗口
_parent：当前窗口的父窗口
_top：当前窗口的顶级窗口
-->
<a href="http://www.baidu.com" target="_self">百度（当前窗口）</a>
<a href="http://www.baidu.com" target="_blank">百度（新窗口）</a>
<a href="http://www.baidu.com">百度（默认是怎样的？当前窗口）</a>
<hr>
<!-- 一个窗口中的内部窗口 -->
<iframe src="http://www.baidu.com"></iframe>
</body>
</html>
九、表单(最重要)（接收用户的信息）
表单是什么
超链接没有输入的入口
表单发送请求的同时，还能携带数据给服务器
表单和超链接的共同特征是能够向服务器发请求
只是超链接是用户直接点击发送请求，不能填写数据
用户点击表单提交的时候，不仅可以发送请求，而且请求中还可以携带输入的数据
表单最主要的作用是手机用户的信息
1.作用：接收用户的信息
收集用户信息，表单展现以后，用户填写表单，点击提交数据给服务器
2.怎么画表单
使用form标签
3.一个网页可以有多个表单
4.action指定服务器地址
form标签有一个action属性和超链接的href相同，需要填写url
表单最终要提交数据给服务器
form标签有一个属性action用来指定服务器地址
action属性用来指定数据提交给哪一个服务器
和href属性一样，都可以向服务器发送器请求
表单默认是文本框
普通按钮不会提交表单 button
reset可以重置
所有能够提交表单的type必须是submit
设置按钮上的文本 value
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<!--
1、什么是表单有什么用？
发送请求，并且携带数据给服务器。
表单和超链接有共同的特征，就是都可以向服务器发送请求，
只不过超链接是用户直接点击发送请求，不能填写数据。
而用户点击表单提交的时候，不但可以发送请求，而且请求中还可以携带输入的数据。
表单最主要的作用就是：收集用户的信息。
表单对应的英语单词是：form
2、怎么定义一个表单对象呢？语法格式
<form>
表单项1:
表单项2:
</form>
另外要注意：一个网页上可以有多个表单对象。
3、form标签中有一个action属性，这个属性和超链接的href相同。
都需要填写url。
-->
<!-- 超链接-->
<a href="http://www.baidu.com">百度</a>
<br><br><br>
<!-- 表单-->
<form action="http://www.baidu.com">
<!-- 按钮，提交表单的按钮，只要点击这个提交按钮，就发送请求了！ -->
<!-- 所有能够提交表单的按钮，type必须是submit，不能随便写 -->
<!-- <input type="submit"/> -->
<!-- 设置按钮上显示的文本 -->
<input type="submit" value="百度"/>
<!-- button是一个普通按钮，能提交表单吗？不能。 -->
<!-- <input type="button" value="百度"/> -->
</form>
<!-- submit提交按钮放在form外面也是不行的！-->
<input type="submit" value="百度(外)"/>
</body>
</html>
对于按钮来说，按钮上的value属性用来指定按钮上面的文本信息
如果提交按钮的value属性没有设置，会默认显示提交两个字
没有name属性是不会提交数据的
value没有写的时候，value默认是空的字符串
浏览器向服务器提交数据的格式是
url?name=value&name=value&name=value
以下表单提交数据的时候，格式是这样的：
http://192.168.145.2:8080/crm/login?x=zhangsan&y=111
这个格式是W3C指定的格式
所有的浏览器都是这样提交的，后台的Java程序员接受到这个程序以后，要根据这个字符串去拆分字符串
拆分之后存储到数据库中
文本框和密码框的value不需要程序员写
5.用户注册表单的实现
JavaScript就可以判断密码和确认密码是不是一样的
确认密码是不需要提交的
在浏览器上面就可以确认这两个密码是不是一样的
radio是单选框
在单选框里面的name属性设成一样的，就说明这两个是同一组，只能选一个
同一组的单选按钮，name需要一致，这样才可以做到单选的效果
提交数据是value的值，和我们写的男，女没有关系，那个男和女只是方便用户看的
单选按钮的value必须手动指定
加上checked就是默认选中
checkbox是复选框
给用户输入机会的就要写value
用户是用鼠标点的就不用写value
selected默认选中
textarea是文本域，没有value属性
如果form里面的属性method是POST,则提交的数据不会显示出来
get方式提交：用户提交的信息会显示在浏览器的地址栏上
默认为get
超链接也可以上传数据给服务器，但是提交的数据是固定不变的
超链接是get请求
下拉列表支持多选
6.下拉列表怎么多选
select里面的属性size可以设置下拉列表一次最多显示多少记录
加上multiple就可以多选了
要按住CTRL键
7.file控件
然后点击选择文件
只要选择了文件，页面会自动显示选择了什么文件
后台 Java程序使用IO流接收这个文件
8.hidden隐藏域控件
不希望用户在浏览器上面看到，但是希望可以提交数据过去
9.readonly和disabled都是只读的
disabled修饰的表单项不能提交给服务器
readonly修饰的表单项可以提交给服务器
10.maxlength属性
用来控制最多输入几个字符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>maxlength属性</title>
</head>
<body>
<!-- 最多输入3个字符 -->
<input type="text" maxlength="3" />
</body>
</html>
十、id属性
1.HTML中的任何一个节点上，都有id属性
2.在同一个网页中，id属性是不能重复的
3.id代表了这个节点，id是这个节点的身份证号
4.后期学习JavaScript之后，对节点增删改的时候，需要先获取该节点对象，id属性可以让我们方便的获取该节点对象
十一、div和span
都是图层
div就是一个盒子
每一个图层在网页上面都是一个独立的盒子
图层的主要作用就是：网页布局
table表格也可以布局，但是不灵活
每一个div和span左上角的顶点都要x和y轴的坐标，通过这个坐标可以定位div在网页上的位置
后面讲css的时候，我们可以通过css样式来进行定位
现代化的网页都是采用div和span来进行布局
div独自占用一行
十二 列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<!-- 无序列表 -->
<ul type="circle">
<!-- 列表项 -->
<li>中国
<ul type="square">
<li>北京
<ul type="disc">
<li>东城区</li>
<li>西城区</li>
<li>海淀区</li>
<li>朝阳区</li>
</ul>
</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</li>
<li>美国</li>
<li>日本</li>
<li>俄国</li>
</ul>
<!-- 有序列表 -->
<ol type="A">
<li>水果
<ol type="a">
<li>香蕉</li>
<li>哈密瓜</li>
<li>菠萝</li>
<li>苹果</li>
</ol>
</li>
<li>蔬菜</li>
<li>茶
<ol type="I">
<li>绿茶
<ol type="1">
<li>西红柿茶</li>
<li>龙井</li>
<li>毛尖</li>
</ol>
</li>
<li>红茶</li>
</ol>
</li>
</ol>
</body>
</html>
自定义列表
十三、媒体元素
十四、页面结构分析
