HTML的概述与入门

HTML的概述与入门

 

web的基本概念

 全称World Wide Web，缩写WWW，译为‘万维网’，简称为Web是一个可通过互联网来访问的，由许多互相链接的超文本（HyperText）组成的系统。

URI：Uniform Resource Identifier 统一资源标识符

HTTP：HyperText Transfer Protocol 超文本传输协议

传输过程：浏览器输入URI→通过HTPP→经过网络→到达指定服务器→发出请求后，服务器就会把处理结果返回给浏览器。

注意：Web不等于Internet

它只是Internet中的一部分，以后只要提到Web，就一定是和浏览器有关的事项。Web是互联网提供信息的一种手段。

Web服务器

又称WWW服务器、网站服务器、站点服务器或HTTP服务器将信息用超文本（HyperText）组织，为用户在Internet上搜索和浏览信息提供服务。

Web服务器实际上就是一个软件系统，它必须安装在一台高性能和高可靠性的计算机上，人们通常将这台计算机就叫做Web服务器。

它分为硬件服务器和软件服务器。

有些Web服务器是没有运行界面的，在后台运行。

常用的Web服务器有：Microsoft IIS、IBM WebSphere、Oracle WebLogic、金蝶公司 Apusic、Apache 开源、Tomcat 开源、JBoss 开源。

安装UINX、Linux或Windows 2003/2008/2012 Server等网络操作系统。一台计算机可以安装多个Web服务器。

在Web世界里，每一个Web服务器除了提供自己独特的信息服务外，还可用超链接（Hyperlink）指向其他Web服务器，而这些Web服务器又可指向更多的Web服务器，这样，一个全球范围的、由Web服务器组成的万维网就形成了。

注：一般要花钱购买的Web服务器，可以最大支持并发的用户数。

.Web页面

Web在提供信息服务之前，所有信息都必须以文件方式事先存放在Web服务器磁盘中的某个文件夹下，其中包含了由超文本标记语言HTML组成的文本文件，这些文本文件称为网页文件或Web页面文件 Web page。

统一资源定位符 URL

信息资源放在Web服务器之后，需要将它的地址告诉用户，以便让用户来访问，这个地址就叫统一资源定位符 Uniform Resource Locators，URL，俗称网址。

注：互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。主机名可直接输入对应的IP地址，有时也包括端口号。

Web服务器默认TCP端口号为80，用于监听有无页面请求。

网页制作入门

HTML简介

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 [1] 超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

CSS简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

 

 

常见浏览器介绍

　　浏览器是网页运行的平台，常用的浏览器有 IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。

　　

　　可以通过这个网址  http://tongji.baidu.com/data/browser  查看浏览器的占有的市场份额

常见浏览器内核

　　1、内核介绍

　　　（1）浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。

　　　（2）渲染引擎 它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。

　　　（3）JS 引擎 则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。

　　　（4）最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。

　　2、内核的分类

　　  浏览器的内核的种类很多，常见的浏览器内核可以分为四种：Trident、Gecko、Blink、Webkit。

　　（1）Trident (IE内核)

　　　　国内很多的双核浏览器的其中一核便是 Trident，美其名曰 "兼容模式"。

　　　　代表： IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。

　　　　Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML。

　　（2）Gecko(firefox)

　　　　 Mozilla FireFox(火狐浏览器) 采用该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。 可惜这几年已经没落了， 比如 打开速度慢、升级频繁。

　　（3）webkit(Safari)

　　　　Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。

　　　　代表浏览器：傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器。

　　（4）Chromium/Bink(chrome)

　　　　在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。

　　　　大部分国产浏览器最新版都采用Blink内核。

　　（5）Presto (Opera)

　　　　Presto 是挪威产浏览器 opera 的 "前任" 内核，最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了

　　3、移动端的浏览器

　　移动端的浏览器内核主要说的是系统内置浏览器的内核。

　　目前移动设备浏览器上常用的内核有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit，Android 4.4 之前的 Android 系统浏览器内核是 WebKit，Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink，Windows Phone 8 系统浏览器内核是 Trident。

Dreamwear工具的使用

 创建自定义命令
Dreamweaver的一个最有用的功能就是“历史面板”。基于历史面板，Dreamweaver能够创建新的命令序列。要创建一个命令，只需要简单地执行你想要记录的步骤。然后，在历史面板中，选择想要保存的步骤，并在右下角点击“保存为”图标，起一个名字，点击OK。
  此时，你的自定义命令就出现在“命令”菜单中，可以随意使用了。
创建自定义对象
“对象面板”非常利于在页面中快速插入项目，比如表单、框架等等。要创建自定义对象，首先创建一个文件，其中要包含你想插入到文档中的代码。比如，要创建“CNET Builder。
  com”的新闻框，首先下载这段代码并保存为“newsletters。htm”，然后，为了在对象窗口中创建一个新面板，要在Dreamweaver安装目录中的“ConfigurationObjects”下创建一个文件夹，名字可以随你设置，比如叫做“My Objects”。
  将文件“newsletters。htm”放置到这个目录下。同时，需要一个代表新对象的图标文件。可以自己创建一个图标文件，或者干脆让Dreamweaver插入一个普通图标。如果是自己创建图标，请注意建立一个18×18象素的GIF文件。将图形文件保存在同一个目录下，名字与新对象的名字一样。
  
