HTML标签（一）

最新推荐文章于 2024-01-17 11:46:38 发布

菜鸟级java全栈式攻城狮

最新推荐文章于 2024-01-17 11:46:38 发布

阅读量653

点赞数

文章标签： html 标签

本文链接：https://blog.csdn.net/junhua_gu/article/details/76407418

版权

标题标签

    <hx>（x=1~6）标签：定义标题.<h1>定义最大的标签，<h6>定义最小的标签
    实例：

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

这里写图片描述

段落标签

    <p>标签：定义段落
    实例：

<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
<p>第四行</p>
<p>第五行</p>

这里写图片描述

span标签

    <span>标签被用来组合文档中的行内元素。本身无任何属性。当对它应用样式时，它才会产生视觉上的变化。（不会换行）
    实例：

<span>无样式</span>
<span style="color: red">加了红色视觉效果</span>

这里写图片描述

br换行标签

    <br>标签可插入一个简单的换行标签
    实例：

<span>
    这是第一行 <br>
    这是第二行
</span>

这里写图片描述

hr分隔线标签

    <hr>标签可在页面上创建一条分割线
    实例

<p>分割线上面</p>
<hr>
<p>分割线下面</p>

这里写图片描述

blockquote引用标签

    <blockquote>用于对文本的修饰。多用于对名人名言的引用。让文本增添声色

实例：

<p>
    谦虚使人进步，骄傲使人落后！---毛泽东（无引用）
</p>
<blockquote cite="">
    谦虚使人进步，骄傲使人落后！---毛泽东（运用引用）
</blockquote>

这里写图片描述

pre预格式标签

    <pre>标签可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

实例：

<pre>
    缩进一次
        缩进两次
            缩进三次
                缩进四次
</pre>

这里写图片描述

ul无序列表

    <ul>标签定义无序列表。
    实例：

<ul><!--UnOrderList-->
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
    <li>无序列表4</li>
</ul>

这里写图片描述

ol有序列表

    <ol>标签定义有序列表。
    实例：

<ol><!--OrderList-->
    <li>有序列表1</li><!--ListItem-->
    <li>有序列表2</li>
    <li>有序列表3</li>
</ol>

这里写图片描述

dl定义列表

    <dl> 标签定义了定义列表（definition list）。dl 标签用于结合 <dt>（定义列表中的项目）和 <dd> （描述列表中的项目）。
    实例：

<dl><!--DefineList-->
    <dt>定义列表</dt><!--定义的对象-->
    <dd>
    是项目及其注释的组合<!--定义的对象的描述-->
    </dd>
</dl>

这里写图片描述

figcaption组合标签

    <figcaption> 标签定义 figure 元素的标题（caption），用法和定义标签相似。多用于插入图片，并进行描述。且格式上有所不同。以下有所比较：
    实例：

<dl>
    <dt>
        这是个定义列表的对象
    </dt>
    <dd>
        描述缩进，对象不缩进！！！
    </dd>
</dl>
<figure>
    这是个组合标签的对象
    <figcaption>
        描述缩进，对象也缩进！！！
    </figcaption>
</figure>

这里写图片描述

div分区标签

    <div>标签可定义文档中的分区或节。把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。常常用 id 或 class 来标记 <div>，事标签的作用会变得更加有效。换行是 <div> 固有的唯一格式表现。
    实例：

<body>
<div style="height: 100px;width:100px;background-color: red"></div>
<div style="height: 50px;width:100px;background-color: yellow"></div>
<div style="height: 300px;width:100px;background-color: blue"></div>
</body>

这里写图片描述

a标签

    <a> 标签定义超链接，用于从一张页面链接到另一张页面。
    <a> 元素最重要的属性是 href 属性，它指示链接的目标。
它有三个作用：（1）页面跳转；（2）锚点链接；（3）功能型链接。
页面跳转实例：

<--页面跳转实例：-->
<a href="https://www.baidu.com/">百度首页</a>

<--锚点链接实例：-->
<a name="top"></a>
<a href="#top">返回顶部</a>

<--功能型链接实例：-->
<a href="tencent://message/?uin=878523109">发qq消息</a>
<a href="mailto://chency@jerei.com">发邮件</a>

