HTML文档是以.html为后缀名的文件，通过标签来标记要显示的内容和结构，告诉浏览器显示的内容。它采用树型数据结构，它的元素即为节点，在html中常被称作标签。

标签的形式

单标签和双标签

常用的单标签有 a 标签、img 标签、br标签、hr标签
标签的展示形式有block（块级元素）、inline（行内元素）、inline-block（行内块）
行内元素不能设置宽、高属性，不会独占一行，而块级元素独占一行。

基本标签

用VS Code新建一个HTML文件，选择HTML5的标准，自动生成基本框架。

注释用<！--注释内容-->

<!-- html5的文档声明 -->
<html lang="en">
<!-- html为根标签 lang是属性，en是属性值-->
<head>
<!-- head 标签为头部标签，里面放文档设置及css样式文件引入 -->
    <meta charset="UTF-8">
    <!-- meta标签提供关于Html文档的元数据，不会显示在页面上，告诉浏览器如何解析这个文件，
        另一个作用是添加服务器发送到浏览器的HTTP头部内容，UTF-8是编码集，常用gbk.-->
    <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>
    <p>自定义文档内容</p>
</body>
</html>

常用标签

h1~h6: 标题标签；
a: 链接引用标签；
img：图片引用标签；
br：换行标签;
hr：水平虚线标签；
p：段落标签；
div：块级自定义标签；
span：行内自定义标签。

    <!-- href属性的值为网页地址，target属性的值设置网页跳转方式，_blank另打开一个网页跳转。
         默认值为_self，在当前网页跳转。在浏览器打开的网页上用鼠标点击百度即跳转网页 -->
    <br>
    <img src="../image/1.png" alt="加载失败则显示此内容" title="验证码">
    <!-- src属性的值为图片资源的位置，alt属性可以不填，title属性的值在浏览器打开后鼠标放图片上显示 -->

其它标签参考：HTML 标签列表(字母排序) | 菜鸟教程 (runoob.com)

表格标签（不常用）

table：定义一个表格；
caption：定义表格标题；
thead和tbody：表头和表体（可以不写）
tr：一行单元格；
th：表头单元格；
td：表格单元格;
单元格td标签有重要属性colspan和rowspan,用于单元格合并。

        <!-- boeder属性定义边框大小，cellspacing属性定义内外边框间距，cellpadding属性定义单元格内容与边框间距 -->
        <caption>课程表</caption>
        <!-- 设置标题 -->
        <tr>
            <!-- 设置表头，用th有加粗效果，colspan跨列合并2个单元格 -->
            <th colspan="2"></th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        <tr>
            <!-- rowspan跨行合并2个单元格 -->
            <td rowspan="2">上午</td>
            <td>1</td>
            <td>语文</td>
            <td>数学</td>
            <td>物理</td>
            <td>化学</td>
            <td>生物</td>
        </tr>
        <tr>
            <td>2</td>
            <td>体育</td>
            <td>音乐</td>
            <td>几何</td>
            <td>画画</td>
            <td>舞蹈</td>
        </tr>
    </table>

表单标签

form：定义一个表单；
input：添加一个输入框（通过type属性控制类型）;
textarea：添加一个文本域；
select：添加下拉菜单选择框，要和option一起使用；
label：聚焦，达到点击文字聚焦到输入框。

    <form action="https://www.qq.com" method="get" name="form1" target="_blank">
        <!-- fieldset给表单部分选择框分组 -->
        <fieldset>
            <!-- 分组后左上角添加标签 -->
            <legend >表单</legend>
            <!-- label标签用于聚焦，鼠标点击内容即可聚焦到输入框 -->
            <label for="useName">
                用户名：<input type="text" id="useName" placeholder="请输入用户名"><br>
            </label>
            <!-- &nbsp;保留空格。placeholder提示信息 -->
            密码：&nbsp;&nbsp;&nbsp;<input type="password" placeholder="请输入密码"><br>
            Emile:<input type="email"><br>
            <!-- 添加一个url框，且不可修改用disabled属性 -->
            url:<input type="url" value="http://qq.com" disabled><br>
            QQ:<input type="number"><br>
            <!-- 添加单选框，默认选男用checked，name属性用来分组 -->
            <input type="radio" name="gander" checked>男 &nbsp;&nbsp;
            <input type="radio" name="gander" >女 <br>
            <!-- 添加多选框 -->
            <input type="checkbox" name="action" value="eat" >吃
            <input type="checkbox" name="action" value="sleep">睡觉 
            <input type="checkbox" name="action" value="sport">运动 <br>
            <!-- 添加一个下拉选择框，设置默认选项用selected -->
            <select name="state">
                <option selected>中国</option>
                <option >美国</option>
                <option >英国</option>
                <option >德国</option>
            </select> <br>
            <!-- 添加上传文件域，multiple属性可以多选文件 -->
            file: &nbsp; <input type="file" multiple><br>
            <!-- 添加文本域 -->
            <textarea name="text" id="" cols="30" rows="10"></textarea> <br>
            <input type="submit">
        </fieldset> 
    </form>

HTML5基础

标签的形式

单标签和双标签

基本标签

常用标签

表格标签（不常用）

表单标签