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. 新开通blog

    从今天开始我有blog了,,以后要经常总结一些自己接触的东西,提升自己

  2. 电脑C盘空间不足

    电脑C盘空间不足,又不知道哪些文件可以删,可以下载下面的批处理文件 @echo off echo 正在清除系统垃圾文件,请稍等...... del /f /s /q %systemdrive%\*.t ...

  3. 如何将EXCEL两列比较后不重复的数据复制到另一列上

    Q1:我有两列数据,需要做重复性比较,比较完后需要将不重复的数据提取出来自成一列,请问该如何操作? 假如你要比较A列与B列数据是否重复,应该有三种结果(即AB皆有,A有B无,B有A无),可在C列存放A ...

  4. linux的nohup命令的用法（后台运行程序命令）

    linux的nohup命令的用法. 在应用Unix/Linux时,我们一般想让某个程序在后台运行,于是我们将常会用 & 在程序结尾来让程序自动运行.比如我们要运行mysql在后台: /usr/ ...

  5. VBA编程常用词汇英汉对照表

    表 20‑1到表 20‑8是VBA编程中使用频率最高的英文单词,按字母排序.词性列中,a表示形容词,n表示名词,v表示动词,p表示介词以及其他词性. 表 20‑1 VBA编程常用词汇表 单词 中文 词 ...

  6. Linux SSH 使用密钥登陆

    Linux SSH 使用密钥登陆 通常我们登录 Linux 服务器,我们需要使用密码进行登录,但是密码存在被暴力破解的可能. 可以将默认服务端口 22 改成其他不常用的端口. 可以设置非常复杂的密码. ...

  7. 吴裕雄--天生自然 HADOOP大数据分布式处理：安装配置MYSQL数据库

    安装之前先安装基本环境:yum install -y perl perl-Module-Build net-tools autoconf libaio numactl-libs # 下载mysql源安 ...

  8. VS2010 常用的快捷键

    1.强迫智能感知:Ctrl+J:2.强迫智能感知显示参数信息:Ctrl-Shift-空格:3.格式化整个块:Ctrl+K+F4.检查括号匹配(在左右括号间切换): Ctrl +]5.选中从光标起到行首 ...

  9. deeplearning.ai 神经网络和深度学习 week3 浅层神经网络

    1. 第i层网络 Z[i] = W[i]A[i-1] + B[i],A[i] = f[i](Z[i]). 其中, W[i]形状是n[i]*n[i-1],n[i]是第i层神经元的数量: A[i-1]是第 ...

  10. MOOC（6）- case之间存在依赖

    方法1:这里只给出根据依赖字段去匹配响应结果中的值的函数,其他匹配依赖case,对依赖case发起请求见下面的方法2 方法2: from day_20200208_mooc.tools.do_exce ...