HTML（超文本标记语言）—

HTML简介

HTML 全称为 HyperText Mark- up Language，翻译为超文本标签语言，标签也称作标记或者元素。HTML 是目前网络上应用最为广泛的技术之一，也是构成网页文档的主要基石之一。HTML 文本是由 HTML 标签组成的描述性文本， HTML 文本可以说明文字、图形、动画、声音、表格、链接等。

超级文本标记语言是万维网（ Web ）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”和存在媒体文件（也就是超越了普通文本文件）。

HTML 的结构包括头部（ Head ）、主体（ Body ）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。需要说明的是 HTML 不是编程语言，而是一种描述性的语言，用于描述超文本中内容的显示方式。比如，文字以什么颜色、大小显示，图片以什么尺寸、位置来显示等。这些描述都是用 HTML 标签来描述的。

HTML主要用来搭建页面的结构。

HTML的特点

简单灵活

可拓展

平台无关性

HTML标签

语法结构： HTML 标签。

<标签属性="值">

内容

</标签 >

以<p>(段落标签)标签为例

语法解析：

标签通常是成对出现的，分为开始标签（ p ）和结束标签 (/p) ，结束标签只是在开始标签前加一个斜杠“/”。标签可以有属（align ），属性必须有值 (center ) 。开始标签与结束标签中包含的内容称之为区域。标签不区分大小写，p 和 P 是相同的。

HTML常用标签

1、strong、b标签

strong 和 b 标签都是用来加错字体标签，这两个标签显示效果一样，但是其实质使用场景不同的。b 标签就是加粗文本，而strong 有强调内容的意思，但是一般我们不用关心这个问题，对于我们开发者而言，效果一致，所以一般都是使用b 标签。

em 、 i 标签都是加斜文本的标签，现在我们一般使用i 标签加斜问题， em 标签有存在强调的意思，现在随着css3 的使用，而慢慢的用来标注 css 的字体图标。 del标签用来加删除线， u 标签用来加下划线。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>粗体/斜体/下划线/删除线</title></head><body><b>粗体</b><strong>还是粗体</strong><i>斜体</i><em>还是斜体</em><u>下划线</u><del>删除线</del></body>
</html>

2、br、hr标签

br 标签用来换行， hr 标签用来做水平分割线。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>换行/下划线</title></head><body>第一行<br>第二行<hr align="left" width="500" size="1" noshade="">分割线</body>
</html>

3、p标签

p标签表示段落

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>段落</title></head><body><p align="center">第一个段落</p><p align="center"><font color="green"size="20">第二个段落</font></p></body>
</html>

4、sub、sup、pre、span标签

SUB 是下标标签， SUP 是上标标签，它们属于文本标签。 pre 用来原样输出内容。 span 标签是一个标准行内标签一般用来装饰包裹的文本内容，常见于装饰文本。

行内标签 ：指的是如 a 、 span 这些标签，这种标签的特点是标签只占据内容部分，不会占据其他部分，这样的话，标签的内容如果可以在一行中展示，则不会换行，直到占满一行后换行输出。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>标签</title></head><body><p>二的三次的：2<sup>3</sup><br>数组a下表为2：a<sub>2</sub><br><span style="color: aqua;font-size:20px">这是一个标准的行内标签</span><pre style="font-size: 20px;">原样内容输出标签</pre></p></body>
</html>

5、hn、div标签

hn 标签指的是 h1 、 h2 、 h3 、 h4 、 h5 、 h6 这六个标题标签。主要用来装饰标题。

div 标签是一个标准的块标签，主要用来布局。

块标签 ：指的是 div 、 p 、 hr 、 hn 这些标签，这种标签和行内标签不同，即便是内容不够一行，也会沾满一行，这样就其他必须换行输出。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>标签</title></head><body><h1>一</h1><h2>二</h2><h3>三</h3><h4>四</h4><h5>五</h5><h6>六</h6><hr><div>这是一个div标签</div><div>这是第二个div标签</div></body>
</html>

行内标签：b、i、u、del这些标签，只占据内容部分，没有宽高，标准行内标签 - span
块标签：p、h1都是块标签，占据一行，即便是内容占不满如标签块标签 - div

6、HTML5的新标签

多媒体标签

1、在网页中使用图像

目前在网页中使用的图片主要有 GIF 、 JPG 、 PNG 、 BMP 格式，但以 GIF 、 PNG 和 JPG 使用居多。 GIF 支持动画和背景透明，同时图片通常比较小，但仅支持 256 色以内的图像，因此色彩不够丰富。 JPEG 支持 1670 万种颜色，但不支持动画和背景透明。当想要背景透明的时候，一般会使用PNG 格式的图片，所以我们可以根据两者的优缺点来选择图像的格式

