前端基础之HTML

目录

前端简介

什么是前端？什么是后端？

前端

任何与用户直接交互的界面都可以称之为前端
例如:各大网站页面，APP用户展示页面等

后端

不直接与用户交互，真正业务逻辑代码的处理界面
例如:python代码、java代码和c++代码

2.前端的学习路径

知识脉络:

  • HTML
    网页的骨架
  • CSS
    网页的样式
  • JavaScript
    网页的动态效果
  • jQuery(框架)
  • Bootstrap(框架)

HTML介绍

哪些可以充当客户端?

1.程序员写的python代码(TCP客户端)
2.商业公司发布的浏览器（chrome，sifari，uc）

问题

python代码编写的TCP服务端与浏览器之间建立了通信，但浏览器不识别服务端数据

推导

不同的服务端数据的组织策略千差万别，浏览器却需要统一处理
最佳的解决措施是统一规定一个通用的标准>>>:HTTP协议

HTTP协议

规定了服务端与浏览器之间的数据交互格式及其他事项

四大特性

  1. 基于请求、响应
    服务端永远不会主动给客户端发消息,必须是客户端先请求服务端被动响应
  2. 基于TCP/IP作用于应用层之上的协议
    应用层协议:HTTP HTTPS FTP ...
  3. 无状态
    服务端不保存客户端状态
  4. 短连接
    不保持客户端与服务端之间的链接导通

数据格式

请求格式:客户端给服务端发送消息应该遵循的数据格式

1.请求首行(请求方法 协议版本)
2.请求头(一大堆k:v键值对)
3.(换行不能省略)
4.请求体(携带敏感数据:密码 身份照号...) 不是一直都有

响应格式:服务端给客户端发送消息应该遵循的数据格式

1.响应首行(响应状态码 协议版本)
2.响应头(一大堆k:v键值对)
3.(换行不能省略)
4.响应体(给浏览器展示给用户看的页面内容)

响应状态码

用数字来表示一串中文意思
1XX:服务端成功接收到了客户端的数据正在处理，可以等待或者继续发送
2XX:200 OK 表示请求成功 服务端给出了响应
3XX:301\302 表示重定向(想访问A页面但是自动跳转到了B页面，例如登陆界面)
4XX:403请求不合法(权限不够) 404请求资源不存在
5XX:都是服务端错误,与客户端无关
响应状态码还支持自定义,因为默认的不够,自定义状态码一般都是从10000开始

Web服务本质

Web应用程序是一种可以通过Web访问的应用程序，程序的最大好处是用户很容易访问应用程序，用户只需要有浏览器即可，不需要再安装其他软件。

HTML是什么？

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

HTML文档结构

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

</body>
</html>

  1. <!DOCTYPE html>
    表示文档是HTML格式
  2. <html>、</html>
    文档的开始标记和结束的标记
  3. <head>、</head>
    HTML文档的开头部分
  4. <title>、</title>
    网页标题部分
  5. <body> </body>
    中间的文本是用户可见的网页主体内容

HTML标签分类

1.双标签:有头有尾，内容写在中间

2.单标签：自闭合标签，一般有特殊功能

HTML注释

  • 单行注释
  • 多行注释

HTML常用标签

head内常用标签

head标签内编写的标签一般都是给浏览器看的
title标签 控制网页小标题
style标签 内部支持编写css代码
link标签 引入外部css文件
script标签 内部支持编写js代码 也可以通过src属性引入外部js文件
meta标签 功能非常多

body内常用标签

1.标题系列
h1~h6(1到6级标题)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
</body>
</html>

2.字体系列

<i>斜体</i>
<b>加粗</b>
<u>下划线</u>
<s>删除线</s>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p style="text-align: center"><i>斜体</i></p>
    <P style="text-align: center"><b>加粗</b></P>
    <p style="text-align: center"><u>下划线</u></p>
    <p style="text-align: center"><s>删除线</s></p>
</body>
</html>

3.文本段落
<p></p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>&nbsp&nbsp&nbsp&nbsp国家统计局近日发布的数据显示，今年一季度中国经济同比增长4.8%。尽管局部地区新冠肺炎疫情反复和乌克兰局势复杂演变影响了增长幅度，但中国经济仍保持在合理的增长区间，实现了“开门稳”</p>

    <p>&nbsp&nbsp&nbsp&nbsp一季度，投资增长强劲。数据显示，一季度全国固定资产投资（不含农户）104872亿元，同比增长9.3%。分领域看，基础设施投资同比增长8.5%，制造业投资增长15.6%。鉴于基础设施投资和制造业投资的亮眼表现，有人认为，“开门稳”是强力刺激投资的结果。但仔细分析便会发现，这是一种带有陈旧偏见的错误认识。毋庸置疑，投资能够有力地拉动经济增长，但并不是所有的经济增长都需要靠高强度的投资来刺激。</p>

</body>
</html>

4.其他
hr 水平分割线
br 换行符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    水平分割线
    <hr>
    换行符
    <br>
    哈哈哈
</body>
</html>

基本标签

块级标签:h1~h6 p div
默认独占浏览器一行内
行内标签:s i u b span
内部文本有多长就占多长

特殊字符

  空格
> 大于号
< 小于号
& &符号
¥ 羊角符
© 版权
® 注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <p style="text-align: center">&copy;版权所有，盗版必究</p>
    <br>
    <p style="text-align: center">&reg;欢迎注册</p>


