开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 一、HTML基础标签 -> 正文阅读

[JavaScript知识库]一、HTML基础标签

前言

HTML基础标签

一、HTML文件结构

文档结构
html的所有标签为树形结构。
<html>标签
HTML<html> 元素表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。所有其他元素必须是此元素的后代。

<head>标签
HTML head 元素规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。

<body>标签
HTML body 元素表示文档的内容。document.body 属性提供了可以轻松访问文档的 body 元素的脚本。

<title>标签
HTML <title>元素定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。

<meta>
HTML <meta> 元素表示那些不能由其它 HTML 元相关（meta-related）元素（ <base>、 <link>, <script>、 <style> 或 <title>）之一表示的任何元数据信息。
常见属性：
charset：这个属性声明了文档的字符编码。如果使用了这个属性，其值必须是与 ASCII 大小写无关（ASCII case-insensitive）的”utf-8”。
name：name 和 content 属性可以一起使用，以名 - 值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。
比如 <meta name="keywords" content="lyy,编程"> keywords 是让别人在百度网页时搜索到我们网页的关键词，content填的就是关键词。
<meta name="description" content="lyy学编程"> decription 是我们网页展示给别人看的一些说明。

icon是我们网页的图标
icon
<link rel="icon" href="images/icon.png">

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="lyy,编程">
    <meta name="description" content="lyy学编程">
    <link rel="icon" href="../images/icon.png">
</head>

<body>
    <!--   
        这里的内容均为注释
        <h1>Hello world</h1>
        <p>
            段落。
        </p>
    -->
</body>

</html>

二、HTML文本标签

文本标签虽然很多，但大部分可看成是预定好样式的<div>和<span>。

<div>标签
<div>元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。
其他块级标签例如：<h1>,<p>, <pre>, <ul>, <ol>, <table>。

<span>标签
<span> 元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。<span> 与 <div> 元素很相似，但 <div> 是一个块元素而 <span> 则是行内元素
其他内联标签例如：<i>, <b>, <del>, <ins>, <td>, <a>。

<p>标签
HTML <p>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外， <p> 是块级元素。

<pre>标签
HTML <pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)

<h1> - <h6>标题标签
<br>回车标签
<hr>分界线标签
<i> 斜体标签
<b>粗体标签
<del>删除线标签
<ins>下滑线标签

三、HTML图片标签

HTML <img> 元素将一份图像嵌入文档。
默认为行内元素，即display: inline。

src属性 包含你想嵌入的图片的文件路径。

alt属性 当图片无法显示时展示的文本

height属性
图像的高度，在 HTML5 中的单位是 CSS 像素，在 HTML 4 中既可以是像素，也可以是百分比。可以只指定 width 和 height 中的一个值，浏览器会根据原始图像进行缩放。

width属性
图像的宽度，在 HTML5 中单位是 CSS 像素，在 HTML 4 中可以是像素也可以是百分比。

四、HTML音频与视频标签

<audio> 标签
HTML <audio> 元素用于在文档中嵌入音频内容。 <audio> 元素可以包含一个或多个音频资源，这些音频资源可以使用 src 属性或者<source> 元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。

使用src属性播放 controls表示可以控制视频或者音频
示例：

<audio controls src="../video/sound1.mp3">
        Your browser does not support the
        <code>audio</code> element.
 </audio>

<audio> 与多个 <source> 元素
这个例子包含了多个 <source> 元素。如果能够播放的话，浏览器就会试图去加载第一个 source 元素；如果不行，那就退而求其次去加载第二个。
示例

 <audio controls>
     <source src="../video/sound3.mp3" type="audio/mpeg" />
     <source src="../video/sound2.mp3" type="audio/mpeg" />
 </audio>

<video>标签
HTML <video> 元素用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容，但是 <audio> 元素可能在用户体验上更合适。
示例：

<video controls width="800">
     <source src="../video/video1.mp4" ,type="video/mp4">
     <source src="../video/video2.mp4" ,type="video/mp4">
     Sorry, your browser doesn't support embedded videos.
</video>

五、HTML超链接标签

HTML <a> 元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。<a> 中的内容应该指明链接的意图。如果存在 href 属性，当 <a> 元素聚焦时按下回车键就会激活它。

常用选项
点击链接打开新标签页面时加入属性：target=“_blank”

六、HTML表单标签

<form>标签
HTML <form> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息，action属性为传给后端接受的函数。
lable标签
用来绑定某一个元素，通过属性for来绑定元素的id
<input>标签
HTML <input>用来填写内容，常见类型有：

