HTML基础入门：标签、属性与布局详解

需积分: 1 169 浏览量更新于2024-07-19 收藏 292KB PDF 举报

本资源是一份详尽的基础HTML知识总结，涵盖了HTML的各个核心模块，适合初学者或希望提升技能的人员学习。主要内容分为九个课时： 1. **第一课时** - 基本HTML结构：介绍了HTML的基本构成，包括块级和行级标签，如`<html>`, `<body>`, `<div>`, `<p>`等，并通过实例展示它们的使用。 2. **第二课时** - 超链接标签属性：详细讲解了超链接标签的使用，包括锚链接的常见用法，以及不同页面间和同一页面内的锚点链接。此外，还涉及表单元素的介绍，如`<form>`, `<button>`, `<fieldset>`等，并演示了Dreamweaver工具的应用。 3. **第三课时** - 表格布局：教学如何使用`<table>`标签进行布局，包括合并单元格、制作报表等功能。 4. **第四课时** - 引用CSS样式：区分了内部、行内、外部三种引用CSS的方式，以及文本样式设置，为后续的布局设计打下基础。 5. **第五课时** - CSS+DIV布局：涉及层叠样式、边框、背景图片、列表和超链接样式，这些都是构建网页布局的重要元素。 6. **第六课时** - 盒子模型：深入理解margin, padding和内外边距的概念，以及圆角边框和盒子阴影等常用属性。 7. **第七课时** - 元素定位：讲解浮动定位(float)、元素定位(position)以及透明度设置。提供了实例代码帮助理解和实践。 8. **第八课时** - 浮层排序：探讨z-index属性在相对定位和绝对定位下的应用，以及与`display`属性的结合使用。 9. **第九课时** - 框架(frame)：介绍框架的使用，包括`<frameset>`和`<frame>`标签，如何进行纵向和横向分割，以及嵌套框架和目标框架窗口的设定。整个课程中，除了理论讲解，还强调了实践经验的重要性，特别提到了在学习过程中可能遇到的不足之处，并建议定期复习关键知识点，如表格布局、CSS+DIV布局、浮动和定位、z-index以及框架技术。通过系统的学习和实践，读者可以掌握HTML和CSS的基本技能，为网页开发打下坚实的基础。

第二课时基本标签

1.超链接标签属性介绍

1.1 Target 打开方式

1.2 _blank 另开选项卡

1.3 _self 当前选项卡

1.4 href 选择要链接文件

代码示例如下：

<a href=”#l” target=”_blank” >测试 1</a>_blank 打开新窗口

<a href=”#” target=”_self” >测试 2</a>_self 返回当前窗口

<a href=”#” target=”_self” >测试 3</a>#表示本身页面

<a href=”*.html” target=”_blank” ><img src=”.*jpg”></a>图片链接另开一个窗口

相对目录

<a href=”../web.html” target=”_self” >上级目录文件</a>上级目录文件

<a href=”../../web.html” target=”_self” >上上级目录文件</a>上上级目录文件

2.锚链接常见基本用法

2.1 <a href=”#C1” >

标记

</a>

“

#c1

”表示标记位置

2.2 <a name=”C1” >

目标

</a>

“

”表示要链接到标记位置

3.不同页面之间锚链接

3.1 以下是文件 index.html 代码，锚链文件 login.html 标记位置#apk

<a href=”login.html#apk”>跳转到 login.htm 页面找到标记 name=”apk”元素的位置</a>

3.2 邮箱链接<a href=”mailto:@qq.com”>邮箱链接</a>

3.3 注释：

4.相同页面之间锚链接

<a href=”#apk”>标记</a>标记

<a name=”apk”>链接到标记</a>链接到标记

5.特殊符号

空格：

&bnsp;

代表空格

剩余17页未读，继续阅读

qq_16390707

粉丝: 0

HTML基础入门：标签、属性与布局详解

HTML5基础知识详解

前端开发入门指南：HTML基础知识详解

网页设计基础课程概述：Dreamweaver、HTML、CSS基础知识

html基础知识

HTML基础知识

HTML知识框架，基础的HTML知识

html文档基础知识

html要点基础技术知识

html基础知识学习PPT4

HTML5基础知识归纳汇总

最新资源