1.1一般标记
一般标记是由一个起始标记(Opening Tag)和一个结束标记(Ending Tag)所组成,其语法为:<x>受控文字</x>
其中,x代表标记名称。<x>和</x>就如同一组开关:起始标记<x>为开启(ON)的某种功能,而结束标记</x>(通常为起始标记加上一个斜线/)为关(OFF)功能,受控制的文字信息便放在两标记之间。例如:<i>这是斜体字</i>。
标记之中还可以附加一些属性(Attribute),用来完成某些特殊效果或功能。例如:<x a1="v1",a2="v2",...,an="vn">受控文字</x>
其中,a1,a2,...,an为属性名称,而v1,v2,...,vn则是其所对应的属性值,属性值加不加引号,目前所使用的浏览器都可接受,但依据W3C的新标准,属性值是要加引号的,所以最好养成加引号得习惯。
1.2 空标记
虽然大部分的标记是成双成对出现的,但也有一些是单独存在的。这些单独存在的标记称为空标记(Empty Tags)。其与法为:<x>
同样,空标记也可以附加一些属性(Attribute),用来完成某些特殊效果或功能。如:<x a1="v1",a2="v2",...,an="vn">,例如:<hr>,<br>等。
W3C定义的新标准(XHTML1.0/HTML4.0)建议:空标记应以/结尾,即:<X />
如果附加属性则为:<x a1="v1",a2="v2",...,an="vn" />
目前所使用的浏览器对于空标记后面是否要加/并没有严格要求,即在空标记最后在/和没有加/,不影响其功能。但是如果希望你的文件能满足最新标准,那么最好加上/。
2. HTML标记分类
2.1文件结构标记(Document Structure Tags)
此类标记的目的是用来标示出文件的结构,主要的有:
<html>...</html>:标示html文件的起始和终止。
<head>...</head>:标示出文件标题区。
<body>...</body>:标示出文件主体区
2.2区段格式标记(Block Formatting Tags)
此类标记的主要用途是将HTML文件中得某个区段文字,以特定格式显示,增加文件的可看度。主要的有:
<title>...</title>:文件题目。
<hi>...</hi>:i=1,2,...,6,网页标题。
<hr>:产生水平线。
<br>:强迫换行。
<p>...</p>:文件段落。
<pre>...</pre>:以原始格式显示。
<address>...</address>:标注联络人姓名、电话、地址等信息。
<blockquote>...</blockquote>:区段引用标记。
2.3字符格式标记(Character Formatting Tags)
用来改变HTML文件文字的外观,增加文件的美观程度。主要有:
<b>...</b>:粗体字。
<i>...</i>:斜体字。
<tt>...</tt>:打字体。
<font>...</font>:改变字体设置。
<center>...</center>:居中对齐。
<blink>...</blink>:文字闪烁。
<big>...</big>:加大字号。
<small>...</small>:缩小字号。
<cite>...</cite>:参照。
2.4列表标记(List Tags)
<ul>...</ul>:无编号列表。
<ol>...</ol:有编号列表。
<li>...</li>:列表项目。
<dl>...</dl>:定义式列表。
<dd>...</dd>:定义项目。
<dt>...</dt>:定义项目。
<dir>...</dir>:目录式列表。
<menu>...</menu>:菜单式列表。
2.5链接标记(Anchor Tag)
链接可以说是html超文本文件的命脉,html通过链接标记来整合分散在世界各地的图、文、影、音等信息。此类标记的主要用途为标示超文本文件链接(Hypertext Link),主要有:
<a>...</a>:建立超级链接。
2.6多媒体标记(Multimedia Tag)
此类标记用来显示图像数据。主要有:
<img>:嵌入图像。
<embed>:嵌入多媒体对象。
<bgsound>:背景音乐。
2.7表格标记(Table Tags)
此类标记用制作表格。主要有:
<table>...</table>:定义表格区段。
<caption>...</caption>:表格标题。
<th>...</th>:表头。
<tr>...</tr>:表格列。
<td>...</td>:表格单元格。
2.8表单标记(Form Tags)
此类标记用来制作交互式表单,主要的有:
<Form>...</form>:表明表单区段的开始与结束。
<input>:产生单行文本框、单选按钮、复选框等。
<textarea>...</textarea>:产生多行输入文本框。
<select>...</select>:标明下拉列表的开始与结束。
<option>...</option>:在下拉列表中产生一个选择项目。
HTML标记并没有大小写之分,即<BODY>和<body>是相同的。以下来分别介绍这些标记。
3. 文件结构标记
一个html文件的结构基本上可以分为两部分,一部分称为标题区(Head Section);另一部分称为主体区(Body Section)。文件结构标记就是用来标示出何处属于标题,何处属于主体。
3.1<html>:标示整份文件
用途:标示整篇html文件
说明:一个标准的html文件是一篇以<html>开头,而以</html>结束的文件。即:
<html>
... html文件全文
</html>
3.2<head>:标示出文件标题区
说明:html文件中,由<head>和</head>所夹住的区域称为文件的标题区。通常head区段都内含在html区段之中,即:
<html>
<head>
...... html文件标题区
</head>
.....
</html>
3.3<title>:网页标题
<title>.....</title>是html文件标题区中最重要也是最常用的标记。其他标题区的标记还包括<base>、<isindex>、<link>、<nextid>、<meta>等。
<title>标记的用途是设置网页标题,这个标题会显示在浏览器窗口的标题栏上,不会出现在浏览器的页面(page)文字中。而大部分浏览器的收藏(My Favorites)、书签(BookMark)或历史记录列表(History List)功能,也都是以这个文件的标题作为名称的。
由<title>...</title>所标注的文字并无长度的限制,不过太长的标题,有时可能会被截掉,并且也不容易记忆。
3.4<body>:标示出文件主体区
说明:在html文件中,由<body>...</body>所夹住的区域称为文件的主体区,通常是在<head>区段之后。
3.5<body>标记的属性
backgroud属性:
这个属性可以指定一个图形文件(一般为gif或jpeg),作为背景图案。该图形会像拼瓷砖一样铺成整个网页的底图。
HTML 基本语法 方便刚开始学习html的朋友
日期:2021-09-04 19:27:55 来源:脚本之家
您感兴趣的教程
在docker中安装mysql详解
本篇文章主要介绍了在docker中安装mysql详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编...
win10中文输入法仅在桌面显示怎么办?
win10系统使用搜狗,QQ输入法只有在显示桌面的时候才出来,在使用其他程序输入框里面却只能输入字母数字,win10中...
一分钟掌握linux系统目录结构
这篇文章主要介绍了linux系统目录结构,通过结构图和多张表格了解linux系统目录结构,感兴趣的小伙伴们可以参考一...
PHP程序员玩转Linux系列 Linux和Windows安装
这篇文章主要为大家详细介绍了PHP程序员玩转Linux系列文章,Linux和Windows安装nginx教程,具有一定的参考价值,感兴趣...
win10怎么安装杜比音效Doby V4.1 win10安装杜
第四代杜比®家庭影院®技术包含了一整套协同工作的技术,让PC 发出清晰的环绕声同时第四代杜比家庭影院技术...
纯CSS实现iOS风格打开关闭选择框功能
这篇文章主要介绍了纯CSS实现iOS风格打开关闭选择框,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作...
Win7如何给C盘扩容 Win7系统电脑C盘扩容的
Win7给电脑C盘扩容的办法大家知道吗?当系统分区C盘空间不足时,就需要给它扩容了,如果不管,C盘没有足够的空间...
百度推广竞品词的投放策略
SEM是基于关键词搜索的营销活动。作为推广人员,我们所做的工作,就是打理成千上万的关键词,关注它们的质量度...
Visual Studio Code(vscode) git的使用教程
这篇文章主要介绍了详解Visual Studio Code(vscode) git的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。...
七牛云储存创始人分享七牛的创立故事与
这篇文章主要介绍了七牛云储存创始人分享七牛的创立故事与对Go语言的应用,七牛选用Go语言这门新兴的编程语言进行...
Win10预览版Mobile 10547即将发布 9月19日上午
微软副总裁Gabriel Aul的Twitter透露了 Win10 Mobile预览版10536即将发布,他表示该版本已进入内部慢速版阶段,发布时间目...
HTML标签meta总结,HTML5 head meta 属性整理
移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析HTML代码,更好地将移动web前端页面表现出来...
移动端html5模拟长按事件的实现方法
这篇文章主要介绍了移动端html5模拟长按事件的实现方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家...
HTML常用meta大全(推荐)
这篇文章主要介绍了HTML常用meta大全(推荐),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参...
cdr怎么把图片转换成位图? cdr图片转换为
cdr怎么把图片转换成位图?cdr中插入的图片想要转换成位图,该怎么转换呢?下面我们就来看看cdr图片转换为位图的...
win10系统怎么录屏?win10系统自带录屏详细
当我们是使用win10系统的时候,想要录制电脑上的画面,这时候有人会想到下个第三方软件,其实可以用电脑上的自带...