html入门标签合集

最新推荐文章于 2024-11-02 23:32:29 发布

～X&K～

最新推荐文章于 2024-11-02 23:32:29 发布

阅读量1.1k

点赞数 20

文章标签： html 前端

本文链接：https://blog.csdn.net/2401_86120676/article/details/141489492

版权

学习标签（看一眼便能明白的标签）

一、结构

html结构：head，头标签；body，身体标签

doctype结构：页面标准

<!-- 
    DOCTYRE 表名 本文档属于html5标准
    每一个html标准都会收纳对应的标签
-->
<!DOCTYPE html>
<!-- 
    html 为网页的根标签 嵌套包含所有标签
    一般情况：标签分为开始标签 结束标签 结束标签带有/
    html标签里只存在两种标签 head 和 body 
 -->
<html lang="en">
    <!-- head 头标签 用于编写展示内容，附加信息  -->
    <head>
        <!-- meta 元标签 没有结束标签 -->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- title 标题 -->
        <title>hello</title>
    </head>
    <!-- body 身体标签 用于编写展示内容，用户可以看见 或者可以交互内容 -->
    <body>
        
    </body>
</html>

二、格式标签

1.div：块标签，块级元素，单独一块

2.p：段落标签，上下行距，单独一行

3.h1-h6：字体标签，字体变大/加粗，上下行距，单独一行

4.span：隔离标签，没有任任何样式

5.hr：分割线标签，水平分割线

6.br：换行标签，换行强制

三、字体样式标签

1.b：加粗（将字体加粗，[strong也是加粗标签]）

2.i：斜体（字体为倾斜体，[em也是斜体标签]）

3.u：下划线（在文字下方加上下划线）

4.del：中划线即删除（在文字中间加上一条线）

5.sup：上标（将字母数字等放在前一个字符的右上角）

6.sub：下标（将字母数字等放在前一个字符的右下角）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h1>字体相关标签</h1>
        <b>粗体</b>
        <strong>粗体</strong>
        <br>
        <i>斜体</i>
        <em>斜体</em>
        <br>
        <u>下划线</u>
        <br>
        <del>删除线（中划线）</del>
        <!-- 上标 -->
        <sup>2</sup>
        <!-- 下标 -->
        <sub>3</sub>
        <br>
        2H<sub>2</sub>O = 4H+O<sub>2</sub>

    </div>
    
</body>
</html>

四、列表标签

1.li：列表项，独占一行，不单独存在

2.ol：有序列表，有序号，上下行距，左侧内补

3.ul：无序列表，上下行距，左侧内补

4.dl：框架

框架包含：

dt：列表项目，没有缩进

dd：泪飙项目说明，有缩进

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 列表标签 -->
    <div>
        <h3>无序列表</h3>
        <!-- ul>li*3{无序列表$} -->
        <ul>
            <li>无序列表1</li>
            <li>无序列表2</li>
            <li>无序列表3</li>
        </ul>
    </div>
    <div>
        <h3>有序列表</h3>
        <!-- ol>li*3{有序列表$} -->
        <ol>
            <li>有序列表1</li>
            <li>有序列表2</li>
            <li>有序列表3</li>
        </ol>
    </div>
    <div>
        <h3>自定义列表</h3>
        <!-- dl>dd*3{自定义列表$} -->
        <dl>
            <dt>项目1</dt>
            <dd>自定义列表1</dd>
            <dt>项目2</dt>
            <dd>自定义列表2</dd>
            <dt>项目3</dt>
            <dd>自定义列表3</dd>
        </dl>
    </div>
    <!-- (div>(h3>{段落})+(p*3>{段落$})+div>{end$})+div>(h3>{隔离})+span*5>{span$} -->
    <div>
        <h3>段落</h3>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <div>end1</div>
    </div>
    <div>
        <h3>隔离</h3>
        <span>span1</span>
        <span>span2</span>
        <span>span3</span>
        <span>span4</span>
        <span>span5</span>
    </div>

</body>
</html>

五、表格标签（table）

1.tr：

th：表头单元格

td：普通单元格

2.属性：

border：边框（表格外框）

cellpadding：内边距（在表格单元格的内容和单元格边框之间添加内边距）

cellspacing：单元格间距

align：对齐（center）

width：宽度（用百分比表示，e.g.80%）

rowspan：合并同一列中的多行

colspan：合并同一行中的多列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 表格标签 -->
     <table border="10" cellpadding="10" cellspacing="10" align="center" width="80%">
        <tr>
            <th>表头单元格1</th>
            <th>表头单元格2</th>
            <th>表头单元格3</th>
        </tr>
        <tr>
            <td rowspan="2">普通单元格1</td>
            <td>普通单元格2</td>
            <td>普通单元格3</td>
        </tr>
        <tr>
            <td colspan="2" rowspan="2">
                <table border="5" width="100%">
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>普通单元格1</td>

        </tr>
     </table>

六、图片、视频、音频、超链接标签

1.src：video、audio都为control显示控件；img为alt加载失败显示文本

2.a：超链接

href：目标地址，其他网站连接或本网站其他页面

