欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML常用标签属性的使用

程序员文章站 2022-04-27 23:42:58
...

HTML常用标签属性的使用

在编写html代码过程中，作为小白，经常会遇到忘记某个标签如何使用的问题，特在此总结了常用标签的使用，以及部分常用属性：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML常用标签</title>

    <style>
        /* 内部CSS样式 */
    </style>

    <!-- 引入外部CSS样式 -->
    <link rel="stylesheet" href="MyTest.css">

    <!-- 引入外部icon图标 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

    <!-- 引入网页小图标 -->
    <link rel="icon" href="img/logo.png">

</head>

<body>

    <!-- 页眉 -->

    <head>

        <!-- 导航栏 -->
        <nav></nav>

    </head>

    <!-- 页面主体 -->
    <main>

        <aside></aside>

        <article></article>

    </main>

    <!-- 页脚 -->
    <footer></footer>

    <!-- 注意：很多标签都可以设置行内样式，style="" -->
    <div></div>
    <span></span>
    <p></p>
    <h1 style="font-weight: 300;"></h1>

    <!-- 插入视频 -->
    <video controls>
        <source src="F:\Pictures\视频\Dog.mp4" type="video/mp4"/>
        <source src="F:\Pictures\视频\Dog.mp4" type="video/flv"/>
    </video>

    <!-- 插入音频 -->
    <audio controls>
        <source src="F:\Pictures\录音\一生有你.m4a" type="audio/mp3"/>
        <source src="F:\Pictures\录音\一生有你.m4a" type="audio/m4a"/>
    </audio>


    <!-- 显示字体 -->
    <!-- bold -->
    <b>粗体</b><br/>
    <strong>粗体</strong><br/><br/>

    <!-- italic -->
    <i>斜体</i><br/>
    <!-- emaciate -->
    <em>斜体</em><br/><br/>

    <code>电脑自动生成</code><br/><br/> X

    <sub>1</sub>+X<sup>2</sup>=Y

    <!-- 显示全称 -->
    <abbr title="World Wide Web">WWW</abbr>


    <!-- 超链接   a:里面用href,css也是用href;  img,script用src-->
    <a href="#" target="_block"></a>

    <!-- 插入图片 -->
    <img src="">

    <!-- 行内样式 > 内部样式 > 外部样式 -->
    <!-- 行内样式 -->
    <h1 style="background: #000066;">heading</h1>


    <!-- 选择器 -->
    <!-- id选择器 -->
    <h1 id="heading-one">标题一</h1>
    <h1>标题二</h1>

    <!-- 类选择器 -->
    <h1 class="heading">标题一</h1>
    <h1>标题二</h1>

    <!--错误： id不能重复，类可以写多个 -->
    <h1 id="heading">标题一</h1>
    <h1 id="heading">标题二</h1>

    <!-- h1 strong 表示所有后代 -->
    <!-- h1 > strong 表示 子集，孙子集没用-->
    <!-- h1 + h1 表示只约束后面的人 ：+，> 必须有两个操作数-->
    <!-- h1:hover 表示鼠标划过h1时变色 -->
    <!-- h1:first-chid 第一个孩子 -->
    <!-- h1:last-child 最后一个孩子 -->
    <!-- h1:nth-child(2) 第几个孩子，下标从1开始-->
    <!-- 也有优先级，类的大于直接使用此标签；
    标签相同时，后面的会覆盖前面的 -->


    <!-- 表格 -->
    <table>

        <!-- 表头，表头的颜色会比表格的颜色深一点儿 -->
        <th></th>

        <!-- 表格的页眉 -->
        <thead>

            <!-- 表格的行 -->
            <tr style="background: #bbb;">

                <!-- 表格的列 -->
                <td></td>

            </tr>

        </thead>

        <!-- 表格的主体 -->
        <tbody></tbody>

        <!-- 表格的页脚 -->
        <tfoot></tfoot>

    </table>

    <!-- 表单 -->
    <form method="GET" action="haha">

        <!-- 文本域 -->
        <textarea class="text"></textarea>

        <!-- input的type可以为很多类型：
            text(文本)
            radio(单选框)
            checkbox(复选框)
            button(按钮)
            password(密码)
            number
            file
            reset
            submit
            search
            image
            time
            week
            date
            color
            hidden(隐藏)
            tel
            url
        -->
        <input type="">
        <input type="file" value="请选择文件" size="100px" contextmenu="请选择文件">

        <!-- input和label标签一起用，可以满足点击文字时光标会移动到文本框中 -->
        <input id="#">
        <label for="#"></label>

        <!-- button的type类型可以是：
            submit
            reset
            button
            menu
        -->
        <button type="" style="color: blue;"></button>

        <!-- 下拉框 -->
        <select>
            <option value="查看">查看</option>
            <option value="增加">增加</option>
        </select>

    </form>

    <!-- 自定义列表:不带前面的索引 -->
    <dl>
        <dt></dt>
        <dt></dt>
    </dl>

    <!-- 无序列表 -->
    <ul>
        <li></li>
        <li></li>
    </ul>

    <!-- 有序列表 -->
    <ol>
        <li></li>
        <li></li>
    </ol>

    <!-- html+css常用属性：
        background

        border:1px dashed #000000;

        border-collapse: collapse; (使表格塌陷，合并表格)

        box-sizing : border-box;

        clear:left/right;(清除浮动)

        color

        (将 块级元素 设置为 行内块)
        display: inline-block;

        (浮动的整体内容：
            display:flex;
            flex-flow:row nowrap;
            align-items:flex-start/stretch/center;
            justify-content:flex-end/center(注意：justify-content没有stretch值);
        )

        font-style

        font-family

        font-size

        float:left/right;(浮动)

        /* 除了flex属性放在内容box上，管理内容缩放； 其它的都放在容器container上 ，管理内容布局的*/
        /* 等比例分配 :一个缩，一个放    第一个放，第二个缩 */
        flex: 1 1 auto;
        /* 1 表示放，但不会缩 */
        flex-grow: 1;
        /* 1 表示缩，但不会放 */
        flex-shrink: 1;

        flex:1 1 auto;(自动伸缩)

        height

        length

        letter-spacing

        line-height

        list-style:none;

        margin

        opacity

        overflow: hidden/auto;

        position

        padding

        text-align(块内元素，center)

        text-color

        text-decoration:none;

        (渐变效果)
        color: lightsalmon;
        /* 渐变色 */
        transition: color 5s;    
        transform:translate(100px,100px);
        text-transform: uppercase;
        text-decoration-color: midnightblue;

        url

        vertical-align(middle)

        width

        word-spacing

        z-index
    -->

</body>

</html>

在本小白的博客中，有总结的比较全面的思维导图，在此只总结了常用属性，作为日常使用；
小白一个，欢迎大佬指导！

相关标签： HTML属性 CSS属性 笔记 html css

上一篇： CSS选择器

下一篇： Vue初学时一些该注意的细节

推荐阅读