文章目录

  • 1.系统结构介绍
  • 2.软件环境准备
  • 3.什么是HTML？怎么开发HTML？怎么运行HTML？
  • 4.HTML是谁制定的？
  • 5.我的第一个HTML
  • 6.HTML的基本标签
  • 7.HTML的实体符号
  • 8.HTML的表格
  • 9.HTML的表格-单元格的合并1
  • 10.HTML的表格-单元格的合并2
  • 11.thead、tbody、tfoot标签
  • ----使用HBuilder写html代码(也可以用IDEA)----
  • 12.背景色和背景图片
  • 13.HTML图片img标签
  • 14.HTML超链接
  • 15.HTML超链接的作用
  • 16.HTML列表
  • 17.表单form初步(表单-重点)
  • 18.用户注册的表单的实现
  • 19.下拉列表支持多选
  • 20.file控件和hidden控件
  • 21.readonly和disabled
  • 22.input控件的maxlength属性
  • ----表单至此结束----
  • 23.HTML文档中节点的id属性
  • 24.HTML中的div和span
  • 重点1：表格
  • 重点2：超链接
  • 重点3：表单



架构 b站 b站技术架构_html

1.系统结构介绍

B/S架构：（以后主要走的方向是这个。）
	Browser / Server      （浏览器/服务器的交互形式。）

	Browser支持哪些语言：HTML CSS JavaScript

	写HTML CSS JavaScript代码的这波人职位叫做：WEB前端开发工程师。（Java程序员目前来看也需要会一些前端的东西。）
	前端页面上的图片需要UI设计师完成。（PS对java程序员来说没有太高的要求。）
	S是服务器端Server，Server端的语言很多：C C++ Java python.....（我们主要是使用Java语言完成服务器端的开发）

	B/S架构的系统有什么优点和缺点？
		优点：升级方便，只升级服务器端代码即可。维护成本低。
		缺点：速度慢、体验不好、界面不炫酷
	
	企业内部的解决方案都是采用B/S架构的系统，因为企业内部办公需要的一些系统
	不需要炫酷，不需要特别好的用户体验，只要能做数据的增删改查即可。并且企业
	内部更注重维护的成本。

	B/S架构的系统有哪些代表？
		京东
		百度
		天猫
		....

C/S架构
	Client / Server     （客户端/服务器端的交互形式。）

	缺点：升级麻烦，维护成本较高。
	优点：速度快，体验好，界面炫酷。（娱乐型的系统多数是C/S架构的。）

	常见的C/S架构的系统：
		QQ
		微信
		支付宝
		....

2.软件环境准备

下载谷歌，火狐，IE浏览器
为什么装这么多浏览器？
	因为每个浏览器是各个厂家的，不同的浏览器有不同的特点
	开发的页面，在不同浏览器上运行，可能呈现的不同，
	所以开发的页面必须要在三个浏览器上展示的相同，这叫浏览器的兼容问题
	Web前端好写，但是写一个通用的不好写

网页制作三剑客(不需要写代码来制作网页)：
	Dreamweaver Firework Flash
	这三个不用下载，了解就好

3.什么是HTML？怎么开发HTML？怎么运行HTML？

* HTML: Hyper Text Markup Language （超文本标记语言）
	由大量的标签组成，每一个标签都有开始标签和结束标签。
	<标签>
		<标签>
			<标签 属性名="属性值" 属性名="属性值">
			</标签>
		</标签>
	</标签>

	超文本: 流媒体、图片、声音、视频....

* HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm
HTML也有专业的开发工具，例如：DreamWeaver、HBuilder.....

* 直接采用浏览器打开HTML文件就是运行。

4.HTML是谁制定的？

W3C：世界万维网联盟
W3C制定了HTML的规范，每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。
HTML规范目前最高的版本是：HTML5.0，简称H5.
我们这里学习HTML4.0（主要是学习一下HTML的基础用法。）

W3C制定了很多规范：
	HTML/XML/http协议/https协议......

为了方便中国web前端程序员的开发，提供大量的帮助文档。为开发提供方便。
	w3school:先出现的，和W3C没有关系
	w3cschool：后出现的，和W3C没有关系

认真学习html，可以看看w3school

5.我的第一个HTML

