HTML语法 | 青训营笔记这是我参加第四届青训营笔记创作活动的第一天~ 1. HTML组成 2. HTML DOM H

这是我参加第四届青训营笔记创作活动的第一天~

1. HTML组成

<html lang="en"> <!--根标签-->
<head> <!--源数据-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>  <!--呈现数据-->
    
</body> 
</html>

2. HTML DOM

HTML DOM 是 HTML 的标准对象模型和编程接口。
当网页被加载时，浏览器会创建页面的文档对象模型（即DOM）。
HTML DOM模型将被结构化为对象树。

未命名图片.png

每一个节点称为DOM节点。

3. HTML语法

- 标题

h1-h6 标题字体从大到小

    <h1>标题</h1>
    <h2>标题</h2>
    <h3>标题</h3>
    <h6>标题</h6>

- 列表的三类标签

    <ol>
        <li>列表</li>
        <li>标签</li>
        <li>有序</li>
    </ol>

第一类：有序列表

    <ul>
        <li>无序</li>
        <li>列表</li>
        <li>标签</li>
    </ul>

第二类：无序列表

    <dl>
        <dt>属性名
            <dd>属性值</dd>
            <dd>属性值</dd>
        </dt>
    </dl>

第三类：表格标签

- 图片、音频、视频标签

    <img src="" alt=""/>
    <audio controls>
        <source src="" type="">
    </audio>
    <video height="" width="" controls>
        <source src="" type="">
    </video>

- input标签

input标签用于搜集用户信息。
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
input标签的type属性值有button、checkbox、radio、password、submit等

    <input type="password"><pre></pre>
    <input type="date"><pre></pre>
    <input type="number" min="10" max="100"><pre></pre>
    <input type="radio" name="rd" value="1">1
    <input type="radio" name="rd" value="2">2

总结

在HTML中还有很多功能各异的标签，它们一般成对出现
也有单独呈现的标签，如img标签等

HTML的学习只是打好基础的其中一个过程，想要学好前端，还需要在更多方面下苦功。

以学习HTML为起点，努力进行接下来的前端学习吧！