本文详细介绍了HTML中常见的标签如单双标签、编码标签、标题标签、div和span、超链接、图片、列表、表格、input表单元素、下拉框、多行文本框和form标签的用法及属性。此外，还提到了HTML和CSS的关系以及表单提交的基本原理。
目录
单标签和双标签
- 单标签
单标签顾名思义指只有一个标签，通常表示为<标签名>
- 双标签
双标签顾名思义有两个标签，通常表示为<标签名></标签名>
- 以上标签名可以自定义，为普通标签
编码标签
<meta charset="UTF-8">-
<meta>标签
- 位于<head>元素内，通常用于被机器解析不会出现在页面上
- 一个文档中可以有多个meta元素
- 单标签
- <meta>标签属性
- charset：反映的是该程序的编码属性，其中utf-8是HTML5文档的唯一有效编码，其中不区分大小写
title标签
<title>lingdang</title>- 双标签
- 在标签内部写下标题内容可以呈现在页面的标题上，最后呈现效果如图
- 只能在<head>双标签中使用
标题标签
<h1>这是一级标签</h1>
<h2>这是二级标签</h2>
<h3>这是三级标签</h3>
<h4>这是四级标签</h4>
<h5>这是五级标签</h5>
<h6>这是六级标签</h6>- 在<body>双标签中使用，每一级标签呈现的大小粗细不同，效果如图
div和span标签
- 都为双标签，在<body>双标签中使用
- div：块级标签，一个标签占一行
- span：行内标签、内联标签，内容有多大就占多大
- 这两个标签默认比较简单，后续将会利用css进行修饰，这两个标签使用较多
<body>
<div>ling</div>
<div>dang</div>
<span>ling</span>
<span>dang</span>
</body>效果图：
超链接标签
在<a></a>标签中使用href属性进行跳转
a标签属于行内标签
<body>
<a href="https://www.baidu.com">ling dang</a>
</body>此时标签中的ling dang为页面显示的内容，href为超链接的属性，当点击页面内容时会自动跳转到指定的超链接中，效果如下：
点击内容将跳转到百度中
- 若想要跳转时候生产新的页面可以在<a>标签中使用target属性使其为_blank，则可以生成新的页面
-
<a href="https://www.baidu.com" target="_blank">ling</a>
img标签
<body>
<img src="图片地址" />
</body>- 图片地址可以直接应用网页中图片的地址（有风险）
- 图片地址可以显示自己的图片
- 在项目中创建static目录中，该目录用于放图片。
<body>
<img src="../static/1.png" />
</body>这里的../表示上层目录，目录结构如下
- 相关属性
- style，风格可以定义图片的宽度高度，每个格式用分号隔开
<body>
<img style="height: 300px" src="../static/1.png" />
</body>效果图如下
列表标签
无序列表
无序列表用双标签<ul>表示，其中每一项用<li>表示，<li>也是一个块级双标签，其中两个标签嵌套使用
<ul>
<li>apple</li>
<li>orange</li>
<li>pear</li>
</ul>呈现效果如下
有序列表
无序列表用双标签<ul>表示，其中每一项用<li>表示，其中两个标签嵌套使用
<body>
<ol>
<li>apple</li>
<li>orange</li>
<li>pear</li>
</ol>
</body>呈现效果如下
表格标签
<table>双标签表示表格，表格中嵌套较多，注意使用
- 表头用<thead>双标签
- 表的内容用<tbody>双标签
- <tr>双标签代表一行
- <th>双标签表示某行的列，常常与<tr>嵌套使用
- border：<table>标签的属性，表示表格的边框
<body>
<table border="1">
<thead>
<tr><th>fruit</th><th>price</th></tr>
</thead>
<tbody>
<tr><th>apple</th><th>12</th></tr>
<tr><th>pear</th><th>15</th></tr>
<tr><th>orange</th><th>14</th></tr>
</tbody>
</table>
</body>结果显示如下：
input标签
- 表单标签lable与input标签联合使用用于在页面中显示文本框使用户输入
- 使用属性type指定相关形式
- text：文本框
- password：密码框，与文本框相似，但输入后会隐藏
- radio：单选框，多个使用使name属性相同，可以实现相互排斥，同时name与value进行使用将name：value值传入后端中
- checkbox：复选框，多个复选框不会相互排斥，同时name与value进行使用将name：value值传入后端中
- file：选择文件按钮
- button：按钮，可以使value来指定显示名字，默认不显示
- submit：提交按钮，提交表单的按钮
- input的属性
- type：input的类型
- name：基于input输入字符串后的名字
- id：每个值的id号，相当于身份证
演示代码如下：
<body>
<label>
这是一个文本框：
<input type="text">
<br>
这是一个密码框：
<input type="password">
<br>
这是一个单选框：
<input type="radio" name="1">
<input type="radio" name="1">
<br>
这是一个复选框：
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<br>
这是一个文件按钮：
<input type="file">
<br>
这是一个按钮：
<input type="button" value="button">
<br>
这是一个提交按钮
<input type="submit">
<br>
</label>
</body>演示效果图如下：
下拉框
下拉框是select和option两个双标签联合使用的，其中select表示一个下拉框，option表示下拉框中显示的元素，当加上属性multiple时可以多选（多选按住ctrl或shift）
同时在select中与属性name使用，在option标签中与value进行使用将name：value值获得后可以传入后端中。
演示代码如下：
<body>
<label>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select multiple>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</label>
</body>演示效果图如下：
多行文本
textarea双标签，用于实现文本框多行输入，并且该文本框将可以进行文本框长宽的拖拉
演示代码如下：
<body>
<label>
<textarea></textarea>
</label>
</body>演示效果图如下：
form标签
作用：将用户在游览器上输入的数据提交到后台，需要用form标签进行包裹，通常将input标签包裹在form标签中，重要属性如下：
- form标签中必须有一个submit标签
- 提交方式：method=get/post
get和post的区别可以参考文章：
- 提交地址：action="地址"，点击提交后，将跳转到该页面
- 提交后会在py文件中所对应的地址app.route上传送输入的数据
- 在py文件时如何使用html传递过来的数据？
- 利用request库进行html用户的使用，详见文章http://t.csdnimg.cn/2ayjL
- 在py文件时如何使用html传递过来的数据？
标签可以嵌套使用
大多数标签都可以加相关属性去修改样式，涉及css这个后续文章中会讲到
扫一扫
945
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
