沃土前端系列 - HTML常用标签

html是什么

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

第一个网页Hello world

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

认识标签

什么是标签（元素）

<!-- 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新标签

html5是什么
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>