HTML标签

Altenaco
255 阅读11分钟

目录

HTML标签注释与特殊字符1 基础标签1.1 h1~h6标签1.2 p标签1.3 br标签1.4 hr标签2 格式化标签2.1 del标签2.2 em标签2.3 ins标签2.4 strong标签3 样式和语义标签3.1 div标签3.2 span标签4 图像标签4.1 img标签5 链接标签5.1 a标签6 列表类标签6.1 无序列表（ul、li标签）6.2 有序列表6.3 自定义列表7 表格标签7.1 第一种table8 表单与输入8.1 form表单8,2 input标签8.3 textarea标签8.4 button标签8.5 select标签8.6 option标签8.7 label标签

HTML标签

注释与特殊字符

1654770943920.png

1 基础标签

1.1 h1~h6标签

定义与用法：

-

标签可定义标题

是最大的标题；
是最小的标题

h标签要慎重使用，不能用此标签来改变同行中其他文字的大小

可用的属性：

  • align：水平对齐方式

属性值：left、center、right、justify

不推荐使用，用CSS样式代替

案例：


<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

1654761735984.png

1.2 p标签

定义与使用：

  • p标签时段落标签
  • p 元素会自动在其前后创建一些空白，并且独占一行

案例：


<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
<p>段落元素由 p 标签定义。</p>

1654762023133.png

1.3 br标签

定义与用法：

  • br标签可以插入一个换行符。
  • 它是一个空标签，并且是单标签，没有结束标签。
  • br标签时开始新的一行，当遇到p标签时，通常会在相邻的段落之间插入一些垂直的间距。

案例：


<p>
    To break<br>lines<br>in a<br>
    <p>paragraph,</p>
    <br>use the br tag.
 </p>

1654762428366.png

1.4 hr标签

定义与使用：

hr标签是在HTML页面中插入一条水平线

水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。

属性：

  • align：center、left、right hr的对齐方式
  • noshade：noshade hr的颜色会呈现为纯色
  • size：pixels hr元素的高度（厚度）
  • width：pixels hr元素的宽度

案例：


<p>hr 标签定义水平线：</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>

1654762959665.png

2 格式化标签

2.1 del标签

定义与使用：

del表示文档中已经删除的文本

属性：

  • city：URL 指向另一个文档的URL，解释文档被删除的原因
  • datetime 说明文档被删除的日期

案例：


<p><del>大多数浏览器会改写为删除文本和下划线文本。</del></p>
<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>

1654763526250.png

2.2 em标签

定义与用法：

使用em标签是告诉浏览器此内容为强调文本，并且为斜体。

案例：


<em>我是斜体</em>

1654763765776.png

2.3 ins标签

定义与使用：

ins标签表示已经插入文档中的部分，用下划线标注。

属性：

  • city：URL 指向另一个文档的URL，解释文档被删除的原因
  • datetime 说明文档被删除的日期

案例：


<p>大多数浏览器会改写为删除文本和下划线文本。</p>
<p><ins>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</ins></p>

1654763999251.png

2.4 strong标签

定义与使用：

  • 与em标签一样，也用来强调文本，但是strong标签强调的更强烈，并且用粗体显示。

案例：


<strong>我是strong标签</strong>

1654764234087.png

3 样式和语义标签

3.1 div标签

定义与用法：

  • div标签可以把文档分成多个区或节
  • 使整个页面分割成多个独立的、不同部分
  • div标签是一个块级元素，它的内容会重新开始一行

属性：

  • align：left、right、center、justify

    不推荐使用

案例：


<div class="news">some text. some text. some text...</div>
<div class="news">some text. some text. some text...</div>

1654765753652.png

3.2 span标签

定义与用法：

  • span标签用来组合HTMl中的行内元素。
  • 并且在所有的浏览器中都支持。

案例：


<p><span>some text.</span>some other text.</p>
<span>我是第一个span</span>
<span>我是第二个span</span>

1654766594490.png

4 图像标签

4.1 img标签

定义与用法：

img标签是向网页中插入一张图片。

属性：

必需属性：

  • alt：text 当图片加载错误时显示的文本
  • src： URL 图片的路径（来源）

URL路径：

  • 绝对路径：本地的文件路径；网上的文件路径

  • 相对路径：./ 在同一个文件夹中找

    ../ 向上一级文件夹中找

    / 向下一级文件夹中找

​ 可选属性：

  • title：text 当鼠标悬停在图片上时显示的文字
  • width：px % 图片的宽度
  • height：px % 图片的高度
  • border：px 图片的边框

注意：width和height这两种属性，调整一种，整个图片就会等比缩放

5 链接标签

5.1 a标签

定义与用法：

  • a标签用来吗定义超链接，用来从一张页面跳转到另一张页面
  • a标签中最重要的是href属性，它是指向跳转的目标地址

链接默认的外观：

