Adobe Dreamweaver 的基础知识

1.HTML超文本标签语言：

超文本标记语言（HyperTextMarkupLanguage），标准通用标记语言下的一个应用。HTML不是一种编程语言，而是一种标记语言（markup language），是网页制作所必备的。

“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

HTML超文本编程语言定义：超文本标记语言是标准通用标记语言下的一个应用，也是个一种规范，一种标准。它通用标记符号来标记要显示的网页中的各部分。

网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。

浏览器按顺序阅读网页文件，然后根据标记来解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记可能会有不完全相同的解释，因而可能会有不同的显示效果。

1（1）.什么是HTML标签？

学习网页开发，首先你得知道怎么编写和构造HTML标记，用HTML标记传达你想要给用户展示的内容，比如文字、图片、音频和视频等。用HTML标记内容的目的是为了赋予网页语义，换句话讲就是要给你的网页赋予某些用户代理能够理解的含义。我们平常用的浏览器、给视障用户朗读网页的屏幕阅读器，他们需要显示和分析网页。HTML规定了一组标签，用来给内容打上不用的标记。每个标签都是对它所包含内容的一种描述。

1（2）.闭合标签与自闭标签

2.1闭合标签：（ps：一般情况文本显示用闭合标签）

闭合标签基本格式如下：

<标签名>文本内容</标签名>

可以给这个标签添加一些属性，例如：

<标签名属性_1=“属性值”属性_2=“属性值”>文本内容</标签名>

标题、段落等文本元素都要求闭合标签，也就是一个开始标签和一个结束标签，例如：

<h1>hello world</h1>
<p id="txtp">this is a paragraph</p>

重点：闭合标签都是成对出现的

在浏览器中查看显示内容，如图4.2.3-1所示：

图4.2.3-1

2.2 自闭和标签（ps：一般引用内容用自闭合标签）

自闭和标签基本格式如下：

<标签名属性_1=“属性值”属性_n=“属性值”/>

非文本内容是通过自闭和标签显示的，闭合标签与子闭合标签的区别在于闭合标签包含的是会显示的实际内容，而自闭和标签只是给浏览器提供一个要显示内容的引用。浏览器会在页面加载的时候，额外向服务器发送请求，以取得自闭和标签引用的内容。

下面给出自闭和标签的事例，显示内容如图 4.2.3-2所示：

<img src="data:images/mycat.jpg" alt="这是一个猫咪的图片">
<!--img标签为图片标签用于在浏览器中显示图片属性src（source 来源） "images/mycat.jpg"为src的属性值这里是图片文件的路径 alt（alternative 代替内容）定义的是图片因某种原因下未能成功

图4.2.3-2

2.CSS层叠样式表：

层叠样式表（英文全称：CascadingStyleSheets）是一种用来表现HTML或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。/*--Cascading[kæ’skeidiŋ] Sheets[ʃiːts]*/

CSS能够对网页中元素位置的排版进行像素级别精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

工作原理：CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接储存于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名-css的外部样式单文档中。

样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。名称CSS中的“层叠（cascading）”表示样式单规则应用于HTML文档元素的方式。具体地说，CSS样式单中的样式形成一个层次结构，更具体地样式覆盖通用样式。样式规则地优先级由CSS根据这个层次结构决定，从而实现级联效果。

2.（1）CSS 基础知识：

在前一章节中我们大概了解了什么是HTML文档，那么在小节中我们讲解一下CSS规则，怎么为HTML添加样式。每个HTML元素都有一组样式性，可以通过CSS来设定。这些属性涉及元素显示的不同方面，例如文本内容的字体、字号和颜色，元素显示的位置等等。CSS就是一种先选择HTML元素，然后设定选中元素CSS属性的机制。CSS选择符和要应用的样式构成一条CSS规则。

2.（2）解析CSS规则

下面我们举例说明：将段落标签的文本内容设置为红色HTML代码：

<p id="txtp">this is a paragraph</p>

CSS代码：

p{
color: red;
}

浏览器中显示效果如图4.3.2.1-1

