• 前端-(1)

    内容概览

    • 前端简介
    • HTTP超文本传输协议
    • HTML简介
    • head内常见标签
    • body内常见标签
    • 标签两大重要属性
    • 列表标签
    • 表格标签
    • 表单标签

    前端简介

    所有与用户交互的操作界面都可以称之为前端，而后端则是不直接与用户交互，真正执行核心业务逻辑的代码程序
    前端的核心基础：

    1. HTML：网页的骨架
    2. CSS：网页的样式
    3. JavaScript：网页的动态

    HTTP超文本传输协议

    由于浏览器需要兼容很多服务端软件，为了能够无障碍交流，有了一些协议，HTTP协议是其中一种

    1. 四大特性
      1. 基于请求响应
      2. 基于TCP/IP之上作用于应用层的协议
      3. 无状态
      4. 无(短)连接
    2. 数据格式
      1. 请求数据格式
        1. 请求首行(请求方式:多种请求方式 协议名称及版本)
        2. 请求头(许多k:v键值对)
        3. 换行
        4. 请求体(携带一些敏感的数据，不是所有请求都有请求体)
      2. 响应数据格式
        1. 响应首行(协议与版本 响应状态码 状态文本)
        2. 响应头(许多k:v键值对)
        3. 换行
        4. 响应体(一般情况下是浏览器展示给用户看的数据)
    3. 响应状态码
      利用数字来表明一些复杂的情况说明
      1XX：信息响应，服务端已经收到了请求正在处理，可以继续提交或者等待
      2XX：成功响应
      3XX：重定向
      4XX：客户端响应，403拒绝执行、404资源不存在
      5XX：服务端响应，503服务器没有准备好处理请求
      在公司里由于本身自带的响应码太少，可能会自定义更多的状态码，一般从10000开始

    HTML简介

    超文本标记语言，是所有浏览器展示页面必备的
    了浏览器展示的界面也被称为HTML界面，存储HTML语言的后缀一般是.html

    • HTML注释语法
      

      • 1
    • HTML文件结构
      <html>  
	<head>head>  
	<body>body>  
html>

      • 1
      • 2
      • 3
      • 4
    • HTML标签的分类
      1. 单标签
      <img/>

      • 1
      1. 双标签
      <a>a>

      • 1

    HTML代码中没有规定缩进

    head内常见标签

    <title>title>  控制标签页显示标题
<style>style>  内部支持编写CSS
<link rel="stylesheet" href="连接地址">  引入外部CSS文件
<scirpt>scirpt>  内部支持编写JS代码,也可以通过src属性从外部引入JS文件
<meta>  通过内部属性的不同可以有很多功能
<meta name="keywords" content="填写关键字,提升网页被搜索到的概率">
<meta name="descirption" content="填写网页的简介">

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    标签说明
    title标签页显示信息
    style内部编写CSS
    link引入外部CSS文件
    script内部编写JavaScript代码，也可通过src属性引入外部JS文件
    meta通过多个属性实现多种功能

    body内常见标签

    • 基本标签
      <h1>h1>	h1-h6 标题标签
<p>p>  	段落标签
<hr>  		分割线
<br>  		换行
<u>u>		下划线
<i>i>  	斜体
<s>s>		删除线
<b>b> 	加粗

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      标签说明
      h1-h6标题标签
      p段落标签
      hr水平分割符
      br换行符
      u下划线
      i斜体
      s删除线
      b加粗
    • 块级标签与行内标签
      1. 块级标签：h1-h6、p、hr、br
        一个标签占据一行
      2. 行内标签：u、i、s、b
        只占据自身大小的位置
    • 基本符号
         空格
>	大于
<	小于
&	&符号
¥	¥符号
®	®注册
©	©版权

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      符号说明
       空格符
      >>
      <<
      &&
      ¥￥
      ®®注册符号
      ©©版权符号
    • 布局标签
      <div>div>		块级标签
<span>span>	行内标签
块级标签可以通过CSS设置为不独占一行
标签之间也可以嵌套
块级标签可以嵌套任意标签,行内标签只能嵌套行内标签
p标签虽然是块级标签,但是不能嵌套块级标签

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      标签说明
      div块级标签
      span行内标签
    • 常见标签
      <a href="" target="">a>	链接标签
	href填写网址,点击自动跳转,还可以填写其他标签的id值实现锚点功能
	target可以控制是否新建页面跳转_self当前页面直接跳转,_blank新建页面跳转
