html笔记

eagle0824

浏览: 231661 次
性别:
来自: 镇江

最近访客更多访客>>

qq_33547225

陆-凌

709007001

littlev520

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html&&css

HTML CSS 框架浏览器编程

HTML Hyper Text Markup language
HTTP HyperText Transfer Protocol
1．HTML语法标记
标记(标签或元素)的形式
<元素名>内容</元素名>    Eg. <font>文字</font>
<元素名/>                Eg. <img src=“…”/>
<元素名>                 Eg. <br>
位于尖括号内，可以具有属性值
属性值必须“” 或 ‘’，不写也可以解析，但是不推荐（不符合XHTML）
有开始必须有结束(XHTML)；标签不能嵌套
不区分大小写；但应该养成良好的编程习惯，推荐都用小写
2、Html文档结构
<html>
<head>
<title>
典型HTML
</title>
</head>
<body>
我会努力的！
</body>
</html>
 
3、head中的常用标签
<title>文字</title>   “文字”将显示在浏览器标题栏上
<meta>：用于设置一些头信息
<meta http-equiv=“content-type” content=“text/html;charset=gb2312”> //当前页面的设置（http-equiv 指明要设置的项目；content指明设置项目的内容）
<meta http-equiv=“refresh” content=“3;url=http://www.foo.com”>//3秒钟之后刷新当前页面刷新之后指示url 后的页面；
<meta name="keywords" content="your keywords">//设置网页的关键词（搜索引擎）
<meta name="description" content="your description">//对网页的描述
<meta http-equiv="expires" content="0">//不再访问方设置缓存
<meta http-equiv="pragma" content="no-cache">//不再代理服务器上设置缓存
<meta name="generator | author | copyright" content="…..">//网页由什么制作，作者，版权声明
<style>…</style>定义CSS格式
<Script language=“”>…</Script>   用于定义脚本，Eg. Javascript
<link> …..< base>网页中的连接都是以base 指定的为基础
4、<body>（属性）(css中设置)
<body   bgcolor=“#ffffff”   text = “#ff00fff” link=”#00ff00” alink=”#000000” vlink=”#000000” background="img_url" >
你好！
<a herf = “0.1.html”>连接到0.1.html</a>
</body>
 色彩值 “#rrggbb”   Eg. <body bgcolor=“#ffffff” > 红绿蓝数字值
 <body background=“img_url”    --图片地址 >
 body其他属性 text link alink vlink bgcolor leftmargin topmargin…
5、锚点标签--<a>
<a name="AnchorName">anchorName</a>
在该位置定义名字为AnchorName的锚，就是给这个位置起了个名字，别人可以用这个名字直接链接到该文件的这个位置
超级链接，跳转到另一文件 <a href=“url” target=“TargetWindow”>文字 </a>
当鼠标点击“文字”时，TargetWindow的内容将会跳转到“url”，不指定target时在本窗口跳转。
连接到文件的特定部分
Href=“url#point”连接到url的point部分；在url文档中用<a name=“point”></a>标识
 Target 见“框架“部分
6、路径问题
本地路径     "c:\dir1\dir2\…"
绝对路径     "http://www.foo.com/img_url.jpg
相对路径（相对于url地址）
“01.jpg”   
"images/01.jpg" 
"../../images/01.jpg"    
"/images/01.jpg" = "http://mysite/images/01.jpg
Eg. <a href=“”></a>；Eg. <img src=“”/>
7、URL URI URN
URL：Uniform Resource Locator（统一资源定位符）
网络协议＋主机名＋端口号＋资源名（定位标记）
http://www.bjsxt.com:80/index.html#top带有参数的url 及 url编码问题见Servlet / JSP部分
URN：Uniform Resource Name
持久可用的资源标准名称   例如邮箱名mashibing2004@sina.com
URI：Uniform Resource Identifier 包含URL和URN
8、分隔线--<hr>
语法
<hr size=“pixels” align=“align” width=“pixels” color=“#” noshade>
Size 高度；Align 对齐方式，可以取left或right；Noshade 无阴影效果；颜色
Eg. <hr noshade color=“#ff00ff” width=“600” size=“8” align=“left”>
9、标题字体大小--<h#>
<h#>…</h#> #=1、2、3、4、5、6
按标题级别用黑体字显示标题内容；自动插入空行；<h1>最大；<h6>最小
10、字体设置(css中设置)
<font face=“” size=“” color=“”>…</font>
face定义字体
size 1   2   3   4   5   6   7；实际 8 10 12 14 18 24 36（pixels）
<font size=“+1”><font size=“-1”>
Color可以使用预定义的名字,也可以使用数字；red、blue、black…
<tt></tt>通常是打字机风格字体
<cite></cite>通常是引用方式（斜体）
<em></em>强调（通常是斜体加粗体）
11、设置文字显示
名称 HTML代码
黑体 <b></b>
斜体 <i></i>
下划线 <u></u>
中划线 <s></s>
闪烁 <blink></blink>
上标 <sup></sup>
下标 <sub></sub>
12、特殊字符（注意后面的分号）
< <
> >
&reg 注册商标
& &
  空格
