1. Html定义
Hyper Text Markup Language 超文本标记语言
html 1.0 -> html 2.0 -> ... -> html 4 -> html 5
2. 网页的基本结构
<html> <head> <title>这里显示标题文字</title> </head> <body> 这里显示正文内容。 </body> </html> |
title:网页的标题
body:网页的正文部分
父子关系:父元素、子元素。兄弟关系:兄弟元素。
祖先后代关系:祖先元素、后代元素。
3. 浏览器
用于查看运行网页文件。
IE、360、猎豹、谷歌、火狐、欧鹏、世界之窗... ...
4. 网页开发工具
记事本、Dreamweaver、sublime text、... ...
5. 网页编码(乱码)
文件在保存时使用的编码、网页文件在浏览器中查看时使用的编码
现在有很多字符编码格式:ascii(256:字母、数字、常用符号)、gbk、gb2312、UTF-8
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6. 常用网页标签
1>. 标题标签 h1 h2 h3 h4 h5 h6
2>. 段落标签 <p></p>
3>. 换行标签 <br /> 自闭合标记
4>. 水平线标签 <hr />
5>. 加粗:strong 斜体:em
6>.特殊符号(实体字符)
< <
> >
" "
@ ©
空格
7. 注释
让开发人员看的,以后维护网页非常方便。
<!-- 这里是注释部分,不会在浏览器中显示 -->
8. 图片标记
<img src="myphoto.jpg" alt="文字" title="" />
src属性:设置要显示的图片路径
alt属性:当图片路径不存在时,使用指定文字代替
title属性:当鼠标悬浮到元素上时,提示的文字信息
width和height属性:设置图像的宽度和高度(其他html元素也可以使用这两个属性控制大小)。
9. 超链接
用途:用于实现页面间导航、锚链接(跳转到页面指定元素的位置)、功能性链接(文件下载|发送邮件)
<a href="目标页面地址" target="">文字或图片</a>
target属性:_blank(打开新窗口加载目标页面)、_self(在当前窗口加载目标页面)
<a href="mailto:451710955@qq.com">发送邮件</a>
10. 文件扩展名
不同类型的文件,有不同的文件扩展名。
音频文件:.mp3
视频文件:.mp4 .avi .rmvb .rm
安装文件:.exe
图片文件:.png .jpg .gif *.bmp
网页文件:.html .htm
设置计算机显示和隐藏文件的扩展名:
打开计算机(我的电脑)->工具菜单->文件夹选项->查看->隐藏文件的扩展名
11. 列表
定义:由很多相同或相似的列表项组成的集合就是列表。
分类:无序列表、有序列表、定义列表
12. 无序列表
ul:无序列表 li:列表项
<ul> <li>苹果</li> <li>香蕉</li> <li>鸭梨</li> </ul> |
无序列表type属性:disc(实心圆=默认值)、square(实心方块)、circle(空心圆)
13. 有序列表
ol:无序列表 li:列表项
<ol> <li>苹果</li> <li>香蕉</li> <li>鸭梨</li> </ol> |
有序列表type属性:1(数组=默认值)、A|a(大|小写字母)、I|i(大|小写的罗马数字)
14. 表格
组成元素:table、tr、th、td
用途:呈现数据;布局
边框:<table border="1" cellspacing="0" cellpadding="10">
border:边框线的宽度
cellspacing:单元格与单元格之间的距离
cellpadding:单元格与内容之间的距离
对齐方式(td):
水平对齐:align:left|right|center
垂直对齐:valign:top|bottom|middle
<table> <tr> <th>姓名</th> <th>联系电话</th> </tr> <tr> <td>张良</td> <td>12365874512</td> </tr> </table> |
跨行:rowspan="n" 跨列:colspan="n"
15. 框架:frameset
注意:使用frameset时,不能使用Html(head|body)标记
cols属性:设置框架划分为几列。cols="20%,*" *代表占据所有剩余空间。
rows属性:设置框架划分为几行。*代表占据所有剩余空间。
<frameset rows="120px,*"> <frame src="top.html"></frame> <frameset> <frame src="left.html"></frame> <frame name="main"></frame> </frameset> </frameset> |
禁止改变框架的大小:<frame noresize="noresize"></frame>
去掉框架的边框:<frameset frameborder="0"></frame>
16. 框架:iframe
注意:iframe可以嵌入到html结构中。
<iframe src="path" name="mainFrame" frameborder="x" scrolling="yes/no" noresize="noresize" width="x" height="y"></iframe> |
scrolling:是否允许出现滚动条
17. form表单标记
<form action="" method=""></form>
method:控制表单的提交方式。method属性值可以是:post和get。
l get:表单中提交的数据会显示到Url地址中。
l post:表单中提交的数据不会显示到Url地址中。
action:控制表单提交的地址。
注意:form不会在页面中呈现任何可视化的内容。
http://www.baidu.com/search.html?name=zhangsan&password=123456
url ?后面的内容都是参数,?前面的是页面地址,上面Url中包含2个参数:name、password
18. 表单元素
1>.单行文本框
<input type="text" value="文本框中显示的内容" name="" id="" />
2>.密码框
<input type="password" />
3>.按钮
提交按钮:<input type="submit" value="按钮上显示的文本" />
重置按钮:<input type="reset" value="重置" />
普通按钮:<input type="button" value="显示的文本" />
图片按钮:<input type="image" src="图片路径" />
4>.单选按钮
<input type="radio" name="" value="" />
注意:如果多个单选按钮要具有互斥的效果,应该保持他们的name属性值相同。
5>.复选框
<input type="checkbox" />
6>.下拉列表框
<select name="shengfen">
<option value="-1">请选择</option>
<option value="1">河北省</option>
<option value="2" selected="selected">河南省</option>
<option value="3">湖北省</option>
<option value="4">湖南省</option>
</select>
7>.多行文本框
<textarea rows=”” cols=””></textarea>
8>.文件域
<input type="file" name="" />
3.语义化表单
1>.fieldset 和 legend
<fieldset>
<legend></legend>
......
</fieldset>
2>.label
<label for="表单元素的值">文字</label>