转载： HTML 简介
CSS (Cascading 串联 Style Sheets) 用于渲染HTML元素标签的样式.
CSS 可以通过以下方式添加到HTML中:
- 内联样式- 在HTML元素中使用"style" 属性
<a href="http://www.runoob.com/" style="text-decoration:none;">访问 runoob.com!</a>
- 背景颜色
<body style = "backgroud-color:yellow;">
<h2 style = "backgroud-color:red">标题</h>
<p style = "backgroud-color: green;">段落</p>
</body>
-字体，字体颜色，字体大小
<p style = "font-family:arial; color:red; font-size:20px">段落</p>
-对齐样式
<h1 style = "text-aligh:center"；>居中对齐标题</h>
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
- 内部样式表 -在HTML文档头部
<head>区域使用<style>元素 来包含CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<a href="http://www.runoob.com/" style="text-decoration:none;">访问 runoob.com!</a>
</body>
</html>
- 外部引用 - 使用外部 CSS 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<!--外部式样表-->
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>我使用了外部样式文件来格式化文本 </h1>
<p>我也是!</p>
</body>
</html>
图像
- 在 HTML 中，图像由
<img>标签定义。只包含属性， 并且没有闭合标签 - 要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
e.g.:
<img src = "url" alt = "some_text">
URL指图下那个的位置。
- Alt属性：用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。
- 设置图像的高度与宽度
<img src = "pulpit.jpg" alt = "Pulpit rock" width = "304" height = "228" >
- 注意：慎用图片（加载图片耗费时间）；加载页面时，要注意插入页面图像的路径。
实例
- 设置图像链接
<p>创建图片链接
<a href = "url">
<img border ="10" src ="smiley.gif" alt = "HTML 教程" width ="32" height ="32"></a></p>
<!--若不要边框，border="0"-->
<!--添加浮动属性的话， style = "float:left"-->
<!--添加映射-->
<img src = "planets.gif" width= "" height = "" alt = "" usename ="#名字需一致">
<map name ="名字需一致">
<area shape ="rect" coords= "0,0,82,126" alt ="" href = "url">
</map>
1、矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>
2、圆形：(圆心坐标为(X1,y1)，半径为r)
<area shape="circle" coords="x1,y1,r" href=url>
3、多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) …)
<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>
表格
<table><tr>行<td>表格数据<th>表头<caption>标题
<table border ="1">
<tr>
<th>Header1</th>
<th>Header2</th>
</tr>
<tr>
<td>row1, cell1</td>
<td>row1, cell2</td>
</tr>
<tr>
<td>row2, cell1</td>
<td>row2, cell2</td>
</tr>
列表
- 有序列表
<ol>
<ol>
<li>Coffe</li>
<li>Milk</li>
</ol>
- 无序列表
<ul>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
扫描二维码关注公众号，回复：
4789959 查看本文章
- 自定义列表
<dl>
<dl>定义列表<dt>自定义列表项目<dd>定义自定列表项的描述
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
