HTML元素分类

在head中的元素

  • meta
  • title
  • style
  • link
  • script
  • base

在body中的元素

  • div/ section/ article/ aside/ header/ footer（表示一个区域）
  • p（表示段落）
  • span/ em/ strong（表示行内元素(内联元素，inline元素)，带有一些默认样式）
  • table/ thead/ tbody/ tr/ td（表格相关的元素）
  • ul/ ol/ li/ dl/ dt/ dd（列表元素）
  • a（链接元素）
  • form/ input/ select/ textarea/ button（表单元素）

简介：

1.  <meta charset="UTF-8"> 指定页面的字符集。

2.  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 指定窗口怎么显示视图。可以指定初始缩放比例。width=device-width是适配移动端最最重要的一步。

3. <base href="/">指定一个基准路径

4. a[href, target] href指定路径，target指定在哪个窗口打开，可以在本窗口打开,也可以新起一个窗口打开（_blank）。

5. img[src, alt] src指定img路径，有3种路径（前端静态资源路径，后端http资源路径，Data URL）,alt指定当图片打不开时显示路径。

6. table td[colspan, rowspan]

7. form[action, method, enctype] action指定表单提交的http地址, method指定get post,enctype指定传输的数据格式，formdata。

8. input[type, value]type -> text password submit（一般不会把input的type设置为submit，不符合语义）

9. button[type]

10. select > option[value]

11. label[for] 和某个表单元素使用id进行关联，当点击label时，直接focus这个表单元素。

DEMO2-2.html

<!DOCTYPE html>
<html lang="en">
<head>
　　<!-- 设置字符集 -->
    <meta charset="UTF-8">
　　<!--设置窗口大小-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <section>
        <h1>链接</h1>
　　　　 <!-- 有跳转操作的需要时最好都使用a元素，满足html语义化要求 -->　　
        <a href="http://www.qq.com">腾讯</a>
        <a href="http://www.taobao.com" target="_blank">淘宝</a>
    </section>
    <section>
        <h1>表格</h1>
        <table border="1">
            <thead>
                <tr>
                    <th>表头1</th>
                    <th>表头2</th>
                    <th>表头3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>数据1</td>
                    <td>数据2</td>
                    <td>数据3</td>
                </tr>
                <tr>
                    <!-- 占据2列的单元格， colspan=2 -->
                    <td colspan="2">数据1</td>
                    <!-- 本来一行有3列数据的，现在被占据了一列， -->
                    <td>数据3</td>
                </tr>
                <tr>
                    <!-- 占据2行的单元格，rowspan=2 -->
                    <td rowspan="2">数据1</td>
                    <td>数据2</td>
                    <td>数据3</td>
                </tr>
                <tr>
                    <!-- 本来有3列数据，因为被上面的单元格占了一列，所以这里只有2列了 -->
                    <td>数据2</td>
                    <td>数据3</td>
                </tr>
            </tbody>
        </table>
    </section>
    <section>
        <h1>表单</h1>
        <!-- action表示要提交的地址 -->
        <!-- method表示提交的请求方式 -->
        <!-- enctype表示编码方式，只有form-data可以提交file -->
        <!-- 提交数据到后台有2中方式，一种是form表单提交，一种是ajax，但是，即使这里使用ajax，在写输入时尽量也要带上form元素 -->
        <form action="http://www.qq.com" method="GET" enctype="multipart/form-data">
            <p>
                <!-- 下拉列表使用select和option结合 -->
                <select name="select1" id="select1">
                    <option value="1">one</option>
                    <!-- option有selected属性时，表示选中状态 -->
                    <option value="2" selected>two</option>
                </select>
            </p>
            <p>
                <input type="text" name="text1" />
            </p>
            <p>
                <input type="password" name="password" />
            </p>
            <p>
                <!-- input的type为radio时，表示单选框，name相同时只能选择一个（name都为radio1） -->
                <!-- name可以相同，表示同一组单选框，只能选择一个，但是id不能相同 -->
                <!-- label for为了扩大选择范围，容易选择 -->
                <input type="radio" name="radio1" id="radio1-1" />
                <label for="radio1-1">选择1</label>
                <input type="radio" name="radio1" id="radio1-2" />
                <label for="radio1-2">选择2</label>
            </p>
            <p>
                <!-- 默认为普通button -->
                <button type="button">普通button</button>
                <!-- 当type of button is submit, 它就是一个提交button，它会提交form表单 -->
                <button type="submit">提交button</button>
                <!-- 提交button也可以使用input,它的type是submit，注意这里的value，但是这里input的语义不明确，尽量不要使用 -->
                <input type="button" value="提交button" />
                <!-- 表单回到初始状态 -->
                <button type="reset">重置button</button>
            </p>
        </form>
    </section>
</body>
</html>

　　

按照默认的样式对html元素进行分类

  • 块级元素block 1.是一个方块的形状，长方形，正方形，可以设置size 2.默认是占据整行的， 3.当页面足够小时，元素也不会变形。(区域 p，html,body,所有display="block"的元素)
  • 行内元素inline, 1.不一定是规则的形状，所以不能设置width和height等size属性 2. 不会独占一行。3.当页面足够小时，元素会变形，多表现为换行,如果不想换行，可以使用display: inline-block（span em strong元素）
  • inline-block元素，对外，它像是inline元素，它不会独占一行，对内，它像block元素，形状是长方形，可以设置size。当页面比较小时，也不会换行。（一般的表单元素）
DEMO2-5.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 表示区域的元素都是block元素 -->
    <div style="width: 100px;background-color: red;">block 元素</div>
    <!-- p标签也是block元素 -->
    <p>
        <!-- span标签是inline元素，inline元素不能设置size，并且当浏览器足够小时，inline元素会换行显示，inline元素是没有规定形状的。 -->
        <span>inline元素</span>
        <em>也是inline元素</em>
        <strong>这个也是inline元素</strong>
    </p>
    <p>
        <!-- select元素默认是inline-block元素，可以通过查看select元素的display属性看到，inline-block元素是可以与其他元素在一行的，像这里的与inline元素span在一行。 -->
        <!-- 并且，select元素是可以设置size的，它是有规则形状的，它不会因为浏览器的太小而换行（inline元素会因为浏览器窗口太小而换行，inline-block元素不会换行） -->
        <select name="test" style="width: 400px;">
            <option>inline block元素</option>
        </select>
        <span>inline元素</span>
    </p>
</body>
</html>

　　

按照内容来分类

https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content,

有助于理解html元素的嵌套关系。

posted @ 2020-07-08 21:38  JasonWangTing  阅读(211)  评论(0)  编辑  收藏  举报