本文详细介绍了HTML的基本结构和常用标签，包括标题、段落、预格式化、列表、表格、表单等。同时深入讲解了CSS的基础知识，如发展历史、作用、添加方式以及常用的文本、颜色、字体、背景和超链接属性。还涵盖了绝对路径和相对路径的区别。
目录
一、HTML文件基本结构
二、HTML常用标签
1. 标题h1~h6
（字体默认加粗） 格式：<h1>标题</h1>
效果如下：
2.段落p、段内换行</br>、水平线</hr>
格式： <p>A1</br>A2</p>
</hr>
显示：
A1
A2
3.预留格式pre
定义预格式化的文本，文本中的空格和换行符将会被保留。
4.空格字符  ；
5.区域div
6.上角标<sup></sup>
7.表格<table></table>
行<tr></tr>
格<td></td>
表头单元格<th>
效果如下：
8.无序列表<ul>
列表项<li>
9.有序列表<ol>
列表项<li>
代码如下：
效果如下：
10.强调(斜体)<em></em>
11.重点强调(粗体)<strong></strong>
12.自定义列表dl 列表项dt 描述dd
例如： <dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
</dl>
效果如下：
13.表单form
格式:：<form action="数据处理网页">
表单元素
</form>
表单元素基本标签：
a. 文本框、密码框： <input type=’text/password“/>
b.提交按钮： <input type="submit" value="提交"/>
重置按钮 ：<input type="reset" value="重置"/>
c.单选框、复选框： <input type="radio/checkbox"/>
d.下拉列表框：<select></select>其中嵌套了标签项<option>定义选项
e.文本域textarea：<textarea rows="行数" cols="列数">文本</textarea>
代码如下：
效果如下：
14.段内分组<span></span>
特殊的行内元素突出标签
15.头部排版标签<header></header>
16.底部排版标签<footer></footer>
17.导航排版标签<nav></nav>
18.独立区域排版标签<article><article>
三、超链接及图像
1.超链接 a
格式： <a href="网址">文字或图片</a>
href="#" 空链接
2.图像 JPG GIF PNG
JPG：有损压缩，色彩丰富
GIF：简单动画，背景透明
PNG：无损压缩，透明交错动画
格式例如：<img src="w3school.gif" alt="头像">
src属性：路径+文件名
四、绝对路径和相对路径
1.绝对路径（以根目录为基准）
2.相对路径（以该文档所在的位置为基准）
绝对路径为：<img src="C:/site/logo/gif"/>
相对路径为：<img src="logo.gif"/>
相对路径为：<img src="../logo.gif"/>
相对路径为：<img src="../images/logo.gif"/>
五、CSS基础
1.CSS发展历史
从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTM L变的越来越杂乱，而且HTML页面也越来越臃肿。于是 CSS便诞生了。
1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯正在设计一个名为Argo的浏览器，于是他们决定一起设计CSS。
其实当时在互联网界已经有过一些统一样式表语言的建议了，但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中，一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合每个人的爱好。
哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年的www网络会议上CSS又一次被提出，博斯演示了Argo浏览器支持CSS的例子，哈肯也展示了支持CSS的Arena浏览器。
同年，W3C组织成立，CSS的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准，层叠样式表的开发终于走上正轨。
发展至今，CSS已经出现了4个版本
1.CSS1.0
19912月W3C发布了第一个有关样式的标准CSS1.0。这个版本中，已经包含了的相关font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等。
2.CSS2.0
1985年5月，CSS2.0正式推出。这个版本推荐的是内容和表现效果分离的方式，并开始使用样式表结构。
3.CSS2.1
2004年2月，CSS2.1正式推出。它在CSS2.0的基础上略微做了改动，删除了许多不被浏览器支持的属性。
4.CSS3
早在2001年，W3C就着手开始准备开发CSS第三版规范。虽然完整的、规范权威的CSS3标准还没有尘埃落定，但是各主流浏览器已经开始支持其中的绝大部分特性。
2.CSS的作用
1.主要用来设计网页的样式，美化网页。它不仅可以
静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
2.能够对网页中元素位置的排版进行像素级精确控
制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
3.对页面的布局、字体、颜色、背景和其它效果实现
更加精确的控制。
六、CSS添加方式
1.行内添加
例如：<p style="color:red;">
文字
</p>
2.内嵌样式（放在head标签之内）
例如：<style type="text/css">
p{
color:red;
}
</style>
3.单独文件
外部式样式表文件 style.css
例如： p{
color:red;
}
在head里引用样式
<head>
<link rel="stylesheet" href="css/style.css"/>
</head>
优先级：行内>内嵌>链接>浏览器默认
七、CSS常用属性
1.颜色
| 颜色 | 描述 |
| red,blue,green等 | 颜色名 |
| rgb(x,x,x) | RGB值 每个颜色分量取值0-255 |
| rgb(x%,x%,x%) | RGB百分比值 0%-100% |
| rgba(x,x,x,x) | RGB值，透明值 a值：0.0（完全透明）与1.0（完全不透明） |
| #rrggbb | 十六进制数 红色：#ff0000 红色：#f00 取代重复位 |
2.字体
| 属性 | 描述 |
| font | 在一个声明中设置所有的字体属性 |
| font-family | 字体系列 |
| font-size | 字号 14px 120% |
| font-style | 斜体 italic |
| font-weight | 粗体 bold |
3.文本属性
| 属性 | 描述 | 取值 |
| color | 文本颜色 | red #f00 rgb(255,0,0) |
| letter-spacing | 字符间距 | 2px -3px |
| line-height | 行高 | 14px 1.5em 120% |
| text-align | 对齐 | center left right justify |
| text-decoration | 装饰线 | none overline underline line-through |
| text-indent | 首行缩进 | 2em |
4.背景属性
| 属性 | 描述 | 格式 |
| background | 所有背景设置 | utl("aaa.jpg" ) repeat-x |
| background-color | 背景颜色 | red/#ccc/rgb(255,0,0) |
| background-image | 背景图片 | url("aaa.jpg") |
| background-repeat | 重复方式 | repeat-x/repeat-y/no-repeat |
5.超链接属性
| 超链接 | 描述 |
| a:link | 普通的、未被访问的链接 |
| a:visited | 用户已访问的链接 |
| a:hover | 鼠标指针位于链接的上方悬停 |
| a:active | 链接被点击的时刻 |
4768
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
