一、站点的建立

作用：用来归纳一个网络上所有的网页、素材以及他们之间的联系。
站点根文件夹命名规则：必须是以字母和下划线开头，后面数字和下划线，不能用中文和特殊字符。

二、创建首页

首页的名称：index.html

三、基本的页面结构与代码实例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5</title> 页面标题
<style type="text/css"> 基于文本的css文件
boby{background:#069;} 背景颜色修改为蓝色
div{height:120px;backerground:#333；border(边框):3px soild #ff0;}
<style>
</head>
<boby>
<div></div> 修改通过css来修改
<a href="新闻的路径">新闻</a> 一个网站中链接其他的页面
友情链接：<a href="http://www.baidu.com">百度</a>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<hr /> 打印一条直线
<p>段落内容</p> 每一对p标签就是一个段落
<ul> 无序列表前边图标通过css来修改
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<dl> 自定义列表
<dt>中国</dt>
<dd>中国是一个伟大的国家，拥有五千年的悠久历史</dd>
</dl>

</ul>
</boby>
</html>

一、HTML核心元素

1、文本标题

2、段落的标记P（段落之间的行距和首行缩进都是由css来实现）

<p>段落文本内容</p>

3、空格（不叫标记）

一个空格 &nbsp；

4、文字加粗

1）<b>加粗的文本</b>
2）<strong>加粗的文本</strong>

5、强制换行

<br />空标签不是成对出现的只需要换行的文本前加入即可

6、倾斜

1）<i>需要倾斜的文本</i>
2)<em>需要倾斜的文本</em>

7、列表

无序列表有序列表自定义列表
1）无序列表（前边是图形）
<ul>
(空四个空格)<li> 列表项内容</li>
<li> 列表项内容</li>
<li> 列表项内容</li>
</ul>
2）有序列表(前边列表是1、2、3)
<ol>
(空四个空格)<li> 列表项内容</li>
<li> 列表项内容</li>
<li> 列表项内容</li>
</ol>
3）自定义列表
<dl>
<dt>名词</dt>
<dd>名词解释</dd>
</dl>

8、超链接

9、图片

<img src="目标文件的路径及全称"/> 空标记

10、水平线

<hr/>
11、div
12、span

css部分

一、css简介

css：Cascading Style Sheets，汉译层叠样式表，用来表现HTML或者XML等文件的计算机语言

二、样式表的创建

内部样式表，外部样式表，行内样式表

创建内部样式表的语法：

<style type="text/css"> 基于文本的css文件
/*CSS语句*/
</style>
说明：用style元素来创建样式表时，必须将该标记写在文件头部，<head></head>之间

三、css的组成和语法

css的组成

boby{background（属性）:#069（属性值）;}
css的组成：选择器（选择符），声明

css语法：选择符{属性：属性值；}

说明：1)属性和数值之间用：分割，声明必须放在大括号内。
2)一个选择符可以有多个属性，属性与属性之间用分号隔开。
3）一个属性可以有多个属性值，属性值与属性值之间用空格隔开。

HTML5和css基础