1、html的简介
（1）什么是html？HyperText Mark-up Language，超文本标记型语言，是网页的语言。
* 超文本：超出文本的范畴
* 标记：理解为标签，html中所有的操作都是通过标签来实现的
* html是做网页。
* 第一个html程序
= 代码 <font color="red" size="5">这是我的第一个html程序</font>
（2）html程序遵循一定的规范
第一个：html程序以<html>开始，同时</html>结束
* 比如创建java里面方法，public void add() {方法体 }
第二个：html程序包含两部分内容：head和body
* <html>
<head>设置页面信息</head>
<body>显示到页面上的内容</body>
</html>
第三个：html的标签有开始标签，同时也要结束标签
第四个：html的代码不区分大小写的
第五个：有些标签没有结束标签，需要在标签内结束 <br/>
* 实现换行的操作，使用标签实现的<br>,没有</br>
（3）html的操作思想
* 在网页中可能有很多的数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来
（封装），通过修改标签的属性值来实现标签内数据样式的变化。标签相当于一个容器，通过修改容器的属性值，
实现容器内数据样式的变化。
2、字体标签
（1）文字标签<font>
* <font color="设置文字颜色" size="文字的大小">要操作的文字的内容</font>
** 常用两个属性
*** color：设置文字的颜色
**** 有三种表示方式
第一种：直接使用英文单词进行表示 red green yellow......
第二种：使用十六进制数字进行表示 #ffffff，
** 通过RGB
第三种：使用RGB颜色值配置rgb(255,0,0)
*** size：设置文字的大小
**** 文字大小值范围：1-7，如果值超过了7，使用还是7的效果
（2）标题标签
* <h1></h1> <h2></h2>.......<h6></h6>
** 标题标签可以自动换行，从h1到h6字体的大小依次变小的
（3）水平线标签
* <hr/>
* 属性
** color：表示设置水平线颜色
** size：设置水平线的粗细，范围1-7
（4）注释标签
* 在java里面有几类注释？三类注释
** 单行注释，多行注释，文档注释
* 在html中注释<!-- 注释的内容 -->
** 使内容不在html页面中进行显示
（5）特殊字符
* 实现空格的操作
示例：
<html>
<head>
<title>html示例</title>
</head>
<body>
<font color="red" size="5">这是我要操作的文字</font>
<br/>
<font color="#33cc66" size="7">这是颜色的第二种表示方法</font>
<br/>
<font color="rgb(255,0,0)" size="10">这是颜色的第三种表示方法</font>
<h1>这是标题一</h1>
<h2>这是标题二</h2>
<h6>这是标题三</h6>
<hr color="blue" size="7"/>
<br/>
<!-- 这是html的注释-->
<font color="rgb(255,0,0)" size="10">要实现 空格的效果</font>
</body>
</html>
效果：
3、列表标签
（1）想要实现：
传智播客
java学院
人事部
学工部
* 首先需要使用 <dl></dl>:定义列表的范围
* 之后在dl标签里面，<dt></dt>:定义上层内容
* 在dl标签里面， <dd></dd>:定义下层内容
** 代码
<dl>
<dt>传智播客</dt>
<dd>java学院</dd>
<dd>人事部</dd>
<dd>学工部</dd>
</dl>
（2）有序列表标签
1.java学院
2.人事部
3.学工部
a.java学院
b.人事部
c.学工部
i.java学院
ii.人事部
iii.学工部
* 使用 <ol></ol>:定义有序列表的范围
** ol标签上面有属性 type：排序的方式
** type属性里面的值 1 a i
* 之后在ol标签里面：<li></li>:封装具体的内容
** 代码
<ol>
<li>java学院</li>
<li>人事部</li>
<li>学工部</li>
</ol>
（3）无序列表标签
（特殊符号）java学院
（特殊符号）人事部
（特殊符号）学工部
* 首先使用标签 <ul></ul>:定义无序列表的范围
** ul标签上面有属性 type：设置特殊符号
** type属性里面的值 disc circle square
* 之后在ul标签里面：<li></li>: 封装具体的内容
** 代码
<ul>
<li>java学院</li>
<li>人事部</li>
<li>学工部</li>
</ul>
示例：
<html>
<head>
<title>html示例</title>
</head>
<body>
<dl>
<dt>传智播客</dt>
<dd>java学院</dd>
<dd>人事部</dd>
<dd>学工部</dd>
</dl>
<hr/>
<ol type="i">
<li>java学院</li>
<li>人事部</li>
<li>学工部</li>
</ol>
<hr/>
<ul type="square">
<li>java学院</li>
<li>人事部</li>
<li>学工部</li>
</ul>
</body>
</html>
效果：
4、图形标签
（1）在html中显示图片
（2）标签：<img src="图片的路径名称"/>
（3）属性：
* src：图片的路径名称
* width：图片宽度
* height：图片的高度
* border：图片的边框的粗细
* alt: 显示在图片上面的内容
** 鼠标移动到图片上面，稍等片刻出现文字
** 如果图片找不到，显示alt的内容
*** 这个属性在某些浏览器不能显示的
例子：
<html>
<head>
<title>html示例</title>
</head>
<body>
<img src="c.jpg" border="5" width="400" height="400" title="熊出没" alt="这是熊出没"/>
</body>
</html>
效果：
5、超链接标签
（1）什么是超链接：点击打开新的内容
（2）标签：<a href="链接到的地址">显示在页面上的内容</a>
* 代码 <a href="hello.html">显示在页面上的内容</a>
（3）属性
* href：链接到地址
* target：超链接的打开方式
** 在默认的情况下，打开方式在当前的页面打开
** target里面的值：_self,当前页面打开； _blank，在新标签页打开
例子
<html>
<head>
<title>html示例</title>
</head>
<body>
<a href="hello.html" target="_self">显示在页面上的内容</a>
</body>
</html>
效果
6、表格标签
操作技巧：
首先数表格里面有多少行，数每行里面有多少个单元格
（1）什么是表格：对数据进行格式化，使数据显示更加清晰，结构分明
（2）标签
* 首先定义表格的范围：<table></table>
** 属性
*** border：设置表格线
*** bordercolor：设置表格线的颜色
*** cellspacing: 设置单元格之间的距离
*** cellpadding: 设置文字和单元格之间的距离
*** width: 设置表格的宽度
*** height：设置表格的高度
* 在table标签里面表示行：<tr></tr>
** 属性
*** align：设置对齐方式，值 left center right
* 在tr标签里面表示列：<td></td>
** 属性
*** align：设置某个单元格对齐方式
* 在tr标签里面也可以表示单元格：<th></th>
** 实现居中和加粗的效果
（3）合并单元格
* 是在td标签上面进行的操作，使用两个属性
** rowspan：跨行
*** 代码 <th rowspan="4">人员信息3人</th>
** colspan：跨列
*** 代码 <td colspan="3">统计信息3人</td>
（4）标题标签：<caption>标题内容</caption>
例子：
<table width="400" align="left" border="1" bordercolor="blue"
cellpadding="10" cellspacing="2">
<tr>
<th>name</th>
<th>age</th>
<td rowspan="4">sex</td>
</tr>
<tr align="left">
<th>agen</th>
<th>24</th>
<tr>
<th>zhangsan</th>
<th>23</th>
</tr>
<tr>
<td colspan="2" align="right">none</td>
</tr>
</table>
效果：
7、表单标签
（1）什么是表单？把输入的数据提交到服务器上（存到服务器），这个过程称为表单
（2）使用表单标签实现数据提交到服务器上这个过程
（3）form标签：如果写表单，首先定义表单的范围
* 属性
** action：提交的服务器的地址
** method：表单的提交方式（有很多种，常见的有两种get和post）
*** 代码
<form action="hello.html" method="get"></form>
** get和post提交，在默认情况下，提交方式是get提交
*** get提交方式会在地址栏携带数据，安全性很差
*** post提交方式地址栏不会携带数据，安全性比较高，数据在请求体里面（讲到http协议时候详细说）
（4）输入项：可以输入内容或者选择内容的地方
** 要求1：输入项里面必须要有name属性
** 要求2：在单选输入项和复选输入项以及下拉选择输入项里面
都需要有属性value，设置的值
* 输入项需要写到form标签里面
* 大部分输入项是通过标签input进行封装操作的
** <input type="输入项的类型"/>
第一个：普通输入项 <input type="text"/>
第二个：密码输入项 <input type="password"/>
第三个：单选输入项 <input type="radio"/>
** 要求：单选输入项里面必须有name属性，同时name的属性值必须要相同
** 设置默认选中，使用属性 checked="checked"
第四个：复选输入项 <input type="checkbox"/>
** 要求：单选输入项里面必须有name属性，同时name的属性值必须要相同
** 设置默认选中，使用属性 checked="checked"
第五个：文件输入项，上传文件的。<input type="file"/>
第六个：隐藏项，这个值不会显示在页面上，但是提交表单也可以提交到服务器上
<input type="hidden"/>
第七个：普通按钮 <input type="button"/>
*** 可以写value属性，设置输入项的默认值
（5）下面的两个输入项不是使用input标签进行封装的
第八个：下拉选择输入项
* <select>
<option>AAAA</option>
<option>BBBB</option>
<option>CCCC</option>
</select>
* 使用属性 selected="selected"默认选中
第九个：文本域
* <textarea cols="10" rows="5"></textarea>
（6）提交按钮和其他的按钮
* 提交按钮： <input type="submit"/>
** 属性 value：设置提交按钮显示的内容
** 点击提交按钮：地址发生了变化
file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html ?sex=on&love=on&love=on
** 在输入项上面写name属性之后，提交表单
file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html
?username=wangwu&password=123456&sex=on&love=on&love=on&love=on&hid=bbbb&xueli=AAAA&des=test
** 在单选框、复选框和下拉选择框里面设置了value之后，提交表单
file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html
?username=aaaa&password=123456&sex=nan&love=l&love=p&love=y&hid=bbbb&xueli=ccc&des=test
* 重置按钮：<input type="reset"/>
** 属性 value：设置重置按钮显示的内容
** 不是做清空表单输入项的操作，使表单输入项回到初始状态
* 使用图片进行提交：<input type="image" src="图片路径"/>
例子：
<html>
<head>
<title>html示例</title>
</head>
<body>
<form action="hello.html" method="get">
username：<input type="text" name="username" value="aaaa"/>
<br/>
password: <input type="password" name="password"/>
<br/>
sex: <input type="radio" name="sex" value="nan"/>男<input type="radio" name="sex" checked="checked" value="nv"/>女
<br/>
love: <input type="checkbox" name="love" value="l"/>篮球<input type="checkbox" name="love" value="p"/>乒乓球
<input type="checkbox" name="love" checked="checked" value="y"/>羽毛球
<br/>
file: <input type="file"/>
<br/>
hidden: <input type="hidden" name="hid" value="bbbb"/>
<br/>
<input type="button" value="普通按钮"/>
<BR/>
下拉选择：<select name="xueli">
<option>--请选择--</option>
<option value="aaa">AAAA</option>
<option selected="selected" value="bbb">BBBB</option>
<option value="ccc">CCCC</option>
</select>
<br/>
自我描述：<textarea name="des" cols="10" rows="5"></textarea>
<br/>
<input type="submit" value="提交"/>
<input type="reset" value="重置111"/>
<br/>
<input type="image" src="c.jpg"/>
</form>
</body>
</html>
效果：
8、其他的标签的使用
（1）pre：原样输出
p：段落标签
s：删除线
u: 下划线
b：加粗
i：斜体
例子：
<html>
<head>
<title>html示例</title>
</head>
<body>
<!-- pre -->
<pre>
public static void main(String[] args) {
System.out.....
}
abcdef
</pre>
<hr/>
<s>天之道，</s>损有余而补不足，<p>是故虚胜实，不足胜有余。</p>
<hr/>
<b>其意博，</b>其理奥，<u>其趣深，</u>天地之象分，<i>阴阳之候列。</i>
</body>
</html>
效果：
（2）div :自动换行
span：在一行进行显示
例子：
<html>
<head>
<title>html示例</title>
</head>
<body>
<div>变化之由表</div>
<div>死生之兆彰，</div>
<div>不谋而遗迹自同</div>
<hr/>
<span>天之道，</span>
<span>损有余而补不足，</span>
<span>是故虚胜实</span>
</body>
</html>
效果：
。。。
扫一扫
22万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