<img>img>					图片标签
	src填写图片地址(网络地址或本地地址)
	title鼠标悬浮在图片上时显示的信息
	alt图片加载失败时显示的信息
	height调整图片高度
	width调整图片宽度
	图片高度和宽度调整另外一个会等比例缩放,两个同时调整可能会导致图片失真

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      标签说明
      a链接标签
      img图片标签

    标签两大重要属性

    1. id属性(单独管理)
      类似于身份证号，同一个HTML页面上id不能够重复
    2. class属性(批量管理)
      类似于分组，多个相同class值的标签属于同一个组

    列表标签

    1. 无序列表(使用最多)
	<ul>
		<li>aaali>
		<li>bbbli>
		<li>cccli>
	ul>
2. 有序列表
	<ol>
		<li>aaali>
		<li>bbbli>
		<li>cccli>
	ol>
	可以设置属性:type 可以设置以数字、大小写字母、大小写罗马数字来排序
				start 从多少开始
3. 标题列表
	<dl>
		<dt>标题1dt>
			<dd>内容1dd>
		<dt>标题2dt>
			<dd>内容1dd>
			<dd>内容2dd>
	dl>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    标签说明
    ul无序列表
    ol有序列表
    dl标题列表

    表格标签

    <table>  					表格标签
	<thead>  				表头
		<tr>				表示一行
			<th>idth>		表示一个单元格
			<th>nameth>
		tr>
	thead>
	<tbody>					表体
		<tr>
			<td>1td>		td相比th字体更细
			<td>jasontd>
		tr>
		<tr>
			<td>2td>
			<td>kevintd>
		tr>
	tbody>
table>

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

    表单标签

    能够获取用户输入(输入、选择、上传)的数据并发送给后端服务器
<form action="" method="">form>
action属性：用于控制数据的提交地址,不写的话会向当前网页所在地址提交
method属性：用于控制请求的方式(get/post)
<form action="" method="">
	<p>username:<input type="text">p>		普通输入框
	<p>password:<input type="password">p>	隐藏输入框,不能够直接看到输入内容
	<p>birthday:<input type="date">p>		选择年月日
	<p>email:<input type="email">p>		检测输入格式是否为邮箱格式
	<p>gender:
		<input type="radio" name="gender">男	radio单选,使用name将其绑定,绑定的只能选其一
		<input type="radio" name="gender">女
		<input type="radio" name="gender">其他
	p>
	<p>hobby:
		<input type="checkbox" name="hobby">C	checkbox多选
		<input type="checkbox" name="hobby">t
		<input type="checkbox" name="hobby">r
		<input type="checkbox" name="hobby">l
	p>
	<p>file:
		<input type="file">		选择文件
	p>
	<p>files:
		<input type="file" multiple>	选择多个文件
	p>
	<p>province:
		<select name="" id="">		下拉框单选
			<option value="">北京option>
			<option value="">上海option>
			<option value="">广州option>
		select>
	p>
	<p>GF:
		<select name="" id="" multiple>		下拉框多选
			<option value="">Aoption>
			<option value="">Boption>
			<option value="">Coption>
		select>
	p>
	<p>info:
		<textarea name="" id="" cols="30" rows="10">textarea>		文本区域,cols设定列的宽度,rows设定多少行
	p>
	<input type="submit" value="用户注册">		提交按钮
	<input type="reset" value="重置">			重置内容
	<input type="button" 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
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
  • 相关阅读:
    java 多线程& notifyAll()方法：通知所有线程——73
    OGG|Oracle 数据迁移后比对一致性
    STM32 CubeMX配置USB HID功能，及安装路径
    堡垒机部署
    SpringCloud无介绍快使用，sentinel服务熔断功能（二十四）
    目标检测YOLO实战应用案例100讲-基于YOLOv5的目标检测与6D位姿估计算法研究(中)
    leetcode 151. 反转字符串中的单词
    Invalid bound statement (not found)出现的原因和解决方法
    springBoot如何【禁用Swagger】
    JS高级：执行上下文
  • 原文地址：https://blog.csdn.net/AL_QX/article/details/126468053