<!--这是HTML注释-->
<!--HTML不区分大小写，语法松散-->
<!--加上下面代码的第一行就表示HTML5.0语法。去掉表示HTML4.0-->

<!doctype html>

<!--根-->
<html>

	<!--头-->
	<head>
		<!--网页标题，显示在网页左上角-->
		<title>网页的标签</title>
	</head>

	<!--体-->
	<body>
		网页的主体内容，欢迎学习HTML！
	</body>
	
</html>
创建.html或.htm结尾的文件，可以使用文本编辑器/editplus写代码，直接使用浏览器打开方式运行

6.HTML的基本标签

<!doctype html>
<html>
	<head>
		<title>HTML的基本标签</title>
	</head>
	<body>
		
		<!--段落标记 段落paragraph-->
		<p>第二十三回 《西厢记妙词通戏语 牡丹亭艳曲警芳心》—— 节选：那一日正当三月中浣，
		早饭后，宝玉携了一套《会真记》，走到沁芳闸桥边桃花底下一块石上坐着，展开《会真记》，从头细玩。
		正看到“落红成阵”，只见一阵风过，把树头上桃花吹下一大半来，
		落的满身满书满地皆是。宝玉要抖将下来，恐怕脚步践踏了，只得兜了那花瓣，来至池边，抖在池内。</p>
		<p>那花瓣浮在水面，飘飘荡荡，竟流出沁芳闸去了。
		回来只见地下还有许多，宝玉正踟蹰间，只听背后有人说道：“你在这里做什么？”宝玉一回头， 却是林黛玉来了，
		肩上担着花锄，锄上挂着花囊，手内拿着花帚。【庚辰侧批：一幅采芝图，非葬花图也。】</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='red' width='50%'>
		<hr color=red width=50%>

		<!--预留格式，如以下代码，不加上预留格式，最后在一行显示-->
		<pre>
			for(int i=0;i<10;i++){
				System.out.println(i);
			}
		</pre>

		<del>删除字</del>
		<ins>插入字</ins>
		<b>粗体字</b>
		<i>斜体字</i>

		<!--右上角加字-->
		10<sup>2</sup>

		<!--右下角加字-->
		10<sub>m</sub>

		<!--font字体标签-->
		<font color="red" size="50">字体标签</font>

	</body>
</html>

架构 b站 b站技术架构_html_02

7.HTML的实体符号

<!doctype html>
<html>
	<head>
		<title>HTML的实体符号</title>
	</head>
	<body>
		<!--在html中，使用的某些符号正好与html语言冲突，这是要用实体符号-->
		<!--实体符号：以&开始，以;结束-->

		<!--小于(less than)号：< 大于(greater than)号：>-->
		b<a">>c

		<!--空格(Non-Breaking Space)：  -->
		a b c

		<!--实体符号还有很多，这里就介绍这些-->

	</body>
</html>

8.HTML的表格

<!doctype html>
<html>
	<head>
		<title>HTML的表格</title>
	</head>
	<body>


		<!--让表格往下走，加换行-->
		<br><br><br><br>

		<center><h1>员工信息列表</h1></center>

		<!--加条横线-->
		<hr>


		<!--一对符号，table表示表格，tr表示一行，td表示一行中的一个格子-->
		<!--
			border="1px" 设置表格的边框为1像素宽度 
			width 宽度
			height 高度

			也可以以%为单位：width="60%"
		-->

		<!--
			align对其方式(居中center，向左，向右)
			可以写在table里(整个表格在页面居中)，行tr里，也可以写在td格子里
		-->


		<table align="center" border="1px" width="300px" height="150px">
			<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>

架构 b站 b站技术架构_架构 b站_03

9.HTML的表格-单元格的合并1

原表格 要合并c f 和合并d e

架构 b站 b站技术架构_html_04

<!doctype html>
<html>
	<head>
		<title>HTML的表格-单元格的合并</title>
	</head>
	<body>
		<!--
			相邻单元格合并，有行合并和列合并

			合并上下两行单元格(row合并)：
				找到要合并的两个格，删除其中一个格(一般去掉后者)，再给td添加属性rowspan
				rowspan="2"表示合并两个格，合并几个格就写几
			注意：删除下面的单元格

			合并左右两列单元格(column合并)：
				同上，添加属性colspan
			注意：col合并，对删除哪个没有要求
			
		-->
		<table border="1px" width="50%">
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>a</td>
				<td>b</td>
				<td rowspan="2">c</td>
			</tr>
			<tr>
				<td colspan="2">d</td>
				<!--
				<td>e</td>
				-->
				<!--
				<td>f</td>
				-->
			</tr>
		</table>
	</body>
