`
eagle0824
  • 浏览: 231436 次
  • 性别: Icon_minigender_1
  • 来自: 镇江
社区版块
存档分类
最新评论

html笔记

阅读更多
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”   <!--本网页URL下的01.jpg-->
"images/01.jpg"  <!-- 本网页所在的url地址下查找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、特殊字符(注意后面的分号)
&lt; <
&gt; >
&reg 注册商标
&amp; &
&nbsp; 空格
&copy; copyright
&trade; 商标™
&quot; “
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 浏览器窗口
分享到:
评论

相关推荐

    HTML 笔记.zip

    这个“HTML笔记.zip”文件显然包含了关于HTML的学习资料,可能包括了基础概念、语法、元素、属性、标签等内容,帮助初学者或进阶者巩固和理解HTML的核心知识。 在HTML中,我们通过一系列的标签来构建网页结构。例如...

    HTML笔记传智讲师视频笔记适合初学者

    "HTML笔记传智讲师视频笔记适合初学者"这个标题暗示了这是一份针对初学者的教程资料,可能包含了从基础到进阶的HTML知识,通过传智讲师的教学方式来讲解。 描述中的"html学习笔记"表明这是关于HTML学习的过程记录,...

    html笔记.doc

    在这个HTML笔记中,主要涵盖了关于HTML和CSS的一些关键知识点,包括元信息设定、文本格式化、列表创建、表格构建、样式定义以及表单元素等。 首先,`&lt;meta charset="UTF-8"&gt;`是一个非常重要的元标签,它定义了文档...

    HTML笔记总结(1).md

    HTML笔记总结(1).md

    HTML笔记.txt

    自己总结的html笔记标签 非常适合初学者参考大牛复习 每个标签都标注了用途 需要的可以下载。

    韩顺平html笔记

    在韩顺平的HTML笔记中,我们可以学习到关于HTML的基础知识,包括文本格式化、超链接、图片元素以及表格的创建。以下是这些知识点的详细说明: 1. **文本格式化**: - `&lt;font&gt;`标签:在HTML4中,`&lt;font&gt;`标签用于...

    HTML笔记资料--HTML基础CHM

    HTML笔记资料包含了一系列关于HTML的基础知识,从语言剖析到标签详解,再到速查手册,涵盖了学习HTML所需的重要概念和实践技巧。 首先,"HTML语言剖析"部分可能涵盖了HTML的基本结构,包括文档类型声明、HTML元素、...

    HTML笔记.pdf

    "HTML笔记.pdf" HTML笔记.pdf是一个详细的HTML笔记,涵盖了HTML的基础知识、标签、属性、事件、表单、超链接、图像、表格、列表等内容。下面是从文件中提取的相关知识点: 1. HTML基础知识: * DOCTYPE html是...

    HTML笔记,html零基础入门视频课程(最适合初学者的教程)

    本教程“HTML笔记,html零基础入门视频课程”是为初学者设计的一套系统学习资源,旨在帮助新手快速掌握HTML的基本概念和实际应用。 一、HTML基本结构 HTML文档由一系列的元素组成,这些元素通过标签来定义。每个HTML...

    html笔记.rar

    这本“html笔记”压缩包文件显然是针对HTML基础知识的整理,旨在帮助学习者掌握HTML的核心概念和使用技巧。 HTML由一系列元素组成,每个元素都由标签定义。这些标签告诉浏览器如何呈现网页内容。例如,“&lt;html&gt;”是...

    HTML笔记(完整版).md

    该笔记适合0基础学员学习,希望对各位学者有所帮助!

    html笔记.txt

    Request(Javax.servlet.ServletRequest)它包含了有关浏览器请求的信息.通过该对象可以获得请求中的头信息、Cookie和请求参数。 Response(Javax.servlet.ServletResponse)作为JSP页面处理结果返回给用户的响应存储在...

    HTML笔记.xmind

    HTML笔记.xmind

    HTML笔记.rtf

    HTML笔记.rtf

    HTML笔记(20220104194236).pdf

    HTML笔记(20220104194236).pdf

    html笔记(20220104202912).pdf

    html笔记(20220104202912).pdf

    HTML笔记(20220104202926).pdf

    HTML笔记(20220104202926).pdf

    html笔记(20220104203448).pdf

    html笔记(20220104203448).pdf

    Html笔记(20220104213806).pdf

    Html笔记(20220104213806).pdf

    HTML笔记.md

    HTML笔记.md

Global site tag (gtag.js) - Google Analytics