1、 HTML概念
HTML: hyper text markup language
超文本标记语言
比普通文本功能强大：可以有音乐 视频 图片 超链接
标记：标签 html的基本语法
语法: <标签名 属性名=属性值>数据</标签名>
<标签名 属性名=属性值>：起始标签
</标签名> ：结束标签
原理: 通过标签来封装数据 通过属性来控制数据的样式(显示效果)
重点: html中定义了 那些标签 那些标签有那些属性 那些属性有什么效果
2、 注意事项
1: 文件后缀必须是.html/.htm
2: 大部分标签有起始标签和结束标签组成，起始标签中可以定义属性
3: 属性格式：属性名=属性值 属性值可以写在单引号 双引号(规范) 或者不加引号
4: html的标签和属性是预定义的：
5: html是纯文本 编辑工具可以是所有操作文本的软件
6: html是描述性语言 所有的浏览器内置有解析html的程序 通过浏览器运行html代码
7: html是非严谨性语言 不同浏览器的兼容性差(相同的代码 效果不同)
8: 内部闭合标签:<标签名/> 标签没有要封装的数据 效果单一
如:<br/> 换行标签
9: 标签之间可以合理嵌套：外部的标签：父标签 内部的标签：子标签
如：<a href="#"><b>111</b></a>
10: 标签类语言的注释：<!--注释的内容-->
11: html页面的标准组成：由html标签作为根标签 head标签和body标签作为子标签
12: HTML是不区分大小写的 标签名和属性名尽量写成大写
13: 在html中通过字符实体来表示 特殊字符
字符实体格式：&xxx;
<html> <!--html是根标签：所有标签都是其子标签-->
<head><!--头标签：对当前html文件进行统一的属性设置-->
<title>我的第一个页面</title>
</head>
<body><!--体标签：页面显示的数据-->
<font color="red" size="7"><b>苗天宝</b></font>说：好好学习天天向上<br/>
*说：改革开放<br/>
<a href="#"><b>111</b></a><br/>
int a=4;<br/>
int b=2;<br/>
int c=3;<br/>
0<c>3 0<a>2<BR/>
</body>
<html>
3 、文本行标签
没有换行功能的文本标签
<!--文本行标签-->
<font>font标签无任何自带效果</font><br/>
<font >font标签：属性color:控制颜色： 值：英文单词/#6个16进制 表示三原色所占成分</font><br/>
<font color="red">font标签:color="red"</font><br/>
<font color="#ff0000">font标签:color="red"</font><br/>
<font color="#aaaaaa">font标签:color="#aaaaa"</font><br/>
<font color="#000000">font标签:color="#000000"</font><br/>
<font size="1">font属性：size 取值绝对值：1-7:1</font><br/>
<font size="3">font属性：size 取值：1-7:3(默认)</font><br/>
<font size="7">font属性：size 取值：1-7:7</font><br/>
<font size="-2">font属性：size 取值相对值：(-2)-(+4):-2</font><br/>
<font size="+1">font属性：size 取值：(-2)-(+4):+1</font><br/>
<font size="+4">font属性：size 取值：(-2)-(+4):+4</font><br/>
<b>b标签</b><br/><!--加粗blod-->
<u>u标签</u><br/><!--下划线underline-->
<i>i标签</i><br/><!--斜体italic-->
正常文字<sub>sub标签</sub><br/><!--下标-->
正常文字<sup>sup标签</sup><br/><!--上标-->
<s>s标签</s><br/><!--中划线strickthrough-->
4、 文本块标签
有换行功能的文本
<!--文本块标签-->
<br/><!--换行标签-->
<!--hn标题标签-->
<h1>h1</h1><!--标题标签：hn n取值1到6 字体从大到小-->
<h1 align="left">h1: 属性align控制文本水平对齐方式：left(默认) center right</h1>
<h3 align="center">h3</h3><!--标题标签：自带效果：加粗 前后空行-->
<h6 align="right">h6</h6><!--标题标签-->
<!--水平线标签：属性color控制颜色 size粗细 width左右宽度 align水平对齐方式-->
<hr size="10px" color="red" width="1000px" /><!--水平线标签:-->
<hr size="10px" color="red" width="80%" align="right"/><!--水平线标签:-->
正常文字
<!--p标签：段落标签：自带效果：前后有空行-->
<p>p标签：段落标签</p>
<p align="right">p标签：段落标签</p>
<!--center标签：居中标签-->
<center>居中标签</center>
<!--pre标签：格式化标签：保留数据的原有格式-->
<pre>
class Student{
public static void main(String[] s){
SOUT(111);
}
}
</pre>
5、 超链接标签：a
<!--超链接标签：a-->
<a name="hehe">a标签：name="hehe"锚点</a><br/>
<a href="">a标签:必须写href属性 否则没有链接效果</a><br/>
<a href="#">a标签:必须写href属性 否则没有链接效果</a><br/>
<a href="javascript:void(0);">a标签:必须写href属性 否则没有链接效果</a><br/>
<a href="file:///E:/java37/test.html">跳到test.html：绝对路径</a><br/>
<a href="test.html">跳到test.html：相对路径：相对于当前资源所在的文件夹</a><br/>
<a href="http:///www.baidu.com">跳到百度：http协议：请求的资源是网络资源</a><br/>
<a href="file:///E:/java37/test.html">跳转到test.html：请求的是本地资源</a><br/>
<a href="thunder:xxxx">自定义协议：href="thunder:xxxx"</a><br/>
<a href="mailto:miaotianbao@163.com">自定义协议：href="mailto:miaotianbao@163.com"</a><br/>
<a href="E:/java37/test.html">跳转到test.html：请求的是本地资源</a><br/>
<a href="file:///E:/java37/test.html">target=默认_self在当前窗口打开目的资源</a><br/>
<a target="_self" href="file:///E:/java37/test.html">target=_self</a><br/>
<a target="_blank" href="file:///E:/java37/test.html">target=_blank在新窗口打开目的资源</a><br/>
<a href="#hehe">回到锚点:href="#hehe"页面的焦点要跳转到name=hehe的锚点位置</a><br/>
6、 图片标签：img
<!--图片标签：img-->
<img src="3.jpg"/><br/><!--相对路径：相当于当前资源所在的文件夹-->
<img src="file:///e:/java37/3.jpg"/><br/><!--绝对路径-->
<img src="3.jpg" width="100px" height="100px"/><br/><!--图片的宽高：像素值/百分比-->
<img src="3.jpg" width="50%" height="50%"/><br/><!--图片的宽高：像素值/百分比-->
<img src="1.jpg" alt="看到我 就说明出错了！"/><br/>
<!--alt:图片提示信息：图片加载过程中/加载失败 显示的信息-->
7 列表标签：ul ol
<!--列表标签：ul: 无序列表 ol: 有序列表 li：列表项-->
<ul>
<li>无序列表项11</li>
<li>无序列表项12</li>
<li>无序列表项13</li>
</ul>
<ul type="square"><!--正方形-->
<li>无序列表项11</li>
<li>无序列表项12</li>
<li>无序列表项13</li>
</ul>
<ul type="circle"> <!--空心圆-->
<li>无序列表项11</li>
<li>无序列表项12</li>
<li>无序列表项13</li>
</ul>
<ul type="disc"> <!--实心圆(默认)-->
<li>无序列表项11</li>
<li>无序列表项12</li>
<li>无序列表项13</li>
</ul>
<ol>
<li>有序列表项11</li>
<li>有序列表项12</li>
<li>有序列表项13</li>
</ol>
<ol type="1">
<li>有序列表项11</li>
<li>有序列表项12</li>
<li>有序列表项13</li>
</ol>
<ol type="a">
<li>有序列表项11</li>
<li>有序列表项12</li>
<li>有序列表项13</li>
</ol>
<ol type="A">
<li>有序列表项11</li>
<li>有序列表项12</li>
<li>有序列表项13</li>
</ol>
<ol type="i">
<li>有序列表项11</li>
<li>有序列表项12</li>
<li>有序列表项13</li>
</ol>
<ol type="I">
<li>有序列表项11</li>
<li>有序列表项12</li>
<li>有序列表项13</li>
</ol>
<ol type="I">
<li>有序列表项11</li>
<li value="10">有序列表项12</li><!--value=10 属性制定当前项从10开始-->
<li>有序列表项13</li>
</ol>
8、 表格标签：table
<!--表格标签：table表格，caption表格标题，tr行，th列标题，td单元格-->
<!--backgroud设置背景图片，bgcolor设置背景颜色 注意：backgroud优先级高于bgcolor -->
<!--cellspacing外边距：相邻边框之间的距离-->
<!--cellpadding内边距：数据与边框之间的距离-->
<table width="800px" height="300px" align="center"
border="3px" borderColor="red"
bgcolor="#aaaaaa"
cellspacing="10px" cellpadding="10px"
>
<!--caption的align属性：top left right bottom-->
<caption align="bottom">学生成绩bottom</caption>
<!--tr行-->
<!--align:本行数据水平对齐方式：left right center-->
<!--valign:本行数据垂直对齐方式：top bottom middle-->
<tr bgcolor="#ff0000" background="3.jpg">
<th>学号</th><th>姓名</th><th>年龄</th><th>分数</th>
</tr>
<tr height="80px" bordercolor="#00ff00">
<td>1001</td><td>张三</td><td>18</td><td>99</td>
</tr>
<tr align="center" valign="top" height="80px" >
<td>1002</td><td>武大</td><td>19</td><td>91</td>
</tr>
<tr>
<td width="150px" height="80px"
bordercolor="#00ff00"
bgcolor="#aa0000" background="3.jpg"
>1003</td>
<td align="right" valign="bottom">周二</td><td>20</td><td>93</td>
</tr>
<tr>
<td colspan="2">1004</td><td>21</td><td>95</td>
</tr>
<tr>
<!--td属性：colspan合并列 rowspan合并行-->
<td>1005</td><td colspan="3" rowspan="2">李四</td>
</tr>
<tr>
<td>1006</td>
</tr>
</table>
<!--表单：实现客户端与服务器之间的数据交互-->
<!--数据提交：1 超链接 2 地址栏 3 表单 4 ajax-->
<!--form父标签：
form的子标签：表单组件
input组件：
select组件：
textarea组件：
form属性：
action:提交资源的路径
method：提交方式：get/post
注意： 所有需要提交i据的组件必须有name属性
提交数据：https://www.baidu.com/?sname=11111&spwd=123456&sdata=123
input type=text: 单行文本框
input type=file: 文件域
input type=hidden: 隐藏域
input type=button: 普通按钮
input type=password: 密码框
input type=radio: 单选框
input type=checkbox: 多选框
input type=reset: 重置按钮
input type=submit: 提交按钮
select:下拉列表
textare:文本域
-->
<form action="http:///www.baidu.com" method="get">
名字：<input type="text" name="sname" value="张三"/><br/>
密码：<input type="password" name="spwd" value="123456"/><br/>
隐藏数据：<input type="hidden" name="sdata" value="123"/><br/>
头像：<input type="file" name="sphoto"/><br/>
性别：男<input type="radio" name="sex" value="nan"/> | 女<input type="radio" name="sex" value="nv"/><br/>
爱好： 篮球<input type="checkbox" name="senjoy" value="lq"/> |
足球<input type="checkbox" name="senjoy" value="zq"/> |
台球<input type="checkbox" name="senjoy" value="tq"/> |
铅球<input type="checkbox" name="senjoy" value="qq"/> <br/>
<input type="button" value="普通按钮"/><br/>
省份：<select name="province" size="4" multiple="multiple">
<option value="hn">河南</option>
<option value="hb">河北</option>
<option value="xj">新疆</option>
<option value="yn">云南</option>
<option value="gd">广东</option>
<option value="gx">广西</option>
</select> <br/>
介绍： <textarea name="show" rows="5" cols="20"></textarea>111<br/>
<input type="reset" value="重置"/>
<input type="submit" value="提交"/><br/>
</form>
10、 框架标签： frameset
布局页面
<html> <!--html是根标签：所有标签都是其子标签-->
<head><!--头标签：对当前html文件进行统一的属性设置-->
<title>我的第四个页面</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<!--frameset：html框架 实现页面的复用性-->
<!--创建一个页面：通过frameset来布局页面内容
有frameset标签的页面 不能有body-->
<frameset cols="30%,*" border="0px"><!--先把窗体分成左右两列-->
<frame src="file:///e:/java37/left.html" noresize="noresize" />
<frameset rows="30%,*" noresize="noresize" border="0px"><!--把右边的窗体分成上下两行-->
<frame src="file:///e:/java37/top.html" noresize="noresize"/>
<frame src="file:///e:/java37/bottom.html" noresize="noresize" name="frame_bottom" />
</frameset>
</frameset>
<html>
左边页面
<html> <!--html是根标签：所有标签都是其子标签-->
<head><!--头标签：对当前html文件进行统一的属性设置-->
<title>left.html</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<ul>
<li>上衣</li>
<li>手表</li>
<li>皮包</li>
<li>鞋子</li>
</ul>
<a href="file:///e:/java37/bottom.html">请求file:///e:/java37/bottom.html</a><br/>
<ul>
<li><a href="file:///C:\Users\Administrator\Desktop\imgs\1.jpg" target="frame_bottom">1.jpg</a></li>
<li><a href="file:///C:\Users\Administrator\Desktop\imgs\2.jpg" target="frame_bottom">2.jpg</a></li>
<li><a href="file:///C:\Users\Administrator\Desktop\imgs\3.jpg" target="frame_bottom">3.jpg</a></li>
</ul>
</body>
<html>
上面页面
<html> <!--html是根标签：所有标签都是其子标签-->
<head><!--头标签：对当前html文件进行统一的属性设置-->
<title>top.html</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<center><b><font size="7" color="red">淘宝logo</font></b></center>
</body>
<html>
下面页面
<html> <!--html是根标签：所有标签都是其子标签-->
<head><!--头标签：对当前html文件进行统一的属性设置-->
<title>bottom.html</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
商品详细详细
</body>
<html>
