body标签

  1. bgcolor 背景颜色 可以用1、颜色名，2、RGB，3、16进制
  2. text 字体颜色 可以用1、颜色名，2、RGB，3、16进制

标题标签

  1. (

    标题标签 h1~h6 依次从大到小)

水平线标签

  1. 水平线标签

    width 宽度 可以用 1、百分比 ，2、px

    • align 对齐方式 left 左对齐 right 右对齐 center 默认(居中对齐)
    • size 水平线粗细 color 线的颜色

如：

<body bgcolor="pink" text="blue">
    <h1>hello</h1>
    <h2>hello</h2>
    <hr width="50%"/>
    <hr width="500px" align="left" size="20" color="yellow"/>
</body>

段落标签

  • (

    )段落会自动换行

​ 常用属性：align 对齐方式 left 左对齐(默认) right 右对齐 center 居中对齐 justify 两端对齐

换行标签


例：

<body>

    <p>今天天气好晴朗</p>
    <p>今天天气好晴朗</p>
    <p>
    今天天气好晴朗<br/>
    今天天气好晴朗
    </p>
</body>

注：段落标签自动换行之后空隙较大，换行标签则较小

列表

无序列表：

​ 常用属性：type 列表的图标 1、square 实心方块 2、circle 空心圆 3、disc 实心圆(默认)

格式：

<body>
    <h2>无序列表</h2>
 <ul>
     <li>张三</li>
     <li>李四</li>
     <li>王五</li>
 </ul>
 <ul type="square">
     <li>张三</li>
     <li>李四</li>
     <li>王五</li>
 </ul>
 <ul type="circle">
     <li>张三</li>
     <li>李四</li>
     <li>王五</li>
 </ul>
 <ul type="disc">
     <li>张三</li>
     <li>李四</li>
     <li>王五</li>
 </ul>
</body>

有序列表：

​ 常用属性：type 列表的图标 1、1 数字序号(默认)，2、 a 小写字母序号 3、 A 大写字母序号 4、 i 小写罗马字母序号 5、 I 大写罗马序号

格式：

<body>
        <h2>有序列表</h2>
 <ol>
     <li>张三</li>
     <li>李四</li>
     <li>王五</li>
 </ol>
 <ol type="1">
     <li>张三</li>
     <li>李四</li>
     <li>王五</li>
 </ol>
 <ol type="a">
     <li>张三</li>
     <li>李四</li>
     <li>王五</li>
 </ol>
 <ol type="A">
     <li>张三</li>
     <li>李四</li>
     <li>王五</li>
 </ol>
     <ol type="i">
     <li>张三</li>
     <li>李四</li>
     <li>王五</li>
 </ol>
     <ol type="I">
     <li>张三</li>
     <li>李四</li>
     <li>王五</li>
 </ol>
</body>
  • 出去前面序号的css样式格式：list-style:none;

自定义列表

  • 标签组成：dl 表示自定义列表的整体，用于包裹dt/dd标签

​ dt 表示自定义列表的主题

​ dd 表示自定义列表的针对主题的每一项内容

示例：
<body>
    <dl>
        <dt>水果</dt>
        <dd>苹果</dd>
        <dd>香蕉</dd>
        <dd>橘子</dd>
    </dl>
</body>

div标签和span标签

  • div：层 ，块级元素，标签会自动换行，常用于布局，(内容大小默认占用一整行)

​ 常用属性：align(同上) div元素中内容对齐方式

如：

<body>
    <div align="center">
        第一个html
    </div>
    你好
    <div>
        hello<br/>
        第一个html
    </div>
</body>
  • span：块，行内元素，标签不会换行，(内容是多少就会占用多少空间)
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>家宝</title>
    <style type="text/css">
       span{
           background-color: red;
       }
    </style>
</head>
<body>
<span>
       hello,第一个html
    </span>
</body>
</html>

格式化标签

  • font标签：设置相关属性

​ 常用属性：1、color 字体颜色（颜色名，RGB，16进制）

​ 2、size 字体大小 取值1~7

​ 3、face 字体风格

  • pre标签：定义格式化的文本，文本呈现等宽字体，文本中的内容原样输出(如：一般文本内容中打了很多个空格符，但是结果只能看到一个，但是加上pre标签后，就可以看到原本的内容)

    如：

