HTML基础主要标签的说明和使用---img 、input、lable、ul、ol、li............

最新推荐文章于 2023-02-20 16:57:07 发布

原创最新推荐文章于 2023-02-20 16:57:07 发布 · 1.3k 阅读

11 ·

CC 4.0 BY-SA版权

html+html5 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了HTML中的基础标签，包括img的src属性、相对路径与绝对路径，width和height属性，以及title和alt属性的用法。接着讲解了input和label标签，探讨了不同类型的input控件，如button、checkbox、radio等。还涵盖了列表标签ul, ol, li，以及select和option用于创建下拉列表。此外，还提到了段落p标签，强调文本的strong标签，以及表格相关的table, th, tr, td。最后，简单介绍了link, style和script标签的作用。" 87559799,1458166,Devexpress galleryControl 拖拽操作实现,"['Devexpress', 'UI组件', '拖放操作']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML基础主要标签的说明和使用---img 、input、lable、ul、ol、li、select、option、p、span、strong、table、th、tr、td、link、style、script

<img>标签是定义图像的，它的标签主要有三个属性，分别是src，width，height。代码如下：

	<img src="112415.jpg" width="200" height="100" alt="文字" title="文字">
	<img src="images/112415.jpg" width="200" height="100"  alt="文字" title="文字">
	<img src="../images/112415.jpg" width="200" height="100"  alt="文字" title="文字">
	<img src="E:/标签的详解/images/112415.jpg" width="200" height="100"  alt="文字" title="文字">

src属性中分为绝对路径和相对路径。
先说说相对路径，就是根据页面存储的位置为原始位置来讲，当图片和页面处于同一存储位置的时候，那么路径就是112415.jpg，当图片在下一级文件夹（images）中的时候，那么路径就是images/112415.jpg，如果是上一级文件（images）的时候，那么就要跳出上一级文件夹，路径就是…/images/112415.jpg。
那么绝对的路径的，就是根据磁盘为原始位置来讲的，路径就是E:\标签的详解\images。
那么width属性和height属性就是定义图片的宽和高了。
title=“文字”，当鼠标放到文字或是图片上时有文字显示。
alt=“文字”，在图像无法显示时的替代文本。
那么效果如下：
在这里插入图片描述
当我们将第一张图片的名字改一下，那么就不会显示图片，因为没有这张图片，那么alt值会出来，显示文字两字。
如图：
input和lable标签，input定义输入控件，lable定义 input 元素的标注。
代码如下：

<form>
	<label for="male">男</label>
	<input type="radio" name="sex" id="male" />
	<br />
	<label for="female">女</label>
	<input type="radio" name="sex" id="female" />
</form>

效果如下：
在这里插入图片描述
input标签的type=""类型可以有多种。有那么多种：

这个在W3C上有。现在来试试button、checkbox、radio、reset、submit、text，这几个常用的。代码如下：

	<input type="button" value="button"><br>
    <input type="text" value="text"><br>
    <input type="submit" value="submit"><br>
    <input type="reset" value="reset"><br>
    <input type="radio" value="radio"><br>
    <input type="checkbox" value="checkbox"><br>

效果如下：
在这里插入图片描述
就这样。
接着，是ul、ol、li标签，ul是无序列表，ol是有序列表，作用都是定义列表。li是ul、ol标签里面的标签，作用是定义列表的项目。代码如下：

	<ul>
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
    </ul>
    <ol>
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
    </ol>

效果如下：
在这里插入图片描述
select，option标签是一起使用的，select是定义一个下拉列表，而option是定义列表中的项目。代码如下：

	<select>
        <option>小兔子</option>
        <option>小乌龟</option>
        <option>小海豚</option>
        <option>小企鹅</option>
    </select>

效果如下：
在这里插入图片描述
点击一下，出现多个项目，可供选择。
p标签是段落标签。代码如下：

<p>
        &nbsp;解连环·酬任公用梦窗留别石帚韵<br>
        &nbsp;&nbsp;近现代：麦孟华<br>
        旅怀千结，数征鸿过尽，暮云无极。<br>
        怪断肠、芳草萋萋，却绿到天涯，酿<br>
        成春色。尽有轻阴，未应恨、浮云西<br>
        北。祗鸾钗密约，凤屧旧尘，梦回凄<br>
        忆。年华逝波渐掷。叹蓬山路阻，乌<br>
        盼头白。近夕阳、处处啼鹃，更刬地<br>
        乱红，暗帘愁碧。怨叶相思，待题付<br>
        、西流潮汐。怕春波、载愁不去，恁<br>
        生见得？
    </p>

效果如图：
在这里插入图片描述
标签定义文档中的节，代码如下。

	<span>定义文档中的节</span>

效果如下：
在这里插入图片描述
strong也是用来强调文本的。代码如下：

	<strong>强调文本</strong>

效果如下：
在这里插入图片描述
table、th、tr、td来一起介绍，table是定义一个表格，th是定义表格的表头单元，tr是定义表格的行，td是定义表格的单元。代码如下：

	 <table border="1" cellspacing="1" cellpadding="1">
        <tr>
           <th>好人</th>
           <th>天使</th>
        </tr>
        <tr>
            <td>坏人</td>
            <td>魔鬼</td>
        </tr>
    </table>

效果如下：
在这里插入图片描述
可以明显的th的部分的文字比较粗，比较黑。
table的属性border是定义表格的边框是多少像素的；cellspacing是表格里单元格之间的距离;
cellpadding是表格里单元格内的空白部分;
link、style和script标签。link链接外部文件，style标签里面定义css样式，script链接外部js文件代码，也可以直接书写js语言。代码如下：

	<link rel="stylesheet" href="remgx.css">/*可以链接外部文件*/
    <style>
    	 /*这里是书写css样式的*/
        body{
            padding: 100px;
        }
    </style>
    <script type="javascript" src="remgx.js"></script>/*可以链接外部js文件*/
    <script type="javascript" >
        /*这里是书写Javascript语言的*/
    </script>

到这里，常用的标签已经介绍完毕。