首页 > 其他分享> 文章详细

WEB前端常用标签

2019-09-23 20:42:31 阅读：230 来源： 互联网

标签：段落 WEB 标签前端分隔线标题内容列表

原文链接：https://blog.csdn.net/qq_34409701/article/details/52187863

WEB前端常用标签

1.p&br&hr
p 表示段落，默认段落上下会有行间距；
br 是换行，自闭和标签；
hr 是横线；

段落自带行间距

1 2 3 4 5 a标签 1、可添加超链接标签； 2、有锚的作业，相当于业内定位；

默认为本页跳转
 添加target=_block的属性后，新的页面将另开session来显示
1
2
2.H标签
标题标签

<h1>1号字体最大</h1>
<h2>字体大小随着“h”后面的数字变大，而变小</h2>
<h3>当然这个大小并非不可调试</h3>
<h4>可以通过css的样式进行再次调整</h4>
<h5>具体的css介绍可以参考下一篇css介绍</h5>
<h6>在原始标签中6号为最小号</h6>
1
2
3
4
5
6

3.select标签
即我们常见的下拉框的标签

<!--既然是框体，就会选择出具体的数值，意味着下一步会将数据提交给后台，目前的前后台是以“键值对”的形势来进行信息收发，因此需要标记value 来对应具体的值，其作用是防止数值过长，占用空间 -->
<p>-------我是华丽丽的分隔线-------</p>
<p>-------以下为最常见的下拉框形势-------</p>
<select>
    <option value="1">Beijing</option>
    <option value="2">Shanghai</option>
    <option value="3">Chongqing</option>
</select>
<p>-------我是华丽丽的分隔线-------</p>
<p>-------size=$i属性，来控制框中初始显示几个选项；使用multiple属性，可以让内容多选-------</p>
<select multiple="multiple" size="3">
    <option value="1">Beijing</option>
    <option value="2">Shanghai</option>
    <option value="3">Chongqing</option>
</select>
<p>-------我是华丽丽的分隔线-------</p>
<p>-------使用group、label，可以对框内内容进行递归分类-------</p>
<select >
    <optgroup label="Beijing">
        <option value="1">Shijingshanqu</option>
        <option value="2">chaoyangqu</option>
    </optgroup>
    <optgroup label="Shanghai">
        <option value="1">Chongmingqu</option>
        <option value="2">Minhangqu</option>
    </optgroup>
</select>
————————————————

4.Input 系列:

Checkbox：多选框;
radio：单选框
filedset:获得一个有名字的边框
text：明文输入信息
password：密文输入信息
button:按钮
submit：提交
reset：重置
file:选择文件
textarea:备注信息框
form:表单，设置submit、reset数据的范围，一般在一个form里的数据会被一起提交
ul：带点的列表
ol：带序号的列表
dl：递归的列表

5.table：表格 li:列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
</head>
<body>
    <ul>
        <li>农夫山泉</li>
        <li>恒大冰泉</li>
    </ul>
    <!--style="list-style-type: none"消除格式-->
    <ul style="list-style-type: none">
        <li>海贼王</li>
        <li>死神</li>
    </ul>
    <ol>
        <li>好好学习</li>
        <li>天天向上</li>
    </ol>
    <dl>
        <dt>北京</dt>
        <dd>雍和宫</dd>
        <dd>紫禁之巅</dd>
        <dt>天津</dt>
        <dd>天津之眼</dd>
        <dd>瓷房子</dd>
    </dl>
    <table style="border:1px solid darkred">
        <thead>
            <tr>
                <!--colspan 横向合并-->
                <th colspan="3">标题一</th>
                <th>标题二</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>内容一</td>
                <td >内容二</td>
                <td>内容三</td>
                <td>内容四</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>内容一</td>
                <td>内容二</td>
                <td>内容三</td>
                <td>内容四</td>
            </tr>
        </tbody>
        </table>
        <hr/>
        <table style="border:3px solid yellowgreen">
            <tr>
                <th>标题一</td>
                <th>标题二</th>
                <th>标题三</th>
                <th>标题四</th>
            </tr>
            <tr>
                <td>内容一</td>
                <!--rowspan 纵向合并-->
                <td rowspan="2">内容二</td>
                <td>内容三</td>
                <td>内容四</td>
            </tr>
            <tr>
                <td>内容一</td>

                <td>内容三</td>
                <td>内容四</td>
            </tr>

        </table>
</body>
</html>

6.iframe标签
用来在页面的一个框体中展示url的网页内容：

<!DOCTYPE html>
<html lang='en'>
<head>
        <meta charset='UTF-8'>
        <title></title>
</head>
<body>
        <h1>我的博客列表</h1>
        <iframe style='width:100%;height:2000px;' src='http://blog.csdn.net/qq_34409701'></iframe>
</body>
</html>3

标签：段落,WEB,标签,前端,分隔线,标题,内容,列表
来源： https://blog.csdn.net/weixin_45652244/article/details/101223622

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

WEB前端常用标签

WEB前端常用标签