可定义文档的分区，division（区）的缩写；

标签可以把文档分割为独立的、不同的部分；

如下代码：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>常用标签一title>
head>
<body>
    <div class="para">
        <p style="height: 1000px" id="p1">顶部区域p>
    div>

    

    <div class="heading">
        
        路飞学城
        <h1>路飞学城h1>
        <h2>路飞学城h2>
        <h3>路飞学城h3>
        <h4>路飞学城h4>
        <h5>路飞学城h5>
        <h6>路飞学城h6>
    div>
    
    <div class="para">
        <p>我 年 拜 籍 舞 养 摩 的 凹 文 美<strong> 善 长 余strong> 正 生 走 凸 段 干 你 万 雨 不 看 特 自 乙 套 出 曹 心 盛 牛 小 州 成 有 用 发 笔 为 物 那 辛 新p>
        <p>我 年 拜 籍 舞 养 摩 的 凹 文 美 善 长 余 正 生 走 凸 段 干 你 万 雨 不 看 特 自 乙 套 出 曹 心 盛 牛 小 州 成 有 用 发 笔 为 物 那 辛 新p>
    div>
    
    <div class="a">
        <a href="https://www.baidu.com" target="_blank" title="路飞学城">转到百度a>

        <a href="body常用标签.rar">下载压缩包a>

        <a href="mailto:andrewzheng@sina.cn">联系我们a>

        <a href="#">跳转到顶部a>

        <a href="#p1">返回到p1段落区域a>

        <a href="Javascript:alert(1)">内容一a>
        <a href="Javascript:;">内容二a>
    div>

    <div class="lists">
        
        <ul type="circle">
            <li>我的账户li>
            <li>我的订单li>
            <li>我的优惠券li>
            <li>我的收藏li>
            <li>退出li>
        ul>

        
        <ol type="I">
            <li>我的账户li>
            <li>我的订单li>
            <li>我的优惠券li>
            <li>我的收藏li>
            <li>退出li>
        ol>
    div>

body>
html>

浏览器查看效果如下：每小块区域都是独占一行的，所以div是块级元素

另外，每块区域表示独立的一块，可为其设置id属性和 class属性，来为某个区域起个名字；id是唯一的，但class可以设置同样的属性值，并且可以设置多个

图片标签：

可通过使用标签在网页中插入图片

语法：图片加载失败时显示的内容

注意：

　　1. src设置的图片地址可以是本地的地址也可以是一个网络地址；

　　2. 图片的格式可以是png、jpg和gif；

　　3. alt属性的值会在图片加载失败时显示在网页上；

　　4. 可为图片设置宽度（width）和高度（height），不设置就显示图片默认的宽度和高度；

　　5. 行内块元素，与行内元素在一行内显示

　　6. span标签可以单独摘出某块内容，结合CSS设置相应的样式

    <div class="image">
        
        
        <img src="./python1.png" alt="python的图片1" style="width:300px;height: 200px">
        <img src="./python2.png" alt="python的图片2" title="python图片">
    div>

其他标签：

换行标签：
（单闭合）

分割线：

（单闭合），

标签用来在HTML页面创建水平分隔线，通常用来分隔内容

特殊符号：浏览器在显示的时候会移除源代码中多余的空格和空行，所有连续的空格或空行（或换行）都会被算作一个空格；

想要输入空格，需要用特殊符号：（&bnsp加分号）

HTML特殊符号对照表： http://tool.chinaz.com/Tools/HtmlChar.aspx

表格标签：

（块级元素）

表格由

标签来定义；每个表格由表格头（用定义）、表格主题（用来定义）和表格底部（由来定义）组成；表格头、表格主题和表格底部均有若干行（表格行，由来定义）；表格头里的单元格用

来定义（默认加粗、居中），表格主题和表格底部里的单元格用

来定义（

指表格数据 table data）。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

