一、HTML概述
1、系统结构：
①、B/S架构
Browser Server(浏览器/服务器的交互形式。)
Browser支持哪些语言：HTML CSS Javascript
S是服务器端Server,Server端的语言很多：c++、Java、python...
B/S架构的系统有什么优点和缺点？
- 优点：升级方便，只升级服务器端代码即可。维护成本低。
- 缺点：速度慢、体验不好、界面不炫酷
企业内部的解决方案都是采用B/S架构的系统，因为企业内部办公需要的一些系统不需要炫酷，不需要特别好的用户体验，只要能做数据的增删改查即可。并且企业内部更注重维护的成本。
B/s架构的系统有哪些代表？
京东
百度
天猫
...
②、C/S架构
Client Server(客户端/服务器端的交互形式。)
- 缺点：升级麻烦，维护成本较高。
- 优点：速度快，体验好，界面炫酷。(娱乐型的系统多数是C/$架构的。)
常见的C/s架构的系统：
QQ
微信
支付宝
2、Html基本概念
HTML:Hyper Text Markup Language（超文本标记语言）
由大量的标签组成，每一个标签都有开始标签和结束标签。
<标签>
<标签>
<标签 属性名="属性值" 属性名="属性值">
</标签>
</标签>
</标签>
超文本：流媒体、图片、声音、视频......
HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是。html或者htm,直接采用浏览器打开匹文件就是运行。
HTL是谁制定的？
W3C:世界万维网联盟
W3C制定了HTML的规范，每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。
HTML规范目前最高的版本是：HTML5.0,简称H5.
补充
为了方便中国wb前端程序员的开发，提供大量的帮助文档。为开发提供方便。
w3 schoo1:先出现的，和w3c没有关系
w3 cschoo1:后出现的，和W3C没有关系
二、第一个HTML
乱码解决方法：
<!--
1、这是HTML的注释
2、加上以下代码的第一行就表示HTML5语法。去掉就表示HTML4.0
3、HTML不区分大小写，语法松散不严格。
-->
<!doctype html>
<HTML>
<head>
<title>网页标题</title>
</head>
<body>
这是网页主体内容，欢迎学习HTML！
</body>
</HTML>
三、基本标签
<HTML>
<head>
<title>基本标签</title>
</head>
<body>
<!-- 段落标签 (分段)-->
<p>
《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里（文中指出的是“花冢”）最干净，说明她对美有独特的见解。她写了《葬花吟》，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的
候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。
</p>
<p>
第二十三回 《西厢记妙词通戏语 牡丹亭艳曲警芳心》—— 节选：那一日正当三月中浣，早饭后，宝玉携了一套《会真记》，走到沁芳闸桥边桃花底下一块石上坐着，展开《会真记》，从头细玩。正看到“落红成阵”，只见一阵风过，把树头上桃花吹下一大半来，落的满身满书满地皆是。宝玉要抖将下来，恐怕脚步践踏了，只得兜了那花瓣，来至池边，抖在池内。那花瓣浮在水面，飘飘荡荡，竟流出沁芳闸去了。回来只见地下还有许多，宝玉正踟蹰间，只听背后有人说道：“你在这里做什么？”宝玉一回头， 却是林黛玉来了，肩上担着花锄，锄上挂着花囊，手内拿着花帚。【庚辰侧批：一幅采芝图，非葬花图也。】宝玉笑道：“好，好，来把这个花扫起来，撂在那水里。我才撂了好些在那里呢。”林黛玉道：“撂在水里不好。你看这里的水干净，只一流出去，有人家的地方脏的臭的混倒，仍旧把花遭塌了。那畸角上我有一个花冢，如今把他扫了，装在这绢袋里，拿土埋上，日久不过随土化了，岂不干净。”
</p>
<!-- 标题字：是HTML预留的格式 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<!-- 换行标记，br标签是一个独目标记(只需要一个) -->
Hello
World！<br>
Hello World！
<!--横线，独目标记-->
<hr>
<!--color和width都是hr标签的属性-->
<hr color="red"width="50%">
<!--语法太松散了。-->
<hr color='green'width=30%>
<!-- 预留格式 -->
<pre>
for(int i = 0;i < 100;i++){
System.out.println(i);
}
</pre>
<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>
10<sup>2</sup>
10<sub>m</sub>
<font co1or="red"s1ze="50">字体标签</font>
</body>
</HTML>
四、实体符号
<HTML>
<head>
<title>实体符号</title>
</head>
<body>
b<a>c
<!--实体符号特点是：以&开始，以：结束。&1t:是小于号 gt;是大于号 是空格-->
b<a>c
abc def<br>
a bc
</body>
</HTML>
五、☆表格
1、基本表格
<HTML>
<head>
<title>表格</title>
</head>
<body>
<!--
border="1px"设置表格的边框为1像素宽度。
width 宽度
height 高度
-->
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- 在h1里面设置属性align也能够居中 -->
<center><h1>员工信息列表</h1></center>
<hr>
<table border="1px" width="50%" height="100px" align="center">
<!-- align对齐方式 -->
<tr align="center">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>x</td>
<td>y</td>
<td align="center">z</td>
</tr>
</table>
</body>
</HTML>
2、合并单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格单元格合并+th标签</title>
</head>
<body>
<!--
注意事顶：
1、row合并的时候，删除"下面的"单元格
2、co1合并的时候，对刚除哪个没有要求。
-->
<table border="1px" width="50%" height="200px">
<tr>
<!--th标签也是单元格标签，比td多的是居中、加粗。-->
<th>员工编号</th>
<th>员工薪资</th>
<th>部门名称</th>
</tr>
<tr>
<td colspan="2">a</td>
<!-- <td>b</td> -->
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td rowspan="2">f</td>
</tr>
<tr>
<td>x</td>
<td>y</td>
<!-- <td>z</td> -->
</tr>
</table>
</body>
</html>
六、背景颜色和背景图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景颜色和背景图片</title>
</head>
<body>
<!--
bgcolor:设置背景色
background：设置背景图片
以了的设置都是对背景进行设置。-->
<body bgcolor="red"background="img/bd_logo1.png"
</body>
</html>
七、图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景颜色和背景图片</title>
</head>
<body>
<!--
1、设置图片宽度和高度的时候，只设置宽度，高度会进行等比例缩放。
2、img标签就是图片标签
3、src属性是图片的路径
4、width设置宽度，height设置高度
5、tit1e设置鼠标悬停时显示的信息。
6、a1t设置图片加载失败时显示的提示信息。
-->
<img src="simple.jpg" width="100px" title="我是一张好看的图片" alt="找不到图片"></img>
<br><br><br><br><br>
<!-- 开始标签和结束标签间没有内容，可以省略结束标签，在开始标签最后+'/' -->
<img src="simple.jpg"/>
</body>
</html>
八、超链接/热链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<!--
a，是Anchor的缩写，意思是锚
href:hot references热引用
href属性后面一定是一个资源的地址。
ref后面的路径可以是绝对路径也可以是相对路径，可以是网络中某个资源的路径，也可以是本地资源的路径。
-->
<a href="https://www.baidu.com">百度</a>
<!--
超链接有一个target属性,可取值：
blank:新窗口
_se1f：当前窗口(默认就是这种方式。)
_top:顶级窗口
_parent:父窗口
-->
<a href="https://www.baidu.com" target="_blank">百度新窗口</a>
<!-- 图片链接 -->
<a href="https://www.baidu.com">
<img src="simple.jpg"/>
</a>
</body>
</html>
<!--
超链接的作用：
通过超链接可以从浏览器向服务器发送请求。
浏览器向服务器发送数据(请求：request)
服务器向浏览器发送数据(响应：response)
-->
九、列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表</title>
</head>
<body>
<!-- 有序列表 -->
<ol type="1">
<li>水果
<ol type="a">
<li>西瓜</li>
<li>哈密瓜</li>
<li>榴莲</li>
</ol>
</li>
<li>蔬菜</li>
</ol>
<!-- 无序列表 -->
<ul type="circle">
<li>中国
<ul type="square">
<li>广东
<ul type="disc">
<li>广州</li>
<li>东莞</li>
</ul>
</li>
<li>北京</li>
</ul>
</li>
<li>美国</li>
<li>俄罗斯</li>
</ul>
</body>
</html>
十、★表单
1、form表单初步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单form</title>
</head>
<body>
<!--
1、表单有什么用？收集用户信息。表单展现之后，用户填写表单，点击提交按钮提交数据给服务器。
2、怎么画一个表单？使用form标签画表单。
3、一个网页当中可以有多个表单form。
4、表单最终是需要提交数据给服务器的，form标签有一个action属性，这个属性用来指定服务器地址：
action属性用来指定数据提交给哪个服务器。
action属性和超链接中的href属性一样。都可以向服务器发送请求(request)
5、192.127.1.1:8080/os/sava这是请求路径，表单提交数据最终提交给：
192.127.1.1机器上的8080端口对应的软件。
-->
<form action="192.127.1.1:8080/os/sava">
<!-- 画按钮可以使用input输入域，type="submit"的时候表示该按钮是一个提交按钮，具有提交表单的能力 -->
<input type="submit" value="登录">
<input type="button" value="button不具备提交表单的能力">
</form>
<form action="https://www.baidu.com">
<!-- 这个按钮和普通的超链接没什么太大的区别。（超链接和表单都可以向服务器发送请求，只不过表单发送请求的同时可以携带数据.) -->
<input type="submit">
</form>
<br><br><br>
<form action="localhost:8080/web/login.html">
用户名：<input type="text"><br>
密 码: <input type="password"><br>
<input type="submit" value="注册">
</form>
<!--
https://0.0.31.144/web/login?username=21&password=321
action?name=value&name=value&name=value&name=value&name=value...
w3C的HTTP协议规定的，必须以这种格式提交给服务器。
重点强调：表单项写了name属性的，一律会提交给服务器。不想提交这一项，就不要写name属性。
文本框和密码框的value不需要程序员指定，用户输入什么value就是什么。
当name没有写的时候，该项不会提交给服务器。
但是当value没有写的时候，valuef的默认值是空字符串"，会将空字符串提交给服务器。java代码得到的是：String username="";
-->
<br><br><br>表格优化版<br>
<form action="https://8080/web/login">
<table border="1px">
<tr>
<td> 用户名：</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密 码：</td>
<td><input type="password" name="password"></td>
</tr>
<tr align="center">
<td colspan="2" >
<input type="submit" value="注册">
<input type="reset" value="清空">
</td>
<!-- <td><input type="reset" value="清空"></td> -->
</tr>
</table>
</form>
</body>
</html>
2、用户注册表单的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户注册表单</title>
</head>
<body>
<!--
form表单method,属性：
get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。
post:采用post式提交的时候，用户提交的信息不会显示在浏览器地址栏上。
当用户提交的信息中含有敏感信息，例如：密码，建议采用post方式提交。
method,属性不指定，或者指定get,这种情况下都是get.
只有当method属性指定为post的时候才是post请求。剩下所有的请求都是get请求。
post提交的时候提交的数据格式和get还是一样的，只不过不再地址栏上显示出来。
PosT提交的数据还是：name=:value&name=value&name=value...
-->
<form action="https://localhost:8080" method="post">
<!-- 隐藏域：网页上看不到，但是表单提交的时候数据会自动提交给服务器。-->
<input type="hidden"name="userid"value="111"/>
用户名： <input type="text" name="username"><br>
密码：<input type="password" name="password"><br>
确认密码：<input type="password"><br>
性别：
<input type="radio" name="sex" value="1" checked>男
<input type="radio" name="sex" value="0">女
<br>
兴趣爱好：
<input type="checkbox" name="interest" value="smoke">抽烟
<input type="checkbox" name="interest" value="drink">喝酒
<input type="checkbox" name="interest" value="FireHead">烫头
<br>
下拉列表多选：
<select multiple="multiple" style="width: 120px;" name="000" size="3">
<option value="111">111</option>
<option value="222">222</option>
<option value="333">333</option>
<option value="444">444</option>
<option value="555">555</option>
</select>
<br>
学历
<select name="grade">
<option value="gz">高中</option>
<option value="dz">大专</option>
<option value="bk" selected>本科</option><!--默认选中-->
<option value="yjs">研究生</option>
</select>
<br>
简介:<!--文本域，文本域没有value属性，用户填写的内容就是value-->
<textarea name="intraduce" cols="60" rows="25"></textarea>
<br>
证件照:<input type="file" name="file">
<br>
<input type="submit" value="注册"><input type="reset" value="清空">
</form>
<!--超链接也可以提交数据给服务器，但是提交的数据都是固定不变的。-->
<!--超链接是get请求。不是post请求。-->
<a href="http://localhost:8080/oa/save?username=zhangsan&password=111">超链接也可以提交数据</a>
<!--
readonly和disable，都是只读，不能修改，但是readonly可以提交给服务器，disable不会提交数据（即使有name属性也不会提交）
-->
<form action="https://localhost:8080">
用户编号：<input type="text" name="userId" value="123" readonly><br>
作者寄语：<input type="text" name="MaRen" value="你是煞笔" disabled><br>
<!-- maxlength:设置文本框中可输入的字符数量 -->
你可以骂回来（只能用一个字符）：<input type="text" maxlength="1" >
</form>
</body>
</html>
十一、HTML中元素的id属性
1、在HTML文档当中，任何元素（节点）都有id属性，id属性是该节点的唯一标识。所以在同一个HTML文档当中id值不能重复。
2、注意：表单提交数据的时候，只和name有关系，和id无关。
3、id有什么用？
javascript语言：可以对HTML文档当中的任意节点进行增册改操作。
javascript可以对HTML文档当中的任意节点进行增删改，那么增册改之前需要先拿到这个节点，通常我们通过id来拿节点对象。
id的存在让我们获取元素（节点）更方便。
4、HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id。
javascript.主要就是对这棵DoM树上的节点进行增册刚改的。
DOM(Document)树。
十二、div和span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div和span</span></title>
</head>
<body>
<!--
1、div和span是什么？有什么用？
* div和span都可以称为“图层”
* 图层的作用是为了保证页面可以灵活的布局。
* 图层就是一个一个的盒子，div嵌套div就是盒子套盒子。
* div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
2、其实最早的网页是采用tablei进行布局的，但是table不灵活，太死板。
现代的网页开发中div布局使用最多，几乎很少使用table进行布局了。
3、div和span的区别？
div独自占用一行（默认情况下）
span不会独自占用一行。
-->
<div id="div1">我是一个div</div>
<div id="div2">我是一个div</div>
<span id="span1">我是一个span</span>
<span id="span2">我是一个span</span>
</body>
</html>
posted on
