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>
--------------------------------------------------------------------------------