现在，重新启动Dreamweaver或者选择重调入Extensions（按下Ctrl键，点击对象窗口弹出菜单），你可以在对象窗口中看到一个新的功能页面，图标就是你设定的那个。你可以象操作其它对象一样，拖曳这个新对象到页面中。
如果熟悉Javascript，你就可以创建更加复杂的对象和其他扩展程序，比如浮动面板、行为等等。
  或者，你干脆从Macromedia Exchange下载现成的对象。www。Ｅxamda。CoM
改变浏览者的鼠标状态
这是通过编辑CSS样式表来实现的。具体方法是：选择“文本> CSS样式> 编辑样式表”，弹出编辑样式表窗口，在其中点选“新建”按钮。
  接着选择“创建自定义样式”，给这个样式表起名，单击确定。编辑该样式表，在左边选择“扩展”项，在右边的“光标”项中选择要出现的指针效果即可。
利用Dreamweaver的锚标记制作在一个页面中的跳转链接
利用Dreamweaver的“锚标记”我们可以实现这个功能。
  具体方法是：将光标移到你想跳转到的地方，选择菜单中的“插入>命名锚记”，输入锚记的名称。接下来，在你想调用链接的链接目标框中输入“#书签名称”，这样一个页面内的跳转链接就做好了。在这里，如果我们在锚记名称前填入网页的名称，就会跳转到其他页面中的书签处。
   比如说我们在连接处输入“index。htm#top”，当浏览者点击这个链接时就会跳转到index页面中的“top”锚记处。
去掉图片和表格接触地方的空隙
要使图片和表格接触的地方不留空隙，仅在表格属性面板上把边框设为“0”是不行的，还需要在表格的属性面板上把单元格的两个属性设为“0”（即cellspacing=“0”和cellpadding=“0”）。
  
用跟踪图像帮助定位网页中各元素的位置
“跟踪图像”是Dreamweaver一个非常有效的功能，它允许用户在网页中将原来的平面设计稿作为辅助的背景。这么一来，用户就可以非常方便地定位文字、图像、表格、层等网页元素在该页面中的位置了。跟踪图像的具体使用是这样的：首先使用各种绘图软件作出一个想象中的网页排版格局图，然后将此图保存为网络图像格式（包括gif、jpg、jpeg和png）。
  用Dreamweaver打开你所编辑的网页，在菜单中选择“修改>页面属性”，然后在弹出的对话框中的“跟踪图像”项中输入刚才创建的网页排版格局图所在位置。再在图像透明度中设定跟踪图像的透明度，OK。这样你就可以在当前网页中方便地定位各个网页元素的位置了。
  使用了跟踪图像的网页在用Dreamweaver编辑时不会再显示背景图案，但当使用浏览器浏览时正好相反，跟踪图像不见了，所见的就是经过编辑的网页（当然能够显示背景图案）。
关于“将表格宽度转换成像素”和“将表格宽度转换成百分比”
“将表格宽度转换成像素”和“将表格宽度转换成百分比”，是Dreamweaver的两个设置表格宽度的重要功能。
  当你打开一个带有表格的网页时，选中某个表格，在随后显示出的表格属性工具面板中就能看到这两个按钮了。顾名思义“将表格宽度转换成像素”就是将表格中所有单元格的宽度以像素表示，而“将表格宽度转换成百分比”是将表格中所有单元格的宽度以百分比表示。仔细想想他们的作用，如果将一个表格的宽度全以像素表示，当浏览窗口被放大时，表格就不会随之放大单元格的宽度。
  而使用了“将表格宽度转换成像素”后能够使你在“640×480”分辨率下建立的100%宽的表格在更高的分辨率下依旧保持100%的宽度。所以活用这两个功能可以使网页排版事半功倍。

HTML的基本格式

1、HTML基本文档格式—<html> 标记

—<html>文档的头部好和主体内容 </html> 根标记

—<head> 文档的头部信息</head> 头部标记 只能有一对

—<title>显示在浏览器窗口的标题栏中“网页名称”</title> 位于<head>标记之内

—<body></body> 主体标记 位于<html>之内，<head>标记之后

<!doctype html> 声明文档类型

<html> 跟标签

<head> 头部标签

<title></title> 标题签

</head>

<body>

</body>

……

</html>

2、HTML 标签关系

嵌套关系：<head><title></title></head> 父子

并列关系：<head></head><body></body> 兄弟姐妹

3、 HTML 标签分类

双标记 <标记名></标记名> :<front ></front >、<p > </p> 等

单标记 <标记名/> ：注释、 <br/> 、<!Doctype html>、<hr/>

HTML的文本控制标记

1.设置页面标题<title
演示如下：

2.定义页面元信息标记`<meta /
(1).<mata name=“名称” content=“值”/
·设置网页关键字
·设置网页描述
·设置网页作者
(2)…<mata http-equiv=“名称” content=“值”/
·设置字符集
·设置网页自动刷新与跳转

3.引用外部文件标记<link

4.内嵌样式标记<style

##文本控制标记

align属性设置对齐方式
left:左对齐
center：居中对齐
right:右对齐

常用属性

##图像标记
常用图像格式有GIF格式，PNG格式，JPG格式

绝对路径和相对路径
1.绝对路径
指网页上的文件或目录在硬盘上的真正路径。
2.相对路径
相对于当前文件的路径，相对路径不带有盘符通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。网页中推荐使用相对路径。