• HTML简介与常见标签

    前端与后端

    1.前端与后端的区别

    前端:

      用户能看到的前端页面，网页（也就是WEB，通过电脑端或者手机端浏览器打开看到的页面）或APP页面（各类应用程序使用时所包含的页面）具体长什么样子，由前端实现。

    后端:

      后端是用户感触不到的存在，如同一只无形的大手帮你操控一切；可以理解为去饭店吃饭前端就想服务员给你展示菜单询问点的菜而后端则就是你看不见的后厨中制作这些菜的大厨。

    2.前端核心操作

      前端的开发离不开(HTML、css、JS)，HTML如同是创建了一个光溜溜的人偶通过css给这个光溜溜的人穿上好看的衣服打扮的光鲜亮丽再用JS对这个人偶添加动作使这个玩偶能动起来

    HTTP超文本传输协议

    1.什么是超文本协议

      HTTP全称(Hyper Text Transfer Protocol)超文本传输协议，是一个用于传输超媒体文档的应用层协议。

    2.HTTP协议四大特征

    ○ 基于请求响应
    ○ 基于TCP/IP之上作用于应用层的协议
    ○ 无状态
      不保存用户的信息 每一次访问都以第一次来一样
    ○ 无/短链接
      请求一次回应一次，然后断开链接
      长链接:双方建立链接后默认不断开，websocket

    3.数据格式

    http请求格式

    '''请求数据格式'''
	1.请求首行（请求方式:有很多种 协议名称及版本）
	2.请求头（一堆 K:V键值对）
	3.换行 ：/r/n
	4.请求体（不是所有的请求都有请求体）
'''响应数据格式'''
	1.响应首行（响应状态码）
	2.响应头
	3.换行：/r/n
	4.响应体（浏览器展示给用户数据）
get：朝服务器索要数据
	eg：输入网址获得相应的数据
post：向服务器提交数据
	eg：用户输入的数据提交到服务器
'''响应状态码
	利用数字来表示一些复杂状态或描述性信息'''
1xx：服务端收到了请求正在处理 可以继续提交或等待
2xx：(200) 服务端成功响应了数据
3xx：重定向
4xx：服务端内部出现错误

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    HTML简介

    1.什么是HTML

       HTML全称(Hyper Text Markup Language)指的是超文本标记语言，HTML不是编程语言而是一种标记语言使用标记标签来描述网页，HTML文档也叫web页面包含了HTML标签及文本内容

    2.HTML文件结构

    '''HTML基本格式'''
<heml>
	<head>
		<title>文档标题title>
	head>
	<body>
	body>
heml>

HTML标签关键字：<html>html>
<head>head>:head内的数据一般都不会给用户看
<body>body>:body内的数据就是浏览器展示给用户看的
HTML标签分类:
	1.单标签（自闭和标签）
		<img/>
	2.双标签
		<a>a>
HTML注释语句：
ps:在HTML语句中不讲究代码缩减

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    head内常见标签

    1.meta相关

    指定字符集：
		<meta charset='gbk'>
页面描述：
		<meta name="description" content="具体描述....">
关键字有助于搜索引擎SEC优化(抵不过氪金玩家)
		<meta http-equiv="refresh" content="3,http://baidu.com">

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    2.非meta相关

    标题
	<title>标题title>
图标
	<link rel = "icon" href ="图片地址">
定义css样式
	<style>style>
引入外部css样式
	<link rel=“stylesheet” herf=".css">
引入js文件
	<script src=".js">script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    body内常见标签

    1.body内基本标签

    标题标签：
	<h1>1~6级标题h1>
段落标签：
	<p>p>
水平分割线：
	<hr>hr>
换行符：
	<br>br>
下换线：
	<u>u>
斜体：
	<i>i>
删除线:
	<s>s>
加粗:
	<b>b>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    2.body内基本符号

     	空格
>	大于号
<	小于号
&	符号：&
¥	符号：¥
®	注册商标：®️
©	版权号：©

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    3.body内常见标签

    div：块儿级标签
span：行内标签

1.块儿级标签是可以通过css调整为不独占一行
2.标签之间很多时候可以嵌套
	块儿级可以嵌套任何类型的标签
	p标签虽然是块儿级标签 但是不能块儿级标签
	行内标签只能嵌套行内标签

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    4.块儿级标签与行内标签

    <--HTML元素根据其表现形式可以分为两种，任何HTML元素都属于这两者中的任意一种>
<--1.块级元素>
		块级元素在浏览器中占据整行，并排斥其它元素与其位于同一行'''
	div：经典的块元素
	p：段落
	h1～h6：表示1-6级标题
	br：表示换行
	ol：有序列表
	ul：无序列表
<--2.行内元素>
		行内元素又称内联元素，在浏览器智能鼓可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时才会换行显示'''
	a：超链接
	span：常用行级
	i：斜体，不强调
	em：斜体，强调
	img：图片
	input：输入框
	select：下拉列表

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    5.列表标签

    <--1.有序列表>
	在HTML中，<ol>标签用来表示有序列表，有序列表之间的内容有先后顺序
	<ol>+<li>标签
