html常用标签

链接

通过<a href='url'>your msg</a>进行链接，href属性中指定链接地址。

在网站内部，必然存在大量转跳，就需要a标签。

<a href="{% url 'test_url_1' %}">this is test_url_1 test</a>
<a href="{% url 'test_url_2' %}">this is test_url_2 test</a>

　　

段落

<p>xx</p>实现段落

没有段落，这两个链接就在一行上，加上段落就分为两段

<p><a href="{% url 'test_url_1' %}">this is test_url_1 test</a></p>
<p><a href="{% url 'test_url_2' %}">this is test_url_2 test</a></p>

　　

无序列表

无序列表始于 <ul> 标签。每个列表项始于 <li>

<ul class="nav child_menu">
    <li><a href="#">用户信息</a></li>
    <li><a href="#">用户组信息</a></li>
    <li><a href="#">用户登录信息</a></li>
</ul>

　　

换行

使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。

以下代码会显示为‘第一行 第二行’

<p>
    第一行
      第二行
</p>

　　

要正确显示，需要使用换行符

<p>
    第一行<br>
    第二行<br>
    <br>
    end
</p>

　　

要显示多个空格，就要使用专门的符号

&nbsp

 

图片

<img>实现图像

比如用户名和调用头像，就需要图像，并且设置大小

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址

alt 属性用来为图像定义一串预备的可替换的文本，在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息

<img src="/static/img/avatar2.jpg" width="110" height='100'>

　　

标题

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

<h1> 定义最大的标题。<h6> 定义最小的标题。

请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。

 

<div>

div用于页面布局，和css一起使用，可以对内容块进行样式设置

<span>

div是块级标签，span是行级标签

<span> 用于对文档中的行内元素进行组合。

<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。

<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p> 

　　

class

对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。

为相同的类设置相同的样式，或者为不同的类设置不同的样式。

<div class="nav_jab">
    <ul>
        <li><a href="#">用户信息</a></li>
        <li><a href="#">用户组信息</a></li>
        <li><a href="#">用户登录信息</a></li>
    </ul>
</div>

　　

.nav_jab {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
}