html概述
1.1html全称
html全称：Hyper Text Markup Language(超文本标记语言)
对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
1.2 html语法结构
<!--定义文档类型-->
<!DOCTYPE html>
<html>
<head>
<!--charset设置页面的字符集编码 ，utf-8为中文字符编码-->
<meta charset="utf-8" />
<!--设置页面的标题 -->
<title></title>
</head>
<body>
<!--页面主体信息-->
</body>
</html>
1.‘<!DOCTYPE> ’声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令；
2.‘<!DOCTYPE>’ 声明必须是 HTML 文档的第一行，位于 html 标签之前。
3.<!DOCTYPE> 声明没有结束标签；
4.<!DOCTYPE> 声明对大小写不敏感。
html基本标签
2.1 结构标签
<!--定义 HTML 文档 -->
<html>
<!--定义文档的头部 -->
<head>
<!--定义文档的标题 -->
<title></title>
</head>
<!--定义文档的主体 -->
<body></body>
</html>
2.2 容器标签
<!--块级标签，独占一行-->
<div></div>
<!--行级标签，所有内容都在同一行-->
<span></span>:
2.3 文字标签
<font></font>
属性： size:设置字体大小
color:设置字体颜色
face:设置字体
<i>:显示斜体文本效果
<b>:呈现粗体文本效果
<small>:呈现小号字体效果
<big>:呈现大号字体效果
2.4标题标签
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
2.5 无序列表
<ul type="square">无序列表
<li>apple</li>
<li>banana</li>
<li>orange</li>
</ul>
属性：type :circle(空心圆) ,disc(默认,实心圆),square(黑色方块)
注意：如果想去掉列表默认属性（去掉小圆点），可在css中设置list-style: none;
2.6有序列表
<ol type="A">有序列表
<li>apple</li>
<li>orange</li>
<li>banana</li>
</ol>
属性：type：1、A、a、I、i（数字、字母、罗马数字）
2.7 图片标签
<img/>单标签
属性:
src：图片地址
width:宽度
height:高度
border:边框
align:对齐方式
alt:图片的文字说明（鼠标放在图片上显示文字）
hspace 和 vspace 设定图片边沿上下左右空白，以免文字或其它图片过于贴近
2.7 链接标签
<a>文本或图片</a>
属性：
href:跳转页面的地址（支持外网跳转：协议+域名）；
name:名称，锚点(回到锚点: 顶部，底部，中间)
锚点示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#top{
background-color: pink;
width: 200px;
height: 200px;
}
.bottom{
width: 200px;
height: 200px;
margin-top: 1000px;
}
</style>
</head>
<body>
<div id="top">
</div>
<div class="bottom">
<a href="#top">点击回到顶部</a>
</div>
</body>
</html>
2.8 表格标签
(table,th,tr,td)
<head>
<style type="text/css">
table{
border: 1px solid pink;
border-collapse: collapse;/* 将重叠的的边框变成一条 */
}
</style>
</head>
<body>
<!--border:边框的宽度 bordercolor:边框的颜色 cellspacing:单元格的边距 width:宽度 height:高度-->
<table border="1" width="200" height="200" align="center" cellspacing="0" >
<!-- 给表格添加标题 -->
<caption>个人信息表</caption>
<tr >
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr align="center">
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr align="center">
<td>李四</td>
<td>24</td>
<td>女</td>
</tr>
</table>
</body>
</html>
2.8.1表格的列合并
colspan 属性
<table border="1" cellspacing="0" align="center">
<tr>
<td colspan="4" align="center">个人信息表</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td colspan="2">各科成绩</td>
</tr>
<tr>
<td>01</td>
<td>李华</td>
<td>80</td>
<td>90</td>
</tr>
</table>
2.8.2 表格的行合并
rowspan属性
<table border="1" cellspacing="0" align="center">
<tr>
<td colspan="4" align="center">学生表</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td>语文成绩</td>
<td>数学成绩</td>
</tr>
<tr>
<td rowspan="2">01</td>
<td rowspan="2">李华</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<td>80</td>
<td>90</td>
</tr>
</table>
html表单标签
html表单可以获取用户输入的内容，并提交给后台
3.1 form标签
属性：action：表示动作，值为服务器的地址，把表单的数据提交到该地址上处理
method:请求方式：get 和post
enctype:表单提交的类型
get提交与post提交
get:
1.会显示在地址栏,请求参数都在地址后拼接 path?name="李华"&password="123456"；
2.不安全但是效率较高；
3.get请求大小有限制，大约是2KB；
使用情况：一般情况用于查询数据。
post：
1.地址栏：请求参数单独处理；
2.安全可靠但是效率低；
3.post请求大小理论上无限；
使用情况：一般用于插入修改等操作。
3.2 input标签
原型：<input type="" name="" id="" value="" />
type:
1.text 文本框
2.password 密码框
3.radio 表示是单选，实现单选框：name属性必须一致才能实现单选框
<div>
<input type="radio" name="chex" />
<input type="radio" name="chex" />
</div>
4.checkbox 表示多选 ，同一组中可以选多个，name必须一致，返回值是个数组
5.submit 提交
6.reset 重置
7.button 普通按钮
3.3select 下拉菜单
<select>
<option value ="">请选择年份</option>
<option value ="">1998</option>
<option value ="">1999</option>
</select>
<select>
<option value ="">请选择月份</option>
<option value ="">08</option>
<option value ="">01</option>
</select>
<select>
<option value ="">请选择日</option>
<option value ="">30</option>
<option value ="">07</option>
</select>
3.4 textarea元素
需要指定输入的区域位置大小
<textarea rows="10" cols="20" > 表示10行20列的文本空间大小
综合案例：注册页面
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
tr{
height: 35px;
}
</style>
<meta charset="utf-8">
<title>注册页面</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<table align="center" width="600">
<caption ><h4>注册表单</h4></caption>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" id="" value="" /><img src="img/women.jpg" >男
<input type="radio" name="sex" id="" value="" /><img src="img/women.jpg" >女
</td>
</tr>
<tr>
<td>生日：</td>
<td>
<select>
<option value ="">请选择年份</option>
<option value ="">1998</option>
<option value ="">1999</option>
</select>
<select>
<option value ="">请选择月份</option>
<option value ="">08</option>
<option value ="">01</option>
</select>
<select>
<option value ="">请选择日</option>
<option value ="">30</option>
<option value ="">07</option>
</select>
</td>
</tr>
<tr>
<td>所在地区：</td>
<td><input type="text" name="" id="" value="" /></td>
</tr>
<tr>
<td>婚姻状况：</td>
<td>
<input type="radio" name="marry" id="" value="" />未婚
<input type="radio" name="marry" id="" value="" />丧偶
<input type="radio" name="marry" id="" value="" />离婚
</td>
</tr>
<tr>
<td>学历：</td>
<td><input type="text" name="" id="" value="大学" /></td>
</tr>
<tr>
<td>月薪：</td>
<td><input type="text" name="" id="" value="1000-5000" /></td>
</tr>
<tr>
<td>手机号码：</td>
<td><input type="text" name="" id="" value="" /></td>
</tr>
<tr>
<td>昵称：</td>
<td><input type="text" name="" id="" value="" /></td>
</tr>
<tr>
<td>喜欢的类型：</td>
<td>
<input type="checkbox" name="type1" id="" value="" />可爱
<input type="checkbox" name="type1" id="" value="" />甜美
<input type="checkbox" name="type1" id="" value="" />温柔
<input type="checkbox" name="type1" id="" value="" />高冷
</td>
</tr>
<tr>
<td>自我介绍：</td>
<td>
<textarea rows="5" cols="30">
</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="image" src="img/btn.png" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="radio" name="agree" checked="checked"/>我已同意服务条款
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">我是会员立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h4>我承诺</h4>
<ul>
<li>我真心，我有钱，</li>
<li>找对象，找十个</li>
<li>nice！</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
4.1常用特殊字符
空格
< 小于号
> 大于号
& 与字符
" 引号
9897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