<--2.无序列表>
	HTML使用<ul>标签来表示无序列表，无序列表和有序列表类似都是使用<li>标签来表示列表的每一项，无序列表之间的内容没有顺序
	<ul>+<li>标签
<--3.定义列表>
	在HTML中用<dl>标签用来创建定义列表，定义列表由标题和描述两部分组成
	<dl>
		<dt>标题一dt>
		<dd>描述文本dd>
	dl>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    6.表格标签

    <--使用<table>标签来定义表格，HTML中的表格和Excel中的表格类似，都包括行、列、单元格、表头等元素，但HTML表格一般只用来展示数据>
<table>
	<thead>
		<tr>
			<th>序号th>
			<th>用户名th>
			<th>年龄th>
		tr>
	thead>
	<tbody>
		<tr>
			<td>1td>
			<td>aatd>
			<td>18td>
		tr>
	tbody>
table>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    7.表单标签

    '''能够获取用户输入(输入、选择、上传)的数据并发送给后端服务器'''
<form action="" method=""></form>
	action属性
		用于控制数据的提交地址 不写的话就是朝当前页面所在的地址提交
	method属性
		用于控制请求的方式(get\post)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    1.设置登陆用户
<form action ="" method="post">
		<p>username:<input type="text"></p>
		<p>password:<input type="password"></p>
2.获取日期与邮件
		<p>birthday:<input type="date"></p>
		<p>email:<input type=""email">
    
3.选择性别
		
    gender:
			" name="gender">男
			" name="gender">女
			" name="gender">其它
		
    
4.选择爱好(多选)
		
    hobby:
			" name="hobby">篮球
			" name="hobby">唱歌
			" name="hobby">rop
		
    
		
    files:
			file">
		
    
		
    files:
			file" multiple>
		
    
5.列表选择
		
    GF:
			
		
    
6.设置按钮
		
    info:
			
		
    
		" value="用户注册">
		" value="重置内容">
		" value="普通按钮">
	</form>

    • 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

    表单标签补充

    1.后端分辨用户传入属性

      ​​​​​​​​用户在表单标签中输入的数据传给后端后需要对数据进行标明，不然无法识别谁是谁了，所以标签必须要有name否则不会发送该标签的值
      ​​​​​​​​标签在传输数据是类似于字典的形式：{name:value}
        name属性：类似于字典的键
        value属性：类似于字典的值

    <input type="text" name="password" >
<input type="text" name="username" >

    • 1
    • 2

    2.input标签正规使用语法结构

      一般情况下问题不大不用加label直接写

    <p>
  <label for="input标签的ID值">usernaem:
       <input type="text" name="username" id="ID值">
   label>
p>

    • 1
    • 2
    • 3
    • 4
    • 5

    3.input标签添加背景提示

      很多时候在输入框内会有一些提示这里具体写什么方便用户的体验

    placeholder:设置背景提示
   <input type="text" name="username" placeholder="用户名">
   <input type="text" name="password" placeholder="密码">
   
value:设置默认值
   <input type="text" name="username" value="aa">
   <input type="text" name="password" placeholder="密码">

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    4.value的使用

      获取用户输入的标签如果不是让用户自己写而是选择 那么标签需要自己写value值，value值才是真正传输的值

    <input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

<input type="checkbox" name="hobby" value="sing">唱
<input type="checkbox" name="hobby" value="dance">跳

<select name="province" id="">
     <option value="hw">华为option>
     <option value="apple">苹果option>
select>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    5.标签的默认选择

    针对radio和checkbox默认选中
   checked="checked" 可以简写：checked
   
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="others" checked="checked">其它

<input type="checkbox" name="hobby" value="sing">唱
<input type="checkbox" name="hobby" value="dance" checked="checked">跳
<input type="checkbox" name="hobby" value="rap">边跳边唱
# 针对option标签也可以默认选中
  selected="selected" 可以简写：selected
  
<select name="province" id="">
   <option value="hw">华为option>
   <option value="apple" selected="selected">苹果option>
select>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    ​

  • 相关阅读:
    深入探索JVM高效并发 — Java内存模型(三) 原子性、可见性与有序性
    STC51单片机29——汇编语言 取表法 流水灯
    孙荣辛｜大数据穿针引线进阶必看——Google经典大数据知识
    ​思想茶叶蛋 （Jul 31,2022）| 元宇宙（Metaverse）下了一枚什么样的蛋
    xlwings笔记
    C语言——指针初阶详解
    计算机设计大赛 深度学习YOLO抽烟行为检测 - python opencv
    微服务项目：尚融宝（17）（后端搭建：数据字典）
    24【备忘录设计模式】
    NSProxy
  • 原文地址：https://blog.csdn.net/weixin_52596593/article/details/126468112