锚点：href=“#str”；id=“str”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <span id="t666">666</span>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <span id="t888">888</span>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <div>
        <h3>mp3音乐</h3>
        <audio src="./audio/ayd.mp3" controls></audio>
    </div>

    <div>
        <h3>视频</h3>
        <video src="./video/Mr.c.mp4" controls></video>
    </div>

    <div>
        <img src="./img/1.jpg" alt="图片加载失败" width="300">
        <img src="./img/6.jpg" alt="图片加载失败" width="300">
        <img src="./img/4.jpg" alt="图片加载失败" width="300">
    </div>

    <div>
        <h3>超链接</h3>
        <a href="https://www.baidu.com/">百度</a>
        <a href="./2.第一批标签.html">标签一</a>
        <a href="./3.第四批标签.html" target="_blank">标签四</a>
        <a href="#t666">锚点666</a>
        <a href="#t888">锚点888</a>
    </div>
    
</body>
</html>

七、引入页面

iframe：src引入一个页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h3>页面嵌套</h3>
        <iframe src="https://csdn.net" frameborder="0" width="30%" height="300"></iframe>
        <iframe src="https://ys.mihoyo.com" frameborder="0" width="30%" height="300"></iframe>
        <iframe src="https://恋与深空.com" frameborder="0" width="30%" height="300"></iframe>
    </div>
</body>
</html>

八、表单标签

表单标签（from）用于向服务器提交信息

1.action：提交目标地址，没有填写内容代表当前页面地址

2.method：提交方法

get：参数拼接到请求地址后面?a=b&c=d，不安全

post：参数在载荷数据中，安全、数据量大

表单域（提交的各种信息）

1.input type：

text：输入文本；required，必填项；placeholder，提示信息；

password：输入密码

range：滑动

color：颜色

file：附件

radio：单选框（checked默认选中）

checkbox：复选框（checked默认选中）

2.select：

option 选项（selected默认选中）

multiple多选

3.textarea：多行输入框

表单按钮 input type

submit：提交信息，表单域内容要有name才会提交，选择的需要写value，输入的不需要写value

reset：重置内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 此前标签全部用于展示信息 -->
    <!-- 表单标签用于提交信息到服务器 -->
    <form action="http://httpbin.org/post" method="post">
        <div>
            <label for="un">用户名</label>  <input name="username" id="un" type="text">
        </div>
        <div>
            <label for="pws">密码</label>  <input name="password" id="pws" type="password">
        </div>
        <div>
            <span>性别</span>
            <label for="man">男</label>  <input name="sex" value="man" checked id="man" type="radio">
            <label for="women">女</label>  <input name="sex" value="women" id="women" type="radio">
        </div>
        <div>
            <span>爱好</span>
            <label for="eat">吃</label>  <input name="hobby" value="eat" checked id="eat" type="checkbox">
            <label for="playing">玩</label>  <input name="hobby" value="playing" id="playing" type="checkbox">
            <label for="sleep">睡</label>  <input name="hobby" value="sleep" id="sleep" type="checkbox">
        </div>
        <div>
            <span>年纪</span>  <input name="age" type="range" min="0" max="100" step="1">
        </div>
        <div>
            <span>颜色</span>  <input name="color" type="color">
        </div>  
        <div>
            <label for="more">附件</label>  <input name="file" id="more" type="file">
        </div>
        <div>
            <span>居住地址</span>
            <!-- select下拉选项 -->
            <select name="address">
                <option value="liyue" selected>璃月</option>
                <option value="fengdan">枫丹</option>
                <option value="zhidong">至冬</option>
            </select>
        </div>
        <div>
            <span>角色</span>
            <!-- select下拉选项 -->
            <select name="role" multiple="2">
                <option value="zl">钟离</option>
                <option value="x">魈</option>
                <option value="k" selected>空</option>
            </select>
        </div>
        <div>
            <span>多行输入框</span>
            <textarea name="info" cols="10" rows="10"></textarea>
        </div>
        <div>
            <!-- <input type="submit" value="注册"> -->
            <input type="reset" value="清空">
            <button type="submit">注册</button>
        </div>
    </form>
</body>
</html>

九、标准属性

1.id：页面内唯一，不能以数字开头

2.class：一个标签可以有多个类名，同一个类名可以出现在多个标签

3.style：样式属性

4.name：标签名字

5.title：鼠标划入提醒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <!-- div>span*4.span$>{span$} -->
        <h3>id在页面内必须唯一</h3>
        <span id="span1">span</span>
        <span id="span2">span</span>
        <span id="span3">span</span>
        <span id="span4">span</span>
    </div>

    <div>
        <!-- div>span*4.span.span$>{span$} -->
        <h3>一个标签可以有多个类名 同一个类名可以在多个标签出现</h3>
        <span class="span apan1">apan1</span>
        <span class="span apan2">apan2</span>
        <span class="span apan3">apan3</span>
        <span class="span apan4">apan4</span>
    </div>

    <div>
        <!-- div>span*4>{span$} -->
        <h3>style属性用于控制样式</h3>
        <span style="color: black;">span1</span>
        <span style="color: khaki;">span2</span>
        <span style="color: gray;">span3</span>
        <span style="color: aquamarine;">span4</span>
    </div>

    <div>
        <span name="span1" title="span1">span1</span>
        <span name="span2" title="span2">span2</span>
        <span name="span3" title="span3">span3</span>
        <span name="span4" title="span4">span4</span>
    </div>
</body>
</html>