一、HTML简介

HTML全称：Hyper Text Markup Language 超文本标记语言，可以标记字体颜色、视频、音频等。

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称为表现。

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单，或鼠标滑过表格的背景颜色改变。还有焦点新闻的轮换。有动画的，有交互的一般都是用JavaScript来实现的。

二、基本语法

语法概述：由尖括号包围的关键字词，例如：<html>

标签类型：双标签、单标签。

双标签：成对出现，例如<html> 和 </html>

单标签：单独出现，例如<br />，在html5中表明/可以不加，为<br>

标签关系：包含关系、并列关系。

包含关系：

<head><title></title>
</head>

并列关系：

<head>
</head>
<body>
</body>

三、Html的标准结构

Html的标准结构：
<html>---根标签<head>---头标签：主要是指定当前网页的编码格式以及当前窗口标题<meta charset="utf-8" />--规定当前编码格式<title> ---当前窗口标题</title></head><body>---当前html页面在浏览器中显示的内容</body><address>地址标签</address>
</html>

三、标签练习

前提准备：创建一个文件，文件名后缀修改为.html，例：test3_7.html。

1、窗口标题标签

标签名：<title></title>

练习代码：

<html><head><title>这里是浏览器窗口标题</title></head><body></body>
</html>

显示结果：

2、标题标签

标签名：<h1></h1>...<h6></h6>

练习代码：

<html><head><title>这里是浏览器窗口标题</title></head><body><h1>第一个标题</h1><h2>第二个标题</h2><h3>第三个标题</h3><h4>第四个标题</h4><h5>第五个标题</h5><h6>第六个标题</h6></body>
</html>

显示结果：

标签特点：

1.文字自动加粗，自动换行（后期可以通过CSS修改）
2.标题字号大小依次递减

3、段落标签

标签名：<p></p>

练习代码：

<html><head><title>这里是浏览器窗口标题</title></head><body><p>假如生活欺骗了你，不要悲伤，不要心急！忧郁的日子里须要镇静：相信吧，快乐的日子将会来临！心儿永远向往着未来；现在却常是忧郁。一切都是瞬息一切都将会过去；而那过去了的，就会成为亲切的怀恋。</p><p>假如生活欺骗了你，不要悲伤，不要心急！忧郁的日子里须要镇静：相信吧，快乐的日子将会来临！心儿永远向往着未来；现在却常是忧郁。一切都是瞬息一切都将会过去；而那过去了的，就会成为亲切的怀恋。</p></body>
</html>

显示结果：

标签特点：

1.本文在一个段落中会根据浏览器窗口的大小自行切换
2.段落和段落之间有空隙
3.同一段落里的不同行之间也有空隙

4、段落缩进标签

标签名：<blockquote></blockquote>

练习代码：

<html><head><title>这里是浏览器窗口标题</title></head><body>正常缩进<blockquote>自动缩进</blockquote></body>
</html>

显示结果：

标签特点：

1.段落缩进

5、换行标签

标签名：<br>

练习代码：

<html><head><title>这里是浏览器窗口标题</title></head><body><p>假如生活欺骗了你，不要悲伤，不要心急！<br>忧郁的日子里须要镇静：相信吧，快乐的日子将会来临！心儿永远向往着未来；现在却常是忧郁。一切都是瞬息一切都将会过去；而那过去了的，就会成为亲切的怀恋。</p><p>假如生活欺骗了你，不要悲伤，不要心急！忧郁的日子里须要镇静：相信吧，快乐的日子将会来临！心儿永远向往着未来；现在却常是忧郁。一切都是瞬息一切都将会过去；而那过去了的，就会成为亲切的怀恋。</p></body>
</html>

显示结果：

标签特点：

1.单标签
2.只是开始新的一行，跟段落不一样，所有不会有段间距

6、水平线标签

标签名：<hr>

练习代码：

<html><head><title>这里是浏览器窗口标题</title></head><body><p>假如生活欺骗了你，不要悲伤，不要心急！<br>忧郁的日子里须要镇静：相信吧，快乐的日子将会来临！心儿永远向往着未来；现在却常是忧郁。一切都是瞬息一切都将会过去；而那过去了的，就会成为亲切的怀恋。</p><hr><p>假如生活欺骗了你，不要悲伤，不要心急！忧郁的日子里须要镇静：相信吧，快乐的日子将会来临！心儿永远向往着未来；现在却常是忧郁。一切都是瞬息一切都将会过去；而那过去了的，就会成为亲切的怀恋。</p></body>
</html>

显示结果：

标签特点：

1.单标签
2.水平线上下有间距

7、原样展示标签

标签名：<pre></pre>

练习代码：