© copyright
™ 商标™
" “
13、文字的布局
 <p>…</p>    分段落现实
 <div>…</div> <span>…</span>   分块显示
 <ul>…</ul>   <li type=“disc circle square”>….     符号列表
 <ol>…</ol>
 <li>…
 数字列表
 <br>   换行
 <nobr>…</nobr>   不换行
 <pre></pre>保留原有格式
 <marquee></marquee>跑马灯效果
 <blockquote></blockquote>
 <dl><dt><dd>
14、对齐—align    <h1 align=“”>   <div align=“”>   <table align=“”> <hr align=“”>
取值:left right center top middle bottom
<center>……</center>   对齐到中间
15、图片   <img src=“” align=“” alt=“” border=“”>
Src 图片路径，一般使用相对路径   Alt 图片无法显示时显示的文字
Border 边框的厚度   Align = left right (top middle bottom 图文混排时用于和图片的对齐)
16、表格—重点掌握
<table width=“” align=“” border=“”>    <!—width %或像素值-->
   <tr>
      <th width=“” align=“”>…</th> <!—th 表示表头thead   可选 -->
      <th>…</th>…
   </tr>
   <tr>
      <td width=“” align=“” valign=“”>…</td> <!—单元格valign（top，middle，bottom）-->
      <td rowspan=“” colspan=“” bgcolor=“”>…</td><! – colspan 跨列rowspan 跨行-->
      ……
   </tr>
</table>
17、表单—重点掌握
作用收集用户信息；数据库查询；收发email
用户不仅仅是信息的被动接受者，还可以通过表单成为信息的主动发出者
 <form>……</form>
 <form>的属性
 Method      (get post)
 Get 发送较少数据（256byte），显示在url中，url/userinfo?username=张三&password=hehe
 Post数据长度无限制，不会显示在url中
 Action    Form中数据交给服务器端哪个程序进行处理
 Eg. <form method=“post” action=“user.jsp>……</form>
18、位于表单中的输入标签
位于<form>之中，接收用户输入
格式：<input type=“” name=“”>
type: text radio checkbox password hidden select submit reset button textarea image
name: 提交到服务器端的变量的名字
19、表单中的输入标签
文本框 text <input type=“text” name=“” value=“” maxlength=“” size=“”>
maxlength – 最大字符长度   size – 文本框宽度（字符）
密码区域—特殊的单行文本输入框 password
<input type=“password” name=“” value=“” size=“” maxlength=“”>
单选按钮 <input type=“radio” name=“” value="" checked>
典型用法 : 同一名字，不同的值   错误的用法 : 不同的名字
复选框   <input type=“checkbox” name=“” value=“” checked>
典型的用法 : 同一name，不同的value
隐藏域    <input type=“hidden” name=“” value=“”>
不显示在网页中   通常用作向下一个页面传输已知信息或表单的附加信息
select
列表框
<select name=“” size=“” multiple>
<option value=“” selected>…</option>
<option value=“”>…</option>
   ……
</select> Multiple 表示多重列表框，可以多选；Selected 被选中
多行多列文本框
<textarea rows=“” cols=“” wrap=“”>…</textarea>
Rows: 行数；Cols: 列数；
Wrap: Off : 不换行
Soft: 自动换行，并且如果行末有英文单词，会将整个单词移到下行
Hard: 自动换行，但会截断行末的单词
button
<input type=button name=“” value=“”> 按下该按钮没有反映
<input type=submit name=“” value=“”> 按下该按钮，该form中所有的输入信息将被提交到服务器
<input type=reset name=“” value=“”> 按下该按钮，该form中所有的输入部分将被重置
<input type=“image” src=“”>    点击图片提交
框架
<html>
<head><title>Frame</head></title> <!—注意没有body-->
<frameset rows=“row1,row2…” cols=“200,30%,*”>
   <frame name=“” src=“” noresize> <!—noresize 不允许改变大小-->
   <frame name=“” src=“” scrolling=“”>
   ……
</frameset>
</html>
 嵌套
 <frameset cols=“20%,*”>
   <frame name=“left” src=“a.htm”>
   <frameset rows=“40%,*”>
      <frame name=“righttop” src=“b.htm”>
      <frame name=“rightbottom” src=“c.htm”>
   </frameset>
</frameset>
链接、表单与框架
 <a href=“” target=“”>…</a>
 <form action=“” target=“”>…</form>
 Target:
 Frame name
_blank 新窗口；_self 本窗口；_parent 父窗口（本窗口的上一级窗口）；_top 浏览器窗口

分享到：