目录
1.我的第一个HTML页面
<!--这是html的注释信息-->
<!--这是根-->
<html>
<!--头-->
<head>
<!--标题栏-->
<title>my first html page</title>
</head>
<!--网页体-->
<body>
<!--这里的内容显示到网页上！-->
这是我的第一个HTML页面！
<input>
</body>
</html>显示的效果 ：
2.基本标签
<html>
<head>
<title>基本标签</title>
</head>
<body>
<!--段落标记分段-->
<p>《水浒传》取材于北宋末年以宋江为首的一百零八好汉从聚义梁山泊，到受朝廷招安，再到征四寇，灭叛党，最终却遭奸人谋害的英雄故事。《水浒传》的内容构成可以分为两大部分。前七十回是一大部分，主要抨击统治阶级的腐朽残忍和歌颂起义英雄的反抗精神；七十回以后写受招安、征辽、征田虎、征王庆、征方腊，是另一大部分。</p><p>前一部分写人民反官府，反映的是阶级矛盾；后一部分写忠臣反奸臣，反映的是统治阶级的内部矛盾。宋江等受招安以后，处处受到奸臣的排挤和陷害，甚至最终被害死。</p>
<!--标题字-->
<h1>标题字</h1>
<h2>标题字</h2>
<h3>标题字</h3>
<h4>标题字</h4>
<h5>标题字</h5>
<h6>标题字</h6>
<!--换行标记-->
<!--下面这样是无法换行的-->
hello
world!
<!--独目标记-->
hello<br>world!
<!--水平线，独目标签-->
<hr>
<!--color是一个属性，用来指定颜色的值-->
<!--color是属性的名字，red是属性的值-->
<hr color="red">
<!--HTML中的字符串可以使用单引号和双引号，甚至不打引号-->
<hr color='red'>
<hr color=green>
<!--HTML不区分大小写-->
<HR>
<!--预留格式-->
<!--保留格式，在HTML源码上是什么格式，到网页上还是这个格式-->
<pre>
for(int i=0;i<100;i++)
{
System.out.println("i="+i);
}
</pre>
<b>粗体字</b>
<i>斜体字</i>
<ins>插入字</ins>
<del>删除字</del>
<!--将字符显示在其它字符的左上角-->
10<sup>2</sup>
<!--将字符显示在其它字符的左上角-->
m<sub>2</sub>
<!--font字符标签-->
<!--color是字体颜色，size是字号-->
<font color='red' size='12'>hello world!</font>
<br><br><br><br>
</body>
</html>显示的效果：
3.实体符号
<!--凡是HTML页面中第一行是以下代码的表示该页面是一个HTML5页面：H5-->
<!DOCTYPE html>
<html>
<head>
<!--这是告诉我们浏览器采用哪一种字符编码方式打开该页面，一般这个编码方式要和文件的编码方式相同，否则会乱码-->
<!--windows操作系统的浏览器在没有指定任何编码方式的时候，浏览器默认采用GBK的简体中文的方式打开，这是因为windows操作系统是简体中文环境-->
<!--而程序员一般工作区当中文件的编码方式都是UTF-8，因为Unicode更加通用-->
<!--当前这个文件就是UTF-8的编码方式，如果不写下方代码，浏览器会采用GBK的方式打开，会出现乱码-->
<meta charset="utf-8" />
<title>实体符号</title>
</head>
<body>
<!--空格-->
<!--  ；这是一个空格，属于实体符号！ -->
a
<br>
a bc
<br>
<!-- < 小于号-->
<!-- > 大于号-->
b<a>c
</body>
</html>
显示的效果：
4.表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML表格</title>
</head>
<body>
<!--3行3列的table-->
<!--border用来设置边框的高度，1px表示1像素-->
<!-- <table border="1px" width="300px" height="200px"> -->
<!--还可以写成百分比的方式，表示占浏览器屏幕的多少，随窗口大小变化-->
<table border="1px" width="50%" height="200px" align="center">
<!--第一行-->
<tr>
<!--第一个单元格-->
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<!--第二行-->
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td align="center">3</td>
</tr>
</table>
</body>
</html>
5.表格-单元格的合并
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格-单元格的合并</title>
</head>
<body>
<table width="50%" border="1px">
<tr>
<td>1</td>
<!--colspan表示列合并，合并2个-->
<td colspan="2">xy</td>
<!-- <td>1</td> -->
</tr>
<tr>
<td>1</td>
<td>1</td>
<td rowspan="2">1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<!-- <td>1</td> -->
</tr>
</table>
</body>
</html>
6.表格-th标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>th标签</title>
</head>
<body>
<table border="1px" width="50%">
<tr>
<!--<td>员工编号</td>
<td>姓名</td>
<td>薪资</td>-->
<!-- th可代替td做单元格，th中的内容会自动加粗，会自动居中 -->
<th>员工编号</th>
<th>姓名</th>
<th>薪资</th>
</tr>
<tr>
<td>4143</td>
<td>aa</td>
<td>800.0</td>
</tr>
<tr>
<td>1145</td>
<td>bb</td>
<td>600.0</td>
</tr>
</table>
</body>
</html>
7.表格-thead tbody tfoot
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>thead tbody tfoot</title>
</head>
<body>
<!--一个table可以被thead tbody tfoot分隔为三部分-->
<!--这个语法主要是为了后期js提供方便-->
<table border="1px" width="50%">
<thead>
<tr>
<th>员工编号</th>
<th>姓名</th>
<th>薪资</th>
</tr>
</thead>
<tbody>
<tr>
<td>4143</td>
<td>aa</td>
<td>800.0</td>
</tr>
<tr>
<td>1145</td>
<td>bb</td>
<td>600.0</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
</tfoot>
</table>
</body>
</html>
8.背景颜色和背景图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景颜色和背景图片</title>
</head>
<!--body标签的bgcolor属性指定颜色-->
<!--<body bgcolor="red">-->
<!--body标签的background属性指定背景图片-->
<body background="指定一个图片的路径">
</body>
</html>
9.图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片</title>
</head>
<!--背景图片-->
<body background="图片路径">
<!--这个图片是网页中的一个元素-->
<!--<img src="图片路径"></img>-->
<!--开始标签和结束标签之间没有内容的话，可以直接把结束标签删掉，开始标签末尾添加 /-->
<img src="图片路径" width="" height="" alt="" />
<!--img标签的属性有哪些呢？-->
<!--src属性：用来指定图片的路径-->
<!--width属性：用来指定图片的宽度，高度会等比例缩放，就是说不必要再去手动设置高度，否则容易失帧-->
<!--title属性用于设置鼠标悬停时的提示信息-->
<img src="图片路径" width="200px" title="提示信息" />
<!--alt用来指定当前图片加载失败时的提示信息-->
<img src="图片错误或无效路径" alt="提示信息" />
</body>
</html>
10.超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<!--链接到百度-->
<!--href 属性表示：hot references，用来指定链接的路径-->
<a href="http://www.baidu.com">百度</a>
<br>
<!--链接路径可以是网络中的路径或本地的路径-->
<!--超链接的特点：鼠标停留在超链接上自动变成小手，超链接自动加下划线-->
<a href="004表格.html">链接到本地的表格</a>
<br>
<!--图片也可以做超链接-->
<a href="http://www.baidu.com">
<img src="图片路径" width="200px" title="提示信息" />
</a>
<br>
<!--关于超链接的target属性-->
<!--target属性用来设置，最终打开窗口的位置-->
<!-- _self:当前窗口（默认） _blank:新窗口 _parent:当前窗口的父窗口 _top：当前窗口的顶级窗口-->
<a href="http://www.baidu.com" target="">百度</a>
<br>
<!--一个窗口中的内部窗口-->
<iframe src="004表格.html"></iframe>
</body>
</html>
补充
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
top
<iframe src="parent.html" width="500px" height="500px"></iframe>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
parent
<iframe src="self.html" width="300px" height="300px"></iframe>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
self
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.baidu.com" target="_parent">百度</a>
<a href="http://www.baidu.com" target="_top">百度</a>
<!--<iframe src="" width="" height="" id="test" name=""></iframe>-->
</body>
</html>
11.列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<!--无序列表-->
<ul type="circle">
<!--列表项-->
<li>中国</li>
<ul type="square">
<li>北京</li>
<ul type="disc">
<li>朝阳区</li>
<li>海淀区</li>
<li>东城区</li>
</ul>
<li>上海</li>
<li>台湾</li>
<li>香港</li>
</ul>
<li>美国</li>
<li>日本</li>
<li>俄国</li>
</ul>
<!--有序列表-->
<ol type="A">
<li>水果</li>
<ol type="a">
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ol>
<li>蔬菜</li>
<ol type="1">
<li>白菜</li>
<li>芹菜</li>
</ol>
<li>茶</li>
</ol>
</body>
</html>
12. 表单01
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<!--
1、什么是表单，有什么用？
发送请求，并且携带数据给服务器。
表单和超链接有共同的特征，就是都可以向服务器发送请求，
只不过超链接是用户直接点击发送请求，不能填写数据。
而用户点击表单提交的时候，不但可以发送请求，而且请求中还可以携带输入的数据。
表单最主要的作用就是：收集用户的信息。
表单对应的英语单词是：form
2、怎么定义一个表单对象呢？语法格式是什么？
<form>
表单项1：
表单项2：
</form>
另外要注意：一个网页上可以有多个表单对象。
3、form标签中有一个action属性，和超链接的href相同，都要填写url。
-->
<!--超链接-->
<a href="http://baidu.com">百度</a>
<!--表单-->
<form action="http://baidu.com">
<!--按钮，提交表单的按钮，只要点击这个按钮，就发送请求了！-->
<!--所有能够提交表单的按钮，type必须是submit，不能随便写-->
<!--<input type="submit"/>-->
<!--设置按钮上显示的文本-->
<input type="submit" value="百度"/>
<!--button是一个普通的按钮，不能提交表单-->
<!--<input type="button" name="test" value="" />-->
</form>
<!--submit放在form外面也是不行的-->
<input type="submit" value="百度"/>
</body>
</html>
13.表单02
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<!--画一个登录的表单-->
<!--action路径随便写了-->
<!--
http://192.168.145.2:8080/crm/login
协议：http协议
访问的服务器的ip是：192.168.145.2
访问这个服务器上的哪个软件：8080端口对应一个服务
/crm/login:是这个服务器上的某个资源名！（它可能是一段处理登录的java程序！）
==========重点===========
表单最终提交的时候，表单项的内部属性非常重要，有name的才会提交，没有name不会提交，
并且浏览器向服务器提交的数据格式是？
url?name=value&name=value&name=value&name=value&name=value
以上的提交数据的格式，是W3C指定的格式，所有的浏览器都是这样的。
以下表单提交数据的时候，格式是这样的：
http://192.168.145.2:8080/crm/login?x=zhangsan&y=111
类似map：
key value
----------------------
x zhangsan
y 111
-->
<form action="http://192.168.145.2:8080/crm/login">
<!--input是输入域，type不同，展示样式不同，text表示文本框-->
<!--文本框的密码框的value是不需要程序员提供的，是用户输入的-->
用户名：<input type="text" name="x"/>
<br />
<!--type="password"表示密码框-->
密码：<input type="password" name="y"/>
<br />
<!--提交表单的按钮-->
<input type="submit" value="登录" />
</form>
</body>
</html>
14.表单03
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册的表单</title>
</head>
<body>
<!-- name有，就能提交，没有name属性就不能提交。 -->
<!-- 提交格式：name=value&name=value&name=value -->
<!-- 表单中，如果有一些项用户没有填写，默认提交的就是空字符串："" -->
<form action="http://localhost:80/crm/register">
用户名 <input type="text" name="username" /><!-- value不需要程序员提供 -->
<br>
密码 <input type="password" name="userpwd" /><!-- value不需要程序员提供 -->
<br>
性别 <!-- 最终提交给服务器的数据是：sex=1 或者 sex=0 -->
<!-- 同一组的单选按钮，name是需要一致的，这样才可以做到单选的效果 -->
<!-- checked 表示默认选中此项 -->
<input type="radio" name="sex" value="1" checked />男 <!-- value需要程序员提供 -->
<input type="radio" name="sex" value="0"/>女
<br>
兴趣
<!-- 复选框，同一组的复选框name也是一致的。 -->
<input type="checkbox" name="aihao" value="smoke"/>抽烟 <!-- value需要程序员提供-->
<input type="checkbox" name="aihao" value="drink" checked />喝酒
<input type="checkbox" name="aihao" value="firehair" checked />烫头
<br>
学历
<!-- 下拉列表 -->
<select name="xueli"><!-- 假设选中专科，提交的是：xueli=zk -->
<option value="gz">高中</option>
<option value="zk">专科</option>
<option value="bk" selected >本科</option><!-- selected默认选中 -->
<option value="ss">硕士</option>
</select>
<br>
简介
<!-- 文本域 --><!-- value是用户填写的！-->
<textarea rows="10" cols="60" name="jianjie"></textarea>
<br>
<!-- 提交表单 -->
<input type="submit" value="注册" /><!-- 这个提交按钮不能有name，不然，这个按钮的value也会提交给服务器。 -->
<!-- 重置按钮 -->
<input type="reset" value="重置" />
<!-- 普通按钮不能提交 -->
<input type="button" value="普通按钮" />
</form>
<!-- 不管用！ -->
<input type="reset" value="重置" />
</body>
</html>
<!--
http://localhost/crm/register?
username=jack
&
userpwd=123
&
sex=0
&
aihao=smoke
&
aihao=firehair
&
xueli=zk
&
jianjie=fdsafdsa
-->
15. 下拉列表多选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉列表多选</title>
</head>
<body>
<!-- multiple 表示下拉列表支持多选 -->
<!-- size是设置下拉列表一次最多显示的条目数量。 -->
<select name="province" size="3" multiple >
<option value ="hebei">河北省</option>
<option value ="henan">河南省</option>
<option value ="shandong">山东省</option>
<option value ="shanxi">山西省</option>
<option value ="hubei">湖北省</option>
<option value ="hunan">湖南省</option>
</select>
</body>
</html>
16.file控件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>file控件</title>
</head>
<body>
<!-- 后台java程序使用IO流的方式接收这个文件！ -->
<form action="http://www.baidu.com">
文件：<input type="file" />
<br><br><br><br>
<input type="submit" value="文件上传" />
</form>
</body>
</html>
17.hidden控件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hidden控件</title>
</head>
<body>
<!-- hidden隐藏域空间 -->
<form action="http://127.0.0.1:8080/crm/save" >
<!-- 隐藏域 -->
<!-- 不希望用户在浏览器上看到，但是希望可以将这个数据提交过去！ -->
<input type="hidden" name="usercode" value="11111"/>
<!-- 提交按钮 -->
<input type="submit" value="提交" />
</form>
<!-- 最终提交：http://127.0.0.1:8080/crm/save?usercode=11111 -->
</body>
</html>
18.readonly和disabled
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>readonly和disabled</title>
</head>
<body>
<!--readonly和disabled都是只读的！ -->
<!-- http://127.0.0.1:8080/crm/save?orgcode=1111 -->
<!-- readonly修饰的表单项可以提交给服务器，但是disabled修饰的不会提交！ -->
<form action="http://127.0.0.1:8080/crm/save">
机构代码 <input type="text" name="orgcode" value="1111" readonly />
<br>
用户代码 <input type="text" name="usercode" value="2222" disabled />
<br>
<input type="submit" value="提交" />
</form>
</body>
</html>
19.maxlength属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>maxlength属性</title>
</head>
<body>
<!-- 最多输入3个字符 -->
<input type="text" maxlength="3" />
</body>
</html>
20.HTML元素的id属性
<!DOCTYPE html>
<html id="myhtml">
<head id="myhead">
<meta charset="utf-8">
<title id="mytitle"></title>
</head>
<body id="mybody">
<!-- HTML元素的id属性 -->
<!--
1、在HTML中任何一个节点上，多有id属性
2、在同一个网页中，id属性是不能重复的。
3、id代表了这个节点，id是这个节点的身份证号。
4、后期学习了javascript之后，我们要通过javascript
对HTML的节点进行增删改，对节点增删改的时候，需要先
获取到该节点对象，id属性可以让我们方便的获取到该节点
对象。
5、通过id属性可以很方便的在Javascript中获取到该节点，
然后对这个节点进行操作，最终产生网页的动态效果，所以
javascript可以让死气沉沉网页活跃起来。
-->
<form id="myform">
<input id="username">
</form>
<ul id="myul">
<li id="myli"></li>
</ul>
</body>
</html>
21.div和span
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div和span</title>
</head>
<body>
<!-- div和span -->
<!--
1、div和span都是图层。（div和span都是盒子）
2、什么是图层，有什么用？
每一个图层在网页当中都是一个独立的盒子。
图层的最主要作用就是：网页布局
3、table表格不是可以布局吗？
table表格布局有什么缺点：不灵活
div和span布局更加灵活。
4、每一个div和span左上角的顶点，都有x和y轴的坐标，通过这个坐标可以定位div在网页当中的位置。
可以通过CSS样式进行定位。
5、很久以前都是采用table进行布局，现代化的网页都是采用div+span进行布局。
6、对于web前端来说，怎么调试程序？
每一个浏览器都内置了调试器。
使用快捷键F12，可以调出来调试器。
7、div和span有什么区别？
div默认情况下独自占用1行。
span不会独占行！
-->
<div id="div1">
我是一个div！
</div>
是新的一行吗？
<span id="myspan">我是一个span标签！</span>
<!-- div嵌套-->
<div id="">
<div id="">
<div id="">
<span id="">
</span>
<span id="">
</span>
</div>
</div>
</div>
</body>
</html>
2004
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
