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常用特殊字符
空格
< 小于号
> 大于号
& 与字符
" 引号