<input type="text">：创建基础的单行文本框。
<input type="number">：用于让用户输入一个数字。其包括内置验证以拒绝非数字输入。浏览器可能会选择提供步进箭头，让用户可以使用鼠标增加和减少输入的值，或者只需用指尖敲击即可。
<input type="email">：带有 “email” (电子邮箱) 类型标记的输入框元素 <input> 能够让用户输入或编辑一个电子邮箱地址，此外，如果指定了multiple属性，用户还可以输入多个电子邮箱地址。在表单提交前，输入框会自动验证输入值是否是一个或多个合法的电子邮箱地址 (非空值且符合电子邮箱地址格式). CSS 伪标签 :valid 和 :invalid 能够在校验后自动应用。
<input type="password">：<input> 元素里有一种叫做 “password” 的值，给我们一个方法让用户更加安全的输入密码。这个元素是作为一行纯文本编辑器控件呈现的，其中文本被遮蔽以致于无法读取，通常通过用诸如星号（“*”）或点（“?”）等符号替换每个字符来实现。这个符号会根据用户的浏览器和操作系统来具体显示哪个。
<input type="radio">：<input> 的 radio 类型元素默认渲染为小型圆圈图表，填充即为激活，类似于之前描述额复选框（checkbox）类型。单选按钮允许你选择单一的值来提交表单。
在radio中，同样的name绑定为同一组，内容用value属性更换
name: 名称
id: 唯一ID
maxlength：最大长度
minlength：最小长度
required：是否必填
placeholder：当表单控件为空时，控件中显示的内容

示例：

<body>
    <form action="">
        <label for="username">Username</label>
        <input type="text" maxlength="10" minlength="3" name="username" id="username">
        <br>
        <label for="age">Age</label>
        <input type="number" name="age" id="age">
        <br>
        <label for="email">Emial</label>
        <input type="email" name="email" id="email">
        <br>
        <label for="password">Password</label>
        <input type="password" required name="password" id="password">
        <br>
        <label for="cpp"></label>
        <input type="radio" name="lang" value="cpp" id="cpp">   
        <label for="java"></label>
        <input type="radio" name="lang" value="java" id="java">
        <label for="python"></label>
        <input type="radio" name="lang" value="python" id="python">
        <br>
        <button type="submit">submit</button>
    </form>
</body>

<textarea>标签
HTML <textarea> 元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。
<select>与<option>标签
HTML <select> 元素表示一个提供选项菜单的控件。
示例：

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

<button>标签
HTML <button> 元素表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。

七、HTML列表标签

<ul>与<li>标签
HTML <ul> 元素（或称 HTML 无序列表元素）表示一个内可含多个元素的无序列表或项目符号列表。
示例：

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

<ol>与<li>标签
HTML <ol> 元素表示有序列表，通常渲染为一个带编号的列表。

示例：

<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>

<dl>、<dt>与<dd>标签
HTML <dl> 元素（或 HTML 描述列表元素）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键 - 值对列表)。

示例：

<dl>
    <dt>Name</dt>
    <dd>Godzilla</dd>
    <dt>Born</dt>
    <dd>1952</dd>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
    <dt>Color</dt>
    <dd>Green</dd>
    <dd>Orange</dd>
</dl>

八、HTML表格标签

<table>标签
HTML的 table 元素表示表格数据 — 即通过二维数据表表示的信息。

<thead>标签
HTML的元素定义了一组定义表格的列头的行。

<tbody>标签
HTML的元素定义一组数据行。

<tr>标签
HTML 元素定义表格中的行。同一行可同时出现和元素。

<th>标签
HTML 元素定义表格内的表头单元格。

<td>标签
HTML 元素定义了一个包含数据的表格单元格。

<caption>标签
HTML <caption> 元素 (or HTML 表格标题元素) 展示一个表格的标题，它常常作为 <table> 的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被 CSS 样式化，所以，它同样可以出现在相对于表格的任意位置。
示例:

<body>
    <table>
        <caption>成绩单</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>数学</th>
                <th>英语</th>
                <th>语文</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>lyy</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>alcie</td>
                <td>98</td>
                <td>51</td>
                <td>16</td>
            </tr>
            <tr>
                <td>make</td>
                <td>100</td>
                <td>100</td>
                <td>65</td>
            </tr>
        </tbody>
    </table>
</body>

九、HTML语义标签

<header>
HTML <header> 元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。

<nav>
HTML<nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。

<section>
HTML <section>元素表示一个包含在 HTML 文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。

<figure>
HTML <figure> 元素代表一段独立的内容，经常与说明（caption）<figcaption> 配合使用，并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。

<figcaption>
HTML <figcaption> 元素是与其相关联的图片的说明/标题，用于描述其父节点 <figure> 元素里的其他数据。这意味着 <figcaption> 在<figure> 块里是第一个或最后一个。同时 HTML Figcaption 元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题。

<article>
HTML <article>元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

<aside>
HTML <aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）。

<footer>
HTML <footer> 元素表示最近一个章节内容或者根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。