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

2024/10/24 11:18:58 来源：https://blog.csdn.net/xzzteach/article/details/140701336 浏览: 次关键词：【Django】前端技术HTML常用标签(开发环境vscode)

文章目录

- 安装两个常用插件
- HTML常用标签
- - 定义文档类型DOCTYPE
  - 网页的结构html/head//title/body/div
  - 标题h1/h2/h3/h4/h5
  - 分割线hr
  - 段落 p
  - 列表ul/li，ol/li
  - 超链接a
  - 文本span
  - 图片img
  - 按钮button
  - 表格table（table、tr、th、td）
  - 表单form

安装两个常用插件

html preview与open 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="提交"/>

在这里插入图片描述

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

文章目录

安装两个常用插件

HTML常用标签

定义文档类型DOCTYPE

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

标题h1/h2/h3/h4/h5

分割线hr

段落 p

列表ul/li，ol/li

超链接a

文本span

图片img

按钮button

表格table（table、tr、th、td）

表单form

相关资讯

热文排行

最新新闻

推荐新闻

热搜词