3.4企业实训网页开发

最新推荐文章于 2024-09-15 20:05:23 发布

chiwan2912

最新推荐文章于 2024-09-15 20:05:23 发布

阅读量155

点赞数

文章标签：开发工具 javascript ViewUI

原文链接：https://my.oschina.net/u/4090471/blog/3017850

版权

本学期我们主要学习网页的开发，新学期第一天，老师带领我们在机房熟悉了王爷的各方面基础知识。网站中用于承载信息的页面，主要由文字、图像和超链接等元素构成，除了这些元素，网页中还可以包含音频、视频以及flash等。Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。包含我们所熟悉的结构标准HTML、表现标准CSS、行为标准JavaScript等等。

开发工具有菜单栏，工具栏，文档工具类，代码编写窗口，属性面板，其他常用面板构成。

菜单栏文件：新建、打开、保存等编辑：快捷键：给注释加快捷键首选参数：代码格式、代码提示、代码颜色、新建文档、在浏览器中预览、字体大小插入：表单、超链接等格式：插入段落、标题、列表、样式等站点：可以理解成一个文件夹，把要建的网页、图片等都放进去，方便统一管理窗口：显示隐藏窗口插入栏：常用的标签，这里可以直接用文档工具栏：显示代码、设计视图、修改网页标题、选择调试用的浏览器文档窗口：代码区、视图区、文档状态栏属性面板：不通元素属性面板内容不同 Dreamweaver初始化设置：工作区布局：窗口-工作区布局-经典必备面板：窗口—插入、属性、文件首选参数-新建文档设置代码提示：首选参数-代码提示-结束标签选择第二项默认浏览器：首选参数-在浏览器中预览-勾选主浏览器

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

<!doctype html> 必须用在开头：用于向浏览器说明当前文档使用的哪种HTML规范标准

<html>：根标记，用于告知浏览器本文件是个html文档

<head>：头部信息，主要用来放置其他位于头部的标记，像<title>、<meta>、<link>、<style>等

<body>：主体标记。网页上要显示的所有内容都写在此处 HTML标记或者标签通常成对出现：<html></html>

标签对的第一个标签叫开始标签（开放标签），第二个是结束标签（闭合标签）

标签也分单标签和双标签：<img /> <hr />

标签上有自己属性：比如id，写法：属性=“值” 注释： 标签： <div>：用来划分区域的 <p>：段落 <h1>~<h6>：标题从大到小

Html中引用样式三种方式（样式使用的顺序：行内样式—内嵌式—外链式）

行内样式：在html标签上写样式（不建议，后期不好维护）

内嵌式：在html文档的头部<head>中添加<style>，在style标签里面写样式

外链式：新建一个css样式文件，引入到html中（推荐）

href：要引入的css文件 type：要引入的文件的类型text/css代表引入的是

个样式表文件 rel：当前文档与引入文档的关系，stylesheet代表被引入的是一个样式表文件

CSS的写法（基本语法）选择器 { 属性1 : 属性1的值 ; 属性2 : 属性2的值 ; … … }

CSS的选择器 id选择器：#id名｛属性1 : 属性1的值 ; ｝ class选择器：.class名｛属性1 : 属性1的值 ; ｝标签选择器：标签名｛属性1 : 属性1的值 ; ｝

引用js的两种方式内嵌式：在html文档的头部<head>中添加<script>标签，在script标签中写js的代码外链式：新建一个js文件，引入到html中（推荐）调用js中的方法（函数）

接下来是我上课期间打的代码

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style type="text/css">

#txt{background-color:#F36 !important;width:800px;}

</style>

</head>

<!--  注释  -->

<body>

<div id="text" style="width:770px; background-color:#6F6; margin:0 auto;">

<h1>你好，秋天</h1>

<p>zhaoqi @ 2018-10-08</p>

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

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

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

<p>秋日的叶是富有诗意的，你好，秋天，你好！</p>

<p>浏览[1051]|评论[105]</p>

<p>注：文字摘自网络</p>

</div>

</body>

</html>

@charset "utf-8";

/* CSS Document */

#txt{

background-color:#C36 !important;

whdth:800px;

}

.myclass{

text-align:center;

color:#CCC;

font-family:楷体;

font-style:italic;

}

p{

color:#39C;

text-indent:2em;

line-height:35px;

}