1654768360995.png 属性：

  • href：URL 表示当前a标签指向要跳转的页面地址

  • title：鼠标悬停时显示的文字

  • target：点击当前a标签时在哪个窗口打开所链接的页面

    • _self 该属性值是默认的，指在当前窗口打开链接的页面
    • _blank 在新的窗口打开链接的页面
    • _parent 打开加载的上一个页面中打开
    • _top 在整个窗口打开链接的页面
    • framename： 在指定的窗口中打开所链接的页面

  • #： 会阻止页面跳转，但是会刷新网页

6 列表类标签

6.1 无序列表（ul、li标签）

定义与用法：

ul标签定义无序列表，与li配套使用

属性：

  • type：

    • disc 默认值。实心圆
    • circle 空心圆
    • square 实心方框

    不推荐使用，使用CSS样式（嵌入式样式）

  • CSS样式：list-style-square：disc、circle、square

案例：


<ul>
    <li>我是第一个li</li>
    <li>我是第二个li</li>
    <li>我是第三个li</li>
</ul>

1654772128670.png

6.2 有序列表

ol标签 定义与用法：

ol标签用来定义有序列表

属性：

  • reversed：reversed 规定列表的顺序为降序
  • start：number 规定有序列表的起始值
  • type：1、a、A、i、I 规定在列表中使用的标记类型

li标签 定义与用法：

li标签用来定义列表的项目

li标签与ul标签和ul标签搭配使用

属性：

  • type：A、a、I、i、1

    • disc 默认值。实心圆
    • circle 空心圆
    • square 实心方框

  • value：number 规定项目列表中的数字，并且接下来的列表项目会从该数字开始进行排序。

案例：


<ol>
    <li value="100">我是第一个li</li>
    <li>我是第二个li</li>
    <li>我是第三个li</li>
</ol>

1654773795077.png

6.3 自定义列表

定义与用法：

  • dl标签定义标签列表
  • dt标签定义列表中的项目
  • dd标签用来描述列表中的项目

案例：


<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置</dd>
</dl>

1654774574966.png

7 表格标签

定义与用法：

  • table 定义一个表格

  • caption 定义表格标题，且必须紧跟在table标签之后

  • tr 定义表格中的行

  • th 定义表格中的表头单元格，主要是包含表格的头部信息。并且文本常会显示粗体

  • td 定义表格中的标准单元格，主要就是包含表格中的数据信息。通常文本会在单元格左侧显示

  • thread 定义表格中的标头内容

  • tbody 定义表格中的主题内容

  • tfoot 定义表格中的页脚内容

    注意：thread、tbody、tfoot标签在一起使用时，出现的顺序是：thread、tfoot、tbody，且必须在table中使用

table标签属性：

  • align：left、center、right 水平对齐方式

  • valign：top、middle、bottom、baseline 单元格内容的垂直排列方式

    注意：table标签、caption标签没有盖属性

  • border：单位：px % 表示表格边框的宽度

  • cellpadding：单位：px % 表示框线边缘与表格中内容之间的距离

  • cellspacing：单位：px % 表示单元格与单元格之间的距离

  • width：单位：px % 表示表格的宽度

  • height：单位：px % 表示单元格的高度

    注意：只有th、td标签有该属性

  • colspan：number 单元格的列合并

    注意：只有th、td标签有该属性

  • rowspan：number 单元格的行合并

    注意：只有th、td标签有该属性

案例：


<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

1654777120409.png


<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

1654777202746.png

8 表单与输入

8.1 form表单

定义与用法：

主要就是为用户提供输入信息创建的表单。

它是块级元素，会自动换行

作用：

收集用户信息，向后台发送数据。

属性：

  • action：URL 表示向后台发送表单时，向何处发送。

  • method：get方法 post方法 表示向后台发送表单时是如何发送的。

  • name：value 规定表单的名称，name属性是提供了在脚本中引用该表单的方法。

  • target：表示在何处打开action中的URL地址。

    • _self 该属性值是默认的，指在当前窗口打开链接的页面
    • _blank 在新的窗口打开链接的页面
    • _parent 打开加载的上一个页面中打开
    • _top 在整个窗口打开链接的页面
    • framename： 在指定的窗口中打开所链接的页面

8,2 input标签

定义与用法：

input标签是用来收集用户信息的。可以根据不同的type属性，输入的字段类型不同。默认的是text，输入文本。

属性：

  • type：

    • text 定义哦单行输入的字段，用户输入文本
    • password 定义密码字段，且输入的字符被掩码
    • button 定义可以点击的按钮
    • reset 定义重置按钮。重置按钮会重置输入表单中的所有内容
    • submit 定义提交按钮。提交按钮会把表单中的数据发送给服务器
    • radio 定义单选按钮
    • checkbox 定义多选框
    • image 定义图片形式的按钮
    • file 定义输入字段和“浏览”按钮，提供文件的上传

  • align：left、right、top、middle、bottom 表示输入内容的对齐方式

  • alt：text 当图像加载失败时显示的文本

  • autofocus：autofocus 表示页面在加载是自动获得焦点

  • checked：checked 表示input元素加载时，自动选择该内容

  • disabled：disabled 表示input元素加载时禁止使用次元素

  • readonly：readonly 表示输入的内容只能读取

  • required：required 表示输入的北荣是必需的，不能为空

  • name：value 规定input的名称，name属性是用于提交到服务器时的表单标识，只有设置name属性值，才能在提交表单时传递值

