们先来看一下案例:
在浏览器中输入网址可以看到需要浏览的网页,那这个网页是怎么生成的呢?那我们先了解一下什么是web(互联网总称):Web:web(World Wide Web)即全球广域网,也称为万维网,它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务,为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面,其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
Web又分为Web前端和Web后端。
什么又是Web前端和Web后端呢?前端:就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。后端:更多的是与数据库进行交互以处理相应的业务逻辑。我们这里着重介绍web前端相关的知识点。
web前端分为网页设计师、web前端开发工程师。
网页设计师是对网页的架构、色彩负责;网站得做的漂亮,客户满意。主要需要有美术功底,会photoshop等。
web前端开发工程师是负责交互设计的,需要和后台程序猿进行交互设计的配合。需要掌握的有脚本技术javascript、HTML+CSS现下最流行的页面搭建技术,ajax和jquery等。
我们此阶段就是web前端开发工程师。
大家都上过网,都浏览过网页,那什么是网站,什么又是网页,网站或者网页是怎么形成的呢?
网站是用于展示相关内容的网页的集合。
网页是网站中的任何一页面,通常文件扩展名为html、或htm ,那我们要实现一个网页首先需要学习哪些技术呢?那就是HTML,其次是CSS,还有还javascript等一些相关的技术。
我们了解了网站从无到有的过程,总之就是设计要给我们一个设计好的效果,我们需要用相关技术把它生成网页。那我们来学习一下如何生成吧。生成网页要从以下几方面入手学习。
√什么是HTML
√HTML的发展史
√HTML的特点
√HTML的基本组成单位
√HTML的基本结构
√HTML的常用标签
√ HTML4.0及XHMTL1.0及HTML5的基本规范
√HTML4.0及HTML5.0的区别
√ Photoshop的基本使用
一、什么是HTML
HTML(Hyper Text Mark-up Language)即超文本标记语言或超文本链接标示语言,是目前网络上应用最广泛的语言,也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。也就是说文字、图片、表格、音视频都被看成是文本,这些部分都是用HTML的标签生成的。
二、HTML的发展史
三、HTML的特点
1.简易性
2.可扩展性
3.平台无关
四、HTML的基本组成单位
HTML的基本组成单位-----标签。那什么是标签,标签有那些特点呢?我们一一介绍一下。
标签:“标签”是一些符号,用来区分文档中的不同部分 。
标签的分类
–单标签
–双标签
标签的基本写法
单标签 :某些标签只需单独使用就能完整地表达意思,控制网页效果,这类标签的语法是:
<标签名/>
双标签:标签成对使用,由一个开始标签和一个结束标签构成。开始标签告诉Web浏览器从此处开始执行该标签所代表的功能,而结束标签告诉Web浏览器在这里结束该功能,结束标签的形式是在开始标签前加上一个斜杠。语法:
<标签名></标签名>
标签属性
在单标签和双标签的开始标签里,还可以包含一些属性,以达到个性化的效果。
<标签 属性=""属性="">内容</标签>
标签的组成
标签和标签属性及标签内容组成。
五、HTML的基本结构
了解了以上的知识我们开学习HTML吧。应该那里写HTML呢?在那里运行呢?
HTML的编辑工具 :
HTML的运行环境:
我们可以用这么多的浏览器可以浏览页面,每个浏览器对HTML代码的解析是会有差异的地方的,那我们在写代码的时候要兼容五大主流浏览器(IE、Chrome、FF、Safari 、Opera)。看看这些浏览器的市场占有率吧!
好了开始写HTML吧!首先要先写个HTML的基本结构。
网页的标题、其它的说明信息及不需要在浏览器中显示的内容放在head这对标签中。
在浏览器中需要显示的内容放在body这对标签中。
另外我们在真正写网页时除了以上的标签之外,我们还需要添加其它的标签,比如文档声明,中文编码声明等,为什么加这些呢?因为我们大家都知道浏览器特别多对吧。浏览器对HTML的代码解析不一样,不加文档声明,不同的浏览器会按自己的标准去解析HTML代码!所以我们在HTML最开始的位置加<!DOCTYPE HTML>这句话,每个浏览器都会按着符合标准的HTML代码去解析,说到标准,我们还要知道HTML是应该遵循谁的标准,HTML要遵循W3C标准,那W3C标准又是什么呢?
W3C标准:万维网联盟创建于1994年。到目前为止,W3C已发布了200多项影响深远的Web技术标准及实施指南,(W3C)标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。
对应的标准也分三方面:结构化标准语言主要包括HTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由W3C起草和发布。
另外加中文编码声明,是为了浏览器解析中文时以简体中文形式显示。
那中文编码有那些呢?有UTF-8(用在网页上可以统一页面显示中文简体繁体及其它语言)、GB2312(信息交换用汉字编码字符集)等。完整的HTM基本结构如下:
作网页时,经常需要设置网页的基本信息,如网页的标题、作者等。为此,HTML提供了一系列设置网页信息的标签,这些标签通常都写在
<head>标签内,也被称为HTML.文档头部相关标签。下面将介绍常用的HTML文档头部标签中的<title>和<meta>标签。
(1)<title>标签
<title>标签用于设置HTML页面的标题,也就是为网页取一个名称。在网页结构中,<title>标签必须位于<head>标签内。一个HTML.文档只能含有一个<title>标签,<title></title>标签之间的内容将显示在浏览器窗口的标题栏中。例如,将某个页面标题设置为“轻松学习HTML.5”,示例代码如下:
<title>轻松学习HIML.5</title>
上述代码对应的页面效果如下图:
(2)<meta>标签
<meta>标签用于定义页面的元信息(元信息不会显示在最终的页面效果中),可重复出现在标签中。在HTML中,<meta>标签是一个单标签,本身不包含任何内容,仅表示网页的相关信息。通过标签的属性,可以定义页面的相关参数。
例如,为搜索引擎提供网页的关键字、作者姓名、内容描述,以及定义网页的刷新时间等。下面介绍<meta/>标签常用的几组设置,具体如下。
<meta name-”名称”content-”值”>:在<meta>标签中使用 name 属性和 content 属性可以为搜索引擎提供信息。其中,name属性提供搜索内容名称,content属性提供对应的搜索内容值,这些属性的具体应用如下。
设置网页关键字,如某图像网站的关键字设置,示例代码如下:
<meta name=“keywoxds”content=“千图网,免费素材下载,千图网免费素材图库,矢量图,矢量图库,图像素材,网页素材,
免费素材,PS素材,网站素材,设计模板,设计素材,网页模板免费下载,千图,素材中国,素材,免费设计,图像”/>
在上述示例代码中,nare属性的属性值为"keywonds”,该属性值用于定义搜索内容名称为网页关键字;content 属性的属性值用于定义关键字的具体内容,多个关键字内容之间可以用“,”分隔。
设置网页描述,如某图像网站的描述信息设置,示例代码如下:
<meta name=”description”content=”专注免费设计素材下裁的网站!提供矢量图素材,矢量青景图像,矢量图库,还有
psd素材,PS素材,设计模板,设计素材,PPT素材,以及网页素材,网站素材,网页图标免费下载”/>
在上述示例代码中,name属性的属性值为“deseription”,该属性值用于定义搜索内容名称为网页描述;comtent 属性的属性值用于定义描述的具体内容。网页描述的文字不必过多,能够描述清晰即可。
设置网页作者,如可以为网站增加作者信息,示例代码如下:
<meta name-"author" content="网络部"/>
在上述示例代码中,name属性的属性值为”author”,该属性值用于定义搜索内容名称为网页作者;content属性的属性值用于定义具体的作者信息。
<meta http-equiv=”名称”content=”值”>在<meta/>标签中,http-equiv 属性和content 属性可以设置服务器发送给浏览器的HTTP头部信息,为浏览器显示该页面提供相关的参数标准。其中,http-equiv属性提供参数类型,content属性提供对应的参数值,这些属性的具体应用如下。设置字符集,如某图像官网字符集的设置,示例代码如下:
<meta http-equiva"Content-Type" content="text/html; charset=gbk"/>
在上述示例代码中,hitp-epuiv属性的属性值为“Content-Type”.content属性的属性值为“test/html”和“charset=gbk”,两个属性值之间用“:”隔开。其中,“text/html”用于说明当前文档类型为HIML“charset=gbk”用于说明文档字符集为GBK(中文编码)。
目前最常用的国际化字符集编码格式是UTF-8,常用的中文字符集编码格式主要是GBK和GB2312。当用户使用的字符集编码格式与当前浏览器不匹配时,网页内容就会出现乱码。新版本的HTML.5简化了字符集的写法,示例代码如下:
<meta charset="utf-g">
设置页面自动刷新与跳转,如定义某个页面10秒后跳转至百度首页,示例代码如下:
<meta http-equiv""refresh" content="10; url- httpa://sww.baidu.com/"/>
在上述示例代码中,http-equiv属性的属性值为“refresh”,content属性的属性值为数值和URL。两个属性值之间用“:”隔开,分别用于指定跳转时间和目标页面的URL。跳转时间默认以秒为单位。
本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言。以下是小编为大家整理的HTML基本的标签。
注:HTML 标签对大小写不敏感,但推荐使用小写!
基本
<html>…</html> 定义 HTML 文档
<head>…</head> 文档的信息
<meta> HTML 文档的元信息
<title>…</title> 文档的标题
<link> 文档与外部资源的关系
<style>…</style> 文档的样式信息
<body>…</body> 可见的页面内容
<!--…--> 注释
文本
<h1>...</h1> 标题字大小(h1~h6)
<b>...</b> 粗体字
<strong>...</strong> 粗体字(强调)
<i>...</i> 斜体字
<em>...</em> 斜体字(强调)
<u>...</u> 下划线
<del>...</del> 删除线(表示删除)
<center>…</center> 居中文本
<ul>…</ul> 无序列表
<ol>…</ol> 有序列表
<li>…</li> 列表项目
<a href=”…”>…</a> 超链接
<font> 定义文本字体尺寸、颜色、大小
<sub> 下标
<sup> 上标
<br> 换行
<p> 段落
图形
<img src=’”…”> 定义图像
<hr> 水平线
表格
<table>…</table> 定义表格
<th>…</th> 定义表格中的表头单元格
<tr>…</tr> 定义表格中的行
<td>…</td> 定义表格中的单元
其它
<form>…</form> 定义供用户输入的 HTML 表单
<frame> 定义框架集的窗口或框架
另加16进制颜色,但仅仅有16种颜色名可用英文字母,其余的要用16进制值。 记住哦!
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
*请认真填写需求信息,我们会在24小时内与您取得联系。