对于Web 的前端开发还处于刚接触状态。在学习的过程中,逐渐了解其架构和应用是今后学习的重点·。
一 前端的开发工具
在学习中使用的工具是DW(Adobe Dreamwea__ver)由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页(通常是标准通用标记语言下的一个应用HTML),对于初级人员,你可以无需编写任何代码就能快速创建web页面。
便利的工具可以事倍功半。DW的使用就非常简便。
二 Html,Css,JS的区别
在Web的开发中,Html是一种超文本标记语言。负责对网页的整体架构和布局进行设置。Css起到对文本的内容和结构美化和修饰的作用。JS是对网页上的动图和分类进行调整。这三者共同撑起了网页的架构和内容。
三 开发实战
在DW中,选用HTML 5标准。初步形式如下:
<!doctype html> //选用HTML 5标准的开头行是本形式
<html>
<head> // <>和</>表示代码的起始和结尾
<meta charset="utf-8">
<title>Hello</title> //<title>与</title>之间的文本表示为网页的标签名
/外链式/ //外链式是将css修饰的文本格式提取出来,并可以在网页代码中引用,以此来便捷的更改文字式样
<link href="file:///D|/企业实训/web/Untitled-2.css" type="text/css" rel="stylesheet"/>
/内嵌式/ //内嵌式是直接在代码中进行文本式样的修改与调整,不便于后期维护
<style type="text/css">
#txt{
background-color:
#F00 !important;/* 强调作用*/
width=740px;
}
</style>
</head> //<head> 标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
行内样式/
<body> //body 元素是定义文档的主体。body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)
<div id="txt" style="width:700px;background-color:#096;
margin: 0 auto;">
<h1 class="myclass">你好,秋天</h1> //<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
<p>zhaoqi @ 2018-10-08</p> //<p></p>用于划分段落
<p>春天是一把琴,将优美琴声带给世人,叫他们脱去衣袄,重新奔跑在温暖的大地中;夏天是一把扇,扇去炎热,以热情的脸庞去温抚他人;冬天时一雪花,飘飘而来,为人们带来雪的姿态,但是秋天的叶则更令我喜欢。</p>
<p>秋天的叶是凄凉的飘飘洒洒的落叶如一只蝴蝶,飞舞着,飘到大地母亲的怀抱里。</p>
<p>秋天的叶是一位化妆师,把世界渲染,把大地变成金黄色;秋天的叶,默 默无闻,春天夏天,树叶的绿叶衬托使鸟儿莺歌燕舞,秋天的你,默默而去, 但你不伤心,因为你熟知“落红不是无情物,化作春泥更护花。”</p>
<p>秋日的叶是富有诗意的,你好,秋天,你好!</p>
<p>浏览[1051]|评论[105]</p>
<p>注:文字摘自网络</p>
</div> //<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。<div>标签常用于组合块级元素,以便通过 CSS 来对这些元素进行格式化。
</body>
<html>
本部分属于外链式内容。属于css下的对于文本修改的功能。外链式可以随用随取,操作方便,推荐使用
@charset "utf-8";
/* CSS Document */
#txt{
background-color:#33F !important; //用于修改文本整体的背景色和占地大小
width =800px;
}
.myclass{ //用于标题的格式修改
text-align:center;/标题居中/
color:#F09;
font-family:楷体;/字体的类型/
font-style:italic;/浏览器会显示一个斜体的字体样式。/
}
p{ //用于段落的格式修改
color:#96C;
text-indent:2em;/将段落进行缩进/
line-height:35px;/设置固定的行间距。/
}