<body>
  <pre>
    <font color="red" size="3" face="楷体">
    你好！    html!
    </font>
  </pre>
</body>

文本标签

​ 1、粗体<b></b>或<strong></strong>

​ 2、斜体<i></i> 或<em></em>

​ 3、下划线<u></u>或<ins></ins>

​ 4、中划线<s></s>或<del></del>

  • 上四个，后者突出重要性的强调语境

​ 5、下标<sub></sub>

​ 6、上标<sup></sup>

video标签(插入视频)

常用属性：

属性 属性值 描述
src URL 设置要播放视频的URL(不可省略)
autoplay autoplay 设置网页中视频加载就绪后自动播放(谷歌浏览器需配合muted实现静音播放)
controls controls 添加浏览器为视频的默认控件
loop loop 设置媒介文件循环播放
muted muted 设置是否为静音
preload auto、meta、none 设置浏览器是否预加载视频
1、auto：表示让浏览器决定怎样做(默认值)
2、meta：当页面加载后只载入元数据
3、none：当页面加载后不载入视频
如果引用了autoplay属性，则忽略该属性
poster URL 指定视频加载时要显示的图像(而不显示视频的第一帧)，接受所需图像文件的URL。
如果设置了autoplay属性，则忽略该属性
width height 像素或百分比 设置视频的宽高
实例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频练习</title>
</head>
<body>
<video src="https://1251316161.vod2.myqcloud.com/007a649dvodcq1251316161/52dc6d665285890805112169650/hrTLwNi1CPAA.mp4"    poster="路飞.png" controls preload="metadata">
    您的浏览器不支持video元素
</video>
</body>
</html>

audio标签(插入音频)

属性 属性值 描述
src URL 设置要播放音频的地址(不可省略)
autoplay autoplay 设置网页中音频加载就绪后自动播放(部分浏览器不支持)
controls controls 添加浏览器为音频设置的默认控件
loop loop 设置媒介文件循环播放
preload auto、meta、none 设置浏览器是否预加载音频
1、auto：表示让浏览器决定怎样做(默认值)
2、meta：表示仅加载音频的元数据
3、none：表示不加载任何音频
如果引用了autoplay属性，则忽略该属性
实例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音频练习</title>
</head>
<body>
<audio src="月亮之上.mp3" poster="路飞.png" controls preload="metadata">您的浏览器不支持audio元素</audio>
</body>
</html>

备用文本source

  • source元素可以链接不同的媒体文件，如视频和音频文件等。
  • video或者audio元素中可以指定多个source元素，浏览器按<source>标签的顺序检测指定的视频/音频是否能够播放
属性 属性值 描述
scr URL 设置要播放的视频/音频的地址(不可省略)
type video/webm、 video/ogg、
audio/ogg、audio/mpeg等		 用于指定文件的类型，帮助浏览器决定是否能播放该视频/音频
media media query 用于为视频来源指定CSS媒体查询，从而可以为具有不同品目尺寸的设备指定不同的(如更小的)视频
实例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音频/视频的备用方案</title>
</head>
<body>
    <video width="369px" height="208px" controls>
        <source src="路飞.mp4" type="video/mp4">
        <source src="路飞.webm" type="video/webm">
        此浏览器不支持video元素
    </video>
    <audio width="369px" height="208px" controls>
        <source src="路飞.ogg" type="audio/ogg">
        <source src="路飞.mpeg" type="audio/mpeg">
        此浏览器不支持audio元素
    </audio>
</body>
</html>

定义媒介分组和标题(figure，figcaption)

  • 在HTML5中，figure元素用于定义独立的流内容(图像、图表、照片、代码等)，一般指一个单独的单元。figure元素的内容应该与主内容相关，但如果被删除，也不会对文档流产生影响。figcaption元素用于为figure元素组添加标题，一个figure元素内最多允许使用一个figcaption元素，该元素应该放在figure元素的第一个或者最后一个子元素的位置。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>figure和figcaption用法</title>
</head>
<body>
<p>被称作“第四代体育馆”的“鸟巢”国家体育场是 2008年北京奥运会的标志性建筑，它位于北京北四环边，包含在奥林匹克国家森林公园之中。占地面积 20.4万平方米，总建筑面积 25.8万平方米，拥有 9.1万个固定座位，内设餐厅、运动员休息室、更衣室等。2008年奥运会期间，承担开幕式、闭幕式、田径比赛、男子足球决赛等赛事活动。</p>

