html基础-标签
Posted dugd
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html基础-标签相关的知识，希望对你有一定的参考价值。
html 页面跟标签：<html 页面跟标签lang=‘zh’告诉浏览器页面语言为中文></html>
head 头标签：页面编码、页面标签标题、页面样式、页面脚本
<head> <!--页面编码--> <meta charset="utf-8"> <!--页面标签标题--> <tItlE>标签</tItlE> <!--页面样式--> <style></style> <!--页面脚本--> <script></script> </head>
body 体标签 ：页面内容、页面脚本，用于内容显示的标签全部书写在body中
标题：h1~h6
<h1 id="top">一级标题</h1> <!-- 一般一个页面只出现一次，代表该页面的主内容解释 --> <h2>二级标题</h2> <h6>六级标题</h6>
段落p标签：<p>段落</p>
文本相关：一般会被p标签嵌套
加粗标签b：
<b>加粗标签</b>
效果：加粗标签
以加粗方式强调的标签：strong
<strong>以加粗方式强调的标签</strong>
效果：以加粗方式强调的标签
斜体标签：i
<i>斜体标签</i>
效果：斜体标签
以斜体方式强调的标签：em
<em>以斜体方式强调的标签</em>
效果：以斜体方式强调的标签
上角标、下角标：sup、sub
<sup>上角标</sup> <sub>下角标</sub>
效果：上角标 下角标
功能标签
换行：<br />
分割线：<hr>
超链接：<a href="域名" target="_self">用户看到的</a>
例：<a href="https://www.baidu.com" target="_self">前往百度</a>
ps：target="_self"表示在当前页面打开，target="_blank"在新页面打开
图片标签：< img src：图片源 alt：资源加载失败的文本提示 title：鼠标悬浮的文本提示 >
例：<img title="你是它" alt="二哈" src="https://ss3.bdstatic.com /70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1925405117,207445978&fm=26&gp=0.jpg">
组合标签
列表：
无序列表ul：
<ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul>
效果：
- 列表项
- 列表项
- 列表项
有序列表：ol
<ol> <li>第1项</li> <li>第2项</li> <li>第3项</li> </ol> 效果： 1.第1项 2.第2项 3.第3项
表格标签
tr: 行 th: 标题单元格 td：内容单元格 cellpadding:单元格内部间距 cellspacing：单元格间的间距
<table border="1" width="500" height="300" cellpadding="10" cellspacing="0"> <thead> <tr > <th>标题</th> <th>标题</th> <th>标题</th> </tr> </thead> <tbody> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr>
效果：
| 标题 | 标题 | 标题 |
|---|---|---|
| 单元格 | 单元格 | 单元格 |
<table border="1" width="500" height="300" cellpadding="10" cellspacing="0"> <thead> <tr style="height: 50px"> 限制标题框行高 <th>标题</th> <th>标题</th> <th>标题</th> </tr> </thead> <tbody> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td colspan="2">单元格</td> 行合并单元格 <!--<td>单元格</td>--> <td rowspan="2">单元格</td> 列合并单元格 </tr> <tr> <td>单元格</td> <td>单元格</td> <!--<td>单元格</td>--> </tr> </tbody>
效果：
| 标题 | 标题 | 标题 |
|---|---|---|
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | |
| 单元格 | 单元格 | |
表单标签: 完成前后台交互的 - 将前台用户输入的内容提交给后台
form action：提交后台的接口地址 method：提交方式 get 、post
在客户机和服务器之间进行请求-响应时，两种最常被用到的方法是：get 和 post
GET - 从指定的资源请求数据
POST - 向指定的资源提交要被处理的数据
GET 方法
注意查询字符串（名称/值对）是在 GET 请求的 URL 中发送的：
例如：file:///G:/study/7.1/01.html?user=213123&sex=on&cless=on&like=m&like=f
POST 方法
注意查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的：
POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2
input：name明确才会往后台提交，name是键，value是值(可以手动规定也可以用户输入)
<form action="" method=""> <input type="text" name="user" placeholder="文本占位符"> <input type="password"> <input type="color"> <input type="number"> <!--提交文件--> <input type="file">
效果：
单选框：radio
男<input type="radio" name="sex" checked> checked为默认选项 女<input type="radio" name="sex"> 一班<input type="radio" name="cless"> 二班<input type="radio" name="cless" checked>
效果：
复选框：checkbox
男<input type="checkbox" value="m" name="like" checked> 女<input type="checkbox" value="f" name="like" checked> 人妖<input type="checkbox" value="mf" name="like">
效果：
选择列表 ：multiple
<select name="subject" multiple> <option value="chinese">语文</option> <option value="math">数学</option> <option value="python">python</option> </select>
效果：
文本域：textarea
<textarea>填充文本</textarea>
效果：
三个按钮
<button type="button">按钮</button> <button type="reset">重置</button> <button type="submit">提交</button>
<input type="submit" value="登陆">
效果：
以上是关于html基础-标签的主要内容，如果未能解决你的问题，请参考以下文章