HTML基础知识点-入门可编辑范本

HTML（HyperTextMarklipLanguage）超文本标

签语言

HTML：网页的“源码”

浏览器：”解释和执行“HTML源码的工具

〈head〉标签

tml文档的首要部分。记录文件基本资料，如作者、编写时间。

head部分所包含的元素:

titie文档标题

meta描述非htm1标准的一些文档信息

link描述当前文档与其他文档之间的连接关系

base定义体试时默认的外部资源

script脚本程序内容

style样式表内容

〈body〉标签

描述文档内容，文件资料，即在浏览器上看到口勺网站内容。

<title>4小签（head标签中）

tit1e包含的内容将会被显示在浏览器窗口的标题栏中.

<meta）标签（head标签中）

。描述文档类型和字符编码

。描述搜索关键字和描述

<metahttp-equiv="content-type"content="text/html;charset="GB2312"）

通过此语句设定语言的编码方式.（简体中文GB3212蹩体中文BIG5）

<metaname=Mkeywords"COntent（内容）="html,css,javascript”>

<metaname="descripti0IT（描述，描写）content="网页制作"〉

这些信息是不可见的，只是提供给那些搜索引擎使用。

HTML标签分类：

。块级标签:显示为块状前后隔一行（占一行）

。行级标签：按行逐一显示

分类的好处1方便后续布局设计

基木块级标签

标题标签vh1>一级标题（/h1><h2）二级标题V/h2〉...<h

6>六级v/h6〉

水平线标签〈hr/〉

图片标签img

段落〈P〉</p>

换行<br/>

用于布局的块级标签--列表

无序列表（以-分割）

有序列表（以1.2。3。4分割）

。自定义列表

有序列表标签

<ol>

<1i>列表项l</li>

。<1i>列表项2（/1i>

。〈li>列表项3</li〉

</ol）

无序列表

<ul>

<1i>列表项K/li）

（li>列表项2v/1i）

<1i〉列表项3V/1i>

</ul>

自定义列表（适合用于图文混排）

<d1>

<dt>标题</dt）（出是块状标签）

〈dd>描述l</dd>

（dd）描述2V/dd〉

<dd）描述3V/dd>

〈/dl>

图文混编

<d1〉

〈dl〉图片HTML代码</dt）

（dd）描述〈/dd）

</d1>

分区标签

o<div>（当做结构化块使用，相当于一个容器）

布局经验

div+ul/o1用于分类菜单或导航等

div+d1+dt+dd。。用于图文混编

Iable+trItd。用于图文布局或显示数据

form+table+tr+td。用于布局表单

行级标签vspan>

vspan>文本等行级内容〈/span）

W3C万维网联盟

列的标准

-HTML内容方面:XHTML（HTML与XML过渡产品）

。标签名和属性名必须久写

。。标签必须关闭

。。属性阵须用括号引起来

。。。标签必须正确嵌套

。。必须添曲文档类型声明

样式美化方面：CSS

结构文档访问方向：OM

页面交互方面：Script

原则：

1.内容和表现（样式）分高便于后期维护和修改（文字内容与文字字体分离）

2.HTML代码应能表示页面的内容语义，便于搜索引擎搜索（列表需用列表标

签，不能使用段落标签）

超链接

语法（ahref="url”target="目标窗口位置”〉链接文本或图像〈/a>

超链接分类

页而间链接

。锚链接

。功能性链结

表格

（tab1e）（两行三列）

<tr>（行）

〈td>（歹ij）</td>

<td>（列）</td>

<td）（列）</td〉

</tr>

〈tr>（行）

。<td>（列）</td>

®<td）（列）</td）

〈td>（列）</td>

</tr）

</table）

跨行/跨行

<tabIeborder="l”〉

<tr）

o<tdrowspan="3"〉手机充值<7td>（跨行）

®<td）IP卡</td>

vtd>网游</td>

</tr>

<tr>

g<td>移动</td>

（td>联通（/td>

</tr）

3（tr>«

o〈tdco1span""2">联通</td>(跨列)

</tr>

</table)

表单(接受用户输入信息，与后台交互)

(form)

(table,〈/table)

®<tr>

6ytd></td〉

</tr)

〈/form〉

（formaction="表单提交地址"method二”提交方法”〉（method

post/get）

。文本框、按钮等表单元素

</form>

Get：提供数据量小，提交的数据在地址栏上可见

Post：提供数据量大，提交的数据不可见（比较安全）

框架

（iframe>

。。可以把一个页面嵌入到另一个页面中

框架的两类用途

ho显示多窗口页面v「rameset〉框架集（不能放在body内）

2。页面复用使用viframe/〉（可以放在body中）

创建框架网页步骤

创建各子窗口