前端之html

前端简介

前端概念：与用户打交道的操作界面都可以称之为前端
前端的核心 ：HTML  内容
            css   外观
            java script  动作

HTTP(超文本传输)协议

pycharm手写服务端
import socket


res = socket.socket()
res.bind(('127.0.0.1',8080))
res.listen(5)

sever,address = res.accept()
sever.send(b'HTTP\1.1 ok 200 \r\n\r\n hi,qiqi') 
 # 必须要用HTTP协议浏览器才能展示服务端发送的数据
data = sever.recv(1024)
print(data)

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

协议内容（很重要！！！！）

简单来说就是客户端和服务器进行数据传输的一种规则（基于TCP传输）

#四大特性：
         1.基于请求响应
         2.基于TCP之上作用于应用层的协议
         3.无状态
         4.无/短连接

# 请求的数据格式：
1.请求首行（请求方式有很多种，各种协议的版本）
2.请求头（一堆k:v键值对）
3.换行
4.请求体（携带一些敏感的数据，不是所有的请求都有请求体）

# 响应数据格式
1.请求行首（响应状态码）
2.请求头（一堆k:v键值对）
3.换行
4.请求体（一般是浏览器展示给用户的数据）


# 响应状态码 （利用数字来表示一些复杂的情况说明）
1XX：服务端已经接收到了你的请求正在处理，你可以继续发送请求或者等待
2XX：200 ok服务端给出了响应
3XX：302（永久），403（临时）重定向
4XX：403请求不符合条件 404请求资源不存在
5XX：服务端内部错误
ps：我们以后会自己定义更多的状态码，一般从10000开始

HTML简介

HTML是超文本标记语言，是一种用于创建网页的标记语言，网页文件的扩展名：.html或.htm
HTML文件结构
<html> # 所有的代码必须写在html标签内
    <head></head> # head内的数据一般在网页的网址上展示 不是给用户看的
    <body></body> #浏览器展示给用户看的数据
</html>
HTML标签的分类
html标签分为两类：

单标签 ：<img/>
双标签：<a></a>

HTML注释语法
	<!--注释内容-->

常标标签

head内常见标签
titel : 控制标签页小标题
style ： 支持内部编写css
link ： 引入外部css文件
script ：内部可以编写js代码，还可以通过src属性引入外部js文件
mate ： 通过内部属性的不同可以有很多功能
ps:
<meta name="keywords" content="填写一些关键字 提升网页被搜索的概率">
<meta name="description" content="填写一些网页的简介">
body内常见标签
h系列标签
h1~h6 标记内容为1~6级的标题
</head>
<body>
  <h1>我是一级标题</h1>
  <h2>我是二级标题</h2>
  <h3>我是三级标题</h3>
  <h4>我是四级标题</h4>
  <h5>我是五级标题</h5>
  <h6>我是六级标题</h6>
</body>
</html>

<p>我是段落标签</p>
  <hr>我是水平分割线
  <br>我是换行标签
  <u>我是下划线</u>
  <i>我是斜体</i>
  <s>我是删除线</s>
  <b>我的字体会加粗</b>

img标签（全称image） 图片标签
<img src="图片地址" alt="图片加载失败时显示的内容">
ps：图片地址可以是网络地址也可以是本地地址，本地地址建议用相对地址
图片格式支持png、jpg和gif
src 填写图片地址(网络地址 本地地址)
title 鼠标悬浮在图片上就会有提示信息
alt 图片加载失败提示的信息
height  调整图片的高度
width  调整图片的宽度
ps：上述两个调整一个另外一个等比例缩放 


a标签（全称anchor） 超链接标签
# 超文本文件的精髓，可以控制页面与页面之间的跳转

<a href="跳转到的目标页面地址" target="是否在新页面中打开" title="鼠标悬浮显示的内容">需要展现给用户查看的内容/也可以是图片</a>

#  target="_blank"代表在新页面中打开   _self在原有页面打开
href  可以填写网址 点击自动跳转 还可以填写其他标签的id值 实现锚点功能 target 可以控制是否新建页面跳转

也可以标记图片
 <a href="https://www.baidu.com"><img src="百度图标" />百度一下，你就知道</a>


# body内布局标签
div ：块级标签
span ： 行内标签

1.块级标签是可以通过css调整为不独占一行
2.标签之间很多时候可以嵌套
  块级标签可以嵌套任何类型的标签
  行内标签只能嵌套行内标签
