html是什么

HTML是Hyper Text Markup Language的缩写，中文的意思是“超文本标记语言”，它是制作网页的标准语言。由于网页中不仅包含普通文本，还包含超文本，故被称作超文本描述语言。
那什么是超文本呢？所谓超文本，就是指图像、视频、动画、声音、表格、链接等多媒体的内容。

第一个网页Hello world

打开记事本,写上Hello world,然后保存为index.html,接着用浏览器把index.html打开,就看到了
Hello world,这就是一个最简单的网页。

认识标签

  1. 什么是标签（元素）
<!-- DOCTYPE 这个文档类型，一开始无需深究 -->

<!DOCTYPE html>

<html>

    <!-- 网页的一些设置放在head -->

    <head>

        <!-- 设置字符集 -->

        <meta charset="UTF-8">

        <!-- 设置标题-->

        <title>demo</title>

    </head>

    <!-- 看得见的部分放在body -->

    <body>

        hello world

    </body>

</html>

html、body、head、meta都是标签，不同的标签作用也不同

常用标签一

  • 标题标签H1~H6
  • 分割线标签 hr
  • div标签
  • 段落p标签
  • span标签
  • 块级标签和行内标签
  • 换行标签 br
  • 图片标签
  • 列表标签
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <!-- 标题标签 -->

        <h1>这是h1标签</h1>

        <h2>这是h1标签</h2>

        <h3>这是h1标签</h3>

        <h4>这是h1标签</h4>

        <h5>这是h1标签</h5>

        <h6>这是h1标签</h6>

        <!--分割线标签-->

        <hr />

        <!-- div标签 -->

        <div>

            这是div标签

        </div>

        <!-- 段落标签 -->

        <p>

            这是段落标签，文字的上下会有间隔

        </p>

        <!-- span标签 -->

        <span>

            第一个span标签

        </span>

        <span>

            第二个span标签

        </span>

        <!-- 换行标签 -->

        <br />

        <!-- 图片标签 -->

        <img src="tupian.jpg"/>

        <!-- 列表标签，包括有序列表和无序列表 -->

        <h3>无序列表</h3>

        <ul>

            <li>内容1</li>

            <li>内容2</li>

            <li>内容3</li>

            <li>内容4</li>

            <li>内容5</li>

        </ul>

        <h3>有序列表</h3>

        <ol>

            <li>内容1</li>

            <li>内容2</li>

            <li>内容3</li>

            <li>内容4</li>

        </ol>

    </body>

</html>

常用标签二：表格标签

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <!-- border加上边框，width设置宽度 -->

        <table border width="500">

            <!-- thead 表头 -->

            <thead>

                <!-- tr 行 -->

                <tr>

                    <th>姓名</th>

                    <th>年龄</th>

                    <th>性别</th>

                </tr>

            </thead>

            <!-- tbody 表的主体内容 -->

            <tbody>

                <!-- tr行 -->

                <tr>

                    <!-- td列 -->

                    <td>楚留香</td>

                    <td>22</td>

                    <td>男</td>

                </tr>

                <tr>

                    <td>胡铁花</td>

                    <td>20</td>

                    <td>男</td>

                </tr>

                <tr>

                    <td>范冰冰</td>

                    <td>30</td>

                    <td>女</td>

                </tr>

            </tbody>

        </table>

    </body>

</html>

常用标签三：表单标签

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <!-- form表单标签，用来包各种表单相关的元素 -->

        <form action="">

            <!-- 输入元素 -->

            <!-- 文本域type为text，value是默认值，placeholder为提示语 -->

            <input type="text" value="" placeholder="请输入文字"/><br />

            <!-- 密码框type=password -->

            <input type="password" value="" placeholder="请输入密码"/><br />

            <!-- 单选按钮type=radio，必须拥有相同的name -->

            男：<input type="radio" name="sex" value="" />

            女：<input type="radio" name="sex" value="" /><br />

            <!-- 复选框checkbox -->

            足球：<input type="checkbox" name="ball" value="" />

            篮球：<input type="checkbox" name="ball" value="" />

            羽毛球球：<input type="checkbox" name="ball" value="" />

            乒乓球：<input type="checkbox" name="ball" value="" /><br />

            <!-- 按钮 -->

            <input type="button" name="" id="" value="按钮" /><br />

            <!-- 提交按钮 -->

            <input type="submit" name="" id="" value="提交" />

            <!--重置按钮 -->

            <input type="reset" name="" id="" value="重置" />

        </form>

    </body>

</html>

常用标签四：链接标签、下拉列表标签和iframe标签

