整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

HTML入门练习案例

1）熟练使用p标签加粗样式标签给文本分段
（2）熟练使用换行标签h标签加粗给标签写标题
（3）使用图像标签加图像
（4）使用锚点链接可以点击链接快速定位到页面中的某个位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- h1标签的使用 -->
<h1 id="top">猫猫种类</h1>
 <!--换行标签<br/>的使用  -->
猫猫分为<br/>
<!-- 锚点链接的<a herf="#"></a>使用 -->
<a href="#miao">妙猫猫，</a><br/>
<a href="#cry">流泪猫猫，</a><br/>
<a href="#ben">本拉豆猫猫，</a><br/>
<a href="#wei">委屈猫猫</a><br/>
<h4 id="miao"><h3>妙猫猫</h3></h4>
<p>秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙
    秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙</p>
<h4 id="cry"><h3>流泪猫猫</h3></h4>
没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没<p>人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫，没人疼没人爱我是一只流泪猫</p>
<img src="images/流泪猫猫.gif"width="300"/>
<h4 id="ben"><h3>本拉豆猫猫</h3></h4>
<p>哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！
   </p>
   <!-- 图像标签<img src="图像地址"/>的使用 -->
   <img src="images/本拉豆猫.jpg"width="300"/>
<h4 id="wei"><h3>委屈猫猫</h3></h4>
<p>我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？我只是一只小猫咪，我为什么要承担这么多？</p>
<a href="#top">返回顶部</a><br>
<a href="images/菠萝头简介.html"target="_blank">引申猫猫：菠萝头的简介和照片</a>
</body>
</html>
![本拉豆猫图片插入图 ](https://img-blog.csdnimg.cn/20201014210646633.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDY3NDc5,size_16,color_FFFFFF,t_70#pic_center)

![流泪猫猫](https://img-blog.csdnimg.cn/2020101421073586.gif#pic_center)




1234567891011121314151617181920212223242526272829303132333435363738394041

原文链接：https://blog.csdn.net/qq_45067479/article/details/109083277?utm_medium=distribute.pc_category.none-task-blog-hot-2.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-2.nonecase&request_id=

作者：thorn豆豆

、什么是HTML

HTML简介

HTML是用来描述网页的一种语言，它是一种超文本标记语言，由一套标记标签组成，在制作网页时，HTML使用标记标签来描述网页。

发展史


HTML：Hyper Text Markup Language超文本标记语言

超文本标记语言—在1993年6月互联网工程工作小组工作案发布（并非标准）

HTML2.0—1995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布过时。

HTML3.2—1996年1月14日，W3C推荐标准

HTML4.0—1997年12月18日，W3C推荐标准

HTML4.01（微小改进）—1999年12月24日，W3C推荐标准，2000年5月15日发布基本严格的HTML4.01语法，是国标标准化组织和国际电工委员会的标准

XHTML1.0—发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布

XHTML1.1—2001年5月31日发布

XHTML2.0是W3C的工作草案，由于改动过大，学习这个新技术的成本过高而最终胎死腹中，因此，现在最常用的还是XHTML1.0标准。

目前最新的版本为HTML5，它是2004年被提出，2007年被W3C接纳并成立新的HTML工作团队，

2008年1月22日公布HTML5第一份正式草案，

2012年12月17日HTML5规范正式定稿，

2013年5月6日，HTML5.1正式草案公布。

HTML 5作为最新版本，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。目前企业开发中也在增大使用HTML5的力度

HTML的优势

  • 各大浏览器厂商对H5的支持
  • 市场的需求
  • 跨平台

二、HTML的基本结构

  • <html>......</html> HTML文档的开始和结束标记。
  • <head>……</head> 头控制标记，不在界面上进行展示，子标签可设置SEO优化的一些内容以及设置网页的编码。
  • <title>……</title>：设置浏览器的窗口上标题。
  • <body>……</body>：页面可见内容。

三、HTML的基本标签

  • 标题标签

h1~h6


源代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>标题标签</title>

</head>

<body>

<h1>这是一级标题</h1>

<h2>这是二级标题</h2>

<h3>这是三级标题</h3>

<h4>这是四级标题</h4>

<h5>这是五级标题</h5>

<h6>这是六级标题</h6>

<h7>这是七级标题</h7>效果怎么显示不出来呢？？？

<h1>这是一级标题</h1>

</body>

</html>

浏览器预览效果


  • 段落标签和换行标签

p标签为段落标签，br标签为换行标签


源代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>段落和换行标签</title>

</head>

<body>

<h1>北京欢迎你</h1>

<p>北京欢迎你，<br>为你开天辟地</p>

<p>北京欢迎你，<br/>有有勇气就会有奇迹</p>

</body>

</html>


浏览器预览效果图


  • 水平线标签

hr标签为水平线标签


源代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>水平线标签</title>

</head>

<body>

<h1>漂洋过海来看你</h1>

<hr>

<p>为你我用了半年的积蓄，<br>漂洋过海来看你</p>

<hr/>

</body>

</html>


浏览器预览效果图


  • 字体样式标签

em为斜体标签，strong为字体加粗标签


源代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>字体样式标签</title>

</head>

<body>

<h1>漂洋过海来看你</h1>

<hr>

<p>为你我用了<em>2017</em>半年的<strong><em>积蓄</em></strong>，<br>

<em><strong>漂洋过海</strong></em>来看你

</p>

<hr/>

</body>

</html>


浏览器预览效果图

  • 注释和特殊符号

注释使用：<!--被注释的内容-->

大于号：> great than的缩写

小于号：< less than的缩写

双引号：""

版权符号：©

空格：


源代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>注释和特殊符号</title>

</head>

<body>

<pre>

注释使用：<!--被注释的内容-->

大于号：> great than的缩写

小于号：< less than的缩写

双引号：""

版权符号：©

空格：

</pre>

<!-- 我是被注释的内容，我只留给你们看，不会在页面上显示 -->

5<10>6 <br>

"我是被双引号引起来的内容"<br>

©自由职业开发者公司<br>

我是 测试 空 格的

</body>

</html>


浏览器预览效果图


以上就是HTML的简单入门，后续带大家更深入的了解HTML

TML教程

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

在本教程中，您将学习如何使用 HTML 来创建站点。

HTML 很容易学习！相信您能很快学会它！

本教程包含了数百个 HTML 实例。

使用本站的编辑器，您可以轻松实现在线修改 HTML，并查看实例运行结果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>孙叫兽的博客</title>
    </head>
    <body>
        <h1>我的第一个标题</h1>
        <p>我的第一个段落。</p>
    </body>
</html>

HTML 文档的后缀名

.html

.htm

都可以。

  • HTML 简介

实例：

<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孙叫兽的博客</title>
</header>
<body>
<h1>这是我的标题</h1>
<p>这是我的段落</p>
</body>
</html>

实例解析

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据，如 <meta charset=“utf-8”> 定义网页编码格式为 utf-8。
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

什么是HTML？

  • HTML 是用来描述网页的一种语言。
  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面
  • HTML 标签
  • HTML 标记标签通常被称为 HTML

标签

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
    • <标签>内容</标签>

    html元素

    “HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.

    但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

    HTML 元素:

    <p>这是一个段落</p>

    web浏览器

    Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

    浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户

    html网页结构

    <html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <h1>这是一个标题</h1>
        <p>这是一个段落。</p>
        <p>这是另外一个段落。</p>
    </body>
</html>

    html的版本：

    <!DOCTYPE>声明

    <!DOCTYPE>声明有助于浏览器中正确显示网页。

    网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

    doctype 声明是不区分大小写的，以下方式均可：

    <!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

    html5

    <!DOCTYPE html>

    html4

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN""
http://www.w3.org/TR/html4/loose.dtd">

    xhtml1.0

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    中文编码

    目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。


    在线咨询
    上一篇：编写你的第一行 HTML 代码，来帮助蝙蝠侠写一封情书
    下一篇：CSS 中几种最常用的水平垂直居中的方法

    您的项目需求

    *请认真填写需求信息，我们会在24小时内与您取得联系。

    推荐阅读
    友情链接 绥德县 温州 禹城市 海门市 敦煌市 封开县 网站制作
    Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
    联系电话：   E-mail：279303980@qq.com  
    主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
    电话沟通
    在线客服