<figure>

    　      <figcaption>北京鸟巢</figcaption>

    　      <p>拍摄者：传智播客内容与资源组，拍摄时间：2020 年 09 月</p>

    　      <img src="路飞.png" alt="">

    　</figure>
</body>
</html>

a标签(超链接)

  • 定义超链接，用于从一个页面链接到另一个页面
  • a标签属于行内元素，不会自动换行

​ 常用属性：1、href 必须属性 (如果未设置该属性，则a标签与不同文本没有区别)

​ 2、target 窗口打开方式

​ 常用方式： _self 当前窗口打开(默认)

​ _blank 新开空白窗口打开

如：当前窗口打开链接
<body>
    <a href="https://www.sioe.cn/yingyong/yanse-rgb-16/">RGB调色
    </a>
</body>
如：新开窗口打开链接
<body>
    <a href="https://www.sioe.cn/yingyong/yanse-rgb-16/" target="_blank">RGB调色</a>
</body>
  • 作为锚点： 1、a标签的name属性(已弃用)

​ 2、其他标签的id属性

例：

<body>
    <h2 id="bt1">
        标题1
    </h2>
    一段屏幕装不下的文字
    </br>
    <a name="2000">2000年</a>
    一段文本
    <a href="#">回到顶部</a>
    <a href="#bt1">跳转到标题1</a>
    <a href="#2000">跳转到2000年</a>
</body>

内联框架iframe

  • iframe元素可以用来创建包含在另一个文档中的浮动窗口，成为内联框架或内嵌窗口。类似画中画的感觉
实例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<iframe src="https://www.yqter.top" frameborder="0" width="1000" height="500"></iframe>
</body>
</html>

img标签(图片)

​ 1、必须属性：src 被引入图片的地址

2、常用属性：title 当鼠标悬停在图片上时显示的文字

​ alt 当图片加载失败时显示的文本(地址错误)

​ width 设置图片的宽度(如果不设置高度，则图片默认等距扩大或缩小)

​ height 设置图片的高度

​ align 规定如何根据文本来排列图像的位置(左，右，中)

​ border 设置图片的边框(属性值表示边框的粗细)

  • 点击图片上的文字能跳转，则只需要套如a标签中，如：
实例：
<body>
    <!-- 本地图片-->
<img src="img/img1.jfif"></img>
<!-- 网络资源-->
<img src="https://www.baidu.com/img/pc_629ee8886a9c20e7f3cb1d2889c3e45d.gif" alt="图片显示错误"></img>
</body>

设置图像映射

  • 图像映射是一个对链接指示做出反应的图形，单击该图像的已定义区域，可转到与该区域相链接的目标。图像映射也成为热区链接，就是在图像上设置一个或多个热点区域(热区)，然后在每个热区上都可以设置超链接。
  • 图像映射的实现需要使用map元素和area元素，<map>标记用来创建图像映射，与img元素关联起来。area元素包含在map元素之间，用于创建图像映射中一个个的热区，并规定热区的形状和位置。

area属性：

属性 属性值 描述
shape rect/rectangle、circ/circle、
poly/polygon		 规定热区状态：
1、rect或rectangle表示热区形状是矩形
2、circ或circle表示热区形状是圆型
3、poly或polygon表示热区形状是多边形
coords coordinates 规定热区的坐标(“0,0”是图像左上角的坐标，x轴向右增加，y轴向下增加)，坐标的数字及其含义取决于shape属性中规定的热区形状
1、矩形：shape=“rectangle” coords=“x1，y1，x2，y2”。x1和y1是矩形左上角的x，y坐标，x2和y2是矩形右下角的下x，y坐标；
2、圆形：shape=“circle” coords=“x，y，r”。x和y定义圆心坐标，r是以像素为单位的圆形半径；
3、多边形：shape=“polygon” coords=“x1，y1，x2，y2，x3，y3...”。每一对“x，y”坐标都定义了多边形的一个顶点
href URL 规定热区的链接目标URL
type mime_type 规定目标URL的MIME类型
target _ self、_ blank、
_ parent、_ top、(浏览器窗口名称)		 规定在何处打开目标URL，仅在href属性存在时使用
media media query 规定目标URL是为何中媒介/设备优化的，默认值为all
herflang Language_code 规定目标URL的基准语言
rel alternate、author、bookmark、external、help、license、next、nofollow、noreferrer、prefetch、prev、search、sidebar、tag 规定当前文档与目标URL之间的关系
实例：
  • <map>标记用于定义客户端图像映射，name属性在<map>标记中是必须的，该属性和<img>标记的usemap属性关联，创建图像和图像映射之间的关系。
  • map元素包含若干area元素，定义图像映射中的可单击区域(热区)
  • 注：有些浏览器可能会支持<img>的usemap属性引用<map>的id属性，所以可以同时向<map>添加name和id属性，并且为两者设置相同的值
