温馨提醒：
此文章是本人对 Dreamweaver 的基础学习，在学习的过程中，发现书本中的内容虽然比较详细，但是比较繁琐，一些常用的标签容易遗忘。因此，编辑此文章是为了当作自己的日记本作一个基础的总结，在今后的学习中可以在这里翻阅查看，比较方便。
如果觉得文章有实用的地方，欢迎大家收藏、点赞！！！
感谢大佬们的支持！！！
部分简单网页的基础了解
1.HTML 简单理解：
HTML 是 Hyper Text Markup Language 的缩写，意思是“超文本标识语言”，它实际上是专门用来编写网页的一种编程语言，网页的构成基础就是 HTML 的语句。下面先了解一下简单的网页构成：
<!doctype html><html><head><meta charset="utf-8"><title>这里是一个标题！</title></head><body>
</body></html>
复制代码
实例解析：
!DOCTYPE html：声明为 HTML5 文档 html：元素是 HTML 页面的根元素 head：元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。title：元素描述了文档的标题 body： 元素包含了可见的页面内容 h1：元素定义一个大标题 p ：元素定义一个段落。
提示：
1.以上所有元素都要使用<>括着。
2.多数标签都是成对出现，其中别标签因为只有单一功能。
3.网页文档的后缀名为 .html 或 .htm 两种后缀名都可以使用,初学者不用去纠结。刻意去了解的话，点击：地址直达<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">
2.内部样式表和内联样式表的区别
注意：
下面代码中 <!- -注释- -> 为注释部分，简单的行注释可用 #表示。
<!--#内部样式表#当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:--><head><style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head>
<!--#内联样式:#由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。#要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距.--><p style="color: sienna; margin-left: 20px">This is a paragraph</p>
复制代码
3.dreamweaver 常用代码注释
一、色彩属性：1.色彩属性：color=#RRGGBB;#前景色，参考色彩对照表bgcolor=#RRGGBB;#背景色2.样式属性：font-size：#字体大小color：#字体颜色font-family：#字体font-weight：#字体加粗background-color:#背景颜色text-align:#文本对齐方式width:#宽height:#高border:#边框border-color:#边框颜色border-left:#左边框border-left-left:#左边框颜色background-image:#背景图片background-color:#背景颜色background-repeat:#背景图片重复方式margin:#边缘距离，0px auto 可以加上一个div绝对居中z-indexa:hover{}#定义鼠标经过衔接字体时的属性，如颜色等a:link{}#定义连接文字被点击过的颜色body{}:#定义body样式p{}#定义p标签样式
二、行为动作onclick:#鼠标点击onmouseocver:#鼠标经过onmouseout:#鼠标移走onload:#打开某某时载入某某onunload:#关闭某某时弹出某某
三、基本属性colspan=""#单元格跨越多列rowspan=""#单元格跨越多行align=""#对齐方式border=""#边框宽度bgcolor=""#背景颜色bordercolor=""#边框颜色bordercolorlight=""#边框明亮颜色bordercolordark=""#边框淡面颜色cellpadding=""#内容与边框的距离（默认2）cellspacing=""#单元格间的距离（默认2）
复制代码
4.CSS 语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明,并用花括号包括声明。
例：下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。
h1 {color:red; font-size:14px;}
复制代码
5.CSS 选择器
1.元素选择器(标签选择器)
/*最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器，元素选择器又叫标签选择器。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：html {color:black;}h1 {color:blue;}h2 {color:silver;}*/#h1标签代码展示如下：<html><title>这里是一个标题！</title><head><meta charset="utf-8"><style type="text/css"> h1 {color:green;}#显示h1标题颜色 </style> </head> <body><h1>这是一个h1标题 </h1></body> </html>
复制代码
2.ID 选择器
/*id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。注意：id 属性只能在每个 HTML 文档中出现一次。*/#代码展示如下：<!doctype html><html><title>这里是一个标题！</title><head><meta charset="utf-8"><style type="text/css"> #red {color:red;}#定义第一个id选择器的颜色为红色#green {color:green;}#定义第二个id选择器的颜色为绿色 </style> </head> <body> <p id="red">这个段落是红色。</p>/*id 属性为 red 的 p 元素显示为红色*/<p id="green">这个段落是绿色。</p>/* id 属性为 green 的 p 元素显示为绿色*/ </body> </html>
复制代码
3.类选择器
#类选择器实例如下：.center {text-align: center}#在 CSS 中，类选择器以一个点号显示：所有拥有 center 类的 HTML 元素均为居中。#代码展示如下：<!doctype html><html><title>这里是一个标题！</title><head><meta charset="utf-8"><style type="text/css"> .center {text-align: center} </style> </head> <body><h1 class="center">This heading will be center-aligned</h1><p class="center">This paragraph will also be center-aligned.</p> </body> </html>/*注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。和 id 一样，class 也可被用作派生选择器：*/
.fancy td { color: #f60; background: #666; }在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）元素也可以基于它们的类而被选择：td.fancy { color: #f60; background: #666; }
复制代码
3.通配符选择器
在 CSS 中，使用 * 代表所有的标签或元素，它叫做通配符选择器。比如：* { color : red; } 这里就把所有元素的字体设置为红色。会匹配所有的元素，因此针对所有元素的设置可以使用来完成。例子如下：
这里是设置所有元素的外边距 margin 和内边距 padding 都为 0。
5.选择器的组合用法
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>p.center{ text-align:center;}</style></head>
<body><h1 class="center">这个标题不受影响</h1><p class="center">这个段落居中对齐。</p> </body></html>
复制代码
以上是部分简单网页的基础了解，如果觉得对你有帮助，点赞收藏吧！
评论