前言
后端开发也需要了解前端的一些基础知识，文章参考老杜和狂神的视频所写
一、初步了解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-->
<!-- 长了一只眼睛，独目标记-->s
hello <br>
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.黑体字
7.斜体字
8.插入字和删除字
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>
八、超链接(重点)
<!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>
自定义列表
十三、媒体元素
十四、页面结构分析
