HTML怎样使用：
-
语法和规范：
1.所有的HTML文件名的后缀都是以.html或者.htm结尾的，建议使用.html结尾
2.整个HTML文件分别由头部分<head></head>和体部分<body></body>组成
3.HTML标签都是开始标签和结束标签组成（<br />）
4.html标签忽略大小写，建议大家使用小写
HTML的head标签学习
-
网页标题标签
<title>heml 学习</title>
编码格式标签
两种写法
1.<meta charset="utf-8"/>
2.<meta http-equiv="content-type" content="text/html; charset=utf-8" />
网页搜索优化标签
<!--
了解：
关键字
网页描述
作者
作用：提升网页在浏览器中的搜索概率
-->
<meta name="keywords" content="html,zky,王同学，214"/>
<meta name="description" content="本网页是王同学写的学习网页，优秀！"/>
<meta name="author" content="王同学"/>
- 网页指定跳转标签
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>
其他标签
css标签，js标签
实例源码：
<html>
<head>
<title>heml 学习</title>
<meta charset="utf-8"/>
<!--
了解：
关键字
网页描述
作者
作用：提升网页在浏览器中的搜索概率
-->
<meta name="keywords" content="html,zky,王同学，214"/>
<meta name="description" content="本网页是王同学写学习网页，优秀！"/>
<meta name="author" content="王同学"/>
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>
</head>
<body>
this is my first html!
</body>
</html>HTML的body文本标签学习
标题标签：
h1到h6(块级标签):会将其中的数据加粗加黑显示，并且显示依次减弱，标题标签自带换行功能。
属性：
align: center left right
水平线标签：
hr:会在页面中显示一条水平线，默认居中显示
属性：
width="宽度" 设置水平线的宽度
size="高度" 设置水平线的高度
color="颜色" 设置水平线的颜色
段落标签：
P(块级元素):会将一段数据作为整体进行显示，主要是进行CSS和JS操作时比较方便。会自动换行
特点：
段间距比较大
换行符：
br:换行符告诉浏览器要在此位置换行
空格符：
 告诉浏览器再次位置增加空格
