HTML
HTML：Hypertext Markup Language 超文本标记语言
超文本：能够记录文字、标点符号，输入文本、图片、视频、音频和超链接等内容
标记（标签）：将所有内容封装成标签，需要时使用对应标签
HTML用于编写网页，可以使用开发者模式（F12）查看源码。
特点：
（1）HTML文件名的扩展名为.html或.htm
（2）根标签是<html>，里面分为两个部分<head> , <body>
（3）标签名称不区分大小写，推荐小写
（4）大部分标签成对出现，这类标签必须有开始标签和结束标签
（5）HTML文档是树状结构
（6）HTML嵌套时需谨慎
HTML文件的编辑工具：
常用工具：Nodepad++,WebStorm,HBuilder
推荐工具：HBuilder
HTML常见标签
标题标签<h1></h1>...<h6></h6>
分割线标签：<hr/>
width---宽度 size---粗细 color---颜色
文字标签：<font>
size---字体大小 color---颜色
加粗标签：<strong></strong>，<b></b>
斜体标签：<em></em>，<i></i>
段落标签<p></p>
实体字符： < > " ©
：空格
<：<
>：>
"：双引号
©：版权符号
注释标签：<!-- 注释内容 -->
HTML图片标签
img标签的语法格式:<img src=”图片路径” width=”” height=”” alt=”” title=””/>
src：设置路径：绝对路径和相对路径，推荐使用相对路径
相对路径：相对于当前文件寻找目标文件。
注意点：
1、同级直接找
2、内部/找
3、返回上一级../
width：宽度，如果只设置宽度不设置高度，那么高度会随着宽度等比变化
height：高度
alt：由于某种原因图片无法显示时的替代文本
title：鼠标悬浮在图片上时的提示文字
HTML列表标签
无序列表
<ul>用来定义无序列表
<li>用来定义列表项
type属性改变列表项前面的符号
属性值：disc（实心圆点），circle（空心圆），square（实心方块）
<ul type="circle">
<li>韩跳跳</li>
<li>李白</li>
<li>李元芳</li>
</ul>
有序列表
<ol>用来定义有序列表
<li>用来定义列表项
type属性设置列标签前面的字符：
属性值：1（阿拉伯数字），a（小写字母），A（大写字母），i（小写罗马数字），I（大写罗马数字）
<ol type="1">
<li>水果</li>
<li>动物</li>
<li>人物</li>
</ol>
HTML超链接标签
超链接标签主要用于HTML中页面间的跳转。
语法结构：<a href=”跳转的路径” target=””>点击的内容（图片，文本...）</a>
属性解析：
href：跳转路径,推荐使用相对路径
target：打开页面的方式，常用值：_blank，在新选项卡中打开；_self，在本选项卡打开
跳转方式：
1、网上资源：资源的完整域名
2、自己的资源：相对路径
3、回到顶部：#顶部的ID值-----<font id="1"></font>
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="another.html" target="_blank">点击一下</a>
<a href="#1">回到顶部</a>
HTML表格标签
<table>标签用来定义表格
<tr>标签用来定义行，是<table>的子标签
<td>标签用来定义列（单元格），是<tr>的子标签
<th>标签：定义表头信息，是<tr>的子标签，写在<th>中的内容会自动居中加粗
<table>标签的常用属性：
width：表格宽度
height：表格高度
border：边框的粗细
cellpadding：表格边缘与内容之间的空白
cellspacing：单元格之间的空白
<tr>标签可以使用height来设置当前行高度，剩下的被剩余行均分
<td>标签可以是用width来设置当前列宽度，剩余的被剩余列均分
<table><tr><td>都可以使用的属性：
align：
针对table标签，设置整个表格相对于浏览器的对齐方式；
针对tr和td标签，设置标签中内容的对齐方式
取值：left，center，right
bgcolor：设置表格的背景颜色
<td>标签常用属性：
colspan：合并列
rowspan：合并行
HTML表单标签
HTML表单作用：收集用户输入的数据，并按照指定的方式发送到指定的位置，从而实现用户与Web服务器的交互。
<form>：在页面中创建出表单
属性解析：
action：数据提交的路径，通常是服务器地址
method：数据提交的方式，常用值：get，post
表单控件及按钮
1、输入标签：<input/>
该标签用于获取用户输入数据，通过type属性值的不同收集不同的信息。
type属性：
text：文本框
password：密码框
radio：单选按钮
checkbox：多选框
file：上传文件
hidden：隐藏框，在页面上但用户看不到
submit：提交按钮
reset：重置按钮
button：一般按钮
image：图形提交按钮
name属性：为当前组件提供一个名称，服务器会根据这个名称获取数据
value属性：设置当前组件的值
size属性：设置文本框长度大小
maxlength属性：设置最多输入数据的字符数
readonly属性：只读
disabled属性：设置组件是否可用
2、下拉列表<select>
name属性：当前下拉框的名字
<option>标签：<select>的子标签，下拉列表选项
value属性：设置当前列表项提交的数据
selected属性：设置默认选中项
3、文本域<textarea>
rows属性：设置文本域可见行数
cols属性：设置最大列数
<form action="" method="post">
账号：<input type="text" name="userName" value="请输入账号" size="10" maxlength="4" ><br />
密码：<input type="password" name="password" /><br />
性别：<input type="radio" name="sex" value="1" checked="checked"/>男
<input type="radio" name="sex" value="0"/>女<br />
爱好：<input type="checkbox" name="hobby" value="0"/>篮球
<input type="checkbox" name="hobby" value="1"/>排球
<input type="checkbox" name="hobby" value="2"/>足球<br />
头像：<input type="file" name="photo"/><br />
出生地：
<select name="pro">
<option value="sc">四川</option>
<option value="hn" selected="selected">湖南</option>
</select>省
<select name="city">
<option>成都</option>
<option>长沙</option>
</select>市<br />
自我介绍：<textarea rows="5" cols="100"></textarea><br />
<input type="submit" value="提交"/><br />
<input type="reset" value="重置" /><br />
<input type="button" value="注册"/><br />
<input type="image" src="img/李白.jpg" width="50"/>
</form>
表格表单的布局
<form>
<table width="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<b>表单布局-用户注册</b>
</td>
</tr>
<tr>
<td align="right" width="30%">用户名：</td>
<td>
<input type="txet" name="username" />
</td>
</tr>
<tr>
<td align="right" >密码：</td>
<td>
<input type="password" name="password" />
</td>
</tr>
<tr>
<td align="right">性别：</td>
<td>
男<input type="radio" name="sex" value="1" />
女<input type="radio" name="sex" value="0"/>
</td>
</tr>
<tr>
<td align="right">手机号码：</td>
<td>
<input type="text" name="phone" />
</td>
</tr>
<tr>
<td align="right">爱好：</td>
<td>
爬山<input type="checkbox" name="hobby" value="0"/>
看书<input type="checkbox" name="hobby" value="1"/>
阅读<input type="checkbox" name="hobby" value="2"/>
</td>
</tr>
<tr>
<td align="right">自我介绍：</td>
<td>
<textarea rows="5" cols="20" name="introduce"></textarea>
</td>
</tr>
<tr>
<td align="right">
<input type="submit" value="提交信息"/>
</td>
<td></td>
</tr>
</table>
</form>
HTML框架标签
1、框架标签<frameset>
在本页面内用多个窗口将多个页面整合到一起。<frame>是<frameset>的子标签，用于将不同的页面整合进来。
<frameset>属性：
rows：确定行数
cols：确定列数
noresize：禁止调整大小
注意：<frameset>不能与<body>同时出现
<frame>属性：
src：指定页面路径
noresize：当前frame禁止调整大小
2、框架<frameset rows=”” cols=””><frame src=””/></frameset>
如下是frameset.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="20%,*">
<frame src="top.html" noresize="noresize"/>
<frameset cols="20%,*">
<frame src="left.html" />
<frame src="right.html" name="right"/>
</frameset>
</frameset>
</html>
如下是left.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<a href="Day01.html" target="right">第一天</a>
</p>
<p>
<a href="Day02.html" target="right">第二天</a>
</p>
<p>
<a href="Day03.html" target="right">第三天</a>
</p>
</body>
</html>
如下是top.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 color="black" align="center">学习笔记</h1>
</body>
</html>
如下是right.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>