关于html:HTML-常用标签-tag

52次阅读

共计 5929 个字符，预计需要花费 15 分钟才能阅读完成。

介绍：没有任何含意，次要用于 div 进行模块布局

类型：块级元素 block，盒子占用宽度为一整行

属性：没有属性

<div> 我是模块 </div>

<div> 我是模块 </div>

</AppCard>

介绍：没有任何含意，次要用于展现文本内容

类型：内联元素 inline，盒子占用宽度依据内容决定

属性：没有属性

<span> 我是内容 </span>

<span> 我是内容 </span>

</AppCard>

介绍：默认自带了 margin 款式，次要用于展现一段内容

类型：块级元素 block，独占一行

属性：没有属性

<p> 我是内容我是内容我是内容我是内容 </p>

<p> 我是内容我是内容我是内容我是内容 </p>

</AppCard>

介绍：单标签、次要用于展现图片

类型：内联元素 inline，占用地位依据图片宽度决定

属性：

src：图片的门路
alt：图片加载不进去时显示的文本
width：图片展现宽度
height：图片展现高度

<img src="xxx.png" alt="加载失败" width="100px" height="100px" />

<img src="./tag/noxussj.png" alt="加载失败" width="100" height="100" />

</AppCard>

介绍：默认自带了 margin 和 font 款式，次要用于展现不同级别题目

类型：块级元素 block，盒子占用宽度为一整行

属性：没有属性

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

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

</AppCard>

介绍：默认自带了 font 款式，次要用于展现超链接文字

类型：内联元素 inline，盒子占用宽度依据内容决定

属性：

href：超链接地址
target：窗口打开方式，\_blank（新窗口）、\_self（以后窗口，默认）

<a href="http://www.baidu.com" target="_blank"> 点我跳转 </a>

<a href="http://www.baidu.com" target="_blank"> 点我跳转 </a>

</AppCard>

介绍：个别须要联合 thead、tbody、tr、th、td 标签进行应用，次要用于展现表格

类型：表格元素 table，盒子占用宽度为一整行

属性：

border：表格边框
cellspacing：每一行之间以及每一列之间的间距
cellpadding：每一列的内边距
width：表格宽度，不设置则由内容撑开

子元素：

thead：表头局部
tbody：表主体局部
tr：每一行
th：表头中每一列
td：表主体中每一列

<table border="0" cellspacing="0" cellpadding="0" width="auto">
    <thead>
        <tr>
            <th> 姓名 </th>
            <th> 年龄 </th>
            <th> 性别 </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>xiaoming</td>
            <td>12</td>
            <td> 男 </td>
        </tr>
        <tr>
            <td>anqila</td>
            <td>16</td>
            <td> 女 </td>
        </tr>
    </tbody>
</table>

<table border="0" cellspacing="0" cellpadding="0" width="auto">
    <thead>
        <tr>
            <th> 姓名 </th>
            <th> 年龄 </th>
            <th> 性别 </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>xiaoming</td>
            <td>12</td>
            <td> 男 </td>
        </tr>
        <tr>
            <td>anqila</td>
            <td>16</td>
            <td> 女 </td>
        </tr>
    </tbody>
</table>

</AppCard>

介绍：ul 默认自带了 margin、padding 款式，个别须要联合 li 应用，次要用于展现没有序号的列表

类型：块级元素 block，盒子占用宽度为一整行

属性：没有属性

<ul>
    <li>xiaoming</li>
    <li>libai</li>
    <li>anqila</li>
</ul>

<ul>
    <li>xiaoming</li>
    <li>libai</li>
    <li>anqila</li>
</ul>

</AppCard>

介绍：ol 默认自带了 margin、padding 款式，个别须要联合 li 应用，次要用于展现有序号的列表

类型：块级元素 block，盒子占用宽度为一整行

属性：没有属性

<ol>
    <li>xiaoming</li>
    <li>libai</li>
    <li>anqila</li>
</ol>

<ol>
    <li>xiaoming</li>
    <li>libai</li>
    <li>anqila</li>
</ol>

</AppCard>

介绍：单标签、默认自带了 margin、width 款式，次要用于展现输入框

类型：行内块级元素 inline-block，盒子占用宽度依据内容决定

属性：

type：输入框类型
- text：文本框
- password：明码框
- radio：单选框
- checkbox：多选框
- button：按钮
- file：上传文件
value：表单值

<p>
    <input type="text" placeholder="请输出内容" />
</p>
<p>
    <input type="password" placeholder="请输出明码" />
</p>
<p>
    <span> 男 <input type="radio" name="gender" value="1" /></span>
    <span> 女 <input type="radio" name="gender" value="2" /></span>
</p>
<p>
    <span> 男 <input type="checkbox" name="gender" value="1" /></span>
    <span> 女 <input type="checkbox" name="gender" value="2" /></span>
</p>
<p>
    <input type="button" value="我是按钮" />
</p>
<p>
    <input type="file" />
</p>

<p>
    <input type="text" placeholder="请输出内容" />
</p>
<p>
    <input type="password" placeholder="请输出明码" />
</p>
<p>
    <span> 男 <input type="radio" name="gender" value="1" /></span>
    <span> 女 <input type="radio" name="gender" value="2" /></span>
</p>
<p>
    男 <input type="checkbox" name="gender" value="1" />
    女 <input type="checkbox" name="gender" value="2" />
</p>
<p>
    <input type="button" value="我是按钮" />
</p>
<p>
    <input type="file" />
</p>

</AppCard>