链接标签

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            p {

                width: 300px;

                line-height: 3;

            }

        </style>

    </head>

    <body>

        <a href="helloWorld.html">hello world</a><br />

        <a href="https://www.baidu.com">百度</a><br />

        <!-- 打开新页面 -->

        <a href="https://www.sina.com" target="_blank">新浪</a><br />

        <a href="#aaa">锚点aaa</a>

        <p>

            HTML是Hyper Text Markup Language的缩写，中文的意思是“超文本标记语言”，它是制作网页的标准语言。由于网页中不仅包含普通文本，还包含超文本，故被称作超文本描述语言。 那什么是超文本呢？所谓超文本，就是指图像、视频、动画、声音、表格、链接等多媒体的内容。 HTML是网页的基本描述语言，由Tim Berners-Lee在1990年提出，其目的是方便地把一台电脑中的文本或图形，与另一台电脑中的文本或图形联系在一体，形成一个有机的整体，让人们不必考虑这些信息是在当前的电脑上，还是在网络上的其他电脑上。 HTML 不是一种编程语言，而是一种描述性的标记语言 (markup language)，它使用标签来描述网页，负责将网页内容进行格式化，使内容更具逻辑性。 HTML文档不需要编译，直接由浏览器解释执行，浏览器（IE、FireFox、Chrome、Opera、Safari、UC等）软件知道HTML的语法，知道如何解释HTML文档。目前互联网上的绝大部分网页，都是使用HTML编写的。

        </p>

        <p>

            HTML是Hyper Text Markup Language的缩写，中文的意思是“超文本标记语言”，它是制作网页的标准语言。由于网页中不仅包含普通文本，还包含超文本，故被称作超文本描述语言。 那什么是超文本呢？所谓超文本，就是指图像、视频、动画、声音、表格、链接等多媒体的内容。 HTML是网页的基本描述语言，由Tim Berners-Lee在1990年提出，其目的是方便地把一台电脑中的文本或图形，与另一台电脑中的文本或图形联系在一体，形成一个有机的整体，让人们不必考虑这些信息是在当前的电脑上，还是在网络上的其他电脑上。 HTML 不是一种编程语言，而是一种描述性的标记语言 (markup language)，它使用标签来描述网页，负责将网页内容进行格式化，使内容更具逻辑性。 HTML文档不需要编译，直接由浏览器解释执行，浏览器（IE、FireFox、Chrome、Opera、Safari、UC等）软件知道HTML的语法，知道如何解释HTML文档。目前互联网上的绝大部分网页，都是使用HTML编写的。

        </p>

        <p id="aaa">

            这是个锚点

        </p>

        <a href="#">回顶部</a>

        <p>

            那什么是超文本呢？所谓超文本，就是指图像、视频、动画、声音、表格、链接等多媒体的内容。 HTML是网页的基本描述语言，由Tim Berners-Lee在1990年提出，其目的是方便地把一台电脑中的文本或图形，与另一台电脑中的文本或图形联系在一体，形成一个有机的整体，让人们不必考虑这些信息是在当前的电脑上，还是在网络上的其他电脑上。 HTML 不是一种编程语言，而是一种描述性的标记语言 (markup language)，它使用标签来描述网页，负责将网页内容进行格式化，使内容更具逻辑性。 HTML文档不需要编译，直接由浏览器解释执行，浏览器（IE、FireFox、Chrome、Opera、Safari、UC等）软件知道HTML的语法，知道如何解释HTML文档。目前互联网上的绝大部分网页，都是使用HTML编写的。

        </p>

    </body>

</html>

下拉列表标签

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <select name="">

            <!-- 列表选项 -->

            <option value="xigua">西瓜</option>

            <option value="apple">苹果</option>

            <option value="xueli">雪梨</option>

            <option value="banner">香蕉</option>

        </select>

    </body>

</html>

iframe标签

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <iframe src="https://www.baidu.com" width="800" height="600"></iframe>

    </body>

</html>

常用标签五：html5新标签

  1. html5是什么
  2. Html5常用新增标签
  • header头部标签
  • footer底部标签
  • nav导航标签
  • audio音频标签
  • video视频标签
  • canvas画布标签
  • 其他标签
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <!-- 头部标签 -->

        <header>

            <!-- 导航标签 -->

            <nav>

                <a href="https://www.baidu.com" target="_blank">百度</a>

                <a href="https://www.sina.com"  target="_blank">新浪</a>

                <a href="https://www.qq.com"  target="_blank">腾讯</a>

            </nav>

        </header>

        <hr />

        <!-- input type=tel移动端点击输入框，弹出的数字键盘 -->

        <input type="tel" value="" placeholder="请输入手机号码" /><br />

        <!-- 音频 -->

        <audio src="jiaobu.mp3" controls="controls"></audio><br />

        <!-- 视频 -->

        <video width="800" height="400" controls="controls">

            <source src="zhanlang.mp4" type="video/mp4"></source>

        </video><br />

        <!-- 画布 -->

        <canvas id="myCanvas" width="200" height="100"></canvas>

        <hr />

        <footer>

            底部标签

        </footer>

        <script type="text/javascript">

            var c = document.getElementById("myCanvas");

            var cxt = c.getContext("2d");

            cxt.fillStyle = "#FF0000";

            cxt.fillRect(0, 0, 150, 75);

        </script>

    </body>

