HTML常用标签使用

哆哆啦00

已于 2023-04-01 10:09:28 修改

阅读量407

点赞数

文章标签： html css 前端

于 2023-03-30 16:40:11 首次发布

本文链接：https://blog.csdn.net/florae006/article/details/129859965

版权

本文介绍了HTML中的一系列常用标签，包括段落p、标题h1-h6、无序和有序列表ul和ol、图片img以及超链接a。此外，还详细讲解了文本强调标签如em、i、strong、b、u、del和s的用法，以及input和textarea标签的不同类型，如text、password、checkbox、radio、file、range、submit和reset等。

摘要由CSDN通过智能技术生成

HTML常用标签

第一部分（p标签、h1~h2标签、ul和ol列表标签、img图片标签、a超链接属性标签）

第二部分（几种强调标签，斜体、加粗、下划线、删除线）

第三部分（input标签和textarea标签）

HTML常用标签

第一部分（p标签、h1~h2标签、ul和ol列表标签、img图片标签、a超链接属性标签）

<p>标签

提前在head中加入这部分，可以在<p>中引用
<style>
        .hi{
            color: red;
        }
    </style>
body中使用<p>标签
<p class="hi">hello world!</p>

效果：

<h1>~<h6>标签

<hr><h1>**h1-h6标签的使用**</h1><hr>
    <h1>我是1级标签</h1>
    <h2>我是2级标签</h2>
    <h3>我是3级标签</h3>
    <h4>我是4级标签</h4>
    <h5>我是5级标签</h5>
    <h6>我是6级标签</h6>

效果

<ul><ol>列表标签

<hr><h1>**列表标签的使用**</h1><hr>
    &lt;ul&gt;标签<br>
    <ul>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul><br>
    &lt;ol&gt;标签<br>
    <ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>
    &lt;ul&gt;和&lt;ol&gt;中的各项需要有&lt;li&gt;包围

效果：

<img>标签

<hr><h1>图片标签&lt;img&gt;的使用</h1><hr>
    <img 
    width="250"
    height="200"
    src="images/cat.jpg" alt="好耶！是猫猫"><br>
    <p>&lt;img width="250" height="200" src="images/cat.jpg" alt="好耶！是猫猫"&gt;</p>
    <br>图片资源无法成功加载<br>
    <img src="/images/catcat.jpg" alt="猫猫不见啦">
    <p><p>&lt;img width="250" height="200" src="images/catccat.jpg" alt="好耶！是猫猫"></p></p>

效果：

<a>超链接属性标签

<hr><h1>**超链接属性标签**</h1><hr>
    <a href="https://developer.mozilla.org./zh-CN/docs/Learn/Getting_started_with_the_web">一个学习web前端开发的网页</a><br>
    <p>&lt;a href="https://developer.mozilla.org./zh-CN/docs/Learn/Getting_started_with_the_web"&gt;一个学习web前端开发的网页&lt;/a&gt;<br></p>

效果：

第二部分（几种强调标签，斜体、加粗、下划线、删除线）

代码：

<hr><h1>**几种强调标签**</h1><hr>
    其包含的内容被认为需要着重阅读，一般会使用斜体
    <p>
        这是一段普通的文本。<br>
        <em>这是&lt;em&gt;强调（斜体）的内容。</em><br>
        <i>这是&lt;i&gt;强调（斜体）的内容。</i><br>
    </p>
    表示文本十分重要，一般用粗体显示
    <p>
        这是一段普通的文本。<br>
        <strong>这是&lt;strong&gt;强调（加粗）的内容。</strong><br>
        <b>这是&lt;b&gt;强调（加粗）的内容</b>
    </p>
    <p>
        这是一段普通的文本。<br>
        <u>这是&lt;u&gt;强调（下划线）的内容。</u><br>
        <ins>这是&lt;ins&gt;强调（下划线）的内容</ins>
    </p>
    <p>
        这是一段普通的文本。<br>
        <del>这是&lt;del&gt;删除线（中划线）的内容。</del><br>
        <s>这是&lt;s&gt;删除线（中划线）的内容</s>
    </p>

效果：

第三部分（input标签和textarea标签）

type属性说明
type属性	说明
text	文本框，用于输入单行文本
password	密码框，用于输入密码
checkbox	多选框，用于多选多
radio	单选框，用于多选一
file	文件选择，用于之后上传文件
range	范围条，用于控制范围
submit	提交按钮，用于提交
reset	重置按钮，用于重置
button	普通按钮，默认无功能

文本框（type="text"）

<h2>文本区域</h2>
    <p>输入中的换行会被自动去除</p>
    <p>&lt;input type="text" /&gt;</p>
    <input type="text"/>
    <p>&lt;input type="text" placeholder="请填写文本信息" /></p>
    <input type="text" placeholder="请填写文本信息"/>
    <br>

效果：

密码框（password）

<h2>密码框password</h2>
    <input type="password">
    <p>&lt;input type="password"></p>
    <input type="password" placeholder="请填写密码">
    <p>&lt;input type="password" placeholder="请填写密码"></p>

效果：

复选框 /单选框（type="checkbox"）

复选框：

<h2>复选框</h2>
    可设置为选中或未选中<br>
    <input type="checkbox"/>first checkbox
    <input type="checkbox"/>second checkbox
    <p>
        &lt;input type="checkbox" />first checkbox <br>
        &lt;input type="checkbox" />second checkbox <br>
    </p>
    优化写法<br>
    <img width="400" height="300" src="images/code1.png" alt="出错哩"><br>
    <label for="">
        <input type="checkbox"
        id="cbox1-pro"
        value="first_checkbox">选择1
    </label>
    <label>
        <input type="checkbox"
        id="cbox2-pro"
        value="second_checkbox">选择2
    </label>
    <br>

效果：

单选框（两种）

<h2>单选框</h2>
    <label>
        <input type="radio">first radio
        <input type="radio">second radio
    </label>
    <p>
        两个选项不关联，只能选中其中一个再次点击不能取消<br>
        &lt;label>
            &lt;input type="radio">first radio
        &lt;/label>
    </p><hr>
    <label>
        <input type="radio" name="radio" id="radio1">first radio
        <input type="radio" name="radio" id="radio2">second radio
    </label>
    <p>
        两个选项关联，选择其中一个就不能选中其他的，再次点击依然不能取消，但点击另一个则取消先前选中的
        &lt;label>
            &lt;input type="radio" name="radio" id="radio2">second radio
        &lt;/label>
    </p><hr>

效果：

选择文件

<h2>让用户选择文件的控件</h2>
    <input type="file">
    <p>&lt;input type="file"></p>

效果：

控制范围

<h2>控制范围</h2>
    <input type="range">
    <p>&lt;input type="range"></p>

效果：

提交

<h2>提交</h2>
    <input type="submit">
    <p>&lt;input type="submit"></p>

效果：

重置

多行纯文本编辑控件

<hr><h1>**多行纯文本编辑控件&lt;textarea&gt;标签**</h1><hr>
    <textarea name="story" cols="30" rows="10">这是一个textarea</textarea>
    <p>&lt;textarea name="story" cols="30" rows="10">这是一个textarea&lt;/textarea></p>
    <p>cols表示文本域的可视宽度，row表示元素的输入文本行数（显示的高度）</p>

效果：