大家在浏览网页的时候,是否思考过这样一个问题:怎样才能制作出一个网页呢?制作出一个网页是很简单的,只要知道什么是HTML并掌握HTML的基础知识就可以制作出一个简单的网页,今天我就为讲解HTML的入门及结构组成。
一、什么是HTML?
1、在我们开始学习HTML之前我们需要知道什么是HTML?
HTML的全称为Hyper Text Markup Language,中文名称为超文本标记语言,阅览方式为网页浏览器,同时HTML也被称为网页。
2、一个简单的HTML文档
二、HTML编辑器
我们在可以使用TXT文本文档或者专业的HTML编辑器来编辑HTML。
1、记事本
① 创建一个TXT文本
② 输入HTML代码
③ 点击文件—另存为—输入名称+“html”的后缀名即可得到你的第一个HTML文件。
④ 然后双击这个文件运行。
运行结果
2、专业编辑器
① Sublime Text
② HBuilder
③ Adobe Dreamweaver
④ CoffeeCup HTML Editor
这其中我比较推荐HBuilder这款编辑器,界面简单,编辑起来很快。
三、HTML的组成部分
在上面的案例中我们可以看到HTML是由头部(head)和身体(body)所组成的。
1、头部(head)
通常包含标题(title),也就是一个网页的名称
网页标题
2、身体(body)
body的部分是整个网页的重要内容部分,让人一眼就浏览到这个网页的内容,可以插入文本、图片、多媒体等内容。
四、HTML元素
l HTML元素是指以开始标签起始,以结束标签终止的元素:元素内容即为开始标签与结束标签之间的内容。
l <head></head>、<body></body>、<p></p>、<h1></h2>等这些都是HTML元素,在上面的案例中就有六个元素。
l 也有部分元素只有开始标签,例如<br>,以开始标签的结束而结束。
五、HTML的属性
l 一般来说HTML的属性就是HTML元素的属性,属性可以在元素中添加附加信息。
l 属性总是以名称/值对的形式出现,比如:name=”value”。
l 属性一般描述于开始标签。
l style中会有更多的属性。
六、HTML格式化
HTML可定义很多供格式化输出的元素,比如粗体字和斜体字。
HTML文本格式化标签
标签 | 描述 |
<b> | 定义粗体文本 |
<em> | 定义着重文字 |
<i> | 定义斜体字 |
<small> | 定义小号字 |
<strong> | 定义加重语气 |
<sub> | 定义下标字 |
<sup> | 定义上标字 |
<ins> | 定义插入字 |
<del> | 定义删除字 |
运行结果示意图
HTML“计算机输出”标签
标签 | 描述 |
<code> | 定义计算机代码 |
<kdd> | 定义键盘码 |
<samp> | 定义计算机代码样本 |
<var> | 定义变量 |
<pre> | 定义预格式文本 |
HTML引文、引用及标签定义
标签 | 描述 |
<abbr> | 定义缩写 |
<address> | 定义地址 |
<bdo> | 定义文字方向 |
<blockquote> | 定义长的引用 |
<q> | 定义短的引用语 |
<cite> | 定义引用、引证 |
<dfn> | 定义一个定义项目 |
七、HTML超链接
超链接可以是图片、文字、多媒体也可以是一个网址
示例:
结果:
点击带有下划线的两个字就可以进入某度的网站
八、HTML CSS
1、CSS是一种层叠样式表,可以修饰html元素的样式并可以精确地进行排版
2、CSS有三种方式:
l 内部样式,在HTML元素中使用“style”属性
l 内部样式表,在头部<head>区域使用<style>元素来包含CSS
l 外部引用,引用带有后缀css的文件,示例:
html文档
css文档
如果你看到了这里,就说明你已经打开了制作网页的大门啦~
多不从事前端工作的人,可能都不知道web前端是什么,也不知道什么是HTML,对于H5更是一头雾水。其实web前端是呈现给用户的视觉和基本操作,主要负责页面的展示,就是我们在页面看到的内容。那么什么是HTML呢,什么又是H5呢?
Web前端使用用技术涉及用html语言,CSS,JavaScrip,那么如何理解html语言?
HTML语言,是一种描述性语言,全名“HyperTextMarkupLanguage(超文本标记语言)”,我们所使用的页面就是用html语言语言制作的。
H5是HTML5的简称,就是“HTML”的第5个版本,也就是第5个版本的“描述网页的标准语言”。
相比其他语言来说,html语言是一名相对比较容易入门的语言。很多新手在网上看到HTML5,会觉的迷惑,到底是先学HTML5还是html语言,其实html语言是从HTML4.01升级到HTML5的,但是并不是html语言被淘汰了,准确来说,学习html语言其实就等于HTML4.01加上HTML5。
云和数据前端与移动开发的课程内容可以概括为”专、深、新",知识由基础的技术点循序渐进层层深入,并结合市场最新技术,将HTML5、CSS3、Viewport、rem、Bootstrap主流适配方案融入其中,同时全面覆盖响应式布局、Bootstrap、AngularJS等当前互联网开发的最新技术,以真实项目贯彻课程始终,使学员能跟上最新技术的脚步,成为具有前后端开发能力的中高级开发者。
以上就是小编今天为大家分享的关于“什么是HTML,什么是H5”的文章,希望本篇文章能够帮到你。
T之家(www.ithome.com):关于编程里的那些ABC......
本文主要是一篇基础类整理文章,按照26个字母的排序,整理出一些在编程上比较重要的工具、框架、语言等等。
A- Angular.JS如果被设计用来构建Web应用程序的话,那就和HTML没什么区别了。它是一款开源JavaScript函式库,由Google和它的社区来维护,用来协助单一页面应用程式运行的。它的目标是透过MVC模式(Model-View-Controller)功能增强基于浏览器的应用,使开发和测试变得更容易。函式库读取包含附加自定义(标签属性)的HTML,遵从这些自定义属性中的指令,并将页面中的输入或输出与由JavaScript变量表示的模型绑定起来。这些JavaScript变量的值可以手工设置,或者从静态或动态JSON资源中获取。
Angular.JS是建立在这样的信念上的:即声明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑。Angular.JS最引人注目的特征就是它的双向数据绑定功能,这样可以大大减少你在必要代码上的编写数量,Coder Factory最先向澳大利亚提供Angular.JS课程。
B- Booststrap是一个用于响应式前端开发的框架,最主要是应用在移动Web App上面。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。
Bootstrap是基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。
C- CSS是Cascading Style Sheet的缩写,中文名称是层叠样式表,又称串样式列表、层次结构式样式表文件,一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言,由W3C定义和维护。目前最新版本是CSS2.1,为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持,而下一版的CSS4仍在开发过程中。
CSS最重要的目标是将文件的内容与它的显示分隔开来。在CSS出现前,几乎所有的HTML文件内都包含文件显示的信息,比如字体的颜色、背景应该是怎样的、如何排列、边缘、连线等等都必须一一在HTML文件内列出,有时重复列出。CSS使作者可以将这些信息中的大部分隔离出来,简化HTML文件,这些信息被放在一个辅助的,用CSS语言写的文件中。HTML文件中只包含结构和内容的信息,CSS文件中只包含样式的信息。
D- DRY是Don't repeat yourself的简称,一个规则,实现一次(one rule, one place)是面向对象编程中的基本原则,程序员的行事准则。旨在软件开发中,减少重复的信息。
DRY的原则是──系统中的每一部分,都必须有一个单一的、明确的、权威的代表──指的是(由人编写而非机器生成的)代码和测试所构成的系统,必须能够表达所应表达的内容,但是不能含有任何重复代码。当DRY原则被成功应用时,一个系统中任何单个元素的修改都不需要与其逻辑无关的其他元素发生改变。此外,与之逻辑上相关的其他元素的变化均为可预见的、均匀的,并如此保持同步。违反DRY原则的解决方案通常被称为WET,指代“Write everything twice”。
E- Elegant每一个代码都应该是优雅、简洁的。其实编写程序的过程就像是一种艺术,也许有些人会问你:“如果可以编写有效代码的话,为什么还要编写优雅代码呢?”然而,我们认为提供优雅代码的标准首先这个目的就是比较好的,因为它会带领程序员编写出更加简明的、可维护的代码。
你应该永远记住:读代码比写代码更重要。我猜你不想让你的同事花整个周末的时间来搞懂你的代码到底是什么意思吧!所以多花一点时间让代码更漂亮!
F- Flash是由Adobe开发出来的用于创建动画视频、图形和互联网应用程序的。就像你刚从一个粗略的网站上看到的一部电影一样,都是通过Adobe Flash播放器播放的。尽管有很指责说Flash很耗资源且不安全,但是绝大多数网站上一直在使用它。
或许你已经听说了Steve Jobs拒绝将Flash用在苹果设备上,如果真的有所说的那样的缺点,或许只是Steve Jobs和Flash之间的个人恩怨,那样我们可能永远不会发现Flash的伟大之处。即使HTML5被预测为Flash的即将继承者,但是Flash仍然值得我们多看它几眼。
G- GitHub是每一位编码人员的最好的朋友。拥有超过1150万个仓库的GitHub是这个世界上最大的代码托管网站。GitHub包含社交网络功能允许开发人员将他们的项目整合到一起,这样一来的话就能在对开源软件以及私人项目的维护产生重大意义。
GitHub提供免费和付费计划,只需选择你所需要的东西。有趣的是:GitHub是建立在Ruby on Rails基础上的,Coder Factory可以教你框架。
H- Hydra code是一段不能修复的代码,就像古希腊怪物每个脖子上都生出两个头,最后都被Hercules砍掉了。代码有的时候就像这个一样,即使你修复了一个bug之后,又会出现很多个bug,所以,除了重写整个代码以外,你别无选择。
I - Graphic User Interface图形用户界面,这是一种自我解释。图形用户界面估计是你看到最多的也是互动最多的一部分。第一个GUI是在Stanford Research Institute发明的,后继开发是由Xerox PARC施行的。在参观完Xerox之后,Steve Jobs首次将GUI技术用在了Apple Lisa和Macintosh上面,在当时来说这是一次革命创举。
Bill Gates发布Windows GUI之后,看看下面这段有趣的对话,Steve:“你偷了我们的技术!”Bill回应:“我想我们两个都有一个叫做Xerox的非常富有的邻居,但是当我跑到他的房间里想要偷走电视机的时候,我发现你已经把电视机偷走了。”哈哈哈
J - Javascript是一个动态的编程语言(尤其是在客户端),可以让你在不用刷新网页的情况下更新网页内容。虽然Angular.js是一个相当不错的框架,但它是建立在JavaScript这个基础之上的。
JavaScript最先是由Netscape开发的,用来对抗和Microsoft进行的浏览器之战。现在的Javascript已经出现在高级App开发课程里面了。
K - Donald Knuth是一个很有趣的IT专家,它也是我们很喜欢的书《The Art of Computer Programming》的作家。现在他是Stanford University的名誉教授,也是公认的“算法分析之父”。
L- Libraries代码类库是实现行为的一个收集,这里面有一个接口用来调用行为。估计这么说的话听起来还是比较复杂的。基本上可以这么理解:通过类库这种方式将这些代码组织起来,这样就可以被很多没有什么关系的程序调用了。于是,用户只需要知道类库的界面就行了,而不是内部的逻辑结构。
M- MongoDB是一种文件导向数据库管理系统,由C++撰写而成,以此来解决应用程序开发社区中的大量现实问题。2007年10月,MongoDB由10gen团队所发展。
MongoDB可以从开放源代码来建构与安装,更常见的是安装binary文件,目前有Windows,Linux,OS X和Solaris版本。许多Linux套件管理系统现在已包含了MongoDB的套件,包括CentOS和Fedora,Debian和Ubuntu。MongoDB已经被一些重要的网站所采纳了,例如Ebay,Craigslist甚至是New York Times。
N- Nopping是一个用于区分输出的编辑器,来源于NOP(no-operation),这是编程行业里的行话——小睡一下。每个人时不时的都需要休息一下,现在就NOP一下吧!
O- Object面向对象的编程是一个范例,代表这一概念所描述的对象的属性和方法改变。对象通常是类的实例,设计应用程序已达到彼此交互设计的目的。许多主要的编程语言如C++、Java、Ruby和PHP都是面向对象的。
P - Push推动基础的交流来描述一个互动请求,这首先是出版商发起的,例如这些需求都是来自服务器而不是来自客户端的推送。
Q- Quality代码质量是一个广义上的术语,每个程序员都有自己的不一样的定义。我们通常比较乐于将代码质量描述为易读的、可测试的、灵活的、依赖关系小、顺从的,还有就是经济的。这一原则被称为LTFCE。
R- Ruby on Rails是一个使用Ruby语言写的开源Web应用框架,严格按照MVC结构开发的。在2005年左右由David Heinemeier-Hansson开发出来的。它努力使自身保持简单,来使实际的应用开发时的代码更少,使用最少的配置。Rails的设计原则包括“不做重复的事”(Don't Repeat Yourself)和“惯例优于设置”(Convention Over Configuration)。
Ruby on Rails是一种结合Ruby语言与Rails平台的一种网页编程语言,Ruby语言以自然、简洁、快速著称,全面支持面向对象程序设计,而Rails则是Ruby广泛应用方式之一,在Rails平台上设计出一套独特的MVC开发架构,采取模型(Model)、外观(View)、控制器(Controller)分离的开发方式,不但减少了开发中的问题,更简化了许多繁复的动作。
S- Scaffolding框架是一个技术,用在MVC框架上,例如Ruby on Rails。通过Scaffolding基架,开发者可以详细说明一个数据库到底是怎么运作的。允许你生成代码,例如使用非常简化的方法来读取、创建或删除数据库条目。Scaffolding基架基于数据库架构生成网页模板的过程。在ASP .NET中,动态数据使用基架来简化基于Web的UI的生成过程。用户可以通过这种UI来查看和更新数据库。
T- Alan Mathison Turing(又译阿兰·图灵,1912年6月23日-1954年6月7日),被认为是计算机科学的保护神,但是,他是一个永远也得不到公正宣布的圣人。他是英国数学家、逻辑学家,他被视为计算机科学之父。
图灵对于人工智能的发展有诸多贡献,例如图灵曾写过一篇名为《机器会思考吗?》(Can Machines Think?)的论文,其中提出了一种用于判定机器是否具有智能的试验方法,即图灵测试。至今,每年都有试验的比赛。此外,图灵提出的著名的图灵机模型为现代计算机的逻辑工作方式奠定了基础。
U- Usability可用性测试是一个很有存在意义的任务,在你的App出现在众人面前之前必须要经过可用性测试。你的代码也许很优雅、质量很高、不会重复,但是要是它的可用性不过关的话,那么一切都是扯淡。你想让你的App尽可能的用户友好型的,那么用户是不会让你的产品埋没的。
一个最常见的技术测试就是A/B testing,这种方法就是用两种不同的介绍方式将产品介绍给不同的用户,并且监视结果。效果最好的那个才会被采纳。
V - for View对于外观、模型、控制器来说,它们就是实现用户界面的样品。这里面的核心部件就是Model,其包括App数据,商业逻辑规则和产品功能。View是实际产出,也是你的用户在浏览器里最想看到的。Controller接收输入并将其转换成命令传送给Model或者是View。
W- W3C是World Wide Web Consortium的缩写,是Web上主要的国际标准组织,由互联网的发明者Tim-Berners Lee创建并由其领导,W3C是World Wide Web的监护者。
X- Experience很多人都认为他们能学习代码并能做得很好,就像Mark Zuckerberg一样。事实是:作为一个开发者,根本没有停下来学习的时候。科技技术改变的速度很快、很迅速,也就是说,在你的整个职业生涯里你必须抓住机会不断学习新的知识。
Y - Yoda Yoda条件是一个编程术语,用来编写一个表达的两个部分,而这个表达是一个典型条件语句顺序的颠倒表达方式,就像“learn to code you should, young padawan”。
Z- Konrad Zuse当然,在这个综合性的列表上,我们没办法将Konrad Zuse排除在外。他是一位德国科学家,创造出了第一台可编程的计算机——Turing-complete Z3。在第二次世界大战之后,IBM选择了它的专利,这也是他的工作第一次被德国以外的国家所认可。
本文主要是根据26个字母的排序来整理了在编程方面比较重要的知识点供你参考。如果有什么好的建议可以在下面的评论出写出来。
*请认真填写需求信息,我们会在24小时内与您取得联系。