【Django】前端技术HTML常用标签(开发环境vscode)

安装两个常用插件

html previewopen in browser
在这里插入图片描述
在这里插入图片描述

HTML常用标签

定义文档类型DOCTYPE

网页的结构html/head//title/body/div

<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="UTF-8">
        <title>Html常用标签</title>
    </head>

    <body>
    </body>

</html>

标题h1/h2/h3/h4/h5

        <h1>这是一级标题</h1>
        <h2>这是二级标题</h2>
        <h3>这是三级标题</h3>
        <h4>这是四级标题</h4>
        <h5>这是五级标题</h5>
        <h6>这是三级标题</h6>

在这里插入图片描述

分割线hr

        <h2>下面是分割线</h2>
        <hr>
        <h2>上面是分割线</h2> 

在这里插入图片描述

段落 p

  <p>这是一个段落,是HTML(HyperText Markup Language,超文本标记语言)中的一个元素,用于定义HTML文档中的段落。</p>
  <p>当你在HTML文档中使用标签时,它告诉浏览器:“这是一个段落的开始和结束”。浏览器会在段落的开始和结束之间添加一些垂直的间距(margin),以区分不同的段落。</p>

在这里插入图片描述

列表ul/li,ol/li

              <ol>
                <li>打开你的电脑。</li>
                <li>启动你最喜欢的浏览器。</li>
                <li>访问你最喜欢的网站。</li>
                <li>享受你的在线时光。</li>
              </ol>
              <ul>
                <li>苹果</li>
                <li>香蕉</li>
                <li>橙子</li>
                <li>葡萄</li>
              </ul>

在这里插入图片描述

超链接a

          <!-- 在本窗口打开链接 -->
<a href="https://www.example.com" target="_self">在本窗口打开 Example.com</a>
<br>
<!-- 在新窗口打开链接 -->
<a href="https://www.example.org" target="_blank">在新窗口打开 Example.org</a>

在这里插入图片描述

文本span

标签是一个内联元素,用于对文档中的一小块内容进行分组或应用样式。它本身不会带来任何特殊的视觉效果,但它可以与 CSS 一起使用来修改内容的外观。

<head>
    <title>Span 标签示例</title>
    <style>
        /* 使用 CSS 为 span 标签添加样式 */
        .highlight {
            color: red; /* 文本颜色 */
            font-weight: bold; /* 字体加粗 */
        }
    </style>
</head>
<body>

<p>这是一段文本,其中包含了一个 <span class="highlight">高亮显示</span> 的单词。</p>
</body>

在这里插入图片描述

图片img

<img src="images/hn.png" width="50%" height="auto">

在这里插入图片描述

按钮button

 <button>我是一个按钮</button>

在这里插入图片描述

表格table(table、tr、th、td)

    <table border="1">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>1000</td>
        </tr>
    </table>

在这里插入图片描述

表单form

    </head>
    <body>
        <form method="post" action="/add">
            姓名:<input type="text" name="name" />
            <br>
            姓别:
            <select>
                <option name="boy"></option>
                <option name="girl"></optin>
            </select>
            <br>
            <br>
            <br>
            个人简介:
            <textarea name="description"></textarea>

            <br>
            <br>
            科目:
            语文<input type="radio" name="subjects" value="语文">
            英语<input type="radio" name="subjects" value="英语">
            <br>
            <br>
            爱好:
            篮球<input type="checkbox" name="hobby" value="篮球">
            足球<input type="checkbox" name="hobby" value="足球">
            乒乓球<input type="checkbox" name="hobby" value="乒乓球">
            <br>
            <br>
            <input type="submit" name="submit" value="提交" />
        </form>
    </body>

在这里插入图片描述

  • 纯文本输入input
姓名:<input type="text" name="name"/>

在这里插入图片描述

  • 下拉select
    姓别:
    <select>
        <option name="boy"></option>
        <option name="girl"></optin>
    </select>
</body>

在这里插入图片描述

  • 区域输入textarea
    个人简介:
    <textarea name="description"></textarea>

在这里插入图片描述

  • 单选radio
    科目:
    语文<input type="radio" name="subjects" value="语文">
    英语<input type="radio" name="subjects" value="英语">

在这里插入图片描述

  • 多选checkbox
 爱好:
    篮球<input type="checkbox" name="hobby" value="篮球">
    足球<input type="checkbox" name="hobby" value="足球">
    乒乓球<input type="checkbox" name="hobby" value="乒乓球">

在这里插入图片描述

  • 提交submit
    <input type="submit" name="submit" value="提交"/>

在这里插入图片描述

  • 33
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值