- 了解并体验代码实现原理
- 便于团队沟通,配合
- 学会简单页面的制作
- 初识Dreamweaver
初识HTML
HTML:Hyppertext Marked Language,超文本标记语言
CSS:Cascading Style SHEETS 层叠样式表
JS:Java Scrip 脚本语言。
常用开发工具
- 记事本(过于简单,效率低和慢)
- Dreamweaver(所见即所得)
- sublime text
- 其他..
要改变一些字体大小或颜色等等的参数,在首选参数里面修改。
HTML基本结构
下面这些都是基本结构,是必须要有的部分~
如果没有编码格式,打开之后会是一堆乱码,国际形式(utf-8)
注意:代码写好之后,保存的时候不能乱保存,所以保存之前先做一个准备工作,建立一个文件夹起好名字。将自己写好的代码保存的时候,要起英文的名字,比如首页的代码保存的时候应该命名为:index.html
注意事项:
- 不区分大小写,建议用小写
- 属性值建议加双引号
- 标签可以嵌套使用,按<Tab>
- 注释
- 扩展名:.html
常用标签
双标签
- <p> 段落里面的内容写在这里 </p>
- <h1> 文章内容的一级标题写在这里 </h1>
- <h2> 文章内容的二级级标题写在这里 </h2>
- <h3> 文章内容的三级标题写在这里 </h3>
- 以此类推....
-
换行,这里是个单标签 - <img>图片,这里是个单标签
在建好的文件夹里,再建一个名字为images的文件件,专门放图片(所有图片都要用英文来命名,其实所有的有关文件都要用英文命名)
-
<img>图像
<img src=“images/图片英文名称.jpg” width=“图片宽度" height=“400” alt=“UI课堂logo”/> alt后面跟的中文,起到一个说明的作用,比如在图片没有加载出来之前,会显示这个文字,能让用户提前知道这个将要加载出来的图片
- <ul>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
</ol>
<a></a>超链接
<colgroup><col style="width: 168px;"><col style="width: 147px;"></colgroup>
比如:<a href=“需要跳转的网页名" > 可点击的文字</a>
锚点链接
应用:长页面(如:百度百科、单页网站)
方法:
- 建立锚点<a name=“link1”>目标位置</a>
- 制作链接<a href=“#link1”>点击文本</a>
其实就是简历一个快速引导,当页面比较长的时候使用的。
CSS样式基础
内嵌样式 加载head区 <style>…..</style>
<colgroup><col style="width: 130px;"><col style="width: 130px;"><col style="width: 130px;"></colgroup>
表示颜色的方法:
- h1{color:#096CFF;}
- h1{color:red;} h1{color:blue;}
- h1{color:rgb(200,30,10;}
- h1{color:reba(200,30,10,0.5;} 注意:a是不透明度,值在0~1之间。
-
标题标签内的字体都是默认加粗的
<colgroup><col style="width: 148px;"><col style="width: 184px;"></colgroup>
鼠标悬停时候的效果:下面设置了颜色和下划线
text-decoration:none;/去除链接文本中的下划线/
CSS中注释:/注释内容/