【前段基础】7.HTML基础知识学习

menghen113

已于 2022-08-06 14:58:27 修改

阅读量475

点赞数 1

分类专栏：前端学习文章标签： html 学习前端

于 2022-08-02 09:23:31 首次发布

本文链接：https://blog.csdn.net/menghen113/article/details/126114315

版权

前端学习专栏收录该内容

26 篇文章 2 订阅

订阅专栏

视频

一，HTML

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 。

B/S架构的系统有什么优点和缺点？
优点：升级方便，只升级服务端代码即可。维护成本低。
缺点：速度慢，体验不好，界面不炫酷。

企业内部的解决都是采用B/S结构的架构的系统，因为企业内部办公需要的一些系统不需要炫酷，不需要特别好的用户体验，只要能做数据的增，删，改，查即可。并且企业内部更注重维护的成本。

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

C/S架构

Client/Server (客户端/服务器的交互形式）

缺点：
升级麻烦，维护成本低。
优点：
速度快，体验好，界面炫酷。（娱乐型的系统多数是C/S架构的）
常见的C/S架构的系统：
QQ
微信
支付宝
…

2，什么是HTML？怎么开发HTML？怎么运行HTML？

HTML：Byper Text Markup Language (超文本标记语言）
由大量的标签组成，每一个标签都有开始标签和结束标签。

<标签>
	<标签>
		<标签 属性名="属性值" 属性名="属性值"></标签>
	</标签>
</标签>

超文本：流媒体，图片，声音，视频…

HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.html\ 。
HTML也有专业的开发工具，例如：Dream Weaver, HBuilder…
直接采用浏览器打开HTML文件就是运行。

3，HTML是谁制定的？

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

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

4，基本HTML知识

001-我的第一个HTML页面

<!--
1,这是html的注释
2,加上以下第一行就表示HTML5语法。去掉就表示HTML4.0
3,HTML不区分大小写，语法松散不严格
-->
<!doctype html>

<!--根-->
<html>

   <!--头-->
   <head>

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

   </head>

   <!--体-->
   <body>
      网页的主体内容，欢迎学习HTML!
   </body>

</HTml>

002-HTML基本标签

<!doctype html>
<html>
   <head>
      <title>HTML的基本标签</title>
   </head>
   <body>

      <!--段落标记-->
      <p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里（文中指出的是“花冢”）最干净，说明她对美有独特的见解。她写了《葬花吟》，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。</p><p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里（文中指出的是“花冢”）最干净，说明她对美有独特的见解。她写了《葬花吟》，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。</p>   
	  
	  <!--标题字:是HTML预留的格式，和word中的标题字相同-->
	  <h1>标题字</h1>
	  <h2>标题字</h2>
	  <h3>标题字</h3>
	  <h4>标题字</h4>
	  <h5>标题字</h5>
	  <h6>标题字</h6>

	  <!--换行标记，br标签是一个独目标记-->
	  hello<br>world!

	  <!--横线，独目标记-->
	  <hr>

	  <!--color和width都是hr标签的属性-->
	  <hr color="red" width="50%">
	  <!--语法太松散了-->
	  <hr color='green' width=50%>
   
      <!--预留格式-->
	  <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<sub>m</sub>

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

003-HTML的实体符号

<!doctype html>
<html>
   <head>
      <title>实体符号</title>
   </head>
   <body>
       b<a>c

	    <br>
	   <!--实体符号特定是：以&开始，以；结束。&lt；是小于号  &gt; 是大于号-->
	   b&lt;a&gt;c
	    <br>

       a                                          bc
	    <br>
	   a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bc
   </body>
</html>

004-HTML的表格

<!doctype html>
<html>
   <head>
      <title>实体符号</title>
   </head>
   <body>
      
	  <br><br><br><br>
	  <center><h1>员工信息列表</h1></center>
	  <hr>
	  <!--
	    border="1px" 设置表格的边框为1像素宽度。
		width 宽度
		height 高度
	  -->
	  <!--
	  <table border="1px" width="300px">
	  -->
	  <table align="center" border="1px" width="60%" height="150px">
	     <!--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>

005-HTML的表格-单元格合并以及th标签

<!doctype html>
<html>
   <head>
      <title>单元格合并，以及th标签</title>
   </head>
   <body>
       <!--注意事项：
	      1.row合并的时候，删除“下面的”单元格 (行）
		  2.col合并的时候，删除哪个没有要求   (列）
	   -->
       <table border="1px" width="60%">
	      <tr>
		     <!--
	         <td>员工编号</td>
		     <td>员工薪资</td>
		     <td>部门名称</td>
			 -->
			 <!--th标签也是单元格标签，比td多的是居中，加粗-->
			 <th>员工编号</th>
		     <th>员工薪资</th>
		     <th>部门名称</th>
	      </tr>
	      <tr>
	         <td>1</td>
		     <td>2</td>
		     <td>3</td>
	      </tr>
	      <tr>
	         <td>4</td>
		     <td>5</td>
	 	     <td rowspan="2">6</td>
	      </tr>
	      <tr>
	         <td colspan="2">7</td>
			 <!--
		     <td>8</td>
			 -->
			 <!--
		     <td>9</td>
			 -->
	      </tr>
	   </table>
   </body>
</html>

006-HTML的表格-thead,tbody,tfoot

<!doctype html>
<html>
   <head>
      <!--告诉浏览器采用哪种编码方式打开此页面，并不是设置当前编码方式-->
	  <meta charset="gbk">
      <title>thead tbody tfoot 在table中不是必须的，只是这样做便于后期的js代码的编写</title>
   </head>
   <body>
        <table border="1px" width="60%">
          <!--头-->
		  <thead>
			  <tr>
				 <th>员工编号</th>
				 <th>员工薪资</th>
				 <th>部门名称</th>
			  </tr>
		  </thead>
          <!--体-->
		  <tbody>
			  <tr>
				 <td>1</td>
				 <td>2</td>
				 <td>3</td>
			  </tr>
			  <tr>
				 <td>4</td>
				 <td>5</td>
				 <td rowspan="2">6</td>
			  </tr>
			  <tr>
				 <td colspan="2">7</td>
			  </tr>
		  </tbody>
		  <!--脚-->
		  <tfoot>
			  <tr>
				 <td>1</td>
				 <td>2</td>
				 <td>3</td>
			  </tr>
		  </tfoot>

	   </table>
   </body>
</html>

007-背景颜色和背景图片

<!DOCTYPE html>
<html>
	<head>
		<!--告诉浏览器采用哪种编码方式打开此文件-->
		<meta charset="utf-8">
		<title>背景颜色与背景图片</title>
	</head>
	<!--
		bgcolor:设置背景色
		background:设置背景图片
		以上的设置都是对背景进行设置。
	-->
	<body bgcolor="red" background="img/tup.webp">
	</body>
</html>

008-html图片

<!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/tup.webp" width="100px" title="我是图片" alt="图片找不到"/>
		<!--这两种都可以-->
		<img src="img/tup.webp" width="100px" title="我是图片" alt="图片找不到"></img>
		
		<br><br><br>
		<img src="img/tup.webp"/>
		<br><br><br>
	</body>
</html>

009-超链接或热链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接 热连接</title>
	</head>
	<body>
		<!--
		超链接的特点：
			有下划线
			鼠标停留在超链接上面显示小手形状。
			点击超链接之后还能跳转页面。
		-->
		<a href="http://www.baidu.com">百度</a>
		<a href="http://news.baidu.com">百度新闻</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>
		
		<!--
			超链接有一个target属性：
				可取值：
					_blank:新窗口
					_self:当前窗口(默认就是这种方式)
					_top:顶级窗口
					_parent:父窗口
		-->
		<a href="https://www.hao123.com/" target="_self">
			<img src="img/tup1.png" width="120px"/>
		</a>
		
	</body>
</html>

<!--
超连接的作用：
	通过超链接可以从浏览器向服务器发送请求
	浏览器向服务器发送数据(请求：request)
	服务器向浏览器发送数据(响应：response)
	
	B/S结构的系统，每一个请求都会对应一个响应
	B->请求->S
	S->响应->B
	
	用户点击超链接和用户在浏览器地址栏直接输入URL，有什么区别？
	本质上没有区别，都是向服务器发送请求。
	从操作上来看超连接使用更加方便。
-->

010-列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
	</head>
	<body>
			<!--有序列表-->
			<ol type="I">
				<li>水果
					<ol type="a">
						<li>苹果</li>
						<li>西瓜</li>
						<li>桃子</li>
					</ol>
				</li>
				<li>蔬菜</li>
				<li>甜点</li>
			</ol>
			<!--无序列表-->
			<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>
	</body>
</html>

011-表单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="sumbmit"的时候表示该按钮是一个提交按钮，具有提交表单的能力。-->
			<!--对于按钮来说，按钮上的value属性用来指定按钮上显示的文本信息，默认显示 "提交" -->
			<input type="submit" value="注册"/>
			<!--这是一个普通按钮，不具有提交表单的能力，-->
			<input type="button" value="设置按钮上显示的文本"/>
		</form>
		
		
		<!--这个按钮和普通的超链接没什么太大的区别，(超链接和表单都可以向服务器发送请求，只不过表单发送请求的同时可以携带数据)-->
		<form action="http://www.baidu.com">
			<input type="text"/>
			<input type="submit" value="百度"/>
		</form>
		
		<br><br>
		
		<!--
			表单是以什么格式提交数据给服务器的？
				http://localhost:8080/jd/login?username=%E6%9D%8E%E6%98%8E&userpwd=111
				格式：action?name=value&name=value&name=value&name=value...
				w3c的HTTP协议规定的，必须以这种格式提交给服务器
				java String split("&")
				
			重点强调，表单上写了name属性的，一律提交给服务器，不想提交这一项，就不要写name属性	
			
			文本框和密码框的value不需要程序员指定，用户输入什么value就是什么。
			
			但是当value没有写的时候，value的默认值是空字符串"",会将空字符串提交给服务器。java代码得到的是：String username="";
		-->
		<form action="http://localhost:8080/jd/login">
			<table >
				<tr>
					<td>用户名</td>
					<td><input type="text" name="username" /></td>
					<!--
					<td><input type="text" name="username" value="jack" /></td>
					-->
				</tr>
				<tr>
					<td>密码</td>
					<td><input type="password" name="userpwd" /></td>
				</tr>
				<tr align="center">
					<td colspan="2">
						<!--submit,reset必须放在form标签内部-->
						<input type="submit" value="登录" />
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="reset" value="清空" />
					</td>
				</tr>
			</table>
		</form>
		
		<form></form>
	</body>
</html>

011

012-用户注册的表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--
			用户注册：
				用户名
				姓名
				密码
				确认密码
				性别
				兴趣爱好
				学历
				简介
				
			
			form表单method属性：
				get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。
				post:采用post方式提交的时候，用户提交的信息不会显示在浏览器的地址栏上。
				当用户提交的信息含有敏感信息，建议使用post方式。
			method属性不指定，默认get.
			
		-->
		<form action="http://localhost:8080/jd/register" method="POST">
			用户名
			<input type="text" name="username"/>
			<br>
			密码
			<input type="password" name="username"/>
			<br>
			确认密码
			<input type="password" />
			<br>
			性别
			<input type="radio" name="gender" value="1" />男
			<input type="radio" name="gender" value="0" checked/>女
			<!--单选按钮的value必须手动指定-->
			<br>
			兴趣爱好
			<!--多选-->
			<input type="checkbox" name="interest" value="smoke"/>抽烟
			<input type="checkbox" name="interest" value="drink"/>喝酒
			<input type="checkbox" name="interest" value="fireHair"/>烫头
			<br>
			学历
				<!--下拉单选-->
			<select name="grade">
				<option value="gz">高中</option>
				<option value="dz">大专</option>
				<option value="bk" selected>本科</option>
				<option value="ss">硕士</option>
			</select>
			<br>
			简介<!--文本域,文本域没有value属性，用户填写的内容就是value.-->
			<textarea rows="10" cols="60" name="introduce"></textarea>
			<br>
			<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=%E6%9D%8E%E6%98%8E&username=124455&gender=0&interest=smoke&interest=fireHair&grade=bk&introduce=%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82%E5%96%9C%E6%AC%A2%E6%91%B8%E9%B1%BC%E3%80%82
-->

012

013-下拉列表支持多选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下拉列表支持多选</title>
	</head>
	<body>
		<!--multiple="multipe"支持多选的 size设置显示条目数量。-->
		<select multiple="multipe" size="2">
			<option>河北省</option>
			<option>河南省</option>
			<option>山东省</option>
			<option>山西省</option>
		</select>
	</body>
</html>

013

014-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>

014

015-readonlu和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>

015

016-input控件的maxlength

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

016

018-html中的div和span

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>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>
		
		
	</body>
</html>

019-HTML文件中元素的id属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML文件元素的id属性</title>
	</head>
	<body id="mybody">
		<!--
		1,在html文档中，任何元素（节点）都有id属性，id属性是该节点的唯一标识符。所有在同一个html文档中
		2，注意，表单提交数据的时候，只和name有关系，和id没有关系
		3，id有什么用
			javascript语言，可以对html文档当中的任意节点进行增删改。
			那么增删改需要先通过id指明节点对象
		4，HTML文档是一棵树，树上有许多节点，每个节点都有唯一的id
			javascript主要就是对这棵树上的节点进行增删改的。、
			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>