图4.3.2.1-1

在浏览器中查看代码的方式：在浏览器中点击右键，然后选择检查，即可在浏览器中查看HTML结构和CSS样式。

完成代码：

<!doctype html>
<!--它是html5标准网页声明,全称为Document Type HyperText Mark-up Language，
意思为文档种类为超文本标记性语言或超文本链接标示语言-->
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
/*内部样式：CSS样式嵌套在页面head元素中的style标签里*/
p{
color:red;
}
</style>
</head>
<body>
<h1>hello world</h1>
<p>this is a paragraph</p>
<img src="data:images/mycat.jpg" alt="这里是一个猫咪">
</body>
</html>

2.（3）CSS基础语法

CSS是一门编程语言，既然是语言那么就一定有它的语法规则。那么接下来我们就来学习CSS的基础语法规则。

CSS规则由两部分组成：选择符和声明两部分组成，其中选择符是指你所要改变样式的元素，声明是指你需要设置的样式部分。声明由两部分组成：属性和属性值。如图4.3.2.2-1所示

图4.3.2.2-1

重要说明：CSS和HTML中的符号都是英文状态下的符号，例如规则中的“：”冒号和“；”分号。

对于上面的基本结构，我们可以做出一下扩展：

１、多个声明包含在一条规则里面

p {
color:red;/*字体颜色样式*/
font-size: 26px;/*字体大小样式*/
}

2、多个选择符结合在一起

例如：同时给标题标签ｈ１ｈ２ｈ３设置同样的样式属性

<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>

CSS规则：

h1,h2,h3{ /*选择器之间用,英文状态的逗号隔开*/
color: #900; /*字体颜色样式*/
font-size: 20px;/*字体大小样式*/
}

3、多条规则应用给一个选择符

h1,h2,h3{ /*选择器之间用,英文状态的逗号隔开*/
color: #900; /*字体颜色样式*/
font-size: 20px;/*字体大小样式*/
}
h1{
text-align: center;/*文本内容居中显示*/
}

对于上面的2条规则，H１标签最后的样式为，字体颜色为红色，字体大小为20像素，文本内容居中显示。

2.（４）为文档添加样式（程序）

在CSS中为文档添加样式的4个方式：

内联样式
内部样式
链接样式|外部样式（link标签引入外部样式）
@import指令导入外部样式文件

1.使用内联样式：直接将样式定义到HTML元素（写在标签里）。这种作用范围有限，只影响它所在的标签，而且总是覆盖嵌入样式和链接样式。

1.<div style="width:200px;height:200px;"></div>

2.使用内部样式：写在＜style＞标签中。作用范围仅限于当前页面，内部样式覆盖链接样式，但也会被内联样式覆盖。

<style type="text/css">
div{
width:200px;/*宽度：200像素*/
height:200px;
}

</style>

3.链接样式：写在单独的CSS样式表中。链接样式的作用范围可以是整个网站。只要使用＜link＞标签把样式表链接到页面，相应页面就可以使用样式。

<link href="链接表地址" rel="stylesheet" type="text/css"/>

4.＠import指令导入外部样式文件：和链接样式类似。引用＠import指令在某些浏览器（IE）可能会出现“屏闪”。所以我们应该尽量的避免使用＠import指令。而是尽量使用链接外部样式表。

<style type="text/css">@import url(地址);</style>
@import url(.../../地址)

完整的代码结构：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS样式表的基本使用方法</title>
<link href="./css/indexstyle.css" rel="stylesheet" type="text/css"/>
<!--rel是relationship的英文缩写
stylesheet中style是样式的意思,sheet是表格之意,总起来是样式表的意思rel="stylesheet" 描述了当前页面与href所指定文档的关系.即说明的是,href连接的文档是一个新式表-->
<style type="text/css">
@import url(css/indexstyle.css);
</style>
<style type="text/css">
h1 {
color:red;
}
</style>
</head>
<body>
<h1 style="color:green">this is a head</h1>
<h1></h1>
</body>
</html>