</html>

架构 b站 b站技术架构_html_05

10.HTML的表格-单元格的合并2

th标签
th标签也是单元格标签，td也是单元格标签，但是th比td多的是居中、加粗
<!doctype html>
<html>
	<head>
		<title>HTML的表格-单元格的合并</title>
	</head>
	<body>

		<!--th标签也是单元格标签，td也是单元格标签，但是th比td多的是居中、加粗-->
		<table border="1px" width="50%">
			<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">c</td>
			</tr>
			<tr>
				<td colspan="2">d</td>
				<!--
				<td>e</td>
				-->
				<!--
				<td>f</td>
				-->
			</tr>
		</table>
	</body>
</html>

架构 b站 b站技术架构_超链接_06

11.thead、tbody、tfoot标签

thead,tbody,tfoot在table中不是必须的，只是这样做便于后期JS代码的编写
为了对表格操作方便，可以将表格分为三部分(head body foot)
也可以不分
<!doctype html>
<html>
	<head>
		<title>HTML表格-thead,tbody,tfoot</title>
		<!--thead,tbody,tfoot在table中不是必须的，只是这样做便于后期JS代码的编写-->
	</head>
	<body>
		<table border="1px" width="50%">
			<!--头-->
			<thead>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
				</tr>
			</thead>
			
			<!--体-->
			<tbody>
				<tr>
					<td>a</td>
					<td>b</td>
					<td rowspan="2">c</td>
				</tr>
				<tr>
					<td colspan="2">d</td>
					<!--
					<td>e</td>
					-->
					<!--
					<td>f</td>
					-->
				</tr>
			</tbody>

			<!--脚-->
			<tfoot>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

----使用HBuilder写html代码(也可以用IDEA)----

12.背景色和背景图片

<!DOCTYPE html>
<html>
	<head>
		<!--这行代码是告诉浏览器使用哪一种字符编码方式-->
		<meta charset="utf-8">
		<title>背景颜色和背景图片</title>
	</head>
	<!--
		bgcolor设置背景色
		background设置背景图片
	-->
	<body bgcolor="red" background="img/PC_880906d2a4ad95f5fafb2e540c5cdad7.png">
	</body>
</html>

13.HTML图片img标签

<!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设置图片加载失败时显示的提示信息
			7.开始标签和结束标签之间没东西，可以不写结束标签，在开始标签最后加上/
		-->
		<img src="img/PC_880906d2a4ad95f5fafb2e540c5cdad7.png" width="100px" title="我是百度图片哦" alt="图片找不到哦!"></img>
		
		<br><br><br>
		
		<img src="img/PC_880906d2a4ad95f5fafb2e540c5cdad7.png" width="100px" title="我是百度图片哦" alt="图片找不到哦!"/>
		
	</body>
</html>

14.HTML超链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接或热链接</title>
	</head>
	<body>
		
		<!--
			超链接：<a></a>标签+属性href
			href：hot reference 热引用
			href属性后一定是一个资源的地址
			
			href后面的路径：可以是绝对路径也可以是相对路径；可以是网络中某个资源的路径，也可以是本地资源的路径
		-->
		<a href="http://www.baidu.com">百度</a>
		<br></br>
		<a href="007-背景颜色和背景图片.html">007</a>
		
		
		<!--图片超链接:点击图片跳转，还有接着对图片进行修改-->
		<a href="https://www.hao123.com/">
			<img src="img/hao123.png" width="120px">
		</a>
		
		
		<!--
			超链接有一个target属性：
				target="_blank"  开启新窗口
				target="_self"	 当前窗口(默认方式)
				target="_top"    顶级窗口 
					a窗口里有1个窗口b，b窗口里有一个窗口c，如果c窗口中有一个超连接，
					该链接的target是top，点击这个超链接c窗口直接到a窗口
					该链接的target是parent，点击这个超链接c窗口直接到b窗口
				target="_parent" 父窗口
		-->
		<a href="https://www.hao123.com/" target="_blank">
			<img src="img/hao123.png" width="120px">
		</a>
		
	</body>
