网页制作部分主要讲解三大部分：

1、HTML    超文本标记语言（ 全称：Hyper Text  Markup Language） 专门编辑静态网页

2、CSS      网页美化：是HTML控制的样式、格式的一部分

3、Javascript   脚本语言：主要是编写网页中动态效果的。

  第一部分   HTML

超文本标记语言专门用于编写静态网页。

1、打开Adobe Dreamwaver CS6

2、新建HTML文件：

3、编写网页文件：

最简单的方式是在记事本中编写

查看效果图：

一个< >代表一个标签，网页主要学习的是标签；

代码第一行代表引用国际标准

<html>代表网页的标签，表示一个网页的开始

</html>代表网页的结束

<head>.......</head> 代表一对，‘头部文件’表示用哪种编码方式，中间存放标题、样式的设定等等。

<title>.....</title>代表标题。

<boby>.....</boby>中间用于书写网页的内容

Boby中的属性：

1）Backgroud：不管是backgroud还是bgcolor在前，都是bacgroud覆盖bgcolor.

修改背景颜色：

修改背景图：文件路径倒着翻找文件夹，用.../.../来表示。

2）Text:设置boby中文本的颜色

3）topmargin=" 200" 上边距，文字距离网页顶部的间距，” ”中写间距数是多少

4）bottommargin=" "下边距

5）Left:左边距

6）Right：右边距，相当于word的长和宽

7）hidden="true" 隐藏整个网页

8）</br>换行，相当于回车

9）<strong> 你好</strong></br>  --加粗

10）<center>你 好</center>  ---居中

11）&nbsp;--空格

12）<b> 你好 </b>  --加粗

13）<i>你  好</i>  --倾斜

14）<u>你好</u>  --加下划线

15）<font>....</font> --字体修改（颜色、大小、字体更改）

color="#CC6699"

size="+5"

face="Times New Roman, Times, serif"  ---在<font内修改>

第二课时

1、处理文本的标签

1-6代表字号大小

<h1>标题1</h1>H1-h6字号依次变小

<p>.....</p> 段落，代表一段话

<ol> 列表(有序列表)

<li>行1<li>

<li>行2<li>

<li>行3<li>

<li>行4<li>

</ol>（有序列表）

<ul>(无序列表)

</ul>

2、超链接：<a  href >

<h1><a  href=“链接地址” target=”属性”>标题1</h1>

Target--打开方式

New/black--打开新的页面

parent--替换之前的页面

Self--在自身页面打开开

Top--在网页嵌网页时有区别

3、图片的属性：

1)<img src="图片的路径地址" width="30" height="100" />

2）name--图片的名字,不显示出来

3)width--宽度的设定

4）Height--高度的设定

5）Title--图片的标题，当鼠标放在网页显示的图片上时，会显示图片的标题。便于搜索引擎的查找。

6)loop--循环的意思

7）style--图片的样式、格式

4、表格（重点）

必备的三部分：

1）表格的开头和结尾：<table>.....</table >

2）表格的行：<tr>.....</tr>表示行

3）表格的单元格：<td>.....</td>表示单元格，没有列

<table>表格的属性：
1>width:宽度。可以用像素或百分比表示。常用960像素。

2>border:边框。常用值为0.

3>cellpadding:内容跟单元格边框的边距。常用值为0.

4>cellspacing:单元格之间的间距，常用值为0.

5>align:横向对齐方式。

6>bgcolor:背景色。

7>background:背景图片

<tr>中行的属性：

1>align 表示横向对齐方式三种（上、中、下）

2>bgcolor 表示背景颜色选择

3>bordercolor 表示表格边框的颜色选择

4>height 表示行的高度设置

5>hidden 隐藏

6>style:样式、格式的修改

7>title 代表标题的修改

8>valign 表示纵向的对齐方式三种（上、中、下）

<td>单元格的属性：

1>align 表示横向对齐方式三种（上、中、下）

2>valign 表示纵向的对齐方式三种（上、中、下）

3>bgcolor 表示背景颜色选择

4>bordercolor 表示表格边框的颜色选择

5>height 表示单元格的高度设置

6>width:表示单元格宽度设置

7>hidden 隐藏

8>style:样式、格式的修改

9>title 代表标题的修改

<th></th>表头，单元格的内容自动居中、加粗

align:单元格的内容的对齐方式

valign:单元格的内容的垂直对齐方式

width:单元格的宽度

height:单元格的高度

bgcolor:背景色

background:背景图片

【注意事项】：内容必须放在单元格中，单元格必须放在行里，行必须放在表格里。设置单元格的行高、列

高时，会同时影响对应的行或列。

单元格的合并（重点）：尽量用表格嵌套

colspan='n'  合并同一行单元格（后面写代码要减去相对应的列）

rowspan='n'  合并同一列单元格（从第二行开始减去相对应的列）

建立表格：

代码编写表格：

---Colspan=’2’代表单元格跨了2列

---rolspan=’3’代表单元格跨了3行

查看效果：