实例：

table标签(表格)

<table></table>标签定义HTML表格

标签定义表格内的表头单元格。th元素内部的文本通常会呈现居中的粗体文本 标签定义表格的行，tr元素每一行可以包含一个或多个td元素或th元素 标签定义HTML表格中的标准单元格。td元素内的文本通常为左对齐的普通文本 <caption></caption>为表格加标题，自带居中效果
  • 表格默认居左，表格内元素默认居中
  1. table常用属性：border 表格的边框

​ width 表格的宽度

​ height 表格的高度

​ align 表格的对齐方式 (left，right，center)

  1. tr常用属性： align 每行文本内容的对齐方式 (left，right，center)

​ valign 每行文本内容的垂直方向对齐方式(top，bottom，middle(默认))

​ bgcolor 设置行的背景颜色

  1. 合并单元格： <td>的colspan和rowspan分别规定单元格横跨的列数和行数

​ rowspan 纵向合并

​ colspan 横向合并

  • 当单元格内没有任何内容(空白)的时候，单元格的边框会消失，只要在空白单元格中输入一个全角空格或"&nbsp；"就可以了
  • nowrap属性是让表格中的文字不换行
<td mowrap>sadaads</td>
纵向合并：
<!DOCTYPE html>
<html lang="en" xmlns:src>
<head>
    <meta charset="UTF-8">
    <title>家宝</title>
</head>
<body bgcolor="#ffc0cb">
    <table align="center" border="1" width="50%" >
        <tr valign="top">
            <th>班级</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr valign="bottom">
            <th rowspan="2">1班</th>
            <th>张三</th>
            <th>男</th>
            <th>16</th>
        </tr>
        <tr valign="middle">

            <th>李四</th>
            <th>男</th>
            <th>17</th>
        </tr>
        <tr>
            <th>1班</th>
            <th>王五</th>
            <th>男</th>
            <th>18</th>
        </tr>
    </table>
</body>
</html>
横向合并
<!DOCTYPE html>
<html lang="en" xmlns:src>
<head>
    <meta charset="UTF-8">
    <title>家宝</title>
</head>
<body bgcolor="#ffc0cb">
    <table align="center" border="1" width="50%" >
        <tr valign="top">
            <th colspan="2">班级+姓名</th>

            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr valign="bottom">
            <th>1班</th>
            <th>张三</th>
            <th>男</th>
            <th>16</th>
        </tr>
        <tr valign="middle">

            <th>李四</th>
            <th>男</th>
            <th>17</th>
        </tr>
        <tr>
            <th>1班</th>
            <th>王五</th>
            <th>男</th>
            <th>18</th>
        </tr>
    </table>
</body>
</html>

form标签(表单)

表单用于向服务器传输数据，form属于块级元素，其前后会产生拆行

表单提交时，必须设置表单元素的name属性值，否则无法获取数据

  1. form常用属性： action 提交表单的地址

​ method 提交方式

​ GET提交 POST提交（表单默认是get请求）

​ target 提交数据时窗口打开方式 _self 当前窗口 _blank 新开空白窗口

GET请求与POST请求的区别： (post请求需要服务器的支持)

  1. get请求时参数会跟在浏览器地址栏的后面，而post请求不会(post请求会将数据存放在请求体中)

  2. get请求相对于post请求不那么安全

  3. get请求传递的数据长度是有限的，而post请求基本没有限制（长度与服务器相关）

  4. get请求比post请求块（2倍左右）

  5. get请求有缓存（会将数据存放在浏览器中，即本地磁盘中），而post请求无缓存