标签内两大重要属性
# 用来快速定位需要操作的标签
id 属性 （一对一管理）
 在同一个html里面 id值不可以重复，类似于我们的身份证号

class 属性 （批量管理）
 在同一个html,多个标签可以拥有相同的class值
块儿标签和行内标签
块儿标签：一个标签独占一行
h系列标签，p标签，hr和br标签
行内标签
u，i，s，b等

body内常见符号

1.&nbsp  空格符
2.&gt   大于号
3.&lt   小于号
4.&amp   &
5.&yen   ￥
6.&reg   注册
7.&copy  版权

列表标签

有序列表
<ol>
   <li>哈哈哈</li>
     <li>黑黑黑</li>
     <li>呼呼呼</li>
 </ol>
无序列表（标签中使用最多的一种）
<ul>
     <li>嘻嘻</li>
     <li>美好的事情即将发生</li>
     <li>一起期待吧</li>

 </ul>
 type：列表标识的类型
        disc：实心圆(默认值)
        circle：空心圆
        square：实心矩形
        none：不显示标识
可以通过css直接去掉小圆点
<style type="text/css">
            ul {
                list-style: none;
            }
</style>
自定义列表
自定义列表也是有组合的dl<dt<dd
<dl>
    <dt>标题1</dt>
       <dd>内容1</dd>

    <dt>标题2</dt>
       <dd>内容2</dd>
</dl>

dl:defination list，自定义列表
dt：defination title，自定义标题
dd：defination description，自定义描述
表格标签
#1、作用
表格标签是一种数据的展现形式，当数据量非常大的时候，使用表格的形式来展示被认为是最清晰的
<table>
    <thead>
     <tr>
         <th>姓名</th>
         <th>性别</th>
         <th>爱好</th>
     </tr>
    </thead>
    <tbody>
       <tr>
           <td>summer</td>
           <td>girl</td>
           <td>read</td>
       </tr>
    </tbody>
</table>

tr代表表格的一行数据
td表一行中的一个单元格 (字体细一点)
th表一行中的一个单元格（字体粗一点）

宽度和高度：
可以给table和td/th设置width和height属性

#1、水平向上的单元格colspan
    可以给td标签添加一个colspan属性，来把水平方向的单元格当做多个单元格来看待
    <td colspan="2"></td>

#2、垂直向上的单元格rowspan
    可以给td标签设置一个rowspan属性，来把垂直方向的的单元格当成多个去看待
form表单标签
#1、什么是表单？
    表单就是专门用来接收用户输入或采集用户信息的

#2、表单的格式
    <form action='提交地址' method=post/get>默认get
        <表单元素>
    </form>
post和get的区别：
1.数据提交方式： get提交的数据url能看到，post看不到
2.get用于提交少量数据(最多1k数据)，post用于提交大量数据(没有限制)
3.get提交的数据在浏览器历史记录内，安全性不好

  <form action="http://www.baidu.com">

                <p>
                    账号：<input type="text" placeholder="请输入你的用户名" name="user">
                </p>

                <p>
                    密码：<input type="password" placeholder="请输入你的密码" name="password">
                </p>

                <p>
                    性别：
                    <input type="radio" name="gender" value="male">男
                    <input type="radio" name="gender" value="female">女
                    <input type="radio" name="gender" checked="checked" value="none">保密
                </p>

                <p>
                    <!--注意点：单选框or复选框都需要指定相同的name值-->
                    爱好：
                    <input type="checkbox" name="sport" value="basketball">篮球
                    <input type="checkbox" name="sport" value="football">足球
                    <input type="checkbox" checked="checked" name="sport" value="badminton">羽毛球
                </p>

                <p>
                    简介：
                    <textarea name="" id="" cols="30" rows="10" name="desc"></textarea>
                </p>

                <p>
                    生日：
                    <input type="date" name="birth">
                </p>

                <p>
                    邮箱：
                    <input type="email" name="email">
                </p>

                <p>
                    电话：
                    <input type="number" name="phone">
                </p>

                <p>
                    <input type="submit" value="注册">    
                    <input type="reset" value="清空">
                </p>

        </form>
posted @   Hsummer  阅读(64)  评论(0)  编辑  收藏  举报
相关博文：
·  前端之CSS
·  前端之js
·  前端之HTML
·  前端开发HTML标签
·  前端学习笔记
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
SQL AI 助手