11-16网页基础--HTML的更多相关文章

  1. 9月5日网页基础知识 通用标签、属性（body属性、路径、格式控制） 通用标签（有序列表、无序列表、常用标签）（补）

    网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...

  2. 【转载】webstorm11（注册，激活，破解，码，一起支持正版，最新可用）（2016.11.16更新）

    很多人都发现 http://idea.lanyus.com/ 不能激活了 很多帖子说的 http://15.idea.lanyus.com/ 之类都用不了了 最近封的厉害仅作测试 选择 License ...

  3. Beta周第7次Scrum会议(11/16)【王者荣耀交流协会】

    一.小组信息 队名:王者荣耀交流协会 小组成员 队长:高远博 成员:王超,袁玥,任思佳,王磊,王玉玲,冉华 小组照片 二.开会信息 时间:2017/11/16 17:03~17:17,总计14min. ...

  4. （3.11）mysql基础深入——mysql文件分类与配置文件管理

    (3.11)mysql基础深入——mysql文件分类与管理 关键词:mysql配置文件,mysql参数文件,mysql中的my.cnf 目录:mysql数据库文件分类: [1]参数文件:my.cnf ...

  5. 第28次Scrum会议(11/16)【欢迎来怼】

    一.小组信息 队名:欢迎来怼小组成员队长:田继平成员:李圆圆,葛美义,王伟东,姜珊,邵朔,阚博文小组照片 二.开会信息 时间:2017/11/16 17:20~17:42,总计22min.地点:东北师 ...

  6. 11-28 网页基础--JavaScript(DOM)

    网页基础 第二部分--HTMLDOM操作 一.定义:htmlDOM是一种面向对象的树的模型,它包含html中的所有元素:通过html可以找到所有包含在dom中的元素. 二.作用: 1.查找html元素 ...

  7. JSP技术基础（动态网页基础）

    前言:如果说html为静态网页基础,那么jsp就是动态网页基础,两者的区别就是jsp在html的前面多加了几行而已.当然,jsp里面对java的支持度更高.要明白,js只是嵌入在客户端的小程序小脚本而 ...

  8. 2018.11.16 浪在ACM 集训队第五次测试赛

    2018.11.16 浪在ACM 集训队第五次测试赛 整理人:李继朋 Problem A : 参考博客:[1]朱远迪 Problem B : 参考博客: Problem C : 参考博客:[1]马鸿儒 ...

  9. [11 Go语言基础-可变参数函数]

    [11 Go语言基础-可变参数函数] 可变参数函数 什么是可变参数函数 可变参数函数是一种参数个数可变的函数. 语法 如果函数最后一个参数被记作 ...T ,这时函数可以接受任意个 T 类型参数作为最 ...

  10. django 1.11.16之环境搭建

    django版本:django1.11.16  windows环境 python 3.6.3    !!!可先安装虚拟环境在进行环境搭建  1.安装django:pip install django= ...

随机推荐

  1. 【转】Android ImageView的scaleType属性与adjustViewBounds属性

    ImageView的scaleType的属性有好几种,分别是matrix(默认).center.centerCrop.centerInside.fitCenter.fitEnd.fitStart.fi ...

  2. 开启 cmd cmder 代理

    win10安装了ShadowSocks软件,浏览器通过代理后就可以***,但有时候需要通过cmd科学下载安装一些组件,就需要设置一下cmd的代理 cmd如果要设置代理的话,需要在执行其他命令之前,先执 ...

  3. DH02-策略模式

    模式简介 面向对象的编程,并不是类越多越好,类的划分是为了封装,但分类的基础是抽象,具有相同属性和功能的对象的抽象集合才是类. 策略模式(Strategy)定义了算法家族,分别封装起来,让他们相互间可 ...

  4. 机器学习（六）—随机森林Random Forest

    1.什么是随机采样? Bagging可以简单的理解为:放回抽样,多数表决(分类)或简单平均(回归): Bagging的弱学习器之间没有boosting那样的联系,不存在强依赖关系,基学习器之间属于并列 ...

  5. java多线程学习一

    声明:本篇博客是本人为了自己学习保存的心得,其内容主要是从大神——五月的仓颉的博客中学习而来,在此多谢大神五月的仓颉的分享,敬礼! 第一章:进程和线程的概念 进程:进程是操作系统中作为分配资源的基本单 ...

  6. SpringBoot WebSocket实现

    1.添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  7. LeetCode OJ：Populating Next Right Pointers in Each Node II（指出每一个节点的下一个右侧节点II）

    Follow up for problem "Populating Next Right Pointers in Each Node". What if the given tre ...

  8. LeetCode OJ：Basic Calculator（基础计算器）

    Implement a basic calculator to evaluate a simple expression string. The expression string may conta ...

  9. python list的extend和append方法

    append: Appends object at the end. x = [1, 2, 3] x.append([4, 5]) print (x) gives you: [1, 2, 3, [4, ...

  10. 高性能服务器架构 的几个注意点 (High-Performance Server Architecture)

    High-Performance Server Architecture 高性能服务器架构 来源:http://pl.atyp.us/content/tech/servers.html译文来源:htt ...