介绍：默认自带了 padding、border、width 款式，次要用于展现多行文本输入框

类型：行内块级元素 inline-block，盒子占用宽度依据内容决定

属性：

rows：行数
cols：列数
placeholder：提示信息

<textarea cols="30" rows="2" placeholder="请输出内容"></textarea>

<textarea cols="30" rows="2" placeholder="请输出内容"></textarea>

</AppCard>

介绍：默认自带了 padding、border 款式，次要用于展现按钮

类型：行内块级元素 inline-block，盒子占用宽度依据内容决定

属性：没有属性

<button> 我是按钮 </button>

<button> 我是按钮 </button>

</AppCard>

介绍：默认自带了 border 款式，个别须要联合 option 应用，次要用于展现下拉框

类型：行内块级元素 inline-block，盒子占用宽度依据内容决定

属性：

label：选项文本
value：选项值

<select>
    <option label="xiaoming" value="a"></option>
    <option label="libai" value="b"></option>
    <option label="anqila" value="c"></option>
</select>

<select>
    <option label="xiaoming" value="a"></option>
    <option label="libai" value="b"></option>
    <option label="anqila" value="c"></option>
</select>

</AppCard>

在 HTML5 中提供了 canvasAPI，容许在 canvas 画布上绘制图形

ie6、7、8 不兼容

<canvas width="300" height="300" id="myCanvas"></canvas>

<script>
    var canvas = document.getElementById('myCanvas')
    var context = canvas.getContext('2d')

    context.moveTo(0, 0) // 绘制第一个点，坐标是（0, 0）context.lineTo(300, 300) // 绘制第二个点，而后连线，坐标是（300, 300）context.lineWidth = 5 // 线条宽度
    context.strokeStyle = '#058' // 线条色彩
    context.stroke() // 开始绘制
</script>

<BaseCanvas></BaseCanvas>

</AppCard>

介绍：默认自带了 width、height 款式，个别须要联合 path 应用，次要用于展现矢量图形

类型：内联元素 inline，占用地位依据矢量图形宽度决定

属性：

d：矢量图形门路

<svg viewBox="0 0 1024 1024" width="200" height="200">
    <path
        d="M768 768a32 32 0 0 1 0 64H256a32 32 0 0 1 0-64h512zM512 192a32 32 0 0 1 32 32v345.504l128.64-128.608a32 32 0 0 1 42.496-2.496l2.784 2.496a32 32 0 0 1 2.496 42.464l-2.496 2.784-181.024 181.024a32 32 0 0 1-42.464 2.496l-2.784-2.496-181.024-181.024a32 32 0 0 1 42.464-47.744l2.784 2.496L480 565.024V224a32 32 0 0 1 32-32z"
    ></path>
</svg>

<path
    d="M768 768a32 32 0 0 1 0 64H256a32 32 0 0 1 0-64h512zM512 192a32 32 0 0 1 32 32v345.504l128.64-128.608a32 32 0 0 1 42.496-2.496l2.784 2.496a32 32 0 0 1 2.496 42.464l-2.496 2.784-181.024 181.024a32 32 0 0 1-42.464 2.496l-2.784-2.496-181.024-181.024a32 32 0 0 1 42.464-47.744l2.784 2.496L480 565.024V224a32 32 0 0 1 32-32z"
></path>

</svg>
</AppCard>

介绍：次要用于展现音频播放器

属性：

src：音频地址，个别应用 mp3 格局
loop：是否循环播放
muted：静音
autoplay：自动播放，浏览器个别都是禁止的，须要联合静音应用能力失效
controls：展现播放器控件，款式依据浏览器决定

<audio src="https://noxussj.top/huxiyouhai.mp3" controls></audio>

<audio src="https://noxussj.top/huxiyouhai.mp3" controls></audio>

</AppCard>

介绍：次要用于展现视频播放器

属性：

src：视频地址，个别应用 mp4 格局
loop：是否循环播放
muted：静音
autoplay：自动播放，浏览器个别都是禁止的，须要联合静音应用能力失效
controls：展现播放器控件，款式依据浏览器决定

<video src="https://noxussj.top/oceans.mp4" controls></video>

<video src="https://noxussj.top/oceans.mp4" controls></video>

</AppCard>

loginRead(‘11005’)
</script>

正文完

html

发表至： html

2022-12-28

0

关于html:JavaScript中forEach和filter的用法和原理

关于html:第-29-题如何理解桶排序

关于html:企业建站的相关注意细节分享

关于html:qgis-将县区的数据转成市区的边界数据

关于go:不背锅运维GoPromethus-Eexporter开发一篇带你玩妥它

关于html:HTML-常用标签-tag

标签 tag

根底标签

div 块元素

span 行内文本元素

p 段落元素

img 图片元素

h1 ~ h6 一级题目 ~ 六级题目

a 超链接

table 表格元素

ul、li 无序列表

ol、li 有序列表

表单标签

input 输入框

textarea 文本域

button 按钮

select、option 下拉框

多媒体标签

canvas 绘图

svg、path 矢量图形

audio 音频

video 视频

Just My Socks（注册教程内含优惠码）

关于html:HTML-常用标签-tag

标签 tag

根底标签

div 块元素

span 行内文本元素

p 段落元素

img 图片元素

h1 ~ h6 一级题目 ~ 六级题目

a 超链接

table 表格元素

ul、li 无序列表

ol、li 有序列表

表单标签

input 输入框

textarea 文本域

button 按钮

select、option 下拉框

多媒体标签

canvas 绘图

svg、path 矢量图形

audio 音频

video 视频

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）