web 就是 world wide web 的缩写,称之为全球广域网,俗称 WWW。对于用户来说它其实就是由多个网页组成在一起而形成的一种服务(Web).
我们可以将 web 理解为就是当前的一种互联网。对于我们来说更多的就是网站服务。网站我们可以认是由多个网页组合在一起而形成一种服务。
而 web 前端就是来负责一个网站当中前台网页里的内容。网页是由前端工程师使用 HTML 语言编写而成的一种文件,它里面会包含文字、图片、超链接、音频、视频等等这些内容。
注:超文本标记语言(Hyper Text Markup Language , HTML)就是用来描述网页内容的一种计算机语言。
HTML 超文本标记语言(Hyper Text Markup Language)就是用来描述网页的一种计算机语言。
在互联网最初的时候是没有 HTML 的,我们只能通过网络传输最简单的文字内容。 随着用户的要求越来越多,同时也是我们的技术的不断发展,就出了一种可以表达文字内容之外的语言 HTML1.0。后来又慢慢发展到了现在的 HTML5,也就是我们现在常说的 H5。
在测试过程中,我们有时候需要通过工具去查看对应的 HTML 代码。在这里我们可以用浏览器自带的开发者工具,打开这个工具的快捷键是 F12。
开发者工具是一个相当强大的工具。可以查看修改 HTML,还可以调试 js,可以修改 css,还可以查看网络数据,并且还能进行性能测试。非常的全能。对于咱们 web 测试来说,是一个必须要掌握的工具。
要查看 HTML 源码,我们只需要进入开发者工具的 elements 界面。 在这里可以对 web 页面上的元素进行定位,并且查看整个 web 页面的 HTML 源码。
网页是我们通过 HTML 语言来书写。 用 HTML 语言去书写网页有一些结构是默认必须存在的, 这个结构我们就叫做网页(HTML)骨架。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
标签就是 HTML 语言的发明者人为定义好的一些"单词",不同的标签代表了不同的功能。
标签有两种常见的形式:
todo:加入 demo(done)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>网页标题</title>
</head>
<body>
<div>
<h1>我的第一个网页</h1>
<p>网页中的内容</p>
</div>
</body>
</html>
todo:加入 demo(done)
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现,比如:name="value"。
属性的基本格式为:<标签名 属性1="属性值1" 属性2="属性值2"></标签名>
每个标签都可以拥有多个属性。属性必须写在开始标签中,位于标签名的后面。属性之间不区分顺序。标签名与属性、属性与属性之间使用空格隔开。任何属性都有默认值,省略该属性表示使用默认值。
在 HTML 里,属性也有很多中,比如首先有全局属性,全局属性是所有的标签都可以使用的。然后还有事件属性,事件大家可以理解为不同的操作。在不同的操作中,也有特殊的属性可以定义。最后还有各个标签的一些独有的属性。
比如常见的全局属性有:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>网页标题</title>
</head>
<body>
<div id="first" class="content">网页中的内容</div>
</body>
</html>
搜索微信公众号:TestingStudio霍格沃兹的干货都很硬核
大家在浏览网页的时候,是否思考过这样一个问题:怎样才能制作出一个网页呢?制作出一个网页是很简单的,只要知道什么是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文档
如果你看到了这里,就说明你已经打开了制作网页的大门啦~
TML文本是由 HTML命令组成的描述性文本,HTML 命令可以说明文字、 图形、动画、声音、表格、链接等。 HTML的结构包括头部 (Head)、主体 (Body) 两大部分。下面是什么是html内容,希望对您有所帮助。
HTML(Hyper Text Mark-up Language )即超文本标记语言,是 WWW 的描述语言,由 Tim Berners-lee提出。设计 HTML 语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起,形成有机的整体,人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。这样,你只要使用鼠标在某一文档中点取一个图标,Internet就会马上转到与此图标相关的内容上去,而这些信息可能存放在网络的另一台电脑中。
HTML文本是由 HTML命令组成的描述性文本,HTML 命令可以说明文字、 图形、动画、声音、表格、链接等。 HTML的结构包括头部 (Head)、主体 (Body) 两大部分。头部描述浏览器所需的信息,主体包含所要说明的具体内容。
html是什么文件
HTML就是超文件标示语言(HyperText Markup Language)。主要是在浏览器中显示一份文件的内容。它本身并非程式设计,只不过是标示(Mark-up),用来强调及组织一般性的文字。HTML是由一些标记(tags)所构成,每个标记对浏览器下一个特定的指令,这些指令会告诉浏览器如何显示文件的内容。
编辑HTML不需要多么高级的软体配备,你只要有『记事本』这项软体就可以了。但记得,HTML文件的副档名有些奇怪,你必须设定为 .htm 或是.html 才行。
例如: index.htm是一个合法的HTML档名,但index.txt就不是了。你可能听过一些HTML的编辑程式如:HotDog 、CutrHTML ....等。对初学者而言,使用这些工具并不太好。虽然它们的设计目的是帮助你更容易使用HTML来工作。但不幸的是,其中有许多会将HTML的代码隐览起来,造成学习上的困难。
HTML由来
万维网上的一个超媒体文档称之为一个页面(外语:page)。作为一个组织或者个人在万维网上放置开始点的页面称为主页(外语:Homepage)或首页,主页中通常包括有指向其他相关页面或其他节点的指针(超级链接),所谓超级链接,就是一种统一资源定位器(Uniform Resource Locator,外语缩写:URL)指针,通过激活(点击)它,可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。
在逻辑上将视为一个整体的一系列页面的有机集合称为网站(Website或Site)。超级文本标记语言(英文缩写:HTML)是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
HTML特点
HTML(Hyper Text Mark-up Language)即超文本标记语言或超文本链接标示语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。
HTML文档制作不是很复杂,且功能强大,支持不同数据格式的文件镶入,这也是WWW盛行的原因之一,其主要特点如下:
1、 简易性,HTML版本升级采用超集方式,从而更加灵活方便。
2、可扩展性,HTML语言的广泛应用带来了加强功能,增加标识符等要求,HTML采取子类元素的方式,为系统扩展带来保证。
3、 平台无关性。虽然PC机大行其道,但使用MAC等其他机器的大有人在,HTML可以使用在广泛的平台上.
*请认真填写需求信息,我们会在24小时内与您取得联系。