目录
1.html概述
HTML(Hyper Text Markup Language)超文本标记语言。
文本就是文字吧，“超文本”除了文字外还包含图片、链接，甚至音乐、程序元素。超文本更加的丰富。
标记，就是标签。html由大量的标签组成，如：<html></html>
1.1为什么学html？
软件架构分B/S和C/S架构
--B/S：浏览器和服务器模式，比如京东天猫，不用安装，直接在浏览器就能用----》
优势：版本更新便于维护，企业用多，主攻方法
--C/S：客户端和服务器模式，应用：英雄联盟\扣扣，
缺点：软件使用需要安装和卸载，版本更新需要重新安装，不便于维护
B/S架构开发，往往叫web开发，分web前端和web后端。
web前端指浏览器的开发，主要学：html+css+javascrit(不同于美工UI，美工有比较好的美术功底.)
web后端指服务器的咖啡，主要学:java、php、c#这些
1.2html代码怎么写？
--写java代码需要创建.java结尾的文件，写html代码我们只需创建.html和.htm结尾的文件就行，创建aaa.html文件--->看源码 有html head body标签
html--->网页的根部，它的内容不会在浏览器中显示出来。
head--->网页的头部，它的内容不会在浏览器中显示出来。
body--->网页的主体，它的内容会在浏览器中显示出来。
用纯记事本我们是可以写html的，但是没有高亮显示，所以我们不用它，用hbulider
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>DOCTYPE声明文档的解析类型(document.compatMode),为什么有这个类型呢？html这些前端的内容入门简单，但是学精不容易。因为html最终运行到不同的浏览器上，不同浏览器有不同的厂商，这就造成同样的代码在A浏览器效果，但是到B浏览器上就出现问题。不同浏览器运行相同的代码效果不一样，这就是我们所说的浏览器的兼容性问题。所以我们编写一份代码，希望在不同浏览器渲染出来的效果是一样！我们可以在页面添加了<!DOCTYPE html>这个声明，浏览器就会用html5标准去解析和渲染页面,
html5这个标准谁定的呢？---》W3C是世界万维网联盟（World Wide Web Consortium）---》可参考该网站W3C
2.常用标签
2.1头标签head
<!--头-->
<head>
<!--这行代码是告诉浏览器使用哪一种字符编码方式-->
<meta charset="utf-8">
<!--网页标题，显示在网页左上角-->
<title>网页的标签</title>
</head>2.2段落p
<p>我是段落</p>2.3注释
<!--我是注释 -->2.4标题
<h1>标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
<h1>标题6</h1><h1>定义最大标签，<h6>定义最小标签
2.5换行br
hello <br> world在 HTML 中，<br> 标签没有结束标签。
在 XHTML 中，把结束标签放在开始标签中，也就是 <br />。
2.6水平线hr
单标签 --->文本元素的内容，属性和属性值
在 HTML 中，<hr> 标签没有结束标签。
在 XHTML 中，<hr> 必须被正确地关闭，比如 <hr />。
在 HTML 4.01 中，hr 元素的所有呈现属性均不被赞成使用。
在 XHTML 1.0 Strict DTD 中，hr 元素的所有呈现属性均不被支持。
<hr>
<!--color和width都是hr标签的属性，以下三种都可以，写法松散-->
<hr color="red" width="50%">
<hr color='red' width='50%'>
<hr color=red width=50%>2.7预留格式pre
如以下代码，不加上预留格式，最后在一行显示-->
<pre>
for(int i=0;i<10;i++){
System.out.println(i);
}
</pre>3.特殊标签
3.1字体
<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>
<!--右上角加字-->
10<sup>2</sup>
<!--右下角加字-->
10<sub>m</sub>
<!--font字体标签-->
<font color="red" size="50">字体标签</font>3.2实体符号
<!--在html中，使用的某些符号正好与html语言冲突，这是要用实体符号-->
<!--实体符号：以&开始，以;结束-->
<!--小于(less than)号：< 大于(greater than)号：>-->
b<a >c
<!--空格(Non-Breaking Space)： -->
a b c
<!--实体符号还有很多-->
® × ÷ ¥ 4.表格
4.1简单表格table
table表示表格，tr表示一行，td表示一行中的一个格子；
th定义表格的表头，一般是表头中的内容会被加黑；
<!--
border="1px" 设置表格的边框为1像素宽度
width 宽度
height 高度
%为：width="60%"表示整个表格占整个浏览器50%的宽度,
像素：取决电脑的分辨率和宽度，1024*768 屏幕宽度是1024cm,那么对于这个屏幕来说，水平方向上1px就是1cm
align对其方式(居中center，向左，向右)
可以写在table里(整个表格在页面居中)，行tr里，也可以写在td格子里
-->
<table border="1px" width="500px" height="300px" align="center">
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>马里奥</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>桃花公主</td>
<td>女</td>
</tr>
</table>4.2表格2（单元格的合并）
合并单元格步骤
[1]相邻单元格合并，有行合并和列合并
合并上下两行单元格(row合并)：找到要合并的两个格，删除其中一个格(一般去掉后者)，再给td添加属性rowspan，
rowspan="合并单元格的个数"。注意：删除下面的单元格
[2]合并左右两列单元格(column合并)：同上，添加属性colspan
colspan="合并单元格的个数"。注意：col合并，对删除哪个没有要求
<table border="1" cellspacing="0" width="500px" height="250px">
<tr>
<td></td>
<td colspan="2"></td>
<!-- <td></td> -->
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<!-- <td></td> -->
<td></td>
<td></td>
</tr>
</table>
4.3表格加表头和表脚
一般来说：数据的标题放在thead里面，数据放在tbody里面，表格的注释放在tfoot里面。
注意：thead,tbody,tfoot在table中不是必须的，这样做只是便于操作表格
<table border="1" width="500px" align="center">
<caption>学生信息表</caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>家庭住址</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">001</td>
<td>张三</td>
<td>重庆</td>
<td>内容1</td>
</tr>
<tr>
<td align="center">002</td>
<td>李四</td>
<td>四川</td>
<td>内容2</td>
</tr>
<tr>
<td align="center">003</td>
<td>王五</td>
<td>北京</td>
<td>内容3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">附注：*为优秀学生</td>
</tr>
</tfoot>
</table>5.图像image
5.1图像
<!-- 1.img标签就是图片标签
2.src属性是图片的路径
3.width设置宽度，height设置高度（如果只设置宽度，高度会进行等比例缩放）
4.title设置鼠标悬停到图片时显示的信息
5.alt设置图片加载失败时显示的提示信息
6.开始标签和结束标签之间没东西，可以不写结束标签，在开始标签最后加上/
-->
<img src="img/1.png" width="100px" title="我是图片" alt="图片找不到"></img>
<img src="img/1.png" width="100px" title="百度图片" alt="图片找不到"/>5.1背景颜色和背景图片
背景颜色bgcolor="blue"
背景图片background="img/108.jpg"
6.超链接
6.1超链接a
属性href:hot reference 热引用，href属性后一定是一个资源的地址，就是路径：
绝对路径:网页上的文件或目录在硬盘上的真正路径，如http://www.itcast.cn/images/logo.gif、D：\images\logo.gif
相对路径:相对于当前文件的路径 .当前目录 ..上一目录-->
<!--超链接有一个target属性：
target="_blank" 开启新窗口
target="_self" 当前窗口(默认方式)
target="_top" 顶级窗口
target="_parent" 父窗口
a窗口里有1个窗口b，b窗口里有一个窗口c，如果c窗口中有一个超连接，
该链接的target是top，点击这个超链接c窗口直接到a窗口
该链接的target是parent，点击这个超链接c窗口直接到b窗口
-->
<!--图片超链接:点击图片跳转，还有接着对图片进行修改-->
<a href="https://www.hao123.com/">
<img src="img/hao123.png" width="120px">
</a>6.2锚点
作用：页面内的超级链接,迅速定位
<!--锚点的使用-->
<a href="#top1">xxxxxxxxxxx</a>
<a name="top1"></a>7.列表
7.1无序列表
<ul type="">
<li>中国
<ul type="">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</li>
<li>美国</li>
</ul>type属性可选值:disc实心圆(默认值)、circle空心圆、square实心方块
7.2有序列表
<ol type="">
<li>中国
<ol type="">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ol>
</li>
<li>美国</li>
</ol>type属性可选值:1,A，a,I(大写罗马数字),i(小写罗马数字)
8.表单(重点)
8.1什么是表单？
打开百度网盘登录注册页面，我一点注册，这些信息会提交给后台，然后后台系统会把这些数据提交到数据库。这个数据库的表就会多一条记录，所以表单可以用于用户信息的采集--->怎么写呢？表单是一个包含表单元素的区域，表单元素如：文本框、密码框、单选框、多选框、按钮、下拉框、滑块等。具体表单怎么写?
表单的语法结构如下：
<form action="URL" method="" name="">
表单元素
</form>注意：
（1）<form>标签用于定义HTML表单，为双标签，一个表单中的所有内容都要写在这个<form>和</form>之间。
（2）action属性：用来设置发送请求的路径。表单最终是需要提交数据给服务器的，action这个属性用来指定服务器地址，action属性和超链接中的href属性一样。都可以向服务器发送请求（request）
B/S架构中，从浏览器B端向服务器S端发送数据，叫做请求，英语单词：request
B/S架构中，从服务器S端向浏览器B端返回数据，叫做响应，英语单词：response
http://192.168.111.3:8080/oa/save 这是请求路径，表单提交数据最终提交给192.168.111.3机器上的8080端口对应的软件。
（3）method属性规定用于发送表单数据的HTTP方法，其中：
get方式:用户提交的信息会显示在浏览器的地址栏上。
post方式:用户提交的信息不会显示在浏览器地址栏上。当用户提交的信息中含有敏感信息，例如：密码，建议采用post方式提交。会更安全。method属性不指定时，默认为get。
（4）name属性规定表单的名称。
8.2表单元素
<!--action中路径是假的-->
<form action="http://localhost:8080/xx/register" method="post">
<!--文本框-->
用户名<input type="text" name="username" value=""/><br>
<!--密码框-->
密码<input type="password" name="userpwd" value=""/><br>
<!--确认密码不需要提交给服务器，在浏览器就能判断是否密码一致，怎么判断先不写-->
确认密码<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="0" />女 <br>
<!--复选框
默认选中checked="checked"等价于checked-->
兴趣爱好<input type="checkbox" name="hobbies" value="smoke" checked/>抽烟
<input type="checkbox" name="hobbies" value="drink"/>喝酒
<input type="checkbox" name="hobbies" value="firehair"/>烫头<br>
<!--下拉列表,默认选中selected="selected"等价于selected-->
学历<select name="grade">
<option value="gz">高中</option>
<option value="dz">大专</option>
<option value="bk">本科</option>
<option value="ss">硕士</option>
</select><br>
<!--不加name，只是演示multiple="multiple" 支持多选的 size设置显示条目数量。
按住ctrl键再点击就可以多选了-->
<select multiple="multiple" size="2">
<option>河北省</option>
<option>河南省</option>
<option>山东省</option>
<option>山西省</option>
</select>
<!--文本域textarea 文本域没有value，用户填的就是value
可以增大：行数和列数-->
简介<textarea rows="10" cols="60" name="introduction"></textarea><br>
<input type="submit" value="注册" />
<input type="button" value="按钮" />
<input type="reset" value="清空" />
</form>提交后，观察浏览器地址
http://localhost:8080/xx/register?username=jack&userpwd=111&gender=1&interest=smoke&interest=drink&grade=ss&introduce=jackgoodman
[1]提交的是name和value（有name属性的，就会把填写的数据提交给服务器(没有name的，不提交)）,但是当value没有写的时候，value的默认值是空字符串""，会将空字符串提交给服务器。
[2]文本块和密码框不需要写value，用户输入什么，value就是什么
[3]submit必须放到form标签内部才有用
[4]一个网页当中可以有多个表单form。
8.3input标签总结
8.3.1总结
<!--
type="text" 文本框
type="password" 密码框(输入密码)
type="checkbox" 复选框
type="radio" 单选按钮
type="submit" 提交表单的按钮
type="button" 普通按钮，不具备提交表单的能力
-->
<!--file控件：文件上传专用。-->
<input type="file" />
<!--隐藏域：网页上看不到，但是表单提交的时候数据会自动提交给服务器。-->
<!--hidden与在地址栏显不显示无关，这是两件事-->
<input type="hidden" name="userid" value="111" />
8.3.2input控件的属性
(1)readonly和disabled
<!-- 只读控件readonly：只能看不能改，数据也会提交给服务器
无效控件disabled：只能看不能改，数据不会提交给服务器
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>
(2)maxlength
<!--maxlength 设置文本框中可输入的字符数量。-->
<input type="text" maxlength="3" />
(3)size
input控件size属性：设置文本框的可视长度
<input type=”text” name=”username” size=”10” />
作业：用表格实现表单
9.div和span
其实最早的网页是采用table进行布局的，但是table不灵活，太死板。现代的网页开发中div布局使用最多，几乎很少使用table进行布局了。
<div id="div1">我是一个DIV</div>
<div id="div2">我是一个DIV</div>
<!--div也是可以嵌套的，现在看不到效果-->
<div id="div3">
<div>
<div>test</div>
</div>
</div>
<span id="span1">我是一个SPAN标签</span>
<span id="span2">我是一个SPAN标签</span>1.div和span是什么？有什么用？
* div和span都可以称为“图层”(图层：可以理解为多个透明的图片重叠)
* 图层的作用是为了保证页面可以灵活的布局。
* div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
3.div和span的区别？
div:块级标签（独自占用一行）
span:行内标签,span不会独自占用一行。-->
10.frame
考试系统
<!--frameset标签与body标签不能同时出现-->
<frameset rows="15%,85%">
<frame name="top" src="top.html"/>
<frameset cols="20%,80%">
<frame name="left" src="left.html"/>
<frame name="right" />
</frameset>
</frameset>
1321
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
