HTML基础知识与DW 基础应用

1. 了解并体验代码实现原理
2. 便于团队沟通，配合
3. 学会简单页面的制作

• 初识Dreamweaver

初识HTML

HTML：Hyppertext Marked Language,超文本标记语言

CSS：Cascading Style SHEETS 层叠样式表

JS：Java Scrip 脚本语言。

常用开发工具

1. 记事本（过于简单，效率低和慢）
2. Dreamweaver（所见即所得）
3. sublime text
4. 其他..

要改变一些字体大小或颜色等等的参数，在首选参数里面修改。

image.png

HTML基本结构

下面这些都是基本结构，是必须要有的部分~

image.png

如果没有编码格式，打开之后会是一堆乱码，国际形式（utf-8）

image.png

注意：代码写好之后，保存的时候不能乱保存，所以保存之前先做一个准备工作，建立一个文件夹起好名字。将自己写好的代码保存的时候，要起英文的名字，比如首页的代码保存的时候应该命名为：index.html

注意事项：

1. 不区分大小写，建议用小写
2. 属性值建议加双引号
3. 标签可以嵌套使用，按
4. 注释
5. 扩展名：.html

常用标签

双标签

1. 段落里面的内容写在这里

2. 文章内容的一级标题写在这里

3. 文章内容的二级级标题写在这里

4. 文章内容的三级标题写在这里

5. 以此类推....
6. 
   换行，这里是个单标签
7. 图片，这里是个单标签

image.png

在建好的文件夹里，再建一个名字为images的文件件，专门放图片（所有图片都要用英文来命名，其实所有的有关文件都要用英文命名）

7. 图像

      
   
   alt后面跟的中文，起到一个说明的作用，比如在图片没有加载出来之前，会显示这个文字，能让用户提前知道这个将要加载出来的图片
   

image.png

8. 
   
   • 无序列表
   
   

image.png

---

1. 有序列表

image.png

---

超链接

图片.png

比如： 可点击的文字

image.png

锚点链接

应用：长页面（如：百度百科、单页网站）

方法：

1. 建立锚点目标位置
2. 制作链接点击文本

其实就是简历一个快速引导，当页面比较长的时候使用的。

CSS样式基础

内嵌样式 加载head区

图片.png

表示颜色的方法：

1. h1{color:#096CFF;}
2. h1{color:red;} h1{color:blue;}
3. h1{color:rgb（200，30，10;}
4. h1{color:reba（200，30，10，0.5;} 注意：a是不透明度，值在0~1之间。

5. 标题标签内的字体都是默认加粗的

   
   
   

   图片.png

鼠标悬停时候的效果：下面设置了颜色和下划线

image.png

text-decoration:none;/去除链接文本中的下划线/

image.png

CSS中注释：/注释内容/