权重标签：针对于文本
b:会将内容加粗加黑显示
i:会将内容斜体显示
u:标签会将内容增加下划线
del:增加中划线
以上标签不会自动换行 可以嵌套使用
注意：
1.标签的属性是对标签的功能进一步的补充，可以由开发人员只有指定标签的属性值，来达到想要现实的效果。
2.像素单位占据的是电脑屏幕的大小，百分比占据的是浏览器窗口的大小。
3.pre按照原文本格式输出
4.<表示< >表示>
HTML的body列表标签学习
无序列表
ul
li:该标签中书写列表内容，一个li标签代表列表中的一行数据
特点：默认数据前有一个黑圆圈
有序列表
ol
li:该标签中书写列表内容，一个li标签代表列表中的一行数据
特点：会自动的给列表进行顺序编码，格式从小到大并且是连续的。
属性：
type：可以改变顺序编码的值，可以是1,a,A,I,默认使用阿拉伯数字进行顺序编码
自定义列表
dl
dt:数据的标题
dd:数据的具体内容，一个dd表示一条数据。
HTML的图片标签学习
图片标签：
img
src:图片滤路径
本地资源路径路径：一般本地图片资源使用相对路径即可
<img src="img/1.jpg" width="75%"/>
网络资源路径：图片的资源的URL地址
width:设置图片的宽度，如果是单独设置，这图片在保证不失真的情况下自动缩小或者
放大，单位可以是px也可以是百分比
heigh：设置图片的高度，.............................................
title:图片标题，鼠标放在上面的时候会显示
alt:图片加载失败后的提示语
注意：图片是不会自动换行的（行内元素）
注意：
相对路径：从当前文件出发查找另一个文件说经过的路径
绝对路径：从根盘符出发查找文件的路径
HTML的超链接标签学习
超链接标签学习：
a标签：
herf:要跳转的网络资源路径
本地资源：相对路径
网络资源：网络资源（网页）的URL
target:指明要跳转的网页资源的显示位置
_self 当前页面中刷新显示
_blank 在新得标签页中显示
_top 在顶层页面中显示
_parent 在父级页面中显示
注意：超链接标签中一定要声明访问方式，访问方式可以使文字，也可以是图片
锚点的学习：
作用：在一张网页中进行资源跳转
使用：
先使用超链接标签在指定的网页位置增加秒点，格式为：
<a name="锚点名" ></a>
使用a标签可以跳转指定锚点，达到网页内部资源跳转的目的，格式 ：
<a href="锚点名" >访问方式</a>
HTML的表格标签学习
HBuilder建表格快捷键 table>tr*4>td*5 四行五列表
表格标签学习：
table:声明一个表格
tr:声明一行
th:声明一个单元格，表头格，默认居中加黑显示
td:声明一个单元格，默认居左显示原始数据不加黑
注意：
行高即改行所有单元格的高度
单元格的宽度即列宽
属性：
border:给表格添加边框
width:设置表格的宽度
height:设置表格的宽度
cellpadding:设置内容据边框的距离
cellspacing:设置边框的大小
特点：
默认根据数据的多少进行表格大小显示
单元格的合并：
第一步：
首先确保表格是一个规整的表格
第二步：
根据要合并的单元格，找到其所在的源码位置
第三步：
行合并：在要合并的单元格中的第一个单元格上使用属性rowspan="要合并单元格的个数",并删 除其他要合并的单元格完成合并
列合并：在要合并的单元格中的任意一个上使用属性colspan="要合并的单元格个数"，并删除要合并的其他单元格。
HTML的内嵌标签学习
内嵌标签：
iframe
src:要显示的网页资源路径，可以是本地(相对路径) 也可以是网络资源(URL)
注意：默认当前页面打开及加载src指向的资源
width:设置显示区域的宽度
height:设置显示区域的高度
name:设置内嵌区域的名字，结合超链接标签的target属性的作用
作用：
在当前网页中加载其他网页的资源，到达不同页面资源之间不相互干扰，并能在同一个页面中展现给用户
源码实例：
--------------------------------------------------------------------------------
<html>
<head>
<title>内嵌标签学习</title>
<meta charset="UTF-8"/>
</head>
<body>
<h3 align="center">内嵌标签学习</h3>
<hr />
<p align="center">
<a href="http://www.baidu.com" target="_baidu">百度一下</a>
<a href="http://www.so.com" target="_so">360搜索</a><br />
</p>
<hr />
<iframe src="" width="48%" height="100%" name="_baidu" frameborder="0px"></iframe>
<iframe src="" width="48%" height="100%" name="_so" frameborder="0px"></iframe>
</body>
</html>
--------------------------------------------------------------------------------
HTML的框架标签学习
注意：
第一步一定要删除body标签
框架标签学习：
frameset
rows:按照行进行切分页面
clos:按照列进行切分页面
子标签：
frame:进行切分区域的占位，一个frame可以单独加载页面资源
src:资源路径(本地或者网络)
name:区域名，结合超链接使用
源码实例：
--------------------------------------------------------------------------------
<html>
<head>
<title>框架标签学习</title>
<meta charset="UTF-8"/>
</head>
<frameset rows="20%,*,20%">
<frame src="frameset/top.html"/>
<frameset cols="15%,*">
<frame src="frameset/left.html"/>
<frame src="frameset/right.html" name="_right"/>
</frameset>
<frame src="frameset/botton.html"/>
</frameset>
</html>
--------------------------------------------------------------------------------
HTML的form标签学习
作用
收集并提交用户数据给指定的服务器
属性：
action:收集的数据提交地址也就是URL
method:收集的数据的提交方式
get:适合小量数据，表单数据以？隔开拼接在URL后面，不同的键值对使用&隔开
post:适合大量数据，安全，隐式提交。
注意1：
表单数据的提交，要提交的表单项必须拥有name属性值，否则不会提交
提交时表单项数据为键值对，键为name属性的值，值为用户书写的数据
注意2：
form标签会收集其标签内部的数据
注意3:
form表单的数据提交需要依赖submit提交按钮。
form表单域标签的学习：
作用：
给用户提供可以进行数据书写或者选择的标签
使用：
文本框：
input
type:
text 收集少量的文本数据，用户可见
password 收集用户密码数据
name:数据提交的键，也会被JS使用
value:默认值
单项框：
input
type:
radio
name:name 的属性相同的单选框只能选择一项数据
value:要提交的数据
chacked:chacked 使用此属性的单选默认是选择状态
多选框：
input:
type:
checkbox
name:一个多选组需要使用相同的name属性
chacked:chacked 使用此属性的单选默认是选择状态
单选下拉框：
select：
name:数据提交的键名，必须声明
子标签option:一个option标签标示一个下拉选项
value:要提交的数据
文本域：
textarea:声明一个可以书写大量文字的文本区域
name:数据提交的键名，js和css也会使用
rows:声明文本域的行数
cols:声明文本域的列数
普通按钮：
input
type:
button
value:
隐藏标签：
input
type:
hidden
name
value
注意：表单数据提交的是表单域标签的value值
form表单标签的使用：
在点击数据提交时，form标签会将其内部所有form表单域标签中用户书写的数据按照method指明的提交方式提交给action属性所指明的提交地址。
实例源码：
--------------------------------------------------------------------------------
<html>
<head>
<title>from表单学习</title>
<meta charset="UTF-8"/>
</head>
<body>
<h1>form表单学习</h1>
<hr />
<form action="#" method="post">
用户名：<input type="text" name="uname"/><br />
密码：<input type="password" name="upwd"/><br />
性别： 男<input type="radio" name="sex" value="1" checked="checked"/>
女<input type="radio" name="sex" value="0" /><br />
<input type="submit" value="登录" />
</form>
</body>
</html>
--------------------------------------------------------------------------------
3984
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