</html>

15.HTML超链接的作用

超链接的作用：
	通过超链接可以从浏览器向服务器发送请求。
	浏览器向服务器发送数据（请求：request）
	服务器向浏览器发送数据（响应：response）
	
	B/S结构的系统：每一个请求都会对应一个响应。

用户点击超链接和用户在浏览器地址栏上直接输入URL，有什么区别？
	本质上没有区别，都是向服务器发送请求。

从操作上来讲，超链接使用更方便。

16.HTML列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
	</head>
	<body>
		
		<!--
			无序列表：
				ul:unorder list
				li:list
			
				<ul>
					<li> </li>
				</ul>
				
				还可以设置列表前小点点的样式
					type="circle"
					type="square"
					type="disc"
		-->
		<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>
				</ul>
			</li>
			<li>美国</li>
			<li>日本</li>
		</ul>
		
		
		<!--
			有序列表:
				ol:order list
				li:list
				
				<ol>
					<li></li>
				</ol>
				
				这里也有一个type：
					按照什么形式排列
					type="1" 按数字排列
					type="A" 按ABC...排列
					type="a" 按abc...排列
					type="I" 按罗马数字排列
		-->
		<ol type="I">
			<li>水果
				<ol type="a">
					<li>苹果</li>
					<li>西瓜</li>
					<li>桃子</li>
				</ol>
			</li>
			<li>蔬菜
				<ol>
					<li>西红柿</li>
				</ol>
			</li>
			<li>甜点</li>
		</ol>
		
	</body>
</html>

架构 b站 b站技术架构_架构 b站_07

17.表单form初步(表单-重点)

架构 b站 b站技术架构_超链接_08

怎么画一个表单？
	<form>开始 </form>结束
怎么提交一个表单？
	submit
怎么清空一个表单？
	reset

//画一个表单
<form action="将表单中填写的数据传给服务器的那个服务器的路径">
	//画一个提交按钮
	<input type="submit" value="登录" />
	//画一个清空按钮
	<input type="reset" value="清空" />
	
	//有name属性的，就会把填写的数据提交给服务器(没有name的，不提交)
	//提交的格式是name=value&name=value&...
	//文本块和密码框不需要写value，用户输入什么，value就是什么
	
	//文本框
	<input type="text" name="username" />
	//密码框
	<input type="password" name="userpwd" />
	
</form>

注意：<input type="submit" value="登录" />  是成对写的，别忘了/
把表单放在table里可以让表单更好看
<!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="登录"/>
			
			<!--
				type="text"      文本框
				type="password"  密码框(输入密码)
				type="checkbox"  复选框
				type="radio"     单选按钮
				type="submit"    提交表单的按钮
				type="button"    普通按钮，不具备提交表单的能力
			-->
			
			<!--这是一个普通按钮，不具备提交表单的能力-->
			<input type="button" value="设置按钮上显示的文本"/>
		</form>
		
		
		<!--这个按钮和普通的超链接没什么太大的区别
		（超链接和表单都可以向服务器发送请求，只不过表单发送请求的同时可以携带数据。）
		-->
		<form action="http://www.baidu.com">
			<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=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" value="登录" />
		
		<!--必须放到form标签内部才有用-->
		<input type="reset" value="清空" />
		
	</body>
</html>

