小辉python
posts - 50,comments - 0,views - 22306
前端——HTML

HTML介绍：

web服务的本质就是

浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面；

其实简单的来说就是

1. 浏览器 给服务端 发送了一个消息
2. 服务端拿到消息
3. 服务端返回消息
4. 浏览器展示页面

 HTTP协议：浏览器和服务器之间约定好的消息格式，便于接收； 就像 在本地上写的client和sever端是一样的，我知道client发什么，然后sever端就接收什么；同样HTTP协议正是浏览器和sever端之间的传输的一种消息的格式；是浏览器自带的；

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import socket
sk= socket.socket()
sk.bind(('127.0.0.1',8080))
 
sk.listen(5)
 
while True:
    conn,addr = sk.accept()
    conn.recv(1024)
    #要按照HTTP协议的格式来发消息，这样浏览器才能接收到；
    conn.send(b'HTTP/1.1 200 OK\r\n\r\n')
    with open('data.html','rb') as f:  #浏览器传输的数据都是以字节位单位的.
        msg = f.read()
    conn.send(msg)
 
    conn.close()

　

HTML是一种用于创建网页的标记语言，不是编程语言，因此HTML语言是没有逻辑性的，只是 使用标签来描述网页。

本质上是浏览器可识别的规则，按照HTML的规则去写网页，则浏览器会渲染我们的网页。

 

最基本的HTML文档：

?
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>
<body>
 
</body>
</html>

1 <!DOCTYPE html>声明为HTML5文档。

2 <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。

3 <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。

4 <title>、</title>定义了网页标题，在浏览器标题栏显示。

5 <body>、</body>之间的文本是可见的网页主体内容。

注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

HTML标签的格式：

标签分类:
双标签  <div>和</div>
单标签  <br/>、<hr/>；<img src="1.jpg" />

对应的标签的语法:

  • <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
  • <标签名 属性1=“属性值1” 属性2=“属性值2”…… />

几个很重要的属性：

  • id：定义标签的唯一ID，HTML文档树中唯一
  • class：为html元素定义一个或多个类名（classname）(CSS样式类名)
  • style：规定元素的行内样式（CSS样式）

HTML的注释：

　　<!-- 注释内容 -->

HTML常用的标签：

head 内常用标签：

标签意义
<title></title> 定义网页标题
<style></style> 定义内部样式表
<script></script> 定义JS代码或引入外部JS文件
<link/> 引入外部样式表文件
<meta/> 定义网页原信息

Meta 标签

?
1
2
3
4
<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8"> #通常http-equiv="content-Type"不写

　　

name属性：主要用于描述网页，主要是为了爬虫，查找消息和分类消息用的

?
1
2
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩教育Python学院">

　

head 内常用标签：　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
 
<p>段落标签</p>
 
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
 
<!--换行-->
<br>
 
<!--水平线--><hr>

 

特殊字符：

内容对应代码
空格 &nbsp;
> &gt;
< &lt;
& &amp;
¥ &yen;
版权 &copy;
注册 &reg;

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<!--zh-CN中文-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>第一个html</title>
</head>
<body>
<!--   h1标签就是字体变大和加粗,数字越小越大-->
<!--img标签里面的src= 为图片的地址; alt=  是当图片加载不出来后给用户的一个反馈 , title= 是当移动到图片的时候出现的文字-->
<h1>©为小米  而生</h1>
    <p>小米是谁，是你你你</p>
    <p>小米是谁，是你你你</p>
 
<!--无序的列表-->
<div>
    <ul type="none">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
</div>
 
 
<!--有序的列表-->
<ol type="I" start="1">
    <li>
        <a href="">1</a>
    </li>
    <li>2</li>
</ol>
 
<!--表格-->
<table border>
    <thead>
    <tr>
        <th> name </th>
        <th> age  </th>
        <th> sex  </th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td> zh  </td>
        <td> 23  </td>
        <td> men </td>
    </tr>
    </tbody>
</table>
<!--<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3737863257,3043102048&fm=26&gp=0.jpg" alt="德莱文"-->
     <!--title="德莱文">-->
<!--a标签里面的 href=是相当于链接，后面起名字来表示此链接，target="_blank"，表示 链接 在新的窗口来弹出,
target="_self"表示 本网页 跳转到 链接 -->
<a href="https://www.baidu.com" target="_self">百度</a>
 
 
 
</body>
 
</html>
 
<!--h1*5>a>i{a$}-->
<!--<h1><a href=""><i>a1</i></a></h1>-->
<!--<h1><a href=""><i>a2</i></a></h1>-->
<!--<h1><a href=""><i>a3</i></a></h1>-->
<!--<h1><a href=""><i>a4</i></a></h1>-->
<!--<h1><a href=""><i>a5</i></a></h1>-->
 
