第一章 HTML+CSS(上)

HTML

• 网页的组成
• HTML简介
• HTML的语法
• HTML的常用标签
• HTML中的表格和表单
• CSS的简单应用

我们这里使用WebStorm开发工具
配置浏览器

• 常用插件：
  • CodeGlance 代码缩略图插件

div布局

代码

头部

内容菜单

内容主题

底部

• 创建一个新html文件试试 ! 或者 html:5然后按Tab建试试效果吧

• p.bar#foo这样可以生成一个p标签拥有class=bar和id=foo

1.HelloWorld案例

我是一个段落标签

我这个字不会换行 我这个字不会换行 我这个字加入了换行的单标签

我是1级

我是2级

我是3级

我是4级

我是5级

我是6级

加粗字体标签
定义大号字体（过时）
着重标签
斜体字
小号字
定义加重语气
123_{定义下标字}123
123^{定义上标字}123
定义插入字（文字有下划线）
定义删除字（文字被杠掉）

点我去百度

点我去百度

点击跳转到“点我去百度”

代码

我是一个段落标签

我这个字不会换行
我这个字不会换行
我这个字加入了换行的单标签

我是1级

我是2级

我是3级

我是4级

我是5级

我是6级

加粗字体标签


定义大号字体（过时）


着重标签


斜体字


小号字


定义加重语气


123_{定义下标字}123


123^{定义上标字}123


定义插入字（文字有下划线）


定义删除字（文字被杠掉）




点我去百度
<img src=" http://img2.imgtn.bdimg.com/it/u=2974104803 ,1439396293&fm=200&gp=0.jpg" alt="我是图片不显示的时候出现的字"width="80px" height="80px">

点我去百度

点击跳转到“点我去百度”

2.基础表格案例

表头

单元1	单元2	单元3
单元1	单元2	单元3
单元1	1 2	1 2
无序列表(disc默认实体圆 circle空心圆 square方块 ) 1 2 3 有序列表(A用大写字母A开始 a小写a开始 I大写杠杠数字 i小写杠杠数字 strart=“10”从数字10开始) 1 2 3 （自定义列表，没有有序无序的列表前缀） hello SBSBSBSBSBSB hello SBSBSBSBSBSB hello SBSBSBSBSBSB

代码

表头

单元1	单元2	单元3
单元1	单元2	单元3
单元1	1 2	1 2
无序列表(disc默认实体圆 circle空心圆 square方块 ) 1 2 3 有序列表(A用大写字母A开始 a小写a开始 I大写杠杠数字 i小写杠杠数字 strart=“10”从数字10开始) 1 2 3 （自定义列表，没有有序无序的列表前缀） hello SBSBSBSBSBSB hello SBSBSBSBSBSB hello SBSBSBSBSBSB

2.基础表格案例

表头

单元1	单元2	单元3
单元1	单元2	单元3
单元1	1 2	1 2
无序列表(disc默认实体圆 circle空心圆 square方块 ) 1 2 3 有序列表(A用大写字母A开始 a小写a开始 I大写杠杠数字 i小写杠杠数字 strart=“10”从数字10开始) 1 2 3 （自定义列表，没有有序无序的列表前缀） hello SBSBSBSBSBSB hello SBSBSBSBSBSB hello SBSBSBSBSBSB

**代码**

表头

单元1	单元2	单元3
单元1	单元2	单元3
单元1	1 2	1 2
无序列表(disc默认实体圆 circle空心圆 square方块 ) 1 2 3 有序列表(A用大写字母A开始 a小写a开始 I大写杠杠数字 i小写杠杠数字 strart=“10”从数字10开始) 1 2 3 （自定义列表，没有有序无序的列表前缀） hello SBSBSBSBSBSB hello SBSBSBSBSBSB hello SBSBSBSBSBSB

3.div布局及table布局案例

table布局

这是头部
左菜单	右菜单
底部

代码

这是头部
左菜单	右菜单
底部

div控制

床前明月光，
肚子饿得慌。
举头望腊肉，
低头闻香肠。

床前明月光，
肚子饿得慌。
举头望腊肉，
低头闻香肠。

床前明月光，
肚子饿得慌。
举头望腊肉，
低头闻香肠。

床前明月光，
肚子饿得慌。
举头望腊肉，
低头闻香肠。

代码

床前明月光，

肚子饿得慌。

举头望腊肉，

低头闻香肠。

床前明月光，

肚子饿得慌。

举头望腊肉，

低头闻香肠。

床前明月光，

肚子饿得慌。

举头望腊肉，

低头闻香肠。

床前明月光，

肚子饿得慌。

举头望腊肉，

低头闻香肠。

div布局

---

头部

内容菜单

内容主题

底部

代码

头部

内容菜单

内容主题

底部