如下代码：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>表格内容title>
head>
<body>
    
    
    <table border="1" cellspacing="0">

        
        <thead>
            
            <tr>
                
                <th>th>
                <th>星期一th>
                <th>星期二th>
                <th>星期三th>
                <th>星期四th>
                <th>星期五th>
            tr>
        thead>

        <tbody>
            <tr>
                
                
                <td rowspan="3">上午td>
                <td>语文td>
                <td>数学td>
                <td>英语td>
                <td>化学td>
                <td>物理td>
            tr>
            <tr>
                <td>语文td>
                <td>数学td>
                <td>英语td>
                <td>化学td>
                <td>物理td>
            tr>
            <tr>
                <td>语文td>
                <td>数学td>
                <td>英语td>
                <td>化学td>
                <td>物理td>
            tr>
            <tr>
                
                <td rowspan="2">下午td>
                <td>语文td>
                <td>数学td>
                <td>英语td>
                <td>化学td>
                <td>物理td>
            tr>
            <tr>
                <td>语文td>
                <td>数学td>
                <td>英语td>
                <td>化学td>
                <td>物理td>
            tr>
        tbody>

        
        <tfoot>
            <tr>
                
                <td colspan="6">课程表td>
            tr>

        tfoot>
    table>
body>
html>

效果如下：

表单标签：（块级元素）

表单是一个包含表单元素的区域；表单元素是允许用户在表单中输入内容。比如：文本域（textarea）、输入框（input）、单选框（）；

表单的作用：用于显示、手机信息，并将信息提交给服务器

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>表单控件title>
head>
<body>
    <div class="form">
        
        
         
        <form action="https://www.baidu.com" method="get">
            
            <p>
                
                <label for="user">用户名：label>
                

                
                
                <input type="text" name="username" id="user" placeholder="请输入用户名">
            p>

            <p>
                <label for="password">密码：label>
                
                <input type="password" name="password" id="password" placeholder="请输入密码">
            p>

            <p>
                

                
                
                <input type="submit" name="btn" value="submit">

                
                <input type="button" name="btn" value="提交" disable="">

            p>
        form>
    div>
body>
html>

浏览器效果如下：

点击submit之后会转到百度，name属性在URL标黄的部分：

input 的属性： radio（单选）、 checkbox（多选） file（文件）；

textarea（文本域的标签；双闭合）的作用：允许用户写入多行内容到表单控件中；属性：cols和rows；

select（列表的标签；双闭合），代码如下：

DOCTYPE html>
<html lang="en">
<head>
    <title>input控件title>
head>
<body>
    <div class="form">
        <form action="https://www.baidu.com" method="get">
            
            <p>
                用户性别：
                
                <input type="radio" name="sex" value="男" checked="">男
                
                <input type="radio" name="sex" value="女">女
            p>

            <p>
            
            用户的爱好：
            
            <input type="checkbox" name="checkhobby" value="吃" checked="">吃
            <input type="checkbox" name="checkhobby" value="喝">喝
            <input type="checkbox" name="checkhobby" value="玩">玩
            <input type="checkbox" name="checkhobby" value="乐">乐
            p>

            <p>
                请上传文件：
                
                <input type="file" name="file">
            p>

            <p>
                
                自我介绍：
                
                <textarea cols="20" rows="5" name="txt" placeholder="请做自我介绍111">请做自我介绍2textarea>
            p>

            <p>
                
                籍贯：
                <select name="selOne">
                    <option value="深圳">深圳option>
                    <option value="北京">北京option>
                    
                    <option value="上海" selected>上海option>
                    <option value="广州">广州option>
                select>
            p>

            <p>
                意向工作省份：
                
                
                <select name="selMulti" size="2" multiple="">
                    <option value="北京">北京option>
                    <option value="天津">天津option>
                    <option value="广东" selected="">广东option>
                    <option value="上海">上海option>
                    <option value="江苏">江苏option>
                    <option value="浙江">浙江option>
                select>
            p>

            <p>
                
                <input type="reset" name="">

                <input type="submit" name="btn" value="submit">
            p>
        
        form>
    div>
body>
html>

浏览器效果如下：

补充：form标签的enctype属性，如下：

HTML标签属性和分类：

HTML标签可以设置属性，属性一般以键值对的方式在开始标签中，如：

<div id="i1">这是一个div标签div>
<p class='p1 p2 p3'>这是一个段落标签p>
<a href="http://www.luffycity.com">这是一个链接a>
<input type='button' onclick='addclick()'>input>