前端HTML常用的标签

最新推荐文章于 2023-12-14 17:04:35 发布

小袁一定能学好Python

最新推荐文章于 2023-12-14 17:04:35 发布

阅读量96

点赞数 1

文章标签：前端 html servlet

本文链接：https://blog.csdn.net/m0_48440506/article/details/129827643

版权

2:html常用的标签

2.1 编码（head）

<meta charset="UTF-8">

2.2 title（head）

<head>
   <meta charset="UTF-8">
   <title>我的联通</title>
</head>

2.3 标题

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>我的联通</title>
</head>
<body>
   <h1>1级标题</h1>
   <h2>2级标题</h2>
   <h3>3级标题</h3>
   <h4>4级标题</h4>
   <h5>5级标题</h5>
   <h6>6级标题</h6>
</body>
</html>

2.4 div和span

<div>内容</div>

<span>asdfa</span>

div，一个人占一整行。【块级标签】

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>我的联通</title>
</head>
<body>
   <div>山东蓝翔</div>
   <div>挖掘机哪家强</div>
</body>
</html>

span，自己多大占多少。【行内标签、内联标签】

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>我的联通</title>
</head>
<body>
   <span>山东蓝翔</span>
   <span>挖掘机哪家强</span>
</body>
</html>

注意：这两个标签比较素 + CSS样式。

2.4.5 超链接

跳转到其他网站
<a href="http://www.chinaunicom.com.cn/about/about.html">点击跳转</a>

跳转到自己网站其他的地址

<a href="http://127.0.0.1:5000/get/news">点击跳转</a>
<a href="/get/news">点击跳转</a>

# 当前页面打开
<a href="/get/news">点击跳转</a>

# 新的Tab页面打开
<a href="/get/news" target="_blank">点击跳转</a>

2.4.6 图片

<img src="图片地址" />

直接显示别人的图片地址（防盗链）：
<img src="https://pic4.zhimg.com/v2-b23f984c2aeaa7bed12e890b4338d499_720w.jpg" />

<img src="自己图片的地址" />
显示自己的图片：
- 自己项目中创建：static目录，图片要放在static
- 在页面上引入图片
    <img src="/static/wbq.png" />

关于设置图片的高度和宽度

<img src="图片地址" style="height:100px; width:200px;" />
<img src="图片地址" style="height:10%; width:20%;" />

小结

学习的标签

<h1></h1>
<div></div>
<span></span>
<a></a>
<img />

划分

- 块级标签
<h1></h1>
<div></div>
- 行内标签
<span></span>
  <a></a>
  <img />

嵌套

<div>
   <span>xxx</span>
   <img />
   <a></a>
</div>

2.4.7 列表

<ul>
   <li>中国移动</li>
   <li>中国联通</li>
   <li>中国电信</li>
</ul>

<ol>
   <li>中国移动</li>
   <li>中国联通</li>
   <li>中国电信</li>
</ol>

2.4.8 表格

<table>
   <thead>
   <tr>  <th>ID</th>  <th>姓名</th>   <th>年龄</th>  </tr>
   </thead>
   <tbody>
   <tr>  <td>10</td>  <td>武沛齐</td>  <td>19</td>   </tr>
       <tr>  <td>11</td>  <td>吴阳军</td>  <td>19</td>   </tr>
       <tr>  <td>12</td>  <td>刘东</td>  <td>19</td>    </tr>
       <tr>  <td>13</td>  <td>郭智</td>  <td>19</td>    </tr>
       <tr>  <td>14</td>  <td>电摩</td>  <td>19</td>    </tr>
   </tbody>
</table>

2.4.9 input系列（7个）

<input type="text" />
<input type="password">    
<input type="file"> 

<input type="radio" name="n1">男
<input type="radio" name="n1">女

<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">乒乓球
<input type="checkbox">棒球

<input type="button" value="提交"> -->普通的按钮
<input type="submit" value="提交"> -->提交表单

2.4.10 下拉框

<select>
   <option>北京</option>
   <option>上海</option>
   <option>深圳</option>
</select>

<select multiple>
   <option>北京</option>
   <option>上海</option>
   <option>深圳</option>
</select>

2.4.11 多行文本

<textarea></textarea>

案例：用户注册

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>


<h1>用户注册</h1>
<div>
  用户名：<input type="text"/>
</div>
<div>
  密码：<input type="password"/>
</div>

<div>
  性别：
   <input type="radio">男
   <input type="radio">女
</div>

<div>
  爱好：
   <input type="checkbox">篮球
   <input type="checkbox">足球
   <input type="checkbox">乒乓球
</div>

<div>
  城市：
   <select>
       <option>北京</option>
       <option>上海</option>
       <option>深圳</option>
   </select>
</div>

<div>
  擅长领域：
   <select multiple>
       <option>打游戏</option>
       <option>睡觉</option>
       <option>吃饭</option>
       <option>刷抖音</option>
   </select>
</div>

<div>
  备注：<textarea></textarea>
</div>

<div>
   <input type="button" value="button按钮">
   <input type="submit" value="submit按钮">
</div>
</body>
</html>

知识点回顾和补充

网站请求的流程

一大堆的标签

h/div/span/a/img/ul/li/table/input/textarea/select

网络请求
- 在浏览器的URL中写入地址，点击回车，访问。
```
浏览器会发送数据过去，本质上发送的是字符串：
"GET /explore http1.1\r\nhost:...\r\nuser-agent\r\n..\r\n\r\n"

浏览器会发送数据过去，本质上发送的是字符串：
"POST /explore http1.1\r\nhost:...\r\nuser-agent\r\n..\r\n\r\n数据库"
```
- 浏览器向后端发送请求时
  - GET请求【URL方法 / 表单提交】
    - 现象：GET请求、跳转、向后台传入数据数据会拼接在URL上。
```
https://www.sogou.com/web?query=安卓&age=19&name=xx
```
      注意：GET请求数据会在URL中体现。
  - POST请求【表单提交】
    - 现象：提交数据不在URL中而是在请求体中。

小袁一定能学好Python

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端HTML常用的标签

11</td> <td>吴阳军</td> <td>19</td> </tr><tr> <td>12</td> <td>刘东</td> <td>19</td> </tr><tr> <td>13</td> <td>郭智</td> <td>19</td> </tr><tr> <td>10</td> <td>武沛齐</td> <td>19点击跳转
复制链接

扫一扫