一,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>
<!--实体符号特定是:以&开始,以;结束。<;是小于号 > 是大于号-->
b<a>c
<br>
a bc
<br>
a 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="登录" />
<input type="reset" value="清空" />
</td>
</tr>
</table>
</form>
<form></form>
</body>
</html>
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
-->
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>
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>
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>
016-input控件的maxlength
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>maxlength</title>
</head>
<body>
<!--
maxlength 设置文本框中可输入的字符数量
-->
<input type="text" maxlength="3"/>
</body>
</html>
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>