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. 标签可以嵌套使用，按<Tab>
4. 注释
5. 扩展名：.html

常用标签

双标签

1. <p> 段落里面的内容写在这里 </p>
2. <h1> 文章内容的一级标题写在这里 </h1>
3. <h2> 文章内容的二级级标题写在这里 </h2>
4. <h3> 文章内容的三级标题写在这里 </h3>
5. 以此类推....
6. 
   换行，这里是个单标签
7. <img>图片，这里是个单标签

image.png

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

7. <img>图像

      <img src=“images/图片英文名称.jpg” width=“图片宽度" height=“400” alt=“UI课堂logo”/>
   
   alt后面跟的中文，起到一个说明的作用，比如在图片没有加载出来之前，会显示这个文字，能让用户提前知道这个将要加载出来的图片
   

image.png

8. <ul>
   <li>无序列表</li>
   </ul>

image.png

<ol>
<li>有序列表</li>
</ol>

image.png

<a></a>超链接

图片.png

<colgroup><col style="width: 168px;"><col style="width: 147px;"></colgroup>

比如：<a href=“需要跳转的网页名" > 可点击的文字</a>

image.png

锚点链接

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

方法：

1. 建立锚点<a name=“link1”>目标位置</a>
2. 制作链接<a href=“#link1”>点击文本</a>

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

CSS样式基础

内嵌样式 加载head区 <style>…..</style>

图片.png

<colgroup><col style="width: 130px;"><col style="width: 130px;"><col style="width: 130px;"></colgroup>

表示颜色的方法：

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

<colgroup><col style="width: 148px;"><col style="width: 184px;"></colgroup>

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

image.png

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

image.png

CSS中注释：/注释内容/