例：
<!DOCTYPE html>
<html lang="en" xmlns:src>
<head>
    <meta charset="UTF-8">
    <title>家宝</title>
</head>
<body bgcolor="#ffc0cb">
    <form action="https://www.baidu.com" method="get" target="_blank">
        姓名 <input type="text" name="uname">
        <button>提交</button>
    </form>
</body>
</html>

input标签

用于搜集用户信息

      1. input常用属性：（行内元素，不会自动换行）

​ type 元素类型

​ （1）text 文本框 （2） password 密码框 （3） radio 单选框 （4） checkbox 复选框 （5）fine 文件域

​ （6）date 日期域 （7）color 颜色域 （8）number 数字域 （9）range 范围域 （10）search 搜索域

​ （11）hidden 隐藏域 (提交的文件不想让用户看不到)

​ value 元素的值

​ readonly 只能进行读取，不能进行更改

​ maxlength 最多输入的长度

​ disabled 禁用标签

​ autofocus 自动获得焦点(指加载网页后，自动将光标移动到此文本框中)

  • checked 初始选定值，默认选中；格式：checked="checked"
<input type="checkbox" name="love" checked="checked">羽毛球<!--默认勾选羽毛球-->
            <input type="checkbox" name="love">篮球
            <input type="checkbox" name="love">乒乓球
            <input type="checkbox" name="love">排球
  • multiple 多文件选择
<input type="file" multiple>

按钮

  1. 普通按钮 button 2. 提交按钮 submit 3. 重置按钮 reset(重置当前页面修改的文本) 4. 图片按钮 image 5. 日期框 date

**注： **1. 单选框需要通过name属性设置为一组，复选框需要通过name属性设置为一组

​ 2. 如果上传文件的表单时，则表单需要设置一个属性 enctype="multipart/form-data"，提交方式为post请求

​ 3. 没有name属性是无法提交数据的！！！

  • 文本框中的内容聚焦后不消失的方法：
<input type="text" name="username" placeholder="账号">

  • 文本框中的内容聚焦消失又恢复方法：

    value="点击添入标题"onfocus="if (value =='点击添入标题'){value =''}"onblur="if (value ==''){value='点击添入标题'}"

    placeholder属性：格式：placeholder:"密码"

<input name="textfield"type="text"value="点击添入标题"onfocus="if (value =='点击添入标题'){value =''}"onblur="if (value ==''){value='点击添入标题'}"/>

<input type="text" placeholder:"请输入用户名">
例：
<!DOCTYPE html>
<html lang="en" xmlns:src>
<head>
    <meta charset="UTF-8">
    <title>家宝</title>
</head>
<body bgcolor="#ffc0cb">
<form action="https://www.baidu.com">
    文本框 <input type="text" value="lujiabao" maxlength="10" name="uname"><br>
    文本框 <input type="text" value="lujiabao" readonly="readonly"><br>
    密码框 <input type="password"><br>
    单选框 <input type="radio" value="man" name="sex">男 <input type="radio" value="woman" name="sex">女 <br>
    复选框 <input type="checkbox" value="壹" name="1">1 <input type="checkbox" value="贰" name="1">贰 <input type="checkbox" value="叁" name="1">叁
    <br>
    文件域 <input type="fine"><br>
    日期域 <input type="date" name="">
    颜色域 <input type="color" name="" value="#FFFFFF">
    数字域 <input type="number" name="" value="5" max="10" min="-10">
    范围域 <input type="range" name="" value="6" max="10" min="-10">
    搜索域 <input type="search" name="">
    隐藏域 <input type="hidden" value="admin"><br>
    普通按钮 <input type="button" value="普通按钮"><br>
    提交按钮 <input type="submit" value="提交按钮" disabled="disabled"><br>
    重置按钮 <input type="reset" value="重置按钮">
    <hr>
    图片按钮 <input type="image" src="https://www.baidu.com/img/PC_69793e3487cd39e10b69d7358be8ca54.gif" alt="图片加载失败！">
    <hr>
    日期框 <input type="date" >
</form>
</body>
</html>

textarea标签和label标签