<html><head><title>这里是浏览器窗口标题</title></head><body><p>假如生活欺骗了你，不要悲伤，不要心急！<br>忧郁的日子里须要镇静：相信吧，快乐的日子将会来临！心儿永远向往着未来；现在却常是忧郁。一切都是瞬息一切都将会过去；而那过去了的，就会成为亲切的怀恋。</p><hr><pre>假如生活欺骗了你，不要悲伤，不要心急！
忧郁的日子里须要镇静：相信吧，快乐的日子将会来临！
心儿永远向往着未来；现在却常是忧郁。一切都是瞬息一切都将会过去；而那过去了的，就会成为亲切的怀恋。</pre></body>
</html>

显示结果：

标签特点：

1.将当前的文本格式直接显示出来

8、下标标签

标签名：<sub></sub>

练习代码：

<html><head><title>这里是浏览器窗口标题</title></head><body><sub>x</sub>2</body>
</html>

显示结果：

9、上标标签

标签名：<sup></sup>

练习代码：

<html><head><title>这里是浏览器窗口标题</title></head><body>H<sup>2</sup>O</body>
</html>

显示结果：

10、文本格式化标签

标签名：

标签意义	标签名	标签名
加粗	<b></b>	<strong></strong>
倾斜	<i></i>	<em></em>
删除线	<s></s>	<del></del>
下划线	<u></u>	<ins></ins>

练习代码：

<html><head><title>这里是浏览器窗口标题</title></head><body><b>文字加粗</b><strong>文字加粗</strong><br><i>文字倾斜</i><em>文字倾斜</em><br><s>删除线</s><del>删除线</del><br><u>下划线</u><ins>下划线</ins></body>
</html>

显示结果：

标签特点：

1.表格中的两种标签结果展示相同，没有区别

2.右列中的标签带有强调的“语义”

11、块标签

标签名：<div></div>

练习代码：

<html><head><title>这里是浏览器窗口标题</title></head><body><div>张三</div><div>李四</div><div><p>一个段落</p><div>一个块标签</div><div>一个块标签</div></div></body>
</html>

显示结果：

标签特点：

1.div标签是块级元素，每个div标签都会从新行开始显示，占据一行

2.div标签内可以添加其他的标签元素（行内元素、块级元素都行）

12、行内标签

标签名：<span></span>

练习代码：

<html><head><title>这里是浏览器窗口标题</title></head><body><span>行内标签</span><span>行内标签</span><span>行内标签</span><span><p>段落</p><div>块标签</div></span></body>
</html>

显示结果：

标签特点：

1.span是内联元素；span标签是行内元素，会在一行显示

2.span标签内只能添加行内元素的标签或文本。如上代码中的写法是错误的：

HTML简介和标签练习（一）相关推荐

HTML简介/HTML标签/案例
HTML简介 1. 网页 1.1. 什么是网页网站是指因特网根据一定的规则,使用HTML等制作的用域展示特定内容相关的网页集合. 网页是网站中的一页,通常是HTML格式的文件,它要通过浏览器来阅读. ...
【自定义标签开发】01-标签简介和开发第一个标签
自定义标签简介自定义标签主要用于移除Jsp页面中的java代码. 要使用自定义标签移除jsp页面中的java代码,只需要完成以下两个步骤: 1.编写一个实现Tag接口的java类,把页面java代码 ...
HTML hr标签简介
1.简介 <hr> 标签在 HTML 页面中创建一条水平线. 水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分. 2.标准属性 id, class ...
Unity3D-Tag 标签简介与应用
Unity3D-Tag 标签简介与应用转载自Unity3D(通过Tag 标签查找物体) 1.Tag 简介 Tag 标签,就是一个标签.标签可以起到标识,区分的作用. 同一类的模型,我们可以根据需要给 ...
JSP自定义标签开发与打包
前言:最近用到JSP的自定义标签,于是到网上寻找资料,结果发现很多的网上教程要么不全要么就是步骤流程错误,尤其是将自定义标签打jar包这一过程,按照网上的教程操作,结果被坑惨了,所以才有现在这一篇博文 ...
dede php 常用,dede cms常用标签汇总收藏版
首页标题调用标签:{dede:global.cfg_webname/} 首页关键词调用标签:{dede:global.cfg_keywords/} 首页描述调用标签:{ dede:global.cfg ...
深度学习核心技术精讲100篇（七）-keras 实战系列之深度学习模型处理多标签（multi_label）
前言最近在读论文的的过程中接触到多标签分类(multi-label classification)的任务,必须要强调的是多标签(multi-label)分类任务和多分类(multi-class) ...
HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
第六节：用audio标签打造一个属于自己的HTML5音乐播放器
上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...

HTML简介和标签练习（一）

一、HTML简介

二、基本语法

三、Html的标准结构

三、标签练习

1、窗口标题标签

2、标题标签

3、段落标签

4、段落缩进标签

5、换行标签

6、水平线标签

7、原样展示标签

8、下标标签

9、上标标签

10、文本格式化标签

11、块标签

12、行内标签

HTML简介和标签练习（一）相关推荐

最新文章

热门文章