</body>
</html>

div标签和span标签

img标签

    src			图片路径
    title		鼠标悬浮自动展示提示信息
    alt	  	        当图片无法正常展示自动提示的信息
    height 	        自定义图片高度
    width               自定义图片宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片</title>
</head>
<body>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-07-15%2F5f0ecbb7a61e2.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653237619&t=fc85e44ff2fe6d68cac2d26d1ddcaa2a" title="动漫图片" alt="动漫图片无法显示" height="800">
</body>
</html>

a标签

    href	  点击跳转到位置
    		可以写网址
      		<a href='网址'></a>
      		也可以写标签id值
          	<a href='页面上某个标签id值'></a>
    target	控制是否当前页跳转
    		默认_self当前页
      		设置_blank新建页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="text-align:center" ><a href="http:\\www.baidu.com" target="_blank" >百度一下</a></div>
<div style="text-align:center" ><a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp08%2F24041224115258-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653236588&t=0b7861ed7092468388a252756acf542c" target="_blank" >图片 </a></div>
<a href="#d3" >到底部</a>
<div  id=d1 style="background: blue;height:888px"></div>
<a href="#d2" >到中部</a>
<div  id=d2 style="background: black;height:888px"></div>
<a href="#d1" >到顶部</a>
<div  id=d3 style="background: orange;height:888px"></div>
</body>
</html>

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul type="disk" >
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</body>
</html>

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1" cellspacing="10">
    <thead>
        <tr>
            <th>name</th>
            <th>age</th>
            <th>nationality</th>

        </tr>
    </thead>
    <tbody>
    <tr>
        <td><div style="text-align:center">jayce</div></td>
        <td><div style="text-align:center">20</div></td>
        <td><div style="text-align:center">USA</div></td>
    </tr>
    </tbody>
    <tbody>
    <tr>
        <td><div style="text-align:center">jackson</div></td>
        <td><div style="text-align:center">22</div></td>
        <td><div style="text-align:center">UK</div></td>
    </tr>
    </tbody>
    </tbody>
    <tbody>
    <tr>
        <td><div style="text-align:center">sakura</div></td>
        <td><div style="text-align:center">18</div></td>
        <td><div style="text-align:center">JP</div></td>
    </tr>
    </tbody>
</table>
</body>
</html>

form表单

属性action

在form标签内部编写获取用户数据标签

<form action="https://uc-res.mzres.com/resources/uc/wlogin/member/js/login.js"></form>  <!--全路径-->
<form action="login.js"></form>  <!--后缀缩写,会自动补全ip和port-->
<form action=""></form>  <!--留空白会朝网页所在的地址提交请求-->

input标签

属性 作用
text 正常展示的普通文本
password 密文展示
date 日历展示
radio 单选
checkbox 多选
email 邮箱格式数据
file 文件数据
submit 触发form表单提交数据的动作
reset 重置页面填写的数据
button 普通按钮默认没有任何的功能 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="" method="post">
        <p>
            用户名<input type="text" name="username">
            <br>
            密码<input type="password" name="pwd">
            <br>
            出生日期<input type="date" name="date">
            <br>
            邮箱<input type="email" name="email">
            <br>
            男<input type="radio" name="gender" value="male">
            女<input type="radio" name="gender" checked value="female">
            <br>
            python<input type="checkbox" name="course">
            linix<input type="checkbox" name="course">
            java<input type="checkbox" name="course">
            <br>
            上传简历<input type="file" name="up_file">
            <br>
            <input type="submit" value="注册提交">
            <input type="reset" value="重置输入">
            <input type="button" value="普通按钮">
        </p>
    </form>

</body>
</html>

select标签

<p>省市:
        <select name="province" id="d1">
            <option value="BJ">北京</option>
            <option value="SH">上海</option>
            <option value="SZ">天津</option>
            <option value="SZ">重庆</option>
            <option value="SZ">广东</option>
            <option value="SZ">浙江</option>
            <option value="SZ">江苏</option>
            <option value="SZ">安徽</option>
            <option value="SZ">江西</option>

        </select>
    </p>
    <p>爱好:
        <select name="hobby" id="d2" multiple>
            <option value="swim">游泳</option>
            <option value="running">跑步</option>
            <option value="mount">爬山</option>
            <option value="raise_cat">养猫</option>
            <option value="sleep">睡觉</option>
        </select>

    </p>

textarea标签

    <p>个人介绍:
        <textarea name="desc" id="d3" cols="50" rows="10"></textarea>
    </p>

label标签

<p align="center">
    <label for="d1">用户名</label>
    <input type="text" id="d1" name="username">
</p>
<p align="center">
    <label for="d2">密码</label>
    <input type="password" id="d2" name="pwd">
</p>
<p align="center">
    <label for="d3">验证码</label>
    <input type="text" id="d3" name="verification_code">
</p>

网络请求方式

get请求

朝服务端索要数据
在url后面通过?组织数据

post请求

朝服务端提交数据
在请求体中组织数据

posted @   一梦便是数千载  阅读(133)  评论(0)  编辑  收藏  举报
相关博文：
· 前端之JQuery
· 前端之Bootstrap框架
· 前端1HTML
· 前端之HTML
· 前端基础（HTML）
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