【web前端开发】标签（基础知识详解）

S hh

已于 2024-06-09 11:15:43 修改

阅读量1.4k

点赞数 23

分类专栏：前端 python 文章标签： java 前端 javascript html 开发语言学习

于 2024-06-08 20:45:15 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_74116463/article/details/139548333

版权

python 同时被 2 个专栏收录

4 篇文章

订阅专栏

前端

3 篇文章

订阅专栏

浏览器能识别的标签

编码

<meta charset="UTF-8">

title

<title>helloshh</title>

标题

<h1>1级标签</h1>
<h2>2级标签</h2>
<h3>3级标签</h3>
<h4>4级标签</h4>
<h5>5级标签</h5>
<h6>6级标签</h6>

div和span

div，一个占一整行
<div>山东</div>
<div>安徽</div>
span,自己有多大占多少。【行内标签，内联标签】
<span>山东</span>
<span>安徽</span>（中间会有一个小空格）
<span>山东</span><span>安徽</span>（这样就没有小空格）

超链接

跳转到其他网站
<a href="https://www.baidu.com/">点击跳转</a>

跳转到自己网站

<a href="http://127.0.0.1:5000/show/info">自己网站</a>

或者：

<a href="/show/info">自己网站</a>

图片

<img style="height: 200px;width: 300px"   src="/static/QQ图片.jpg" alt="">
将图片放到static目录下

宽度和高度的设置: style="height: 200px;width: 300px"

小结：

划分：

块内标签：

<h1></h1>

<div></div>

行内标签：

<span></span>

<a></a>

<img />

嵌套：

<body>
    <h1>商品列表</h1>
    <a href="https://www.baidu.com/" target="_blank">
        <img src="/static/QQ图片.jpg" style="width: 150px">
    </a>
   <a href="https://finance.sina.com.cn/stock/relnews/2024-06-08/doc-inaxyrte3372187.shtml">
        <img src="/static/R-C.jpg" style="width: 150px">
   </a>
    <a href="https://www.jd.com/">
        <img src="/static/R-C2.jpg" style="width: 150px">
    </a>
</body>

target="_blank"会新增加一个页面跳转，而不是在当前页面跳转：

如果不加这个：【在当前页面跳转】

列表标签

【ul 是无序的列表】
<ul>
    <li>移动</li>
    <li>联通</li>
    <li>电信</li>
</ul>

【ol 是有序的列表】

<ol>
    <li>移动</li>
    <li>联通</li>
    <li>电信</li>
</ol>

表格标签

<table>
    <thead>
        <tr>    <th>ID</th> <th>姓名</th> <th>年龄</th>     </tr>
    </thead>

    <tbody>
        <tr>    <td>10</td> <td>shh</td> <td>18</td>    </tr>
        <tr>    <td>11</td> <td>ww</td> <td>20</td>    </tr>
        <tr>    <td>12</td> <td>ll</td> <td>17</td>    </tr>
        <tr>    <td>13</td> <td>xx</td> <td>119</td>    </tr>
    </tbody>
</table>

如果加上边框：

<table border="1">

表单标签

<body>
    <h1>商品列表</h1>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>头像</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>
                    <img src="/static/R-C.jpg" height="100px">
                </td>
                <td>shh</td>
                <td>18</td>
            </tr>

            <tr>
                <td>2</td>
                <td>
                    <img src="/static/R-C2.jpg" height="100px">
                </td>
                <td>xx</td>
                <td>20</td>
            </tr>
        </tbody>
    </table>
</body>

inout系列

输入文本

<h1>输入框</h1>
<input type="text">

输入密码

<h1>输入框</h1>
<input type="text">
<input type="password">

选择文件

<h1>输入框</h1>
<input type="text">
<input type="password">
<input type="file">

单选框

<h1>输入框</h1>
<input type="text">
<input type="password">
<input type="file">
<input type="radio" name="n1"> 男
<input type="radio" name="n1"> 女
【注意：】两个‘name’要相等，要么都等于‘n1’,要么都等于‘n2'

复选框

【可以选择多个，不用设置互斥】

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

按钮

<input type="checkbox">足球
<input type="checkbox">排球
<input type="checkbox">羽毛球
<input type="checkbox">乒乓球


<input type="button" value="提交">

<input type="button" value="提交">  ---->普通按钮
<input type="submit" value="提交">  ---->提交表单

下拉框

单选

<select>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>

多选【multiple】

<select multiple>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>

多行文本

<h1>多行文本</h1>
<textarea rows="3"></textarea>

form标签

页面上的数据，想要提交到后台：

form标签包裹要提交的数据的标签
- 提交方式：method='get'
- 提交地址：action="提交地址"
- form标签里面必须要有一个submit按钮
在form里面的标签：input/select/textarea
- 一定要写name属性：
```
用户名：<input type="text" name="uu">
```