<!DOCTYPE html>
<html > <head><meta charset="UTF-8"> <title>在网页中插入图片</title> </head> <body><!--img标签用来引入图片到页面中 src是一个必须的属性，该属性表示图片的地址 如下面的就是表示在当前文件夹下有个images文件夹，里面有个图片，名称叫做rose.jpg，这种叫做相对路径寻找法--><img src="data:images/rose.jpg"> <!-- 当然也可以这样写，和上面一个意思 --><img src="./images/rose.jpg"> <!--这样写表示绝对路径查找，一般很少这样写，因为这个路径只是这台电脑的路径， 换一台电脑就没有这张图片了运行可以看出图片确实已经出现在了页面上。--><img src="c://images/rose.jpg"> <!-- 如果路径是网络路径也可以滴哦~~ --><img src="http://www.xianoupeng.com/uploadfile/2019/0428/20190428101229423.png"> </body>
</html>

img标签常见的属性：

通过设置图片的属性，可以灵活的控制图片在网页中的显示。

2、在网页中使用音频和视频

在 HTML5 之前，要在页面上播放视频或者音频麻烦，因为不同的浏览器对于这个支持不同，所以在 h5之后， w3c 专门为 HTML5 提供了两个标签，视频标签 video 和音频标签 audio 。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>视频和音频</title></head><body><audio src="img/下雨.mp3"controls autoplay></audio><video src="img/1.wmv"style="height:500px;weight=800px;"controls="controls"autoplay></video><!--兼容写法--><video>     <source src="img/1.wmv"><source src="img/1.avi"></video>  </body>
</html>

HTML（超文本标记语言）——总结相关推荐

HTML - 超文本标记语言 (Hyper Text Markup Language)
HTML - 超文本标记语言 (Hyper Text Markup Language) HTML是建设网站/网页制作主要语言. HTML是一种易于学习的标记语言. HTML使用像 <p> ...
超文本标记语言HTML
介绍html文档的基本结构,html常用标签的使用,理解html语言制作网页基本原理. html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母 ...
HTML 为啥称“超文本标记语言”？
作者 | 泰斗贤若如责编 | 伍杏玲出品 | CSDN(ID:CSDNnews) 在学习一门编程语言之前,了解它的特性,带着对特性的好奇和疑问去学习是最快最好的学习方法.就像你知道某个地方有很多宝 ...
超文本标记语言是指Java_超文本标记语言(HTML)
超文本标记语言(HyperText MarkUp Language,HTML) HTML是用来制作网页的标记语言,HTML不需要编译,直接由浏览器解析: HTML文件是一个文本文件,包含了一些HTML ...
HTML(超文本标记语言)
目录 1.HTML的作用: 2.文档结构: 3.基础标签: 4.字符实体: 5.五大主流浏览器: 1.HTML的作用: 是专门给文本添加语义的,而不是修改文本形式,这些用于描述其他文本语义的文本,我们 ...
超文本标签语言html的主要特点,福建教师招考整理：超文本标记语言（HTML）
HTML即超文本标记语言,HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字.图形.动画.声音.表格.链接等.下面是小编整理的知识点--超文本标记语言(HTML),以供各位考生参考 ...
python---Web前端HTML(超文本标记语言)
文章目录 Web前端开发介绍 Web概述 Web起源 Web的特点 Web工作原理 URL介绍 HTML网页结构 HTML基本结构 HTML文档规范与注释 HTML标签文本标签列表标签图片标签i ...
Web前端—01HTML超文本标记语言
文章目录一.Wed前端开发介绍 1.Web概述 2.Web起源 3.Web的特点 4.Web工作原理 5.URL介绍二.HTML网页结构 1.HTML介绍 2.HTML基本结构 3.文档类型 4. ...
python进阶之web前端（01—HTML超文本标记语言）
目录 01.Web前端开发介绍 1.Web前端开发概述 2.Web起源 3.Web特点 4.Web工作原理 5.URL介绍 02.HTML网页结构 1.HTML基本结构 2.HTML文档类型 3.HT ...
超文本标记语言--Html
高端大气上档次的网页,低调奢华有内涵的界面,都是由静态网页和一些动态效果,插入的视频,和flash等组成,不得不说,静态网页的制作,是学习网页的必经之路,可见静态网页在学习网页的前端是十分重要.静态网 ...

HTML（超文本标记语言）——总结

HTML简介

HTML的特点

HTML标签

HTML常用标签

多媒体标签

HTML（超文本标记语言）——总结相关推荐

最新文章

热门文章