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

0次阅读

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

标签 tag

根底标签

div 块元素

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

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

属性：没有属性 

<div> 我是模块 </div>

<AppCard>

<div> 我是模块 </div>

</AppCard>

span 行内文本元素

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

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

属性：没有属性 

<span> 我是内容 </span>

<AppCard>

<span> 我是内容 </span>

</AppCard>

p 段落元素

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

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

属性：没有属性 

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

<AppCard>

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

</AppCard>

img 图片元素

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

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

属性：

  • src：图片的门路
  • alt：图片加载不进去时显示的文本
  • width：图片展现宽度
  • height：图片展现高度 
<img src="xxx.png" alt="加载失败" width="100px" height="100px" />

<AppCard>

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

</AppCard>

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

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

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

属性：没有属性 

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

<AppCard>

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

</AppCard>

a 超链接

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

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

属性：

  • href：超链接地址
  • target：窗口打开方式，\_blank（新窗口）、\_self（以后窗口，默认）
<a href="http://www.baidu.com" target="_blank"> 点我跳转 </a>

<AppCard>

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

</AppCard>

table 表格元素

介绍：个别须要联合 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>

<AppCard>

<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、li 无序列表

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

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

属性：没有属性 

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

<AppCard>

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

</AppCard>

ol、li 有序列表

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

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

属性：没有属性 

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

<AppCard>

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

</AppCard>

表单标签

input 输入框

介绍：单标签、默认自带了 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>

<AppCard>

<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>

textarea 文本域

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

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

属性：

  • rows：行数
  • cols：列数
  • placeholder：提示信息 
<textarea cols="30" rows="2" placeholder="请输出内容"></textarea>

<AppCard>

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

</AppCard>

button 按钮

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

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

属性：没有属性 

<button> 我是按钮 </button>

<AppCard>

<button> 我是按钮 </button>

</AppCard>

select、option 下拉框

介绍：默认自带了 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>

<AppCard>

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

</AppCard>

多媒体标签

canvas 绘图

在 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>

<AppCard>

<BaseCanvas></BaseCanvas>

</AppCard>

svg、path 矢量图形

介绍：默认自带了 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>

<AppCard>
<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>
</AppCard>

audio 音频

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

属性：

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

<AppCard>

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

</AppCard>

video 视频

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

属性：

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

<AppCard>

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

</AppCard>

<script lang=”ts” setup>
import BaseCanvas from “../../components/BaseCanvas.vue”
import AppCard from “../../components/AppCard.vue”
import {loginRead} from ‘../../../src/utils/login-read’

loginRead(‘11005’)
</script>

正文完
html
发表至： html
2022-12-28
 0
关于html:前端一些算法amp日常实践
关于html:eltablecolumn日期格式化
关于html:14-张有趣深动图解-FlexBox好家伙还不快进收藏夹吃灰
关于html:APP常用跨端技术栈深入分析

站内搜索

-「」