18.用户注册的表单的实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册的表单</title>
	</head>
	<body>
		<!--
			用户注册：
				用户名
				密码
				确认密码
				性别
				兴趣爱好
				学历
				简介
		-->
		<form action="http://localhost:8080/jd/register" method="post"><!--这个路径是假的-->
			用户名<input type="text" name="username" />
			
			<br>
			
			密码<input type="password" name="userpwd" />
			
			<br>
			
			<!--确认密码不需要使用name属性提交给服务器，在浏览器就能判断是否密码一致，怎么判断先不写-->
			确认密码<input type="password" />
			
			<br>
			
			<!--
				1.单选，有两个选择，name相同就可以将这两个选择分成一组，只能选一个
				2.传给数据库的是name和value，所以要写value
				3.在后面添加checked，就默认选择了
					比如：<input type="radio" name="gender" value="1" checked />男
					默认选男
			-->
			性别
			<input type="radio" name="gender" value="1" />男 
			<input type="radio" name="gender" value="0" />女 
			
			<br>
			
			<!--需要写value，默认选中加checked-->
			兴趣爱好
			<input type="checkbox" name="hobbies" value="smoke"/>抽烟
			<input type="checkbox" name="hobbies" value="drink"/>喝酒
			<input type="checkbox" name="hobbies" value="firehair"/>烫头
		
			<br>
			
			<!--
				下拉列表怎么写？如下
				默认选什么，在后面加selected
					比如：<option value="dz" selected>大专</option>
					默认选什么就提交什么
			-->
			学历
			<select name="grade">
				<option value="gz">高中</option>
				<option value="dz">大专</option>
				<option value="bk">本科</option>
				<option value="ss">硕士</option>
			</select>
			
			<br>
			
			<!--
				文本域？textarea
				可以增大：行数和列数
				文本域没有value，用户填的就是value
			-->
			简介
			<textarea rows="10" cols="60" name="introduction"></textarea>
			
			<br>
			<input type="submit" value="注册" />
			<input type="reset" value="清空" />
		
		</form>
		
	</body>
</html>

<!--
	假设输入之后，那么提交的是name和value，如下：
		http://localhost:8080/jd/register?username=jack&userpwd=111&gender=1&interest=smoke&interest=drink&grade=ss&introduce=jackgoodman

	form表单method属性：
		method="get"：采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。
		method="post"：采用post方式提交的时候，用户提交的信息不会显示在浏览器地址栏上。
		当用户提交的信息中含有敏感信息，例如：密码，建议采用post方式提交。
		<form action="http://localhost:8080/jd/register" method="post">
			
		method属性不指定时，默认为get。
		只有当method属性指定为post的时候才是post请求。
		剩下所有的请求都是get请求。
		
		超链接也可以提交数据(按同样格式)给服务器，但是提交的数据都是固定不变的
		超链接是get请求。不是post请求
		<a href="http://localhost:8080/oa/save?username=zhangsan&password=111">提交</a>
		
		post提交的时候提交的数据格式和get还是一样的，只不过不在地址栏上显示出来。
		POST提交的数据还是：name=value&name=value&name=value.....
-->

架构 b站 b站技术架构_前端_09

19.下拉列表支持多选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下拉列表支持多选</title>
	</head>
	<body>
		<!--
			不加name，只是演示
			multiple="multiple" 支持多选的 size设置显示条目数量。
			按住ctrl键再点击就可以多选了
		-->
		<select multiple="multiple" size="2">
			<option>河北省</option>
			<option>河南省</option>
			<option>山东省</option>
			<option>山西省</option>
		</select>
	</body>
</html>

20.file控件和hidden控件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>file控件和hidden控件</title>
	</head>
	<body>
		<!--file控件：文件上传专用。-->
		<input type="file" />
		
		
		<!--隐藏域：网页上看不到，但是表单提交的时候数据会自动提交给服务器。-->
		<!--不想在网页上被人看到，但是又要传给服务器，可以使用hidden-->
		<!--hidden与在地址栏显不显示无关，这是两件事-->
		<input type="hidden" name="userid" value="111" />
			
		用户代码<input type="text" name="usercode" />
			
		<input type="submit" value="提交" />
		
	</body>
</html>

21.readonly和disabled

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>readonly和disabled</title>
	</head>
	<body>
		
		<!--
			readonly和disabled相同点：都是只读不能修改。
			但是readonly可以提交给服务器，disabled数据不会提交（即使有name属性也不会提交）
		-->
		<form action="http://localhost:8080/taobao/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>

架构 b站 b站技术架构_html_10

22.input控件的maxlength属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>input控件的maxlength属性</title>
	</head>
	<body>
		<!--
			maxlength 设置文本框中可输入的字符数量。
		-->
		<input type="text" maxlength="3" />
	</body>
</html>

----表单至此结束----

23.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>
DOM(Document)树

架构 b站 b站技术架构_html_11

24.HTML中的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也是可以嵌套的，现在看不到效果-->
		<div id="div3">
			<div>
				<div>test</div>
			</div>
		</div>

	</body>
</html>

重点1：表格

重点2：超链接

重点3：表单

注：该文章部分转载自动力节点