​ 定义可输入多行文本的控件

    1. textarea常用属性：   cols    文本的可见宽度
                          rows    文本的可见行数
                          wrap=virtual:    设置文本框内文字提交表单后是否换行，设置值有hard和soft，hard会在输入的字超过                                            cols宽度自动换行，soft是不换行(如果文本框没有设置warp属性，默认不会换行)
  1. label常用属性： for 当for属性与元素的id值一致时，点击label标签会自动为元素聚焦
<!DOCTYPE html>
<html lang="en" xmlns:src>
<head>
    <meta charset="UTF-8">
    <title>家宝</title>
</head>
<body bgcolor="#ffc0cb">
     姓名 <input type="text" name="uname"><br>
     简介 <textarea name="uname" cols="30" rows="10"></textarea>
     <!-- label方法1：使用for属性配合id使用-->
     <label for="1">简介</label><textarea name="uname" id="1" cols="30" rows="10"></textarea>
     <!-- label方法2：将需要该属性的表单写入lable标签中，删除for属性即可-->
    <lable><input type="radio">男</lable>
</body>
</html>
  • 如果不想让用户在文本框内输入数据，可以在input或textarea标签中加上readonly属性，如：
<textarea name="" id="" cols="30" rows="10" readonly>asdasd</textarea>
<input type="text" value="adasdasd" readonly>

datalist标签

button标签

1. button常用属性：  button  普通按钮    submit  提交按钮(默认)   reset  重置按钮
  • 双标签，标签之间可以添加内容（文本或者标签等），而input就不能，谷歌浏览器默认是提交属性(submit)
<!DOCTYPE html>
<html lang="en" xmlns:src>
<head>
    <meta charset="UTF-8">
    <title>家宝</title>
</head>
<body bgcolor="#ffc0cb">
<form action="https://www.baidu.com">
    <input type="text" name="uname">
    <button type="button">普通按钮</button>
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
</form>
</body>
</html>

下拉框

​ select 下拉框标签

​ option 下拉框的选项标签

​ 1. select常用属性： multiple 设置下拉框可以多选

​ size 设置下拉框可见选项数

​ disabled 禁用元素

​ multiple 按住Ctrl或shift键可进行多选(当列表中添加了该属性并且size="1"时，下拉式列表就会变成滚动条列表)

​ 2. option常用属性： selected 默认选中项

​ disabled 禁用某个选项

​ value 提交给服务器的选项值

​ 1. 如果设置了value属性值，则提交的是value值

​ 2. 如果未设置value属性值，则提交option双标签中的文本值

<!DOCTYPE html>
<html lang="en" xmlns:src>
<head>
    <meta charset="UTF-8">
    <title>家宝</title>
</head>
<body bgcolor="#ffc0cb">
<form action="https://www.baidu.com">
    <!-- 禁用下拉框   -->
    1：<select name="city" disabled="disabled">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="gz">广州</option>
    </select>
    <!-- 下拉框可多选，选项框可见选项个数   -->
    2：<select name="city" multiple="multiple" size="2">
    <option value="bj" >北京</option>
    <option value="sh">上海</option>
    <option value="gz">广州</option>
</select>
    <!-- 禁用某个选项   -->
    3：<select name="city">
    <option value="bj" >北京</option>
    <option value="sh" disabled="disabled">上海</option>
    <option value="gz">广州</option>
</select>
    <!-- 可多选的滚动条列表   -->
    4：<select name="city" multiple size="1">
    <option value="苹果">苹果</option>
    <option value="苹果">苹果</option>
    <option value="苹果">苹果</option>
</select>
</form>
</body>
</html>

表单分组

<fieldset>
    <legend>分组标题</legend>
    内容
</fieldset>
例：![](C:\Users\鲁家宝\Pictures\Camera Roll\屏幕截图 2021-11-05 162305.jpg)

常用字符实体

  1. 小于号：&lt；
  2. 大于号：&gt；
  3. 空格： &nbsp；
  4. 版权： &copy；

标签的分类：

  1. 块级元素：自动换行且可以设置宽高和边距

  2. 行内元素：不会自动换行，和其他元素都在一行，除非文本超过该行的大小，不可以设置宽和高

  3. 行内块状元素：不会自动换行， 和其他元素都在一行，但可以设置宽高和边距

好玩的标签

  1. marquee 字体滚动标签