HTML
1、什么是HTML？
HTML（Hyper Text Markup Language） 超文本 标记 语言。
超文本：页面中有文字，有图片，有视频，链接等等非文字内容
标记：使用标签的方式将想要展示的内容包起来
2、超文本标记语言(或超文本标签语言)的结构包括“头”部分、和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
3、HTML文件的扩展名.html，它不是一个编程语言，只是一个文档标记
4、HTML文件的传输基于http协议
5、基本结构
<html>
<head></head>
<body>
Hello world
</body>
</html>
6、编写规则
1.html文档内容由标签和文本内容组成。
2.html的标签是由w3c组织规定好的，不能随意编写。
3.html标签不区分大小写。（建议使用小写字母）
4.开始标签和结束标签要成对出现。
5.在编写html时，要注意缩进，编写出层次结构。
7、主要标签及作用
<html></html>将整个html文件内容包在里面
<head></head>头部标签，头部中包含的标记是页面的标题、序言、说明等内容，本身不显示在文件中，但影响网页显示的效果
<title></title>网页的标题
<meta charset=”utf-8”></meta>设置浏览器用utf-8编码格式查看当前网页;
<meta name=”keywords” content=”购物”>设置搜索关键字
<meta name=”description” content=”国内最大的……" >设置网页描述
<meta http-equiv="refresh" content="3;url=www.baidu.com" />设置自动刷新，3秒后跳转到指定页面
<script></script>里面写javascript代码
<style></style>里面写css代码
<link>引入其他文件 如css文件
<base>设置页面链接前缀
<body></body>网页中显示实际内容的标签
<h1></h1> ~<h6></h6>标题标签
<p></p>段落标签 增大了行间距
<br/>换行标签
<hr/>水平线标签属性size设置粗细，width设置宽度,color设置颜色, align对齐方式
<strong></strong> <b></b>加粗
<em></em> <i></i>斜体
<div></div>独占一行
8、注释和特殊符号
空格 <a href="#">百度</a> <a href="#">新浪</a>
大于号 > >
小于号 < <
引号 " "
版权符号 © ©2013-2019jj
9、列表标签
1.无序列表 type 列表符号disc 实心圆; circle空心圆;square方块
<ul>
<li>123</li>
<li>456</li>
</ul>
2、有序列表 type 序号格式 a字母 I罗马数字 1数字
<ol>
<li>qwe</li>
<li>sad</li>
</ol>
3、自定义列表
<dl>
<dt>标题</dt>
<dd>内容</dd>
</dl>
4、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>无序列表</h1>
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
</ul>
<hr/>
<ul type="circle"> <!-- disc默认 实心圆 circle 空心圆 square方块-->
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
</ul>
<h1>有序列表</h1>
<ol>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
</ol>
<ol type="a">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
</ol>
<ol type="I">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
</ol>
<h1>定义列表</h1>
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
</body>
</html>
10、图像标签
<img src=”xxx/xxx.jpg” alt=”说明” title=”111” width=”220px” height=”110px”/>
Src 图片路径
Alt 图片加载失败时的提示内容
width 图片的宽度
height 图片的高度
border 图片边框
11、超链接
<a href=”链接地址”target=”打开链接的位置”>显示在页面上的内容</a>
href 链接地址 除了地址外还可以写锚点 需设置锚点
href=”#top” <a name=”top”>返回顶部</a>
target选择打开连接的位置
“_self”在当前窗口打开
“_blank”在新窗口打开，每次点击都会打开新窗口
“new”在新窗口打开，只会打开一次
“_search”在新窗口打开，只会打开一次
“_parent”在父窗口打开
“_top”在顶层窗口打开
12、span块级标签 不换行
13、font字体标签
14、<table></table>表格标签
1.属性
cellspacing单元格之间的间距
cellpadding 单元格内容到单元格的距离
align单元格对齐方式
border边框
width单元格宽度
bgcolor单元格背景颜色
2.格式：
<table >单元格标签
<tr>单元格行标签
<td></td>单元格列标签
<td></td>
</tr>
</table>
3.跨行和跨列
colspan 跨列
rowspan 跨行
4.caption th thead tbody tfoot
caption表头标签,始终处于表格上方的正中间位置
th 替换td 文字默认居中加粗
thead 用来写表的第一行
tfoot 用来写表的最后一行
5.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table cellspacing="0" align="center" border="1px" width="600px" bgcolor="blanchedalmond">
<tr bgcolor="aqua">
<td bgcolor="red" align="center">11</td>
<td>12</td>
<td>13</td>
</tr>
<tr align="center">
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1px" width="200px">
<tr>
<td colspan="2">学生成绩</td>
</tr>
<tr>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
</table>
<hr />
<table border="1px" width="300px">
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>88</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
<hr/>
<table border="1px" width="300px">
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>88</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table align="center" width="50%">
<caption>年终数据报表</caption>
<thead bgcolor="aqua">
<tr>
<th>月份</th>
<th>收入(RMB)</th>
</tr>
</thead>
<tbody bgcolor="cadetblue">
<tr>
<td>1月</td>
<td>100</td>
</tr>
<tr>
<td>2月</td>
<td>200</td>
</tr>
<tr>
<td>3月</td>
<td>300</td>
</tr>
<tr>
<td>4月</td>
<td>400</td>
</tr>
<tr>
<td>5月</td>
<td>500</td>
</tr>
<tr>
<td>6月</td>
<td>600</td>
</tr>
</tbody>
<tfoot bgcolor="gold">
<tr>
<td>平均月收入</td>
<td>350</td>
</tr>
<tr>
<td>总计</td>
<td>2100</td>
</tr>
</tfoot>
</table>
</body>
</html>
15、表单
1.简介
<form action=”” method=””></form>收集数据的标签
action表单提交路径
method 表单提交方式，get(显示)和post(不显示)
单行<input type=””name=””value=””size=””maxlength=””/>
type标签类型
name标签名称
value默认值
size长度
maxlength最多多少字符
2.类型介绍 type=””
text 文本标签
password 密码标签
radio 单选标签
checkbox 复选标签
file 文件框
hidden 隐藏域
image 图片标签
button 按钮
submit提交按钮
reset重置按钮
date时间类型
email邮箱标签
3.多行文本标签
<textarea>内容</textarea>
4.下拉列表框
<select name=”select”>
<option value=”111” selected=”selected”>111</option>
<option>222</option>
<option>333</option>
</select>
name:后台使用这个标签获取值
Selected:默认选中
5.id readonly disabled
id属性值唯一 readonly可将标签设置为只读
Disabled 可以将标签设置为不可用
6.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签</title>
</head>
<body>
<center>
<form action="1.html" method="get">
<table cellpadding="8px" bgcolor="lightyellow" width="700px" cellspacing="0px">
<tr>
<td align="right" width="30%">名称:</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td align="right" width="30%">账号:</td>
<td><input type="text" name="accid"/></td>
</tr>
<tr>
<td align="right" width="30%">密码:</td>
<td><input name="password" type="password"/></td>
</tr>
<tr>
<td align="right" width="30%">性别:</td>
<td>男<input name="sex" type="radio"/>
女<input name="sex" type="radio" checked="checked"/>
</td>
</tr>
<tr>
<td align="right" width="30%">兴趣爱好:</td>
<td>学习<input name="hobby" type="checkbox"/>
敲代码<input name="hobby" type="checkbox" checked="checked"/>
打游戏<input name="hobby" type="checkbox" checked="checked"/>
</td>
</tr>
<tr>
<td align="right" width="30%">学校:</td>
<td><select>
<option>清华大学</option>
<option>北京大学</option>
<option>中公教育</option>
<option selected="selected">蓝翔技校</option>
</select>
</td>
</tr>
<tr>
<td align="right" width="30%">头像:</td>
<td><input name="photo" type="file"/></td>
</tr>
<tr>
<td align="right" width="30%">自我介绍:</td>
<td>
<textarea cols="50" rows="13"></textarea>
</td>
</tr>
<tr>
<td align="right" width="30%">注册时间:</td>
<td><input type="date" name="date"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" />
<input type="reset" />
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
16、页面框架
<frameset rows=”30%,*”>
<frame src=”” name=””>
<frameset cols=”15%,*”>
<frame/>
<frame/>
</frameset>
</frameset>
frameset用来将页面分为不同的部分
rows=”30%,*”将页面上下分为2部分，分别占30%和剩余
Cols=”15%,*”将本框架部分水平分为2部分。。。
src用来引入页面
noresize 不能通过拖动改变大小
name用来给超链接target使用
17、内嵌框架
<iframe src="the_second.html"width="400px" height="236px" scrolling="no" >
<iframe></iframe>
</iframe>
scrolling表示滚动条