详细介绍HTML5的基本标签

We Ashore

已于 2022-05-26 10:22:46 修改

阅读量1.7k

点赞数 1

文章标签：前端 html

于 2022-05-26 09:22:33 首次发布

本文链接：https://blog.csdn.net/SE_FUE_/article/details/124977796

版权

HTML5入门学习集

HTML5基本标签

文章目录

HTML5入门学习集
前言
一、HTML5标签的作用
二、常见的标签
- 1.基本标签1
- 2.基本标签2（锚标签，表单/表格标签）
总结

前言

前端学习入门简单，但深入了解后发现并没有想象中的轻松，以此博客记录自己的学习历程，望共勉！

提示：以下是本篇文章正文内容，下面案例可供参考

一、HTML5标签的作用

HTML5中的标签可以使得网页内容更加结构化，可以更加清楚的展示页面内容的结构，可以提升对于搜索引擎的友好性，可以更加容易的识别网站内容以及站点的类型。

二、常见的标签

1.基本标签1

代码如下（示例）：

<body>
    <ol type="A" start="3"><!--有序标签，ABCDEFGH...从第三个开始-->
        <li>hhh</li>
        <li>lll</li>
        <li>qqq</li>
        <li>kkk</li>
        <li>fff</li>
    </ol>
    <hr/><!--分隔线标签-->
    <ol type="I" start="3"><!--有序标签，I II III IV V VI VII...从第三个开始-->
        <li>hhh</li>
        <li>lll</li>
        <li>qqq</li>
        <li>kkk</li>
        <li>fff</li>
    </ol>
    <hr/>
    <ol type="i" start="3"><!--有序标签，i ii iii iv v vi vii...从第三个开始-->
        <li>hhh</li>
        <li>lll</li>
        <li>qqq</li>
        <li>kkk</li>
        <li>fff</li>
    </ol>
    <hr/>
    <ol type="1" start="3"><!--有序标签，1 2 3 4 5 6 7 ...从第三个开始-->
        <li>hhh</li>
        <li>lll</li>
        <li>qqq</li>
        <li>kkk</li>
        <li>fff</li>
    </ol>
    <hr/>
    <ul type="circle"><!--circle:圆形标记，，还有disc:default,,square:方块标记-->
        <li>hhh</li>
        <li>lll</li>
        <li>qqq</li>
        <li>kkk</li>
        <li>fff</li>
    </ul>
    <hr/>
    <u>hhh</u><!--下划线-->
    <b>lll</b><!--粗体-->
    <i>sss</i><!--斜体-->
    <hr/>
    H<sub>2</sub>O<!-- 下标:H2O -->
    H<sup>2</sup><!-- 上标：H2氢气 -->
    <hr/>
        <!--字符实体-->
    <!--大于号-->10 &gt 5
    <br/><!--br是换行标签-->
    <!--小于号-->1 &lt 5
    <br/>
    <!--大于等于号-->10 &ge; 5
    <br/>
    <!--小于等于号-->1 &le; 5
    <br/>
    <!--注册商标--> &reg;
    <br/>
      <!--版权商标--> @copy;
      <hr/>
        <!--空格--> &nbsp
    <hr/>
    <!--不换行块标记--><span>ssss</span>
    <hr/>
    <a href="https://www.baidu.com" target="_blank">百度一下</a>
    <!--(_self:表示在本窗口打开；_blank:表示在一个新窗口打开
        _parent:表示在父窗口打开；_top:表示子啊顶层窗口打开)-->
    <hr/>
    <!--层标签div--><div>我是一个层标签</div>
    <!--字体标签--><font ></font>
    <font color="red" face="宋体" size="7">我是字体标签：样式为7号宋体红字</font>
    <hr/>
    <hr/>
    <hr/>
</body>

2.基本标签2（锚标签，表单/表格标签）

代码如下（示例）：

<body>
    <hr/><p><b>锚标签的使用</b></p>
    <ul>
        <li id="t1" style="width:200px;height:200px; background-color: red">1</li>
        <li id="t2" style="width:200px;height:200px; background-color:blue">2</li>
        <li id="t3" style="width:200px;height:200px; background-color: green ">3</li>
        <li id="t4" style="width:200px;height:200px; background-color: yellow">4</li>
    </ul>
    <hr>
    <a href="#t1">1</a>
    <a href="#t2">2</a>
    <a href="#t3">3</a>
    <a href="#t4">4</a>
    <hr/>
    <hr/><p><b>块标签的使用</b></p>
    <div style="height:100px;width:100px;background-color:blue">
    <p>段落一</p>
    <p>段落二</p>
    </div>
    <hr/>
    <hr/><p><b>表单/表格的使用</b></p>
    <form action="index.html">
        <input type="text" palceholder="请输入用户名"><br>
        <input type="password" palceholder="请输入密码"><br>
        <input type="button" value="按钮"><br>
        <input type="checkbox">打球<input type="checkbox">看书
        <input type="checkbox" checked>跑步<!--checkbox表示复选框；cheecked表示被选中状态-->
    <hr>
    <input type="radio"><!--单选框-->
    <hr>
    <input type="file"><br> <!--传递文件-->
    <input type="hidden"> <br><!--隐藏文本框-->
    <input type="reset"><br><!--重置按钮-->
    <input type="submit"> <br> <!--提交按钮-->
    <hr>
    <input type="text" disabled placeholder="不可用"><br>
    <input type="text" disabled placeholder="只读">
    </form>

    <form>
       <hr>
    <input type="radio">  <hr/><p><b>单选框的使用</b></p>
    <hr> 
        请选择性别
        <input id="man" type="radio" name="gender">
        <label for="man">男</label>
        <input id="woman" type="radio" name="gender">
        <label for="woman">女</label>
    </form>
    <hr/><p><b>下拉菜单的使用</b></p>
    <select aotofocus>
        <!--select的属性有：name:下拉列表名，用于存储下拉值；disable:禁用该元素
        multiple：设置可以选择多个项目；size：指定下拉列表中的可见行数-->
        <option value="">南昌</option><!--option 是下拉列表选项-->
        <option value="">上饶</option><!--option属性有：value：表示选项值；name:表示默认下拉选项-->
        <option value="">九江</option>
    </select>

</body>