8.3 textarea标签

定义与用法：

textarea标签表示定义多行的文本输入控件。

  • 可以通过cols和rows来调整textarea的尺寸

属性：

  • autofocus：autofocus 表示页面在加载是自动获得焦点

  • cols：设置文本区的宽度

  • rows：设置文本区的行数

  • disabled：disabled 表示textarea元素加载时禁止使用次元素

  • name：value 规定文本区的名称，name属性用于在JavaScript中对元素进行引用

  • readonly：readonly 表示输入的内容只能读取

  • required：required 表示输入的北荣是必需的，不能为空

  • wrap：设置在提交表单时，文本区中的内容如何换行

    • soft：当表单提交时，textarea中的文本不换行，该属性值为默认值

    • hard：当提交表单时，textarea中的文本换行。

      注意：使用hard属性值时，必须规定cols属性

8.4 button标签

定义与用法：

button标签表示定义一个按钮。

  • 按钮内部可以放置文本、图像

属性：

  • autofocus：autofocus 表示页面在加载是自动获得焦点

  • disabled：disabled 表示button元素加载时禁止使用次元素

  • name：value 规定文本区的名称，name属性用于在JavaScript中对元素进行引用

  • type：

    • button 定义可以点击的按钮
    • reset 定义重置按钮。重置按钮会重置输入表单中的所有内容
    • submit 定义提交按钮。提交按钮会把表单中的数据发送给服务器

8.5 select标签

定义与用法：

select标签用来创建单选或者多选菜单

  • select标签中的option标签用于定义列表中的可用选项

属性：

  • autofocus：autofocus 表示页面在加载是自动获得焦点
  • disabled：disabled 表示select元素加载时禁止使用次元素
  • name：value 规定文本区的名称，name属性用于在JavaScript中对元素进行引用
  • required：required 表示输入的北荣是必需的，不能为空
  • size：number 规定下拉列表中的数目

8.6 option标签

定义与用法：

option定义下拉列表中的一个选项

属性：

  • disabled：disabled 表示option元素加载时禁止使用次元素
  • selected：selected 规定在首次显示在列表中时表现为选中状态

8.7 label标签

定义与用法：

label标签为input元素定义标注

属性：

for：element_id label要绑定的元素的 id

form：id label 所属的一个或多个表单的 id

案例：


<!DOCTYPE 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>
    <style>
        tr td:nth-child(1) {
            text-align: right;
        }
        textarea {
            resize: none;
        }
    </style>
</head>
<body>
    <form action="">
        <table align="center">
            <tr>
                <td><label for="name">姓名：</label></td>
                <td>
                    <input type="text" id="name">
                </td>
            </tr>
            <tr>
                <td><label for="pwd">密码：</label></td>
                <td>
                    <input type="password" id="pwd">
                </td>
            </tr>
            <tr>
                <td><label for="ppwd">确认密码：</label></td>
                <td>
                    <input type="password" id="ppwd">
                </td>
            </tr>
            <tr>
                <td>密码提示问题：</td>
                <td>
                    <select name="" id="">
                        <option value="">请选择一个问题</option>
                        <option value="我的名字">我的名字</option>
                        <option value="我父亲的名字">我父亲的名字</option>
                        <option value="我母亲的名字">我母亲的名字</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>密码提示问题答案：</td>
                <td>
                    <input type="text">
                </td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <input type="radio" name="sex" id="1">男
                    <input type="radio" name="sex" id="0">女
                </td>
            </tr>
            <tr>
                <td>年龄：</td>
                <td>
                    <input type="number" min="1" max="150">
                </td>
            </tr>
            <tr>
                <td>籍贯：</td>
                <td>
                    <select name="" id="">
                        <option value="">请选择</option>
                        <option value="河南">河南</option>
                    </select>
                    <span>省/直辖市</span>
                    <select name="" id="">
                        <option value="">请选择</option>
                        <option value="郑州">郑州</option>
                        <option value="开封">开封</option>
                        <option value="周口">周口</option>
                    </select>
                    <span>市</span>
                </td>
            </tr>
            <tr>
                <td>爱好：</td>
                <td>
                    <input type="checkbox" checked="checked" name="habby">上网
                    <input type="checkbox" checked="checked" name="habby">看电影
                    <input type="checkbox" name="habby" id="3">学习
                    <input type="checkbox" name="habby" id="4">体育
                </td>
            </tr>
            <tr>
                <td>个人介绍：</td>
                <td>
                    <textarea name="" id="" cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td>上传头像：</td>
                <td>
                    <input type="text" name="" id="">
                    <input type="file">
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="submit" name="" id="" value="提交">
                    <input type="reset" name="" id="" value="重置">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

1654783122775.png

avatar
文章
阅读
粉丝