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. 21）PHP，杨辉三角

    代码展示: $n=; ;$i<=$n;$i++){ ;$k<=$i;$k++){ ||$k==$i){ $arr[$i][$k]=; }else{ ){ $arr[$i][$k] = $a ...

  2. java中BigDecimal的四舍五入小记

    static class test{ public static void main(String[] args) { BigDecimal b=new BigDecimal(45); BigDeci ...

  3. Django获取当前时间和Linux系统时间不一致

    配置文件中修改:TIME_ZONE的值改为上海,USE_TZ的值改为False,重启项目即可

  4. )ASCII比较大小

    有一个注意点: 就是在字符输入时,要用getchar诋毁那个回车键 几个比较重要的error .听了学长的没有再用void main,结果结尾忘了return ,但是竟然也编译运行成功并提交了,ole ...

  5. 简单php递归无限mysql记录

    <?php header('content-type:text/html;charget=gb2312'); $d='';     get_title($d,0,'='); function g ...

  6. 第十六届“二十一世纪的计算”学术研讨会 图灵奖获得者Butler W. Lampson主题演讲

    Personal Control of Digital Data 图灵奖获得者Butler W. Lampson主题演讲" title="第十六届"二十一世纪的计算&qu ...

  7. telnet不是内部或外部命令的问题解决

    在windows DOS 命令窗口中输入telnet命令,出现如下提示信息:     可能是没有安装telnet客户端的原因,又得开始捣鼓了  www.2cto.com     依次点击"开 ...

  8. Excel中带字母的数字序列自增实现方法

    示例: 在A1单元格输入以下公式,然后向下填充公式 =".mr"&ROW()&" {margin-right: "&ROW()& ...

  9. [LC] 104. Maximum Depth of Binary Tree

    Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...

  10. getcwd() 和 os.path.realpath () 的区别

    http://lemfix.com/topics/7 getcwd()获取当前目录:其他文件调用时,会根据当前文件的位置获取目录,不同的文件调用,值是不一样的. os.path.realpath()获 ...