html学习笔记

 

 

 

 

HTML学习笔记

 

 

 

1.1 杂谈

1.1.1 htm与html的区别

htm与html的区别

近来有几个人问关于html与htm格式的区别，这个问题主要出现在虚拟主机上，如果默认首页是.html，那传上去的首页就必须是html格式，htm格式就不会作为首页显示。我自己作下说明,也作为一个记录吧.

为什么会出现htm与html两种扩展名？
很多人不知道htm与html有什么不同，实际上没有什么不同。

那为什么出现两种文件格式呢？
htm是来源于老的8.3文件格式。

什么是8.3文件格式？
这是一种在老的16位Win95或Win98文件系统的短文件名文件格式，扩展名只限于3位，文件名只限于8位。
如果要与16位系统交互，比如说，要把一个路径传给一个16位的程序，你就不能用长文件名，而必须对它进行转换。例如把“C ： /MyLongestPath/MyLongerPath/MyFilename.txt”转换成“C ： /Mylong~1/MyLong~2/Myfile~1.txt”

了解这个有什么用？
在FAT磁盘格式下的DOS中只支持8.3文件格式，如果你要在这个环境下做应用，应该要注意这个文件格式问题。在NTFS下，默认可以兼容这种文件格式，同时也支持长文件名，你也可以通过调整注册表来取消对8.3文件格式也支持。

1.2 基础

1.2.1 表单

1.2.1.1 select

下拉列表   select

 

< OPTION value ="C++"  selected >C++ </OPTION>

 

selected  表示选中这一项

 

multiple  同时选中多项

 

 

C++C#jspPHP

 

各个条目   option

1.2.1.2 form

表单声明标记,不能嵌套

 

action      处理方法
method    数据传递方式
enctype   编码方式

1.2.1.3 input

基本表单域

 

type 类别

text          文本框
password   密码框
checkbox   复选框
radio         单选框
image       图片

submit      提交

reset         取消

hidden      隐藏域

 

name        表单域名称

maxlength   字符数限制

size        显示大小

value       初始值

checked     选中选项

 

< FORM >
< P >用户名 &nbsp; < INPUT size=10 maxsize ="8" > < BR >
密 &nbsp; &nbsp;码 &nbsp; <INPUT size=10
type=password> < BR >
爱 &nbsp; &nbsp;好 &nbsp; < INPUT value=c++ type=checkbox > C++ &nbsp;
< INPUT value=C# CHECKED type=checkbox >C# < BR >
性 &nbsp; &nbsp;别 &nbsp; < INPUT CHECKED type=radio >男
< INPUT type=radio >女 < BR >
< INPUT type=image > < BR >
< INPUT value=提交 type=submit > < BR >
</P> </FORM>

 

 

 

 

用户名 
密  码 
爱  好  C++  C#
性  别 男女

1.2.1.4 textarea

多行文本域

 

cols 可视宽度

rows 可视高度

1.2.2 注释

注释

<!-- 内容 -->

1.2.3 head

1.2.3.1 title 标题

标题  title

< title >标题 </title>

 

1.2.3.2 base 超链接基址

基准超链接地址,之后只要提供相对路径即可

< base href ="URL" >

1.2.3.3 link 超链接

< link rev ="关系" rel ="关系" href ="URL" >

应用在head中,定义链接文件和本网页文件之间的关系

rel是 html→url 间关系

rev是 url→html 间关系

 

1.2.3.4 meta

标记和文件内容相关的信息

 

< meta http-equiv ="keywords" contents ="sports" >

 

1.2.4 body

1.2.4.1 文本标记

段落 <p></p> 

    段落前后有空行

无格式文本 <pre></pre>

    内部文字以文本方式显示,tab可以起作用,并且不会自动换行

标题 <h1></h1>

换行 <br>

分割线 <hr>

 

示例

<h1>标题一</h1>
<h2>标题二</h2>
<p>第一段</p>
<p><pre>第二段 tab起作用</pre></p>

<hr> 
<p>第三段<br>下一行</p>

 

 

标题一

标题二

第一段

第二段 tab起作用

---

第三段
下一行

 

1.2.4.2 样式

逻辑样式

强调             < em >
加强语气     < strong >
列表              < li >
引用           < samp >
使用者输入       < kbd >
变量               < var >
定义               < dfn >
应用               < cite >

 

 

实际样式

粗体             < b >
斜体             < i >
下划线            < u >
打字机           < tt >

 

示例

< p >
< em >em </em>
< strong >strong </strong>
< li >li1 </li> < li >li2 </li>
< samp >samp </samp>
< kbd >kbd </kbd>
< var >var </var>
< dfn >dfn </dfn>
< cite >cite </cite>
< br >
< b >bold </b>
< i >italic </i>
< u >underline </u>
< tt >typewriter </tt>
</p>

 

 

em strong

• li1
• li2 samp kbd var dfn cite
  bold italic underline typewriter

 

1.2.4.3 超链接

< a href ="URL" > </a>
< link >
< img >
< input src ="URL" >
< isindex >
< form action ="URL" >

1.2.4.4 列表

ul无序列表

< ul >
< li >

 

• 列表
• 列表

  列表二

• 列表

 

 

ol有序列表

1. 列表
2. 列表

   列表二

3. 列表

 

dl列表

< dl > </dl>        列表标记
< dt >                列表项目
< dd >               项目解释
< dl compact >   紧密排列

 

示例

 

< dl >
< dt >术语 </dt> < dd >第一个术语 </dd>
< dt >术语 </dt> < dd >第二个术语 </dd>
</dl>
< dl compact >
< dt >术语 </dt> < dd >第一个压缩术语 </dd>
< dt >术语 </dt> < dd >第二个压缩术语 </dd>
</dl>

 

 

术语

第一个术语

术语

第二个术语

术语

第一个压缩术语

术语

第二个压缩术语

 

dir menu  列表

< ol >
< li >

1.2.4.5 图片

< img src ="URL" align ="right" />
align 对齐方式
alt 加注释
ismap

1.2.4.6 表格

< table >
< caption >      标题
< tr > </tr>       行
< td > </td>      列
< th > </th>     一行/列的标题

示例

 

 

< table width ="70%" border ="1px" >
< caption >员工记录 </caption>
< tr > < th height ="50" >姓名 </th>
< th height ="50" >性别 </th> </tr>
< tr > < td >张三 </td> < td bgcolor ="#FFFF66"" >女 </td> </tr>
< tr > < td >李四 </td> < td align ="center" >男 </td> </tr>
</table>

 

 

员工记录

姓名	性别
张三	女
李四	男

 

1. html