<!--h1*4>a.c1[id=a$]{a标签$}-->
<!--<h1><a href="" class="c1" id="a1">a标签1</a></h1>-->
<!--<h1><a href="" class="c1" id="a2">a标签2</a></h1>-->
<!--<h1><a href="" class="c1" id="a3">a标签3</a></h1>-->
<!--<h1><a href="" class="c1" id="a4">a标签4</a></h1>-->

　　

列表：

1.无序列表中的type属性:

  • disc（实心圆点，默认值）
  • circle（空心圆圈）
  • square（实心方块）
  • none（无样式）

2.有序列表中的type属性:

  • 1 数字列表，默认值
  • A 大写字母
  • a 小写字母
  • Ⅰ大写罗马
  • ⅰ小写罗马

3.标题列表

?
1
2
3
4
5
6
7
<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

表格的属性：

  • border: 表格边框.
  • cellpadding: 内边距
  • cellspacing: 外边距.
  • width: 像素 百分比.（最好通过css来设置长宽）
  • rowspan: 单元格竖跨多少行
  • colspan: 单元格横跨多少列（即合并单元格）

 

 

标签分类:
1.块儿级标签  h1~h6 div p hr  li ；默认占浏览器宽度，能设置长和宽
2.内联标签(行内标签)  a img u s i b span；根据内容决定长度，不能设置长和宽


标签的嵌套规则
1. 行内标签不能嵌套块级标签
2. p标签不能嵌套块级标签

 

Form 表单

功能：

表单 用于向服务器传输数据（method = POST），从而实现用户与Web服务器的交互

表单如下几个标签:

input系列；textarea(大端文本); select(下拉框); label 标签 等;

表单的属性

属性描述
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。

 

input标签系列

text 单行输入文本 <input type=text" />
password 密码输入框 <input type="password"  />
date 日期输入框 <input type="date" />
checkbox 复选框 <input type="checkbox" checked="checked"  />
radio 单选框 <input type="radio"  />
submit 提交按钮 <input type="submit" value="提交" />
reset 重置按钮 <input type="reset" value="重置"  />
button 普通按钮 <input type="button" value="普通按钮"  />
hidden 隐藏输入框 <input type="hidden"  />
file 文本选择框 <input type="file

 属性说明:

  • name：表单提交给后端时的“键”;
  • value：表单提交时对应项的值
    • type="button", "reset", "submit"时，为按钮上显示的文本年内容
    • type="text","password","hidden"时，为输入框的初始值
    • type="checkbox", "radio", "file"，为输入相关联的值
  • checked：radio和checkbox默认被选中的项
  • readonly：text和password设置只读
  • disabled：所有input均适用;不可以修改

select标签

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<p>
      <!--select只是下滑的菜单;option 具体的下拉选项;optgroup 分组的下拉框; <br>　　　　　selected为默认的选择; multiple,布尔属性，设置后为多选，否则默认为单选-->
      <label for="palce">地点</label>
      <select name="home" id="palce" multiple="multiple">
          <optgroup label="北京">
              <option value="cp">昌平</option>
              <option value="hd">海淀</option>
              <option value="cy">朝阳</option>
 
          </optgroup>
          <option selected value="sh">上海</option>
          <option value="sc">四川</option>
 
      </select>
  </p>　　

属性说明：

  • multiple：布尔属性，设置后为多选，否则默认单选
  • disabled：禁用
  • selected：默认选中该项
  • value：定义提交时的选项值

 

label标签

?
1
2
3
4
5
6
7
8
9
<p>
      性别
        <label for="li">男</label>
      <input id="li" name="sex" type="radio" value="0">
        <label for="lr">女</label>
      <input id="lr" name="sex" type="radio" value="1">
        <label for="la">保密</label>
      <input checked id="la" name="sex" type="radio" value="2">
    </p>
  1. label 元素不会向用户呈现任何特殊效果。
  2. <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
  3. <label> 标签为 input 元素定义标注（标记）。

textarea多行文本

?
1
2
3
4
5
<p>
    <!--textarea 多行文本，为双标签-->
    <label for="info">个人介绍</label>
    <textarea name="user_info" id="info" cols="30" rows="10"></textarea>
</p>　

属性说明：

  • name：名称
  • rows：行数
  • cols：列数
  • disabled：禁用

 

下面是常用标签的一个合集：

　　

posted on   小辉python  阅读(197)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
· ASP.NET Core 模型验证消息的本地化新姿势
阅读排行：
· 从零开始开发一个 MCP Server！
· ThreeJs-16智慧城市项目（重磅以及未来发展ai）
· .NET 原生驾驭 AI 新基建实战系列（一）：向量数据库的应用与畅想
· Ai满嘴顺口溜，想考研？浪费我几个小时
· Browser-use 详细介绍&使用文档
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

Copyright © 2025 小辉python
Powered by .NET 9.0 on Kubernetes Powered By博客园
点击右上角即可分享
微信分享提示