Html基础
1·什么是 HTML？
HTML： Hyper Text Markup Language ： 超文本标记语言
超文本： 功能比普通文本更加强大
标记语言： 使用一组标签对内容进行描述的语言， 它不是编程语言
2· HTML 的语法和规范
HTML 文件都是以.html 或者.htm 结尾的， 建议使用.html 结尾！
Html 文件分为头部分<head></head>和体部分<body></body>。
Html 标签都是由开始标签和结束标签组成(<hr />)。
Html 标签忽略大小写， 建议使用小写。
3 HTML 入门
3.1 HTML 文本标签
a. 标题标签
从<h1>到<h6>逐渐变小(加粗加黑显示)
b. 水平线标签<hr/>
c. 段落标签<p>
d.字体标签
<font 属性=值>内容</font>
color:设置字体的颜色， 可使用英文单词或者 16 进制
size：设置字体的大小， 从 1 到 7 逐渐变大，最大显示为 7
face：设置字体
f.<img/>标签的 src 属性。
当前目录：直接写文件名称或者./文件名称
上一级目录： ../文件名称
下一级：目录名称/文件名称
width：设置图片的宽度
height： 设置图片的高度
alt： 当图片无法正常显示的时候给出的提示信息， 它的显示效果与浏览器有关
g.列表标签：
有序列表： <ol type=”1” start=”4”><li></li></ol>
h.无序列表： <ul type=”circle”><li></li></ul>
i.超链接标签：
<a href=”http://www.baidu.com” target=”_self、 _blank”>百度</a>
j. table表格标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格的跨行跨列操作</title>
</head>
<body>
<table border="1px" width="500px" height="200px" align="center" cellspacing="0px" cellpadding="0px">
<tr>
<td colspan="2" align="center" width="250px" height="50px">
<img src="../../img/1.jpg" height="100%" width="100%"/>
</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td colspan="2" rowspan="2" align="center">
<table border="1px" align="center" width="100%" height="100%">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td rowspan="2" align="center">34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
</tr>
</table>
</body>
</html>
k.框架子标签<frame>
后台系统显示页面.html
<html>
<head>
<meta charset="UTF-8">
<title>后台系统显示页面</title>
</head>
<frameset rows="20%,*">
<frame src="top.html" />
<frameset cols="20%,*">
<frame src="left.html" />
<frame name="right" />
</frameset>
</frameset>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="right.html" target="right">会员管理</a><br /><br />
<a href="#">品牌管理</a><br /><br />
<a href="#">商品管理</a><br /><br />
<a href="#">分类管理</a>
</body>
</html>
right.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
所有用户信息
</body>
</html>
top.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<font size="7">欢迎XXXX进入后台管理系统</font>
</body>
</html>
l.表单标签<form>
method：表单提交的方式(get/post/delete……等 7 种)
- 文本输入项
<input type=”text” name=”” size=”” maxlenght=”” readonly=”” placehoder=””/>name: 提交到服务端必须指定的属性
size: 指定输入框的宽度
maxlenght: 指定输入内容的长度
readonly: 设置为只读
placehoder: 输入内容的提示信息
- 密码输入项
<input type=”password” name=”” />
name: 提交到服务端必须指定的属性
- 单选按钮
<input type=”radio” name=”” value=”” checked=””/>
value: 提交到服务端必须指定的属性
checked:默认选中,值为checked
- 多选按钮
<input type=”checkbox” name=”” value=”” checked=”” />
- 下拉列表
<select name=””>
<option value=”” selected=””>北京</option>
<option>上海</option>
</select>
value: 提交到服务端必须指定的属性
selected:默认选中,值为selected
- 文件上传项
<input type=”file” name=””/>
- 文本输入域
<textarea name=””></textarea>
- 提交按钮
<input type=”submit” value=””/>
submit: 具备将整个表单提交到服务器的功能
value: 修改按钮上面的内容
- 普通按钮
<input type=”button” value=””/>
- 重置按钮
<input type=”reset” value=””/>
- 隐藏项
<input type=”hidden” name=””/>
用于用户比较敏感的一些信息
- Get 与 post 提交方式的区别？ 【默认提交方式为 get】
Get 提交方式，所有的内容显示在地址栏， 不够安全，长度有限制。
Post 提交方式，所有的内容不会显示在地址栏，比较安全，长度没有限制。