html学习笔记

来源：互联网发布：南威软件集团编辑：程序博客网时间：2024/04/29 09:53

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

selected 表示选中这一项

multiple 同时选中多项

各个条目 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 选中选项

1.2.1.4 textarea

多行文本域

cols 可视宽度

rows 可视高度

1.2.2 注释

注释

1.2.3 head

1.2.3.1 title 标题

标题 title

1.2.3.2 base 超链接基址

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

1.2.3.3 link 超链接

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

rel是 html→url 间关系

rev是 url→html 间关系

1.2.3.4 meta

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

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>

标题一

标题二

第一段

第二段 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 超链接

1.2.4.4 列表

ul无序列表

列表
列表
列表二
列表

ol有序列表

列表
列表
列表二
列表

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

1.2.4.5 图片

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

1.2.4.6 表格

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

示例

员工记录姓名性别张三女李四男