html所有元素

发布时间 2023-11-27 18:22:31作者: a123456asd

前面写过不在记录

记录没有的

 <address> 元素 用作联系方式

<article>元素 用作 博客帖子标题元素可无限使用

<audio> 音频元素

<button> 这个就不介绍了
 
<code> 元素呈现一段计算机代码
 
 <caption>表格标题
 <colgroup>表格列组 暂时只知道可用于背景色
<col> 定义<colgroup>表格中的列 
<table>
              <caption>
                Superheros and sidekicks
              </caption>
              <colgroup>
                <col />
                <col span="2" class="batman" />
                <col span="2" class="flash" />
              </colgroup>
              <tr>
                <td> </td>
                <th scope="col">Batman</th>
                <th scope="col">Robin</th>
                <th scope="col">The Flash</th>
                <th scope="col">Kid Flash</th>
              </tr>
              <tr>
                <th scope="row">Skill</th>
                <td>Smarts</td>
                <td>Dex, acrobat</td>
                <td>Super speed</td>
                <td>Super speed</td>
              </tr>
            </table>
 
<data> 元素将一个指定内容和机器可读的翻译联系在一起
 
<datalist> 元素包含了一组 <option> 元素,这些元素表示其他表单控件可选值

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
<option value="Chocolate"></option>
<option value="Coconut"></option>
<option value="Mint"></option>
<option value="Strawberry"></option>
<option value="Vanilla"></option>
</datalist>

<del> 标签表示一些被从文档中删除的文字内容

 

<details> 元素可创建一个组件,仅在被切换成展开状态时,它才会显示内含的信息

<details>
          <summary>Details</summary>
          <!-- Something small enough to escape casual notice. -->
          <P>1</P>
          <P>2</P>
          <P>3</P>

        </details>
 
<dialog> 元素表示一个对话框或其他交互式组件
<div> 元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器
 
<dl> 元素 (或 HTML 描述列表元素)是一个包含术语定义以及描述的列表

<p>Cryptids of Cornwall:</p>

<dl>
<dt>Beast of Bodmin</dt>
<dd>A large feline inhabiting Bodmin Moor.</dd>

<dt>Morgawr</dt>
<dd>A sea serpent.</dd>

<dt>Owlman</dt>
<dd>A giant owl-like creature.</dd>
</dl>

 

 <fieldset> 元素用于对表单中的控制元素进行分组
      <form>
          <fieldset>
            <legend>Choose your favorite monster</legend>
       
            <input type="radio" id="kraken" name="monster" value="K" />
            <label for="kraken">Kraken</label><br />
       
            <input type="radio" id="sasquatch" name="monster" value="S" />
            <label for="sasquatch">Sasquatch</label><br />
       
            <input type="radio" id="mothman" name="monster" value="M" />
            <label for="mothman">Mothman</label>
          </fieldset>
        </form>
 
 <footer> 元素表示最近一个章节内容或者根节点(sectioning root)元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
 
 
<form> 元素表示文档中的一个区域,此区域包含交互控件,用于向 Web 服务器提交信息。

<form action="" method="get" class="form-example">
<div class="form-example">
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required />
</div>
<div class="form-example">
<label for="email">Enter your email: </label>
<input type="email" name="email" id="email" required />
</div>
<div class="form-example">
<input type="submit" value="Subscribe!" />
</div>
</form>

 

<iframe> 可以套入其他视频的嵌套

<label> 元素(标签)表示用户界面中某个元素的说明

<div class="preference">
<label for="cheese">Do you like cheese?</label>
<input type="checkbox" name="cheese" id="cheese" />
</div>

<div class="preference">
<label for="peas">Do you like peas?</label>
<input type="checkbox" name="peas" id="peas" />
</div>

 

 

<meter> 元素用来显示已知范围的标量值或者分数值,类似进度条

<label for="fuel">Fuel level:</label>

<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50">at 50/100</meter>

 

 

<nav>元素表示页面的一部分,其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单,目录和索引。
 
<object> 元素 可以用于pdf文档,文本,图片,也可以是个网站,个人认为可以是任何元素
 <object type="application/pdf" data="lc.html" width="250" height="200"></object>
 

<optgroup>下拉框分组

<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
<optgroup label="Theropods">
<option>Tyrannosaurus</option>
<option>Velociraptor</option>
<option>Deinonychus</option>
</optgroup>
<optgroup label="Sauropods">
<option>Diplodocus</option>
<option>Saltasaurus</option>
<option>Apatosaurus</option>
</optgroup>
</select>

 

<progress> 元素用来显示一项任务的完成进度

<label for="file">File progress:</label>

<progress id="file" max="100" value="70">70%</progress>

 

<script> 元素用于嵌入可执行代码或数据
 
<small>元素將使文本的字体变小一号
 
<span> 元素是短语内容的通用行内容器,并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图(通过使用类或者 Id 属性),
<span> 与 <div> 元素很相似,但 <div> 是一个 块元素 而 <span> 则是 行内元素 
 
<textarea> 元素表示一个多行纯文本编辑控件,当你希望用户输入一段相当长的、不限格式的文本,例如评论或反馈表单中的一段意见时,这很有用。

<label for="story">Tell us your story:</label>

<textarea id="story" name="story" rows="5" cols="33">
It was a dark and stormy night...
</textarea>

属性

autofocus 自动焦点输入框 inputmode  输入模式 小数 密码

draggable 可拖动

popover 可以弹出任何属性