端工作都是从创建一个网页文件开始的,一个最小的网页文件应该总是包含一些东西。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>标题</title>
<link rel="stylesheet" href="css/main.css" />
<link rel="icon" href="images/favicon.png" />
</head>
<body>
<script src="js/scripts.js"></script>
</body>
</html>
其中,head 主要包含,提供有关页面的元信息标签 <meta>,比如 针对搜索引擎 ,关键词和描述及编码类型等,网页标题,css样式文件。
一般建议,script 标签写在body 结束之前。
是不是很简单,这是一个网页的基本框架,要想制作一个内容丰富,漂亮的网页,还需要学习很多知识。
https://www.w3school.com.cn/tags/tag_meta.asp
https://www.haorooms.com/post/html_meta_ds
到此,你基本已经了解了如何制作一个网页,建议能够亲手练习下,这样加深理解。
接下来,我会大概讲下,网页如何布局并填充内容,感谢您的关注。
习html5从入门到精通,零基础新手也能看懂,无论你是唱歌,画画的艺术生,还是学习机械专业的工科生,或者大学读的文学学科。先了解HTML5可以实现的功能有哪儿些?
1. HTML5可以同时在多种设备上运行,这一点是其他方式都无法做到的;
2. 在互联网中随意被分享,并且搜索时可以及时被找到;有搜索扩展性。
3. HTML5应用可以使用交互式设计来提供最佳体验,而不需要更改代码。你可以从桌面到手机到平板电脑无缝进行切换,而无需重复安装不同的应用;
4. HTML5适用于多厂商标准,建立在协议之上,是众多公司努力的结果。
所以,只要你平时上网,你看完这篇文章之后,相信你一定能够对html5有一个基本的认识。
有小白会问html5是做什么的?
这里极其简单的概括:用于实现我们能够看到的所有网站,但是不涉及到数据层面(也就是负责将一张设计好的网页图片(设计师的工作),用代码实现出来,在一个地方放置个块,给一个块设置颜色,调整字体大小,让图片动起来等)。
html5的由来
不熟悉html5的人,可能会很熟悉一个2005年以前常用的词语——网页设计与制作。
随着行业的发展,网站的制作越来越受到了人们的重视,社会化分工越来越明细。在2005年,“web前端开发工程师”这个词语开始出现在各个一线城市。2008年,html5横空出世,2009年html5这个全新的词语在北京的一些顶尖级公司出现,2012年,逐渐的普及开来,2014年迅速发展。
1. HTML5有本地存储的特征,基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。
2. 利用HTML5非常方便的在网页上添加视频和音频,不需要很复杂的代码,就能打造一款功能齐全的HTML5播放器。
3. CSS3的使用可以提供更多的CSS属性,可以制作更加丰富的渲染效果。
除了以上基本知识点以外,还需要掌握:HTML5的前端技术也是必备的,其中包括:CSS、HTML、DOM、javascript、Ajax,jquery,Vue,jquery- mobile,zepto等,在掌握这些技术的同时,还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理以及存在的各种Bug。
上面讲的是HTML5主要一些特征。
html5的基本组成
html5 = html + cs+ java
html指的是结构
css指样式
js即java,指的是行为
关于结构、样式、行为的理解
结构——在整个网页中有标题,有列表,有图片等。
样式 —— 标题文字的字体大小、颜色、字体;图片的大小;某个块的背景色或背景图等。
行为——在网页上四处飘动的广告;图片滚动;浏览淘宝时鼠标移动到商品时,放大商品的效果等。
容易弄混的概念
html5移动端的功能和应用程序。
对于苹果手机中的应用程序,属于ios开发,语言是oc;对于其他安卓系统的手机,需要使用java语言进行开发。html5能够做的是移动端的网页以及微信平台中的移动端网页。
前端后台的区别
无论html5还是ios,在整个网页开发流程当中,前端(html5)开发工程师,主要负责的是“前台页面制作”,“网站测试”,“修改”三个部分。
html5 与 网页设计与制作 的区别
原有的网页设计与制作,主要针对pc平台,进行网页网站的设计与制作,相对会涉及一部分设计工作,并将美工图实现成网页。通常使用的工具是网页三剑客——photoshop、flash、dreamweaver。然而,行业的发展使得“网页设计与制作”这一职业逐渐遭到了淘汰,原因主要有四:
【一】:网页设计与网页制作是两个完不同的领域,一个由美感主导,另一个则需要逻辑思维主导。对于开发人员来说,如果将宝贵的精力分散到两个不同的行业中,最后通常两方面都是半斤八两,没有实质的竞争力;
【二】:网页设计与制作,这一职业中的制作,指的是网页的结构与样式(即html+css),而当前网站中java已经占据了极大的比重,如果还停留在原有的结构和样式中,发展空间会变得很小;
【三】:网页设计与制作当中的结构实现,通常采用的是table布局;而web前端开发工程师、html5当中结构的实现,采用的是div+css方式的布局,因此,dreamweaver工具的使用也就没有什么必要性了,取而代之的是内存占用小,开发速度快的文本类编辑器。而flash,在与html5的大战当中战败,当前已经退出了移动端以及电视平台的市场争夺,在pc平台也越来越少。转言之,flash在网页制作的领域里已经江郎才尽~原来的网页三剑客只剩下一个ps,在前端工作的要求中,需要掌握基本的切图即可。
【四】移动互联网的飞速发展,也使得html5的地位迅速提升。移动设备有其特殊的开发要求,原有的网页设计与制作,早已无法满足开发的需要。
html5是移动互联网前端的主流开发语言,所以说,无论做手机网站还是在手机app应用,前端的样式都是html5开发。html5作为移动互联网主流前端开发语言,从事html5相关开发工作,就业前景真的是一片光明。在目前还没有一个前端的开发语言能取代html5的位置。
HTML历史
早在1969年,美国就建立了世界上第一个电脑网络—阿帕网。但由于当时的电脑网络只是为了数据运算而建,与人们的日常生活相距甚远,故而网络的发展非常缓慢,直到1985年,连接在阿帕网上的电脑主机也只有1961台。
相对于电脑网络来说,网站的出现要晚得多。1989年,欧洲粒子物理实验室研究员Tim Berners-Lee,发明了一种用于网上交换文本的格式,即基于标记的语言HTML,并创建了网上软件平台World Wide Web(万维网)。HTML最吸引人的地方,在于其超文本链接技术,通过超链接,可以非常方便地跳转到其他任何一个网页上。万维网实现了媒体思想家特德·纳尔逊于1965年提出的超文本设想。万维网的出现,带动了网站的裂变式发展,到2006年11月,全球互联网网站总数就已经超过了一亿大关。
1990年11月,第一个Web服务器nxoc01.cern.ch开始运行,Tim Berners-Lee在自己编写的图形化Web浏览器“World Wide Web”上,看到了最早的Web页面。
而世界上第一个网站(当时的网址是http://nxoc01.cern.ch/hypertext/www/theproject.html)早在1992年就关闭了,然而幸运的是这一界面却被保留了下来,只要单击下面这个链接:Multiple Choices
HTML基础
HTML是目前在网络上应用最为广泛的语言,也是构成网页文档的主要语言。HTML文档是由HTML标签组成的描述性文本,HTML标签可以标识文字、图形、动画、声音、表格、链接等。
HTML语言作用
HTML作为一种网页内容标识语言,易学易懂,熟悉使用该语言可以制作功能强大、美观大方的网页。HTML语言的主要作用说明如下:
使用HTMl语言标识文本。例如,定义标题文本、段落文本、列表文本、预定义文本等。
使用HTML语言建立超链接,通过超链接可以访问互联网上的所有信息,当使用鼠标单击超链接时,会自动跳转到链接页面。
使用HTML语言创建列表,把信息有序地组织在一起,以方便浏览。
使用HTMl语言在网页中显示图像、声音、视频、动画等多媒体信息,把网页设计得更富冲击力。
使用HTML语言可以制作表格,以方便显示大量数据。
使用HTML语言制作表单,允许在网页内输入文本信息,执行其他用户操作,方便信息互动。
HTML文档基本结构
HTML文档一般都应包含两部分:头部区域和主体区域。HTML文档基本结构由3个标签负责组织:<html>、<head>和<body>。其中<html>标签标识HTML文档,<head>标签标识头部区域,而<body>标签标识主体区域。一个完整的HTML文档基本结构如下:每个标签都是成对组成,第一个标签(如<html>)表示标识的开始位置,而第二个标签(如</html>)表示标识的结束位置。<html>标签包含<head>和<body>标签,而<head>和<body>标签是并列排列。
HTML基础
编写HTML文档时,必须遵循HTML语法规范。HTML文档实际上就是一个文本文件,它由标签和信息混合组成,当然这些标签和信息必须遵循一定的组合规则,否则浏览器是无法解析的。
HTML语言的规范条文不多,相信读者也很容易理解。从逻辑上分析,这些标签包含的内容就表示一类对象,也可以称为网页元素。从形式上分析,这些网页元素通过标签进行分隔,然后表达一定的语义。很多时候,我们把网页标签和网页元素混为一团,而实际上,网页文档就是由元素和标签组成的容器。
所有标签都包含在“<”和“>”起止标识符中,构个标签。例如,<style>、<head>、<body>和<div>等。
在HTML文档中,绝大多数元素都有起始标签和结束标签,在起始标签和结束标签之间包含的是元素主体。例如,<body>和</body>中间包含的就是网页内容主体。
起始标签包含元素的名称,以及可选属性,也就是说元素的名称和属性都必须在起始标签中。结束标签以反斜杠开始,然后附加上元素名称。例如:
<tag>元素主体</ta
元素的属性包含属性名称和属性值两部分,中间通过等号进行连接,多个属性之间通过空格进行分隔。属性与元素名称之间也是通过空格进行分隔。例如:
HTML常用标签
HTML定义的标签很多,下面对常用标签进行说明,随着读者学习不断深入,相信会完全掌握HTML所有标签的用法和使用技巧。
1.文档结构标签
文档结构标签主要用来标识文档的基本结构,主要标签说明如下。
<html>...</html>:标识HTML文档的起始和终止。
<head>...</head>:标识HTML文档的头部区域。
<body>...</body>:标识HTML文档的主体区域。
文本格式标签
文本格式标签主要用来标识文本区块,并附带一定的显示格式,主要标签说明如下。
<title>...</title>:标识网页标题。
<hi>...</hi>:标识标题文本,其中i表示1、2、3、4、5、6,分别表示一级、二级、三级等标题。
<p>...</p>:标识段落文本。
<pre>...</pre>:标识预定义文本。
<blockquote>...</blockquote>:标识引用文本。字符格式标签
字符格式标签主要用来标识部分文本字符的语义,很多字符标签可以呈现一定的显示效果。例如,加粗显示、斜体显示或者下划线显示等。
在HTML文档中,列表结构可以分为两种类型:有序列表和无序列表。无序列表使用项目符号来标识列表,而有序列表则使用编号来标识列表的项目顺序。
XHTML文档基本结构
完整的XHTML文档结构如下:
XHTML代码不排斥HTML规则,在结构上也基本相似,但如果仔细比较,它有两点不同。
定义文档类型
在XHTML文档第一行新增了<!DOCTYPE>元素。
声明命名空间
在XHTML文档根元素中必须使用xmlns属性声明文档的命名空间。xmlns是XHTML NameSpace的缩写,中文翻译为命名空间(也有人翻译为名字空间、名称空间)。命名空间是收集元素类型和属性名字的一个详细DTD,它允许通过一个URL地址指向来识别命名空间。
XHTML是HTML向XML过渡的标识语言,它需要符合XML规则,因此也需要定义名字空间。又因为XHTML 1.0还不允许用户自定义元素,因此它的命名空间都相同,就是“Er是根据XML语法简化而来的,因此它遵循XML文档规范。同时XHTML又大量继承HTML语言语法规范,因此与HTML语言非常相似,不过它对代码的要求更加严谨。遵循这些要求,对于培养良好的XHTML代码书写习惯是非常重要的。
XHTML文档类型
XHTML 1.0支持3种DTD(型定义)声明:过渡型(Transitional)、严格型(Strict)和框架型(Frameset)。
1.过渡型
这种文档类型对于标签和属性的语法要求不是很严格,允许在页面中使用HTML 4.01的标签(符合XHTML语法标准)。过渡型DTD语句如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w1.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.严格型
这类文档类型对于文档内的代码要求比较严格,不允许使用任何表现层的标签和属性。严格型DTD语句如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w1.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
在严格型文档类型中,以下元素将不被支持。
center:居中(属于表现层)。
font:字体样式,如大小、颜色和样式(属于表现层)。
strike:删除线(属于表现层)。
s:删除线(属于表现层)。
u:文本下划线(属于表现层)。
iframe:嵌入式框架窗口(专用于框架文档类型或过渡型文档)。
isindex:提示用户输入单行文本(与input元素语义重复)。
dir:定义目录列表(与dl元素语义重复)。
menu:定义菜单列表(与ul元素语义重复)。
basefont:定义文档默认字体属性(属于表现层)。
applet:定义插件(与object元素语义重复)。
在严格型文档类型中,以下属性将不被支持。
align(支持table包含的相关元素:tr、td、th、col、colgroup、thead、tbody、tfoot)。
language。
background。
bgcolor。
border(table元素支持)。
height(img和object元素支持)。
hspace。
name(在HTML 4.01 Strict中支持,在XHTML 1.0 Strict中的form和img元素不支持)。
noshade。
nowrap。
target。
text、link、vlink和alink。
vspace。
width(img、object、table、col和colgroup元素支持)。
框架型
这是一种专门针对框架页面所使用的DTD,
实际上,DTD是一套关于标签的语法规则。DTD文件是一个ASCII的文本文件,后缀名为.dtd。利用DOCTYPE声明中的URL可以访问指定类型的DTD详细信息。例如,对于XHTML 1.0过渡型DTD的URL为http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd,在Dreamweaver中打开XHTML 1.0过渡型DTD文档,代码显示如图2.4所示。
XHTML 1.0过渡型DTD文档
一个DTD文档包含元素的定义规则,元素间关系的定义规则,元素可使用的属性、实体或符号规则。这些规则用于标签Web文档的内容。此外还包括了一些其他规则,它们规定了哪些标签能出现在其他标签中。文档类型不同,它们对应的DTD也不相同。
DOCTYPE结构图
DOCTYPE声明中各个部分说明如下。
顶级元素:指定DTD中声明的顶级元素类型,这与声明的SGML文档类型相对应。HTML文档默认顶级元素为html。
可用性:指定正式公开标识符(FPI)是可公开访问的对象(PUBLIC)还是系统资源(SYSTEM)。默认为PUBLIC,SYSTEM系统资源包括本地文件或URL。
注册:指定组织是否由国际标准化组织(ISO)注册。“+”(默认)表示组织名称已注册,“-”表示组织名称未注册。W3C是属于非注册的ISO组织,所以显示为“-”符号。
组织:指定在!DOCTYPE声明引用的DTD(文档类型定义)的创建和维护的团体或组织的名称。HTML语言规范的创建和维护组织为W3C。
类型:指定公开文本的类,即所引用的对象类型。HTML默认为DTD。
标签:指定公开文本的描述,即对所引用的公开文本的唯一描述性名称,后面可附带版本号。HTML默认为HTML,XHTML默认为XHTML,后面跟随的是语言版本号。
定义:指定文档类型定义,包含Frameset(框架集文档)、Strict(严格型文档)和Transitional(过渡型文档)。Strict(严格型文档)禁止使用W3C规范中指定将逐步淘汰的元素和属性,而Transitional(过渡型文档)可以包含除frameset元素以外的全部内容。
语言:指定公开文本的语言,即用于创建所引用对象的自然语言编码系统。该语言定义已编写为ISO 639语言代码(两个字母要大写),默认为EN(英语)。
名字空间
在XHTML文档中,读者还需要注意另一个容易忽略的问题:给<html>标签定义名字空间。
HTML元信息
在HTML文档结构的头部区域,存储着文档的各种基本信,这些信息主要被浏览器所采用,不会显示在网页正文中。另外,搜索引擎也会检索这些信息,因此重视并设置这些头部信息将有助于提高网页的访问率。
*请认真填写需求信息,我们会在24小时内与您取得联系。