1、基础概念
1.1系统结构
系统结构 | 优缺点 | 代表 |
B/S架构 (Browser / Server 浏览器/服务器的交互形式。) | 优点:升级方便,只升级服务器端代码即可。维护成本低。 缺点:速度慢、体验不好、界面不炫酷 | 京东、百度、天猫(企业使用:不需要太多用户体验增删改查;维护成本低) |
C/S架构 (Client / Server 客户端/服务器端的交互形式。) | 优点:速度快,体验好,界面炫酷。 缺点:升级麻烦,维护成本较高。 | 娱乐型系统:QQ、VX、ZFB |
1.2什么是HTML?怎么开发HTML?怎么运行HTML?
* HTML: Hyper Text Markup Language (超文本标记语言)
由大量的标签组成,每一个标签都有开始标签和结束标签。
<标签>
<标签>
<标签 属性名="属性值" 属性名="属性值">
</标签>
</标签>
</标签>
超文本: 流媒体、图片、声音、视频....
* HTML开发的时候使用普通的文本编辑器就行,创建的文件扩展名是.html或者.htm
HTML也有专业的开发工具,例如:DreamWeaver、HBuilder.....
* 直接采用浏览器打开HTML文件就是运行。
1.3HTML是谁制定的?
W3C:世界万维网联盟
W3C制定了HTML的规范,每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。
HTML规范目前最高的版本是:HTML5.0,简称H5.
我们这里学习HTML4.0(主要是学习一下HTML的基础用法。)
W3C制定了很多规范:
HTML/XML/http协议/https协议......
为了方便中国web前端程序员的开发,提供大量的帮助文档。为开发提供方便。
w3school:先出现的,和W3C没有关系
w3cschool:后出现的,和W3C没有关系
2、代码知识点整理
1.基本标签(&)
<!doctype html>
<head>
<title>Html基本标签</title>
</head>
<body>
<!-- 段落标记 -->
<p>1234567890</p>12345678901234567<p>125678901234890</p>
<!-- 标题字:是HTML预留的格式,和word中的标题字相同 -->
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<!-- 换行标记,br标签是一个独目标记 -->
hello <br> world
<!-- 横线,独目标记 -->
<hr>
<!-- color和width都是hr标签的属性 -->
<hr color="red" width="50%">
<!-- 语法太松散了 -->
<hr color="green" width="30%">
<!-- 预留格式 -->
<pre>
for(int i=0;i<10;i++){
System.out.println("i=" +i)
}
</pre>
<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>
10<sup>2</sup> 右上角加字,10的2次方
10<sub>m</sub> 右下角加字,10m
<font color='red' size='50'>字体标签</font>
</body>
</html>
2.实体符号
<!--
实体符号特点是:以&开始,以;结束。
<是小于>是大于号, 是空格符
-->
b<a>c
abc def <br>
abc def
3.表格(&)
<!doctype html>
<html>
<head>
<title>表格</title>
</head>
<body>
<br><br><br><br><br><br><br>
<center><h1>员工信息列表</h1></center>
<hr>
<table align="center" border="1px" width="300px" height="150px">
<!--宽高也可以写百分比-->
<!-- border="1px" 设置表格的边框为1像素宽度 -->
<!-- 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>
3.1单元格合并(&)
<!doctype html>
<html>
<head>
<title>表格-单元格合并,及th标签</title>
</head>
<body>
<!--注意事项:
1、row合并的时候,删除“下面的”单元格
2、col合并的时候,对删除哪个没有要求-->
<table border="1px" width=50%>
<!--
<tr>
<td>员工编号</td>
<td>员工薪资</td>
<td>部门名称</td>
</tr>
-->
<!-- th 标签也是单元格标签,比td多的是居中、加粗 -->
<tr>
<th>员工编号</th>
<th>员工薪资</th>
<th>部门名称</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td rowspan="2">cf</td>
<!--c行加上rowspan合并2行写2-->
</tr>
<tr>
<!--
<td>d</td> 去掉d或e都可以
-->
<td colspan="2">de</td>
<!--
<td>f</td> 去掉f行
-->
</tr>
</table>
</body>
</html>
3.2 thead tbody tfoot
<!doctype html>
<html>
<head>
<title>thead tbody tfoot 在table中不是必须的,只是这样做便于后期js代码的编写</title>
</head>
<body>
<table border="1px" width=50%>
<thead>
<tr>
<th>员工编号</th>
<th>员工薪资</th>
<th>部门名称</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td rowspan="2">cf</td>
</tr>
<tr>
<td colspan="2">de</td>
</tr>
</tbody>
</table>
</body>
</html>
4.背景颜色和背景图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景颜色和背景图片</title>
</head>
<!--
bgcolor:设置背景色
background:设置背景图片
以上的设置都是对背景设置
-->
<body bgcolor = "red" background="img/aaa.jpg">
</body>
</html>
5.图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片img</title>
</head>
<body>
<!--
1.设置图片宽度和高度的时候,只设置宽度,高度会进行等比例缩放
2.img标签就是图片标签
3.src属性是图片的路径
4.width设置宽度 height设置高度
5.title 设置鼠标悬停时显示的信息
6.alt设置图片加载失败时显示的提示信息
-->
<img src="img/aaa.jpg" width="100px" height="200px" title="我是图片" alt="图片加载失败"/>
<img src="img/aaa.jpg" width="100px" height="200px" title="我是图片" alt="图片加载失败"></img>
<br><br><br><br><br>
<img src="img/aaa.jpg" />
</body>
</html>
6.超链接或热链接(&)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接 热链接</title>
</head>
<body>
<!--
超链接的特点:
有下划线
鼠标停留在超链接上显示小手形状
点击超链接之后还能跳转页面。
-->
<!-- 超链接有一个target属性:
可取值:
_blakn:新窗口
_self:当前窗口(默认就是这种方式。)
_top:顶级窗口
_parent:父窗口
-->
<a href="http://www.baidu.com" target="_blakn">百度</a>
<a href="http://news.baidu.com" target="_self">百度新闻</a>
<a href="http://www.jd.com">京东</a>
<a href="http://www.tmall.com">天猫</a>
<br><br>
<!--
href:hot reference 热引用
href属性后面一定是一个资源的地址
href后面的路径可以是绝对路径,也可以是相对路径,可以是网络中某个资源的路径,也可以是本地资源的路径
-->
<a href="007-背景颜色和背景图片.html">007</a>
<!--
a和/a之间除了可以写文本,还可以写<img src="" alt=""> 图片
-->
<!--图片超链接-->
<a href="https://www.hao123.com/">
<img src="img/hao123.png" width="100px"/>
</a>
</body>
</html>
<!--
超链接的作用:
通过超链接可以从浏览器向服务器发送请求
浏览器向服务器发送数据(请求:request)
服务器向浏览器发送数据(响应:response)
B/S结构的系统,每一个请求都会对应一个响应
B--请求--------------S
S--响应--------------B
用户点击超链接和用户在浏览器地址栏上直接输入URL,有什么区别?
本质上没有区别,都是向服务器发送请求。
从操作上来讲,超链接使用更方便。
->
7.列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<!-- 有序列表 -->
<ol type="A">
<!--type写A就是ABC,写1就是123排序,写I 就是字符-->
<li>水果
<ol type="a">
<li>苹果</li>
<li>西瓜</li>
<li>桃子</li>
</ol>
</li>
<li>蔬菜
<ol>
<li>西红柿</li>
</ol>
</li>
<li>甜点</li>
</ol>
<!-- 无序列表 -->
<ul>
<li>中国
<ul type='square'>
<li>北京
<ul type='disc'>
<li>东城区</li>
<li>西城区</li>
<li>海淀区</li>
<li>朝阳区</li>
</ul>
</li>
<li>天津</li>
<li>上海</li>
</ul>
</li>
<li>美国</li>
<li>日本</li>
</ul>
</body>
</html>
8.表单form(&)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单form</title>
</head>
<body>
<!--
1.表单有什么用?
手机用户信息。表单展现之后,用户填写表单,点击提交按钮提交数据交给服务器
2.怎么画一个表单。
使用form标签画表单。
3.一个网页当中可以有多个表单form
4.表单最终是需要提交数据给服务器的,form标签有一个action属性,这个属性用来指定服务器地址:
action属性用来指定数据提交给哪个服务器。
action属性和超链接中的href属性一样。都可以向服务器发送请求(request)
5:http://192.168.111.3:8080/oa/save 这是请求路径,表单提交数据最终提交给:
192.168.111.3机器上的8080端口对应的软件
-->
<form action="http://192.168.111.3:8080/oa/save">
<!-- 画一个提交按钮,这个按钮可以提交表达 -->
<!-- 画按钮可以使用input输入域,type="submit"的时候表示该按钮是一个提交按钮,具有提交表单的能力。 -->
<!-- 对于按钮来说,按钮的value属性用来指定按钮上显示的文本信息 -->
<input type="submit" value="注册">
<!-- 这是一个普通按钮,不具备提交表单的能力。 -->
<input type="button" value="设置按钮上显示的文本">
</form>
<!-- 这个按钮和普通的超链接没什么太大的区别。(超链接和表单都可以向服务器发送请求,只不过表单发送请求的同时可以携带数据) -->
<form action="http://baidu.com">
<input type="text">
<input type="submit" value="百度">
</form>
<br>
<br>
<form action="http://localhost:8080/jd/login">
用户名<input type="text"><br>
密码<input type="password"><br>
<input type="submit" value="登录">
</form>
<!--表单是以什么格式提交数据给服务器的?
http://localhost:8080/jd/login?username=abc&userpwd=111
格式:action?name=value&name=value&name=value&name=value... 必须记住 name指的是input标签的namem,value指的是input标签的value
W3C的HTTP协议规定的,必须以这种格式提交给服务器-->
<!--重点强调,表单项写了name属性的,一律会提交给服务器。不想提交这一项,就不要写name属性-->
<!--
文本框和密码框的value不需要程序员指定,用户输入什么value就是什么
当name没有写的时候,该项不会提交给服务器
但是当value没有写的时候,value的默认值是空字符串,会将空字符串提交给服务器。java代码得到的是:string username=""
-->
<form action="http://localhost:8080/jd/login">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="userpwd"></td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" value="登录">
<input type="reset" value="清空">
</td>
</tr>
</table>
</form>
<!-- submit必须放到form标签内部 -->
<input type="submit">
<!-- reset必须放到form标签内部 -->
<input type="reset" value="清空">
</body>
</html>
<!--复习视频:https://www.bilibili.com/video/BV11t411K74Q?p=22-->
9.用户注册表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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="http://localhost:8080/jd/register" method="post">
用户名
<input type="text" name="username">
<br>
密码
<input type="password" name="userpwd">
<br>
确认密码
<input type="password">
<br>
性别
<input type="radio" name="gender" value="1" checked>男
<input type="radio" name='gender' value="0">女
<!-- 单选按钮的value必须手动指定 -->
兴趣爱好
<input type="checkbox" name="interest" value="smoke">抽烟
<input type="checkbox" name="interest" value="drink">喝酒
<input type="checkbox" name="interest" value="Hot head" checked>烫头
<br>
学历
<select name="grade">
<option value="high school">高中</option>
<option value="polytechnic">大专</option>
<option value="graduate" selected>本科</option>
<!--默认选中-->
<option value="master">硕士</option>
</select>
<br>
简介
<!--文本域没有value属性,用户填写的内容就是value-->
<textarea name="introduce" id="" cols="30" rows="10"></textarea>
<input type="submit" value="注册">
<input type="reset" value="清空">
</form>
<!--超链接也可以提交数据给服务器,但是提交的数据都是固定不变的。-->
<!--超链接是get请求。不是post请求-->
<a href="http://localhost:8080/oa/save?username=zhangsan&password=111">提交</a>
</body>
</html>
<!--http://localhost:8080/jd/register?username=zhangsan&userpwd=111&gender=1&interest=smoke&interest=drink&interest=Hot+head&grade=master&introduce=jack+goodman-->
10.下拉列表支持多选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉列表支持多选</title>
</head>
<body>
<!--multiple="multiple" 支持多选的 size设置选中的条目数量-->
<select multiple="multiple" size="2">
<option value="">河北</option>
<option value="">河南</option>
<option value="">山东</option>
<option value="">山西</option>
</select>
</body>
</html>
11.file控件:文件上传专用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>file控件</title>
</head>
<body>
<!--file控件:文件上传专用。-->
<input type="file"/>
<form action="http://localhost:8080/oa/save">
<!--隐藏域:网页上看不到,但是提交表单数据是,数据会自动提交给服务器-->
<input type="hidden" name="userid" value="111"/>
用户代码<input type="text" name="usercode"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
12.readonly和disable
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>readonly和disable</title>
</head>
<body>
<!--
readonly和disabled相同点:都是只读不能修改。
但是readonly可以提交给服务器,disabled数据不会提交(即使有name属性也不会提交)
-->
<form action="http://localhost:8080/taboabo/save">
用户代码<input type="text" name="usercode" value="110" readonly>
<br>
用户姓名<input type="text" name="username" value="zhangsan" disabled>
<br>
<input type="submit" value="提交数据">
</form>
</body>
</html>
13.input控件的maxlength属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>maxlength</title>
</head>
<body>
<!-- maxlength 设置文本框中可输入的字符数量 -->
<input type="text" maxlength="3">
</body>
</html>
14.HTML中元素的id属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中元素的id属性</title>
</head>
<body id="mybody">
<!--
1、在HTML文档当中,任何元素(节点)都有id属性,id属性是该节点的唯一标识。所以在同一个HTML文档当中id值不能重复。
2、注意:表单提交数据的时候,只和name有关系,和id无关。
3、id有什么用?
javascript语言:可以对HTML文档当中的任意节点进行增删改操作。
javascript可以对HTML文档当中的任意节点进行增删改,那么增删改之前需要先拿到这个节点,通常我们通过id来拿节点对象。
id的存在让我们获取元素(节点)更方便。
4、HTML文档是一棵树,树上有很多节点,每一个节点都有唯一的id。
javascript主要就是对这棵DOM树上的节点进行增删改的。
DOM(Document)树。
-->
<form id="myform">
<input type="text" id="username" name="username"/>
<input type="password" id="userpwd" name="userpwd"/>
<!--id就是节点的身份证号码,不能重复。-->
<!--
<input type="text" id="username" />
-->
</form>
</body>
</html>
15.div和span
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中的div和span</title>
</head>
<body>
<!--
1、div和span是什么?有什么用?
* div和span都可以称为“图层”
* 图层的作用是为了保证页面可以灵活的布局。
* 图层就是一个一个的盒子,div嵌套div就是盒子套盒子。
* div和span是可以定位的,只要定下div的左上角的x轴和y轴坐标即可。
2、其实最早的网页是采用table进行布局的,但是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>
<div id="div3">
<div>
<div>test</div>
</div>
</div>
</body>
</html>