2.（5）用户代理样式表（浏览器）

Useragentstylesheet用户代理样式表；浏览器默认的样式表

在写HTML+CSS的页面ＣＳＳ样式表时，需要进行标签重置，原因在于浏览器都拥有一套自己的默认ＣＳＳ样式表，不重置的话，会减低页面浏览器的兼容性，导致页面在不同的浏览器内的效果不同。

【问】那浏览器为什么还要存在一套默认的ＣＳＳ样式表？不存在的话多好，也不重置，还会增强页面的兼容性，为什么不这么做？

【答】每个浏览器之所以要存在一套自己的默认ＣＳＳ样式表，目的在于保证没有样式表的页面能够正常显示。浏览器在加载一个页面的时候会判断这个页面是不是存在对应的CSS样式表，如果没有，就加载浏览器默认的CSS样式表，以保证页面信息能够被正常读取。

2.（6）浏览器用户自定义样式（浏览器）

　　è用户代理样式（浏览器默认样式）

　　è浏览器用户自定义样式

　　è开发人员样式

3.JavaScript：

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型地语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML(标准通用标记语言下的一个应用)网页上使用，用来给HTML网页增加动态功能。

在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java,因此取名JavaScript。但实际上它的风格与Self及Scheme较为接近。

为了取得技术优势，微软推出了Jscript,CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。

Adobe Dreamweaver 的基础知识相关推荐

Adobe Illustrator(AI)基础知识
Adobe Illustrator(AI)基础知识 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
《Adobe Dreamweaver CS6中文版经典教程》——第2课　HTML基础2.1　什么是HTML
本节书摘来自异步社区<Adobe Dreamweaver CS6中文版经典教程>一书中的第2 章,第2.1节,作者:[美]Adobe公司更多章节内容可以访问云栖社区"异步社区& ...
Adobe Dimension Essential Training: The Basics Adobe Dimension 基础教程：基础知识 Lynda课程中文字幕
Adobe Dimension Essential Training: The Basics 中文字幕 Adobe Dimension 基础教程:基础知识中文字幕Adobe Dimension Es ...
《Adobe Dreamweaver CC经典教程》——导读
前言 Adobe Dreamweaver CC是行业领先的Web内容制作程序.无论你是为了生活还是为了自己的事业而创建Web站点,Dreamweaver都提供了你所需的所有工具,帮助你达到专业水平. ...
《Adobe Dreamweaver CS6中文版经典教程》——导读
前言 Adobe Dreamweaver CS6是行业领先的Web内容制作程序.无论你是为了生活还是为了自己的事业而创建网站,Dreamweaver都提供了你所需的所有工具,帮助你达到专业水平. 关于 ...
Adobe Dreamweaver CC 2018 for Mac
Adobe Dreamweaver CC 2018 for Mac 百度云链接:https://pan.baidu.com/s/1DNArwlXtsnJiCW8FRNOgCg 密码:58xp 软件安 ...
农村计算机基础知识内容,农村信息员培训2计算机基础知识.pptx
;第六章计算机基础知识;;一.计算机硬件系统组成;;计算机硬件系统;计算机硬件系统组成;计算机硬件系统组成;计算机硬件系统组成;计算机硬件系统组成;计算机硬件系统组成;计算机硬件系统组成;计算机硬件 ...
《Adobe Dreamweaver CS5中文版经典教程》——导读
前言 Adobe Dreamweaver CS5是行业领先的Web内容制作程序.无论你是为了生活还是为了自己的事业而创建Web站点,Dreamweaver都提供了你所需的所有工具,帮助你达到专业水平. ...
（零）音视频技术基础知识，现实项目
前言耽误了很久,一直想写音视频开发的教程,一方面,音视频的发展正在向各个行业扩展,从教育的远程授课,交通的人脸识别,医疗的远程就医等,音视频方向已经占据一个相当重要的位置,而音视频真正入门的文章又少 ...

Adobe Dreamweaver 的基础知识

Adobe Dreamweaver 的基础知识相关推荐

最新文章

热门文章