Web开发简介

一 web概述

网页:网站中用于承载信息的页面,主要由文字、图像和超链接等元素构成,除了这些元素,网页中还可以包含音频、视频以及flash等。

Web标准:Web标准不是某一个标准,而是由W3C和其他标准化组织制定的一系列标准的集合。 包含我们所熟悉的HTML、CSS、JavaScript等等。

     Web标准包括:结构标准+表现标准+行为标准

 

二 开发工具- Dreamweave

菜单栏

文件:新建、打开、保存等

编辑:快捷键:给注释加快捷键

   首选参数:代码格式、代码提示、代码颜色、新建文档、在浏览器中预览、字体大小

插入:表单、超链接等

格式:插入段落、标题、列表、样式等

站点:可以理解成一个文件夹,把要建的网页、图片等都放进去,方便统一管理

窗口:显示隐藏窗口

插入栏:常用的标签,这里可以直接用

文档工具栏:显示代码、设计视图、修改网页标题、选择调试用的浏览器

文档窗口:代码区、视图区、文档状态栏

属性面板:不通元素属性面板内容不同

Dreamweaver初始化设置:

工作区布局:窗口-工作区布局-经典

必备面板:窗口—插入、属性、文件

首选参数-新建文档设置

代码提示:首选参数-代码提示-结束标签选择第二项

默认浏览器:首选参数-在浏览器中预览-勾选主浏览器

三 网络开发入门

1、HTML

Html文档基本格式:文档后缀名.html或者.htm

必须用在开头:用于向浏览器说明当前文档使用的哪种HTML规范标准

:根标记,用于告知浏览器本文件是个html文档

:头部信息,主要用来放置其他位于头部的标记,像、<meta>、<link>、<style>等</p> <p style="text-align:justify;"><meta>:描述HTML文档的描述,关键词,作者,字符集等。</p> <p style="text-align:justify;"><body>:主体标记。网页上要显示的所有内容都写在此处</p> <p style="text-align:justify;"> </p> <p style="text-align:justify;"> </p> <p style="text-align:justify;">HTML标记或者标签</p> <p style="text-align:justify;">通常成对出现:<html></html>、<p></p></p> <p style="text-align:justify;">标签对的第一个标签叫开始标签(开放标签),第二个是结束标签(闭合标签)</p> <p style="text-align:justify;">标签也分单标签和双标签:<img /> <hr /></p> <p style="text-align:justify;">标签上有自己属性:比如id,写法:属性=“值”</p> <p style="text-align:justify;">注释:<!--  我是注释 --></p> <p style="text-align:justify;">标签:</p> <p style="text-align:justify;"><div>:用来划分区域的</p> <p style="text-align:justify;"><p>:段落</p> <p style="text-align:justify;"><h1>~<h6>:标题从大到小</p> <p style="text-align:justify;"><strong><strong>2、CSS</strong></strong></p> <p style="text-align:justify;">Html中引用样式三种方式(样式使用的顺序:行内样式—内嵌式—外链式)</p> <p style="text-align:justify;">行内样式:在html标签上写样式(不建议,后期不好维护)</p> <p style="text-align:justify;">内嵌式:在html文档的头部<head>中添加<style>,在style标签里面写样式</p> <p style="text-align:justify;">外链式:新建一个css样式文件,引入到html中(推荐)</p> <p style="text-align:justify;">href:要引入的css文件</p> <p style="text-align:justify;">type:要引入的文件的类型text/css代表引入的是</p> <p style="text-align:justify;">个样式表文件</p> <p style="text-align:justify;">rel:当前文档与引入文档的关系,stylesheet代表被引入的是一个样式表文件</p> <p style="text-align:justify;"> </p> <p style="text-align:justify;">CSS的写法(基本语法)    选择器  {</p> <p style="text-align:justify;">属性1 : 属性1的值 ;</p> <p style="text-align:justify;">属性2 : 属性2的值 ; …  …</p> <p style="text-align:justify;">}</p> <p style="text-align:justify;">CSS的选择器</p> <p style="text-align:justify;">id选择器:#id名 {属性1 : 属性1的值 ; }</p> <p style="text-align:justify;">class选择器:.class名{属性1 : 属性1的值 ; }</p> <p style="text-align:justify;">标签选择器:标签名 {属性1 : 属性1的值 ; }</p> <p style="text-align:justify;"><strong><strong>3、JavaScript</strong></strong></p> <p style="text-align:justify;">引用js的两种方式</p> <p style="text-align:justify;">1、内嵌式:在html文档的头部<head>中添加<script>标签,在script标签中写js的代码</p> <p style="text-align:justify;">2、外链式:新建一个js文件,引入到html中(推荐)</p> <p style="text-align:justify;"> </p> <p style="text-align:justify;"> </p> <p style="text-align:justify;"> </p> <p style="text-align:justify;"> </p> <p style="text-align:justify;"> </p> <p style="text-align:justify;"> </p> <p style="text-align:justify;"> </p> <p style="text-align:left;"><span><strong><span><span style="color:#3d464d;"><strong>课上练习:</strong></span></span></strong></span></p> <p style="text-align:left;"><span><span><span style="color:#3d464d;"><!DOCTYPE HTML ></span></span><br><span><span style="color:#3d464d;"><html></span></span><br><span><span style="color:#3d464d;">    <head></span></span><br><span><span style="color:#3d464d;">      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></span></span><br><span><span style="color:#3d464d;">      <title>课上作业
     
       
     
      
      
   
 
 
     
     
   
   

    auto;">
    
    
   

你好,秋天

                                   /*通过下面class内的内容更改标题的属性*/

zhaoqi @ 2018-10-08


春天是一把琴,将优美琴声带给世人,叫他们脱去衣袄,重新奔跑在温暖的大地中;夏天是一把扇,扇去炎热,以热情的脸庞去温抚他人;冬天时一雪花,飘飘而来,为人们带来雪的姿态,但是秋天的叶则更令我喜欢。


秋天的叶是凄凉的飘飘洒洒的落叶如一只蝴蝶,飞舞着,飘到大地母亲的怀抱里。


秋天的叶是一位化妆师,把世界渲染,把大地变成金黄色;秋天的叶,默 默无闻,春天夏天,树叶的绿叶衬托使鸟儿莺歌燕舞,秋天的你,默默而去, 但你不伤心,因为你熟知"落红不是无情物,化作春泥更护花。"


秋日的叶是富有诗意的,你好,秋天,你好!


浏览[1051]|评论[105]


注:文字摘自网络



   

 

css:可以在源代码中书写这部分内容


@charset "utf-8";
/* CSS Document */

 #txt{
            
             background-color:#f00 !important;
             width:800px;
              
          }
          
          .myclass{
            
             text-align:center;
             color:#fff;
             font-family:楷体;
             font-style:italic;
             
              
          }

                  p{
              color:#fff;
              text-indent:2em;
                          line-height:35px;
              
          }

Web开发简介_第1张图片

 

转载于:https://my.oschina.net/u/4090676/blog/3018247

你可能感兴趣的:(Web开发简介)