img图片链接

    <img>标签可以向网页中嵌入一幅图像。
    但是，<img> 标签并不事真的在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。img 标签有两个重要的属性：src 属性 和 alt 属性。（src的属性值为所链接图片的地址，alt的属性值是图片加载失败后显示的文字）

<body>
<img src="../../img/bk.png" alt="图片加载失败"
     width="200" height="133" >
</body>

这里写图片描述

文本标签

<i>、<em>、<strong>、<b>标签都是对文本进行修饰的标签，他们的关系如下：
    <i>标签标注的文本为斜体。无强调作用；
    <em>标签标注的文本为斜体。起强调作用；
    <b>标签标注的文本为粗体。无强调作用；
    <strong>标签标注的文本为粗体。起强调作用；
实例：

<p>版权所有，侵权必究</p>
<!--斜体-->
<i>版权所有，侵权必究</i><br>
<!--斜体，强调-->
<em>版权所有，侵权必究</em><br>
<!--粗体，强调-->
<strong>版权所有，侵权必究</strong><br>
<!--粗体-->
<b>版权所有，侵权必究</b>

这里写图片描述

table表格标签

    <table> 标签定义 HTML 表格。表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
    其中，tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

<table border="1px" >
    <tr>
        <th>列表项1</th>
        <th>列表项2</th>
        <th>列表项3</th>
    </tr>
    <tr>
        <th>第二行第一列</th>
        <th>第二行第二列</th>
        <th>第二行第三列</th>
    </tr>
    <tr>
        <th>第三行第一列</th>
        <th>第三行第二列</th>
        <th>第三行第三列</th>
    </tr>
</table>

这里写图片描述

form表单

    <form> 标签用于为用户输入创建 HTML 表单。用来让服务器与客户进行交互。向服务器传输信息
    表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
    表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
实例：

<form action="www.ccy.php" method="get">
    <fieldset>
        <legend>个人信息</legend>
姓名：
        <input type="text" name="name" tabindex="1"><br>
 密码：
        <input type="password" name="pwd" tabindex="4"><br>
性别：
        <input type="radio" name="sex" value="1" id="man"><label for="man">男</label>
         <input type="radio" name="sex" value="0" id="women"><label for="women">女</label> <br>
爱好：
        <input type="checkbox" name="hobby" value="basketball">
篮球
        <input type="checkbox" name="hobby" value="score">足球
        <input type="checkbox" name="hobby" value="tennis">网球<br>
附件：   <input type="file" name="img"><br><br>
图形按钮：<input type="image" src="../../img/hongbao.png"
                    height="25px"><br>
省份：           <select name="pro" id="p">
                <option value="sd">山东省</option>
                <option value="hn">河南省</option>
                <option value="hb">河北省</option>
                <option value="gs" selected>甘肃省</option>
                <option value="yn">云南省</option>
                <option value="gz">贵州省</option>
            </select><br>
意见建议：        <textarea style="resize: none" rows="5" cols="18"></textarea>
        <br>
        <input type="button" value="注册">
        <input type="submit" value="登录">
        <input type="reset" value="清空">
    </fieldset>
</form>

这里写图片描述
此外：还有部分表单元素在某些情况下可用：

<form action="www.www.php">
    姓名：<input type="text" name="name" autocomplete="off"
                autofocus required placeholder="请输入姓名"><br>
    籍贯：<input type="text" name="name"><br>
    邮箱：<input type="email"><br>
    网址：<input type="url"><br>
    日期：<input type="date"><br>
    时间：<input type="time"><br>
    月份：<input type="month"><br>
    星期：<input type="week"><br>
    数字：<input type="number" max="10" min="3" step="2"><br>
    滑动条：<input type="range" max="100" min="0"><br>
    颜色：<input type="color"><br>
    <input type="submit" value="登录">
</form>

这里写图片描述

菜鸟级java全栈式攻城狮

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML标签（一）

标题标签 <hx>（x=1~6）标签：定义标题.<h1>定义最大的标签，<h6>定义最小的标签实例：<h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6>段落标签 <p>标签：定义段落实例：<p>第一行</p><p>第二行</p><p>第三行</p
复制链接

扫一扫