超文本标注语言-精
- 格式:ppt
- 大小:1.78 MB
- 文档页数:24
超文本标记语言(Hypertext Markup Language,HTML)是一种用于创建网页的标准标记语言。
它使用标记来描述网页的结构和内容,包括文字、图像、链接和多媒体等元素。
HTML通过使用标签(tag)来定义不同的元素,并使用属性(attribute)来指定元素的特性和行为。
HTML中的标签被尖括号包围,并以起始标签和结束标签的形式存在。
起始标签用于定义一个元素的开始,结束标签用于定义一个元素的结束,两者之间的内容即为该元素的内容。
有些标签也可以是自闭合的,即只有起始标签而没有结束标签。
HTML中的每个元素都可以具有不同的属性,这些属性提供了元素的附加信息或配置选项。
例如,<img>标签可以用于插入图像,其中的src属性指定了图像文件的路径。
HTML还支持超文本链接,通过<a>标签可以创建文本或图像的链接,使用户可以点击并跳转到其他网页或位置。
HTML是Web开发的基础,它与CSS(层叠样式表)和JavaScript等技术一起,可以创建出丰富多样的网页和交互式应用程序。
它是一种易于学习和使用的标记语言,被广泛应用于互联网上的各种网页和应用程序的开发中。
Html教程(1)什么是HTML文件?∙HTML的英文全称是Hypertext Marked Language,中文叫做“超文本标记语言”。
∙和一般文本的不同的是,一个HTML文件不仅包含文本内容,还包含一些Tag,中文称“标记”。
∙一个HTML文件的后缀名是.htm或者是.html。
∙用文本编辑器就可以编写HTML文件。
这就试写一个HTML文件吧!打开你的Notepad,新建一个文件,然后拷贝以下代码到这个新文件,然后将这个文件存成first.html。
<html><head><title>Title of page</title></head><body>This is my first homepage. <b>This text is bold</b></body></html>要浏览这个first.html文件,双击它。
或者打开浏览器,在File菜单选择Open,然后选择这个文件就行了。
示例解释这个文件的第一个Tag是<html>,这个Tag告诉你的浏览器这是HTML文件的头。
文件的最后一个Tag是</html>,表示HTML文件到此结束。
在<head>和</head>之间的内容,是Head信息。
Head信息是不显示出来的,你在浏览器里看不到。
但是这并不表示这些信息没有用处。
比如你可以在Head信息里加上一些关键词,有助于搜索引擎能够搜索到你的网页。
在<title>和</title>之间的内容,是这个文件的标题。
你可以在浏览器最顶端的标题栏看到这个标题。
在<body>和</body>之间的信息,是正文。
在<b>和</b>之间的文字,用粗体表示。
<b>顾名思义,就是bold的意思。
超文本标记语言介绍超文本标记语言在WWW上的一个超媒体文档称之为一个页面(page)。
作为一个组织或个人在万维网上开始点的页面称为主页Homepage,或首页,主页中通常包括有指向其他相关页面或其他节点的指针(超级链接)。
在逻辑上将视为一个整体的一系列页面的有机集合称为网站(Website或Site)。
Web页面也就是通常所说的网页,在本书中不作区分。
HTML是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。
网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。
浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。
但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。
HTML之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
所谓超级链接,就是一种URL指针,通过激活(点击)它,可使浏览器方便地获取新的网页。
这也是HTML获得广泛应用的最重要的原因之一。
由此可见,网页的本质就是HTML,通过结合使用其他的Web技术(如:脚本语言、CGI、组件等),可以创造出功能强大的网页。
因而,HTML是Web编程的基础,也就是说万维网是建立在超文本基础之上的。
编辑本段HTML文件的整体结构一个网页对应于一个HTML文件,HTML文件以.htm或.html为扩展名。
可以使用任何能够生成TXT类型源文件的文本编辑来产生HTML文件。
超文本标记语言标准的HTML文件都具有一个基本的整体结构,即HTML文件的开头与结尾标志和HTML的头部与实体2大部分。
有3个双标记符用于页面整体结构的确认。
和双标记符标记符说明该文件是用HTML来描述的。
它是文件的开头,而则表示该文件的结尾,它们是HTML文件的始标记和尾标记。
计算机网络原理超文本标记语言(HTML)超文本标记语言HTML(HyperText Markup Language)中的Markup的意思就是“设置标记”。
因此HTML也常译为超文本置标语言。
早在1986年,ISO就已经制定了标准的ISO8879,即SGML(Standard Generalized Markup Language)。
SGML是一个非常复杂的、功能丰富的系统,有很多种选项,很适合于需要精确文档标准的大型组织。
然而SDML的过分复杂使用它很不适合于简单快捷的WWW网。
由于HTML非常易于掌握且实施简单,因此它很快就成为WWW的重要基础。
官方的HTML标准由WWW Consortium负责制定。
1.HTML文件描述这类标记是每一个HTML文件都应该具有的,但是请注意,即使没有这些标记,浏览器也不会显示出错,而是按照默认的方式解释代码内容并显示页面。
●HTML文本标记<html></html><html>标记表示这是HTML文本文件,基本HTML页面以<html>标记开始,以</html>结束。
在它们之间,文件有两部分—标题和正文。
●文件头部标记<head></head>这个标记表示文件头部的描述,包含一个不在自己页面上出现的页面信息,例如标题名称(title),一些有关浏览器的定义和说明。
●页面标题<title></title>定义的页面标题,这个标记之间的文字在被访问时将出现在浏览器窗口标题的地方。
●页面主体<body></body>页面内容所在。
主页面上显示的东西都包含在这两个标记之中。
在它的起始标记中可以包括一些页面属性,它们在整个页面有效:background:背景图片文件名;bgcolor:背景颜色;link:超级链接的颜色,一般浏览器默认为蓝色;text:设定本页面文本的颜色;vlink:已经看过的超级链接的颜色,默认为紫色。
HTML超⽂本标记语⾔(HyperTextMarkupLanguage)1、HTML是什么HTML指的超⽂本标记语⾔(Hyper Text Markup Language),是⼀种⽤来描述⽹页的语⾔。
超⽂本指的是除了可以包含⽂字之外,还可以包含图⽚、链接、⾳乐、视频、程序等内容。
(每个都需要⼀个标记,在⽹页中通过不同的标记组成起来。
)HTML 指的是超⽂本标记语⾔ (Hyper Text Markup Language)HTML 不是⼀种编程语⾔,⽽是⼀种标记语⾔ (markup language)标记语⾔是⼀套标记标签 (markup tag)HTML 使⽤标记标签来描述⽹页前端三剑客。
2 常⽤的HTML标签① html 根标记② head 头标记③ body 体标记④ a 超链接⑤ form 表单⑥ table 表格<!--⼀个HTML页⾯最基本的组成部分html: 跟标记head:头标记写描述性的信息(css\javaScricpt)body: 体标记写页⾯显⽰的信息--><html><head></head><body>想写什么<!--标题标记 h1....--><h1 align="center">E</h1><h2 align="right">E</h2><h3 align="left">E</h3><!--超链接 href 可以指定应⽤内或者是应⽤外的任意地址--><a href="">跳转连接</a><!-- 表格--><h1 align="center">Information</h1><table border="lpx" align="center" width="60%"><!--内部是属性设置--><!--tr : 表⽰⼀⾏--><tr><!--th: 标题列⾃带剧中并加粗效果td: 普通列--><th>ID</th><th>Name</th><th>Age</th></tr><td>12234</td><td>Zhang</td><td>Mail</td><tr></tr></table><!--表单:收集⽤户的信息,提交到后台服务器--><form action="提交的地址,例如" method="GET/POST">⽤户名称:<input type="text" name="username" value="admim"/><!--数据的提交⽅式:username=admin ,此时username相当于⼀个key --><br/><!--换⾏-->⽤户密码:<input type="password" name="password"/>⽤户性别:男<input type="radio" name="gender" value="1"/>⼥<input type="radio" name="gender" value="0"/><!--通过在radio指定相同的name 来表⽰互斥的关系--><br/>⽤户爱好:⽻⽑球<input type="checkbox" name="hobby" value="1"/><!--checkbox表⽰多选框-->篮球<input type="checkbox" name="hobby" value="2"/>乒乓球<input type="checkbox" name="hobby" value="3"/><br/>⽤户地址:省份<select name="province"><!--select 表⽰下拉列表--><option value="hb">河北省</option><option value="js">江苏省</option><option value="ah">安徽省</option></select><br/><input type="submit" value="注册"/><!--表⽰按钮,点击后向 action中的地址进⾏数据的提交--></form></body></html>3、表现CSSCSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显⽰ HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题外部样式表可以极⼤提⾼⼯作效率外部样式表通常存储在 CSS ⽂件中多个样式定义可层叠为⼀ <div></div>:选中⼀部分区域,施加⼀些样式。
HTML-超⽂本标记语⾔总结HTML,超⽂本标记语⾔,本质上是⽂本编辑器,通过Browser内核实现其功能。
HTML主要由标识符分割写成,通常功能模块写在⼀对标识符 < xxx >这⾥是内容< /xxx >内,⾃标识符< / >除外。
标识符内可以带形参,表明此模块功能实现需要的属性。
如src,name.height标识符信息可以在 W3 相关标准中查询,类似JavaAPI。
1. HTML基础1.1 HTML基本信息HTML:超⽂本标记语⾔,其⽤于编写⽹页。
CSS:⽤于页⾯美化。
JS:⽤于实现动态功能。
Vue:框架实现上述的集成开发。
1.2 W3C标准W3C标准包括:结构化标准语⾔(HTML,XML)表现标准语⾔(CSS)⾏为标准(DOM、ECMAScript)1.3 HTML基本语法(<>内空格均为多余)⽹页由头部和主体两部分组成,其中头部在<head>、</head>标签对内,主体在<body>、</body>标签对内。
<body>、</body>等成对的标签,分别叫开放标签和闭合标签。
单独呈现的标签(空元素),如;<hr/>意为⽤/来关闭空元素。
<!-- xxx -->这个是注释符meta 为描述性标签,它⽤来描述我们⽹站的⼀些信息,需要搭配具体的修饰符使⽤。
如:<meta name="Keywords" content="zfy的⾸页">所有的内容必须在<html> 所有内容 </html>内部。
1.4 标签详解(⼀)通⽤标签<h1> 内容xxx <h1/>⼀级标签;<h2> 内容xxx <h2/>⼆级标签。
<br/>:换⾏标签,为⾃闭和标签。
超文本标识语言一览表一、基本标记<html></html>:创建HTML文档<head></head>:设置文档标题以及其他不在Web网页上显示的信息<body></body>:设置文档的可见部分<title></title>:设置在浏览器标题栏中显示的文档的题目<body bgcolor=#>:设置背景颜色,使用颜色的英文单词或十六进制代码<body text=#>:设置文本文字颜色,使用颜色的英文单词或十六进制代码<body link=#>:设置链接的颜色,使用颜色的英文单词或十六进制代码<body vlink=#>:设置已链接的过的链接的颜色,使用颜色的英文单词或十六进制代码<body alink=#>:设置活动链接的颜色,使用颜色的英文单词或十六进制代码二、文本格式标记<pre></pre>:创建预格式化文本<h1></h1>:创建最大的标题<h6></h6>:创建最小的标题<b></b>:创建黑体字<I></I>:创建斜体字<tt></tt>:创建打字机风格的文字<cite></cite>:创建引用,通常是斜体<em></em>:加重单词(通常是斜体加黑体)<strong></strong>:加重单词(通常是斜体加黑体)<font size=#></font>:设置字体大小,从1到7<font face=”NAME”></font>:设置文本的字体,NAME可以为宋体、黑体、华文彩云等<font color=#></font>:设置字体的颜色,使用颜色的英文单词或十六进制代码<p>:创建新的段落<p align=#>:将段落按左、中、右对齐<br>:插入回车换行符<blockquote></blockquote>:从两边缩进文本<div align=#>:用来排版大块HTML段落的标签或格式化图表三、链接标记<a href=”URL”></a>:创建超链接<a href=”mailto:EMAIL”></a>:创建自动发送电子邮件的链接<a name=”NAME”></a>:创建位于文档内部的锚点<a href=”#NAME”></a>:创建指向位于文档内部锚点的链接四、列表标记<dl></dl>:创建用于解释名词的定义列表<dt></dt>:放在每个定义术语之前<dd></dd>:放在每个解释之前<ol></ol>:创建有序号的列表,其中还用到<li>标记,放在每个表项之前,可为表项加上序号<ul></ul>:创建无序号的列表,其中还用到<li>标记,放在每个表项之前,可为表项加上圆点五、插入图象和水平线标记<img src=”name”>:添加图象<img src=”name” align=#>:排列对齐图象,如左、中、右或上、中、下<img src=”name” border=#>:设置围绕图象的边框的大小<hr>:加入一条水平线<hr size=#>:设置水平线的大小(高度)<hr width=#>:设置水平线的宽度(百分比或绝对像素点)<hr noshade=#>:创建没有阴影的水平线六、表格标记<table></table>:创建表格<tr></tr>:创建表格中的一行<td></td>:创建一行中的一列<th></th>:设置表头,通常使用黑体居中<table border=#>:设置围绕表格的边框宽度<table bgcolor=#>:设置表格的背景色<table cellspacing=#>:设置表格边框与其内容间的距离<table width=# or %>:设置表格的宽度,用绝对像素值或文档总宽度的百分比<tr align=#>or<td align=#>:设置表格间距的水平对齐(左、中、右)<td colspan=#>:设置表格单元格应跨占的列数(缺省值为1)<td rowspan=#>:设置表格单元格应跨占的行数(缺省值为1)<td nowrap> :禁止表格单元格内的内容自动折行滚动条七、框架标记<frameset></frameset>:设置框架文件,使用此标记时不再需要<body></body>标记<frameset rows=”value,value”>:定义上下分隔的框架中每个窗口的行数,可以使用绝对像素值或高度的百分比<frameset cols=”value,value”>:定义左右分隔的框架中每个窗口的列数,可以使用绝对像素值或宽度的百分比<frame>:定义框架内的窗口<noframes></noframes>:定义在不支持框架的浏览器中显示的框架文档的提示信息<frame src=”URL”>:设置框架内显示的HTML文档<frame name=”name”>:定义框架中窗口的名字,以便其他框架和窗口可以指向它<frame target=”name”>:定义一个窗口链接的文件显示到的其他目标窗口的名字<frame margin width=#>:定义框架或窗口左右边缘的空白大小,必须大于等于1<frame margin height=#>:定义框架或窗口上下边缘的空白大小,必须大于等于1<frame scrolling=V ALUE>:设置框架或窗口是否有滚动条,其值可以是”yes”或”no”,缺省时一般为”auto”<frame noresize>:禁止用户调整框架的大小八、表单标记<form></form>:创建表单<select multiple name=”NAME”size=#></select>:创建滚动表单,size用于设置在需要滚动前可以看到的表单项数目。