Web前端基础——HTML
一 、HTML 概述
HTML : 超文本标记语言 HyperText markup language
<marquee behavior="alternate"> <font size="50" color="blue">红尘来也来,去也去,总是一场空</font> </marquee>
可以运行在本地,和服务端
1.html 标签一般成对出现 <标签名></标签名>
2.单独标签不需要配对的标签 <br /> <hr />
3.一个标签+其中的内容 = 一个html 元素
4.标签中可以有一个或多个属性 ,属性名=属性值,属性值可以用单引号或双引号引起来,也可以不引
5.标签名和属性名 大小写不敏感
不同的浏览器之间存在着不兼容的问题（一般情况下，我们验证火狐、谷歌和IE，这三大浏览器）
制定规范的,有 IETF(Internet 工程任务组) 和 w3c (www 联盟)两个组织, 当前正在使用的版本是 HTML 4.01。
二、HTML 全局构架标签
<html> <head> //这里的内容通常不会在浏览器中显示 //通常用来引入脚本文件(javascript 文件),或css样式等 </head> <body> //这里的内容一般都是要显示在浏览器中 </body> </html>
body 标签的属性
1.Text :设置网页中文字的颜色
2.link:设置一般超链接文本的显示颜色
3.alink:鼠标移到超链接上时,超链接显示的颜色
4.vlink:访问过的超链接的颜色
颜色属性值有两种表示方式:
1.十六进制RGB 颜色码, 用一个 # 后跟六位16进制数 例如: #FF0000
2.HTML 的颜色常量名 :Red
--background:设定背景墙纸所用的图象文件,可以是gif 或 jpeg ,可以是绝对路径或相对路径 //background="lengtu.jpg" 后,平铺,挡住了背景
--bgcolor:背景色,当已设置 background时,它会失去作用,除非background有透明的地方
--leftmargin:网页显示画面与浏览器左边的间隙,单位为象素 //本例中原来文字和左边还有一定的空隙,但加上 leftmargin=0 后,直接贴上了
--topmargin:上面的
--class,name,id,style等属性
用myeclipse 新建一个网页,可以看到顶部有这样一句话
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
它称为文档类型定义语句
注释 <!-- -->
<!-- 这是注起来的内容 --> 使用这样的方式注掉的文本,浏览器在解释的时候将会忽略它们,但它们会被发送到客户端,查看源码是可以看到的
(注意,它不能嵌套)
html 编码:（前三个比较常用）
> > < <   空格 & & " " ”
三、格式标签
<p></p> //段落标签
<p align="right">
这是一段文本
</p>
<p align=center >
这是中间的一段文本
</p>
<p align="left">
这是下面的一段文本
</p>
<br /> //换行
<nobr></nobr>
<blockquote></blockquote> //缩进 在它中间加入的文本,会按缩进的形式显示 用它的结果好象设置了 leftmarign,实验发现是两端缩进
<center></center> //居中 html5中过时了
<marquee></marquee> //动感
<marquee behaiver=scroll direction =up></marquee>
behaiver: slider,alternate,scroll
direction:up ,down,left, right
<dl></dl> //创建列表
<dt></dt>
<dd></dd>
<dl> <dt>小标题</dt> <dd>aaa<dd> <dd>bbb<dd> <dd>ccc<dd> <dt>小标题</dt> <dd>xxx<dd> <dd>vvv<dd> <dd>bbb<dd> </dl>
<ol></ol> //有序列表 创建带有数字序号的列表 o 就是order的意思,它有 type =1,a 这类属性
<ol type="a"> <li>这是内容</li> <li>这是内容</li> <li>这是内容</li> <li>这是内容</li> </ol>
<ul></ul>//无序列表
<ul type="square"> //前面的小点变成方块了 <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ul>
<li></li> 只能在上两者中使用.用于创建具体的列表项
<pre></pre> //预格式化 保持其中内容的格式不变
<pre> 这 是 一 段 文本 </pre>
四、文本标签
<h1> ... <h6> //h 标签,它具有语意的含义
<b> 粗体
<i> 斜体
<u> 下划线
<strong> 加重
<sub> 建立下标
<sup> 建立上标 //100 <sup> 2 </sup> 结果是100的平方的效果
<font> 字体,字号,颜色可以控制, 它有三个重要属性: face(字体名称 ) size (-7,7) color
<font size =-7 color=red face="楷体">AAA</font> //htm5 废弃
五、超链接标签
<a href="http://www.baidu.com" >去百度</a>
href 属性,指向的是一个url
什么是URL :
在internate上的任何资源,包括html网页,图片及应用程序等等,它们都有一个能保证，其单一的命名方案,中文称为统一资源定位符。
href 属性,可以指向一个地址,也可是以是一个应用程序或zip压缩文件
<a> 中间的内容 </a> //这里 "中间的内容" 可以是文字,图片,flash,其他的html元素等
<a href="http://www.baidu.com" ><img src="lengtu.jpg" /></a>
说明: 中间的图片,默认会有一个边框,想把它去掉,可以在图象标签上加上 border=0 即可
<a href="mailto:aaa@sina.com?subject=我要留言" >ddd</a>
（前提是，你电脑要安装了mailto才可以哦）
超链接的 target 属性,可以指定目标页面的显示位置
<a href="main.html" target="_blank" >测试</a>
超链接的定位功能
1) 要在定位的地方写上 <a name="pos1">
2) 链接写为 <a href="#pos1" >测试</a>
<body> <a href="#p1">第一章</a> <a href="#p2">第二章</a> <a href="#p3">第三章</a> <a name=p1 > //定位标记 <p> 第一章<br> ...<br> ...<br> ...<br> ...<br> </p> <a name=p2> //定位标记 <p> 第二章<br> ...<br> ...<br> </p> <a name=p3> //定位标记 <p> 第三章<br> ...<br> ...<br> </p> </body>
附: 也可以定位到别的页面上
title.html <a href="test.html#p1">第一章</a> <a href="test.html#p2">第二章</a> <a href="test.html#p3">第三章</a>
超链接标签的 title属性
<ul> <li><a href="" title="哈尔滨昨日大风其实没刮起来" >哈尔滨昨日大风...</a></li> <li><a href="" title="杀人犯又出现在看守所里" >杀人犯又出现在...</a></li> <li><a href="" >终于又出现了天鹅..</a></li> </ul>
六、图象标签
<img src="lengtu.jpg" />
border //边框
alt //图象不存在的时候,出现的文字 <img src="lengtu.jpg" title="鼠标滑过图片时出现的文字" alt="这是图片不存在的时候出现的文字" />
title //鼠标滑过图片时出现的文字
width
height
图文混排
<img src="lengtu.jpg" align="left" hspace="20" vspace="80">
web 上支持的图片格式
Gif (图形交换格式) 最多能保存256 色,支持透明色,支持动画效果
Jpeg(联合图象专家组) 不支持透明,最多可支持1670 万种色彩
Png(网络可移植) 支持透明,不支持动画,最多1670万种
注意,png 在ie6 下,背影透明是有问题的,在ie6下它的透明就不透了
绝对路径:提供目标文档的完整主机名,路径信息,及文档全称
相对路径:从档前文档开始的路径
-- 如当前文档和目标文档位置平行,则直接书写目标文档
-- 如当前文档和目标文档所在的文件夹位置平行,则书写为文件夹名/目标文档名 //即html高一级
-- 如果当前文档所在的文件夹和目标文档位置平行,则写为 ../目标文档名 //即图片高一级
根相对路径：从站点根目录开始的路径 以/开头
<hr />
size //线的上下宽度
noshade //不显示阴影 (只写上 noshade 即可)
color
width //线的左右宽度
七、图象地图
把一副图象分成多个区域,每个区域都指向不同的url地址,这些区域称为热点。
<img src="lengtu.jpg" usemap="#mymap" /> <map name="mymap"> <area shape="rect" coords="0,0,50,50" href=a.html alt="aaa"> <area shape="rect" coords="50,50,10,10" href=b.html alt="bbb"> <area shape="circle" coords="80,100,60" href=b.html alt="bbb" alt="xxx"> </map>
shape
rect 四边形
poly 多边形
circle 圆形 圆心坐标和半径
八、表格
表格,行列对齐,主要用来进行布局,表格中可以放入任意内容
<table></table>
属性
bgcolor //背景色
border //边框
bordercolor
bordercolorlight //边框明亮部的颜色 只有在border>0时才效
bordercolordark
cellspacing //表格单元格之间的距离 墙的厚度
cellpadding //表格中的内容,距边框的距离
width //表格宽度,可以取百分比,或绝对的值
height
<table border=5 width=100% cellpadding=20 cellspacing=0 bordercolorlight=white bordercolordark=black bgcolor="silver" > <tr> <td>数据</td><td>数据</td><td>数据</td> </tr> <tr> <td>数据</td><td>数据</td><td>数据</td> </tr> </table>
<tr></tr> // 代表行
align 水平对齐 center ,left, right
valign 纵向对齐 top ,middle , bottom
bgcolor //这一级的设置,会覆盖上级的设置
<td></td> //代表列
width 可以用绝对象素值,或表格的总宽度的百分比表示,注意是表格的总宽度的百分比；如果几个格加起来不到100%,则其余的部分会被平分；如果使用了百分比设置,要注意应该设置table 的width属性(为象素值或百分比)。
height
align
valign
colspan //横向跨列
rowspan //纵向跨行
nowrap 不换行
//下例:五行五列,只留外框,把中间的合并 <table border=1 width=400 > <tr> <td>数据</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td> </tr> <tr> <td>数据</td><td rowspan="3" colspan="3">数据</td><td>数据</td> </tr> <tr> <td>数据</td><td>数据</td> </tr> <tr> <td>数据</td><td>数据</td> </tr> <tr> <td>数据</td><td>数据</td><td>数据</td><td>数据</td><td>数据</td> </tr> </table>
九、表格标签
细线表格
1) 让表格的border=0
2) 让它的cellspacing=1
3) 设置表格背景色 bgcolor 为想要的颜色
4) 所有的tr 的 bgcolor 设为其他颜色
<table width=50% border=0 cellspacing=1 bgcolor=blue> <tr bgcolor="white"><td>数据</td><td>数据</td><td>数据</td></tr> <tr bgcolor="silver"><td>数据</td><td>数据</td><td>数据</td></tr> </table>
如何让表格只显示边框 里面的格不显示?
rules 属性
<table rules= none> //只留外框
<table rules="rows"> //只留外框和水平方向的线
表格还有一个frame 属性
可以控制哪些线显示,哪些隐藏
<table frame=above>
十、 帧标签
1) frameset
<frameset rows="20%,30%,*"> <frame src="top.html" ></frame> <frame src="second.html"></frame> <frame src="down.html"></frame> </frameset>
//frameset 不能嵌套在body标签中,但可以放在html标签中
border : 表示边框的宽度,如果0就看不到了
frameborder :
noresize="noresize" //不可以再调整大小
例子: 嵌套的 frameset
<frameset rows="20%,*" > <frame src="top.html" frameborder=yes ></frame> <frameset cols="15%,*"> <frame src="left.html"></frame> <frame src="welcome.html" ></frame> </frameset> </frameset>
附: left.html
<body> <ul> <li><a href="user_add.html" target="centerFrame" >用户添加</a></li> <li><a href="#" >用户删除</a></li> <li><a href="#" >原料管理</a></li> <li><a href="#" >商品管理</a></li> </ul> </body>
超链接的target属性
_blank //在新窗口弹出
-self //在本窗口弹出,是默认认值
_parent //在父窗口弹出
_top //在顶层窗口弹出
2) <iframe> //画中画 (iframetest.html)
<body> <table border=1 width=100% height=100%> <tr> <td width=15%><iframe src=left.html width=100% height=100%></iframe></td> <td bgcolor="silver" width=1%></td> //这行是打酱油的 <td><iframe src=welcome.html name="centerFrame" width=100% height=100% ></iframe ></td> </tr> </table> </body>
//例子,另外一种布局方式
<frameset rows="20%,*"> <frame src="top.html"></frame> <frame src="iframetest.html"></frame> </frameset>
十一、表单标签
1)表单
<form ></form>
--action: 要提交到的 url ,可以为空,如果为空,则访问自已 //也可以用mailto
--method: 提交方式 (get/post)
get方式,提交的数据量不能大于1M,会对中文和空格进行url编码,提交的内容,会出现在浏览器地址栏里
post 方式,可以提交的数据量大,内容不会出现在地址栏里
--target 和超链的target的属性很象,指的是服务端返回的内容在哪儿显示
--title 鼠标在表单上任何一个位置停留的时候显示的文字
--enctype 指定浏览器用哪种编码方法把表单数据传送给www服务器,该属性有两种取值
application/x-www-form-urlencoded(默认值 递交表单数据时,会对表单数据中的特殊字符进行编码处理,将编码后的数据交给www服务器处理)和 multipart/form-data
2)表单元素
<input type="submit" vaue="提交"/> //提交按钮,类似一个超链接,用来提交表单
<input type="reset" value="重置" /> //重置
<input type="text" name="userName" value="张三" size=200 maxlength=6 /> //文本框 size 表示框的大小,maxlength 表示最多能输入多少字符
--size
-- maxlength
-- value
-- readonly ->readonly="readonly" 或 readonly, 文本框就不能编辑了,但焦点可以进入
-- disabled 表示禁用,禁用的元素,不能提到服务器上
<input type=checkbox /> //复选框
--checked
--value //如果有多个复选框,提的时候,只提交上勾选的
//如果不写value,勾选上以后提交上去的值是 on
<input type="radio" /> //如果多个想成为一组,则name相同
<input type="radio" value="1" name="grade" /> 一班 <input type="radio" value="2" name="grade" /> 二班 <input type="radio" value="3" name="grade"/> 三班
<input type="hidden" > 隐藏域
<input type="image" src="lengtu.jpg" > //图象提交按钮
<select name="school"> //下拉框
<option value="chengdong">成栋</option>
<option>黑大</option> //如果不写value,则将中间的文本提交上去
<option>东方</option>
<option>guangshas</option>
</select>
-- size 属性 表示上面显示出几个
-- multiple
-- selected
<select name="group" > //带分组的 <optgroup label="第一组"> <option>张三</option> <option>张四</option> <option>张五</option> <option>张六</option> </optgroup> <optgroup label="第二组"> <option>张1三</option> <option>张2三</option> <option>张3三</option> <option>张4三</option> </optgroup> </select>
<textarea cols=15 rows =5 ></textarea> //文本域, 15列宽,5行高
<label>
//accesskey 是要用的快捷键
//for 后面跟的是要指向的元素的 id
<label for= userName accesskey=u >请输入用户名<u>u</u><label> <input type=input name=userName id=userName> <label for= password accesskey=p> 请输入密码<u>p</u><label><input type=input name=password id=password>
十二、meta标签
meta：
有两种类型的<meta>,用不同的属性名来划分,这两种属性名为 name 和 http-equiv
<meta name="某个设置值" content="对该值设置进行具体补充说明的信息"> <meta http-equiv="某个设置值" content="对该值进行具体的补充说明信息">
name 属性用于在网页中,加入一些关于网页的描述信息,例如,网页的关键字,网页的描述信息等。
http-equiv 属性用于在网页中加入一些关于网页的描述信息,例如:告诉浏览器是否缓存网页,使用什么样的字符集显示网页内容,隔多长时间自动刷新网页等。
消息头:除了内容,还在内容之间传一些叫消息头的内容给浏览器,使用查看源文件的方式是看不到的，相当于服务器传给浏览器的暗号信息。
Meta 标签的 name 属性设置
--Keywords ,告诉网络机器人,把content中的内容做为关键字
例如 <meta name=keywords content="vc,java">
--Description ,告诉网络机器人,把content中的内容做为网页的简要描述
--Robots 告诉网络机器人 设置值 index(默认,可以检查和收录),noindex,follow(可以顺着这个页面的超链接接着往下查找),nofollow,all(前面两个都可以做),none
--Generator 编辑网页用的工具软件
--Author
--Copyright 版权
Meta 标签的http-equiv属性设置 (模拟响应消息头的)
-- Content-Type 说明网页文档内容的mime类型,及文本内容所使用的字符集编码,用于告诉浏览器使用某种字符集编码来查看这个网页的内容
普通的mime 类型,都是text/html
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
-- Refresh 模拟刷新的消息头
<meta http-equiv ="Refresh" content="1;url=http//:www.baidu.com"> //一秒钟以后刷的百度
有的时候,用户的留言可能就是上面的这语句,用来做恶作剧
-- Expires 用于设置网页的到期时间 //有的网页会被缓存,如果超过了这个头中指定的日期,浏览器必须到指定的地点下载这个网页和它配对的 content 的值应该是个时间格式的文本<meta http-equiv="Expires" content="Mon,12 May 2001 00:20:20 GMT">将content设置为0 可以禁止浏览器使用缓存页面
--Pragma
可以禁止浏览器在本地计算机上缓存当前页面
这时content 的属性应设置为 no-cache
<meta http-equiv="Pragma" content="no-cache">
--Cache-Control
<meta http-equiv="Cache-Control" content="no-cache"> //http1.1中. 这个更可靠
--Page-Enter 和 Page-Exit 设置浏览器则进入或退出一个页面的时候,采用的显示效果 (旋入,转出等)
<meta http-equiv="Page-Enter" content="revealTrans(Transition=23,Duration=1.000)">
--Windows-target 强制面页在某个窗口显示
例如,要防止自己的网页被别人当作一个frame页面调用,可以使用
<meta http-equiv="Windows-Target" content="_top">
十三、头元素
<head></head>
头元素是指位于 中间的元素
<title></title>标签对 //网页的显示标题
<base> 标签
用于指定网页中超链接的基准地址,以改变网页中所有使用相对地址的 URL 基准地址
<base href="http://www.baidu.com/test" target="_blank"
href 属性,指定了网页中抽有例用Http相对URL地址的基准地址,如果网页中有如<a href="index.htm"></a>这样的超链接,它不会再象没有使用<base>标签时那样表示当前网页相同目录下的index.html,而是指向了http://www.baidu.com/test/index.html页面，这里的target属性,是设置该网页中所有超链接的target,可以省去一个个设的麻烦。
<head> <base href="www.baidu.com" target="_blank"> </head> <body> <a href=top.html>aaaa<a> //设置了base后,点它,相当于访问 www.baidu.com/top.html </body>
<link> 标签
定了当前文档和另一个文档或资源之间的关系
href 属性,另一个文档或url资源的地址,必须
rel 与 rev 定义了link连接的两个资源之间的关系类型,这两个必须有一个
<link rel=stylsheet type=text/css href="url">
<link rel="Shortcut Icon" href="aaa.ico"> 自定义收藏下面的图标
title 说明两个链接的资源之关的关系,也可以是描述目标资源的字符串,可选
type 目标资源的mime类型,例如 Type=text/css Type=text/javascript
Media 说明目标资源被接收的介质或媒体 screen(缺省) pring, aural(扬声器) tty,电传打字机,tv 电视,all 所有
<script> ...
<style> ...
十四、分区标签
<div></div> //division 行级元素
<div> 可以组合其他元素,但本身不能嵌套在段落标签中,否则结果是不确定的
<span><span> //块级元素
div 主要是用来定义区块 但span是文本级的元素,下面的例子显示出了他们的区别
<div>aaa</div>bbb <br> <span>aaa</span>bbb
