html各种标签及部分样式、属性

最新推荐文章于 2024-02-10 05:15:00 发布

几度思量

最新推荐文章于 2024-02-10 05:15:00 发布

阅读量836

点赞数 1

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/one_ouu/article/details/93743625

版权

前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

公司项目需要，本人要做一些前端项目，拿起一些前端的bootstrap等包来用的时候发现应用的乱七八糟的，所以打算从基础开始，好好理解下前端，本篇是html的部分标签，下一章再了解CSS，因为是理解html标签，所以没有做成一个完整的项目，只是零散的应用，不过也便于以后自己开发过程中查看

<!DOCTYPE html>
<!--告诉浏览器我是用html写的-->
<html>

<head>这是一个head</head>
<!--告诉浏览器本html的编码方式，否则浏览器会按照其默认方式解码，可能导致乱码-->
<meta charset="utf-8">


<body>
    <h1>一级标题，h会单独占据一行</h1>
    <!--b标签表示加粗，i表示斜体-->
    <p>
        这是<b>第一段<i>文字</i></b><br>br会在一段中进行换行，p是分段<br>
        <tt>tt会标识为打印文字</tt><br>
        <small>small会将字体变小</small>
        <del>这是我删除的（结构，不单单是删除线格式）</del><ins>这个文字是我加上的（结构，不单单是下划线结构）</ins>
        <s>表示内容是过时的，不被使用的，不是删除</s><br>
        a<sup>2sup上标</sup>+<sub>b0sub下标</sub>
        <!--上标下标可以嵌套使用--><br>
        <mark>mark标记高亮文字</mark>
        <em>em强调文字，表示很重要</em><br>
        <strong>strong强调文字，表示着重</strong><br>
        <dfn>definition 定义</dfn><br>
        <code>
            code代码（这里在源文件中有回车）
            不会保留原有的换行格式
        </code><br>
        <samp>sample 例子代码</samp><br>
        <kbd>kbd 用户输入的文字</kbd><br>
        <var>variable 变量</var><br>
        <cite>cite 引用的文字</cite><br>
        <code>
            <pre>
                pre中的格式不会被html格式化，原本格式里的换行也会被保留
                很适合用于输入大段的源代码
            </pre>
        </code>

    </p>

    <address>
        <blockquote>
            <!--blockquote 缩进-->
            Rm 401 CKP West Wing<br>
            <blockquote> 羽泉 Camps<br></blockquote>
            <q>浙江 U q标识引用</q>
        </blockquote>

        <!-- address 不仅仅显示在页面，会被浏览器识别，可以作为检索的一部分 -->
    </address>
    <p title="123456" id="there">
        title可以放入章节和h中<br>
        标签属性学习,属性最好在css中用
        <hr width=50%>hr插入水平线
        <hr width="50" align="left" size=10> 50像素
        <abbr title="这是？就叫它备注？">请把鼠标放到我身上</abbr><br>
        <bdo dir=rtl>这段文字的dir是rtl,rtl表示从右向左排序<bdi>bdi会把颠倒的顺序颠倒回来</bdi>
        </bdo>
        <UL>UL标签创建一个没有序号的列表
            <LI>123</LI>
            <LI>123</LI>
            <LI>123</LI>
        </UL>
        <ol start="-1">ol会自动为列表加上序号,start属性指定序号从几开始
            <li>123</li>
            <LI>123</LI>
            <LI>123</LI>
        </ol>

        <dl>dl标签可以理解为字典
            <dt>dt表示一个词条</dt>
            <dd>dd表示词条的解释</dd>
        </dl>
    </p>
    对于html来说，图片是一个特殊的字符，会和前后文字连接<br>
    <img src="http://img5.imgtn.bdimg.com/it/u=3987907653,720009510&fm=26&gp=0.jpg" alt="图片加载过程中会出现alt属性中的文本"
        usemap="#map" />
    <map name="map">
        在图片的coords区域点击，会跳转到超链接
        <area shape="rect" coords="0,0,50,50" href="https://blog.csdn.net/yun8686/article/details/82118602" />
    </map>
    <iframe src="http://www.baidu.com" height="400" width="1000">iframe能将另一个网页嵌入到当前网页</iframe><br>


    <p>
        <a href="https://gitee.com/Echoe/events" target="_blank">这是一个gitee的超链接，点击一下试试吧,target属性可以更改页面出现方式</a>
        <a href="#there">这是一个页面内链接</a>
    </p>

    <p>
        <table border="1">
            <caption>caption中写表头</caption>
            <thead>
                <!--t head--表格标题，能被浏览器认定为表的标题，无论怎么翻转，标题都会留在上面-->
                <tr>
                    <th>这是一个标题tableHead</th>
                    <th>这是另一个标题tableHead</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <!-- tr表示一行 -->
                    <td>
                        <!--td表示一行中的一个格子-->
                        第一个格子
                    </td>
                    <td>这是第二个格子</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3">colspan表示水平方向延展多少个格子</td>
                </tr>
            </tfoot>




        </table>
    </p>

</body>

</html>

几度思量

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html各种标签及部分样式、属性

公司项目需要，本人要做一些前端项目，拿起一些前端的bootstrap等包来用的时候发现应用的乱七八糟的，所以打算从基础开始，好好理解下前端，本篇是html的部分标签，下一章再了解CSS，因为是理解html标签，所以没有做成一个完整的项目，只是零散的应用，不过也便于以后自己开发过程中查看<!DOCTYPE html><...
复制链接

扫一扫