</html>

更多标签

更多标签请访问：

沃土前端系列 - HTML常用标签的更多相关文章

  1. Python web前端 01 HTML常用标签

    Python web前端 01 HTML常用标签 一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...

  2. PHPCMS快速建站系列之常用标签

    <span class="Nmore"><a href="/index.php?m=content&c=index&a=lists&am ...

  3. 2020年12月-第01阶段-前端基础-HTML常用标签

    1. HTML常用标签 首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写HTML标签,认识标签就可以了. 不会再给结构标签指定样式了. HTML标签有很多,这里我们学习最为常用的,后 ...

  4. 谷哥的小弟学前端(01)——HTML常用标签（1）

    探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 详解Android主流框架不可或缺的基石 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架 ...

  5. 谷哥的小弟学前端(02)——HTML常用标签（2）

    探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 详解Android主流框架不可或缺的基石 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架 ...

  6. [Web 前端] 005 html 常用标签补充

    少废话,上例子 1. 正常的字 <br> <tt>小一点的字体</tt> <br> <small>变小</small> < ...

  7. 【01】HTML_day01_03-HTML常用标签

    typora-copy-images-to: media 第01阶段.前端基础.HTML常用标签 学习目标 理解: 相对路径三种形式 应用 排版标签 文本格式化标签 图像标签 链接 相对路径,绝对路径 ...

  8. web@前端--html,css,javascript简介、第一个页面(常用标签简介)

    1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. ...

  9. 前端基础之html常用标签

    前言: 1.在B-S模式下,server服务端和客户端之间 使用http协议(规定 客户端应该怎么请求服务端,服务端应该怎么响应)通信: 2.传输过程 浏览器 向服务端发起 post/get请求 服务 ...

随机推荐

  1. SAP PM：通过接口获取设备资产基本信息

    在SAP工厂维护模块中,给设备贴二维码标签是现在越来越流行的做法.因此通过扫描二维码获取设备资产信息是个非常基本的需求. 以下实例简单实现了,给SAP RFC传入设备编码获取设备资产基本信息的需求. ...

  2. 吴裕雄--天生自然 JAVA开发学习：多线程编程

    class RunnableDemo implements Runnable { private Thread t; private String threadName; RunnableDemo( ...

  3. 手机遥控Office，变身演讲达人

    编者按:在商业演讲中,需要在PPT/Word/Excel文件中切换以达到最佳演讲效果-Office Remote可帮助Windows Phone变身Office的智能遥控.以蓝牙控制电脑,触屏操作多种 ...

  4. [LC] 66. Plus One

    Given a non-empty array of digits representing a non-negative integer, plus one to the integer. The ...

  5. Linux 系统优化参数总结

    系统优化参数总结: net.ipv4.tcp_syncookies = 表示开启SYN Cookies.当出现SYN等待队列溢出时,启用cookies来处理,可防范少量SYN攻击 net.ipv4.t ...

  6. python的collections模块和functools模块

    collections是Python内建的一个集合模块,提供了许多有用的集合类. namedtuple 我们知道tuple可以表示不变集合,例如,一个点的二维坐标就可以表示成: >>> ...

  7. 关于Synchornized，Lock，AtomicBoolean和volatile的区别介绍

    1．  volatile 变量可以被看作是一种 "程度较轻的 synchronized". 2．  Lock 实现提供了比使用 synchronized 方法和语句可获得的更广泛的 ...

  8. 转：Zabbix-3.0.x使用OneAlert发送告警

    转自: http://blog.sina.com.cn/s/blog_87113ac20102w7il.html   ( 标签: onealert 分类: zab OneAlert 是国内首个 Saa ...

  9. Ionic3学习笔记（十六）上传头像至图床

    本文为原创文章,转载请标明出处 个人做的开源 Demo 登录注册模块采用的是 Wilddog 野狗通讯云的身份认证服务,不得不说各方面和 Google 收购的 Firebase 很像,十分简单易用.其 ...

  10. 吴裕雄--天生自然 HADOOP大数据分布式处理：修改CenterOS 7系统时间为北京时间