前端_HTML&CSS

最新推荐文章于 2024-06-14 11:01:38 发布
最新推荐文章于 2024-06-14 11:01:38 发布
阅读量142 收藏
点赞数
分类专栏： 前端 文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51714391/article/details/131253065
版权

目录

前言

本博客根据b站java程序员学前端视频而来：b站视频链接

课程安排

  • 整个课程分成五章
    • HTML / CSS 这部分对咱们来说，不是重点，但又不能不讲，这俩知识作为第一章，必学
    • JavaScript 这部分是重点，尤其是 ES6 以后的一些新语法，不理解这些，前端代码你根本看不懂，必学
    • Vue2，Vue3，React 这三章是三选一的关系，根据你入职公司的使用的前端技术不同，有针对地学习
      • 后三章会涵盖 TypeScript、VueCli、Vuex、VueRouter、ElementUI、Vite、CreateReactApp、React、Redux、ReactRouter 等库和工具的使用
    • jquery 经过调研，还有一些学员毕业后确实会用到，所以也作为一个可选章节进行学习

第一章. HTML 与 CSS

HTML 是什么：即 HyperText Markup language 超文本标记语言，咱们熟知的网页就是用它编写的，HTML 的作用是定义网页的内容和结构。

  • HyperText 是指用超链接的方式组织网页，把网页联系起来
  • Markup 是指用 <标签> 的方式赋予内容不同的功能和含义

CSS 是什么：即 Cascading Style Sheets 级联（层叠）样式表，它描述了网页的表现与展示效果

0、推荐参考手册

mdn：https://developer.mozilla.org/zh-CN/plus

在这里插入图片描述

1. HTML 元素

HTML 由一系列元素 elements 组成，例如

<p>Hello, world!</p>

  • 整体称之为元素

  • <p> 和 </p> 分别称为起始和结束标签

  • 标签包围起来的 Hello, world 称之为内容

  • p 是预先定义好的 html 标签，作用是将内容作为一个单独的段落

元素还可以有属性，如

<p id="p1">Hello, world!</p>
  • 属性一般是预先定义好的，这里的 id 属性是给元素一个唯一的标识

元素之间可以嵌套，如

<p>HTML 是一门非常<b>强大</b>的语言</p>

错误嵌套写法：

<p>HTML 是一门非常<b>强大的语言</p></b>

不包含内容的元素称之为空元素，如

<img src="1.png">
<img src="1.png"/>
  • img 作用是用来展示图片
  • src 属性用来指明图片路径

2. HTML 页面

前面介绍的只是单独的 HTML 元素，它们可以充当一份完整的 HTML 页面的组成部分

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>测试页面</title>
  </head>
  <body>
    <p id="p1">Hello, world!</p>
    <img src="1.png">
  </body>
</html>
  • html 元素囊括了页面中所有其它元素，整个页面只需一个，称为根元素
  • head 元素包含的是那些不用于展现内容的元素，如 title，link，meta 等
  • body 元素包含了对用户展现内容的元素，例如后面会学到的用于展示文本、图片、视频、音频的各种元素

3. 常见元素

3.1 文本元素

Heading （跟标题相关的元素）
<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>
Paragraph （段落元素）
<p>段落</p>
List （列表）

无序列表 unordered list：ul

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

在这里插入图片描述

有序列表 ordered list ：ol

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

在这里插入图片描述

多级列表

<ul>
    <li>
    	北京市
        <ul>
            <li>海淀区</li>
            <li>朝阳区</li>
            <li>昌平区</li>
        </ul>
    </li>
    <li>
    	河北省
        <ul>
            <li>石家庄</li>
            <li>保定</li>
        </ul>
    </li>
</ul>

在这里插入图片描述

Anchor （超链接 重要）

锚，超链接

<a href="网页地址">超链接文本</a>

在这里插入图片描述

3.2 多媒体

Image （图片）
<img src="文件路径">

src 格式有 3 种

  • 文件地址

  • data URL，格式如下 （直接将二进制的图片嵌入到前端）

    data:媒体类型;base64,数据

  • object URL，需要配合 javascript 使用

Video （视频）
<video src="文件路径"></video>

（里面那个controls作用是显示播放条）
在这里插入图片描述

Audio （音频）
<audio src="文件路径"></audio>

在这里插入图片描述

3.3 表单 （重要）

作用与语法

表单的作用：收集用户填入的数据，并将这些数据提交给服务器

表单的语法

<form action="服务器地址" method="请求方式" enctype="数据格式">
    <!-- 表单项 -->
    
    <input type="submit" value="提交按钮">
</form>
  • method 请求方式有
    • get （默认）提交时，数据跟在 URL 地址之后
    • post 提交时，数据在请求体内
  • enctype 在 post 请求时，指定请求体的数据格式
    • application/x-www-form-urlencoded（默认） 表示请求体中格式为 key=value
    • multipart/form-data
  • 其中表单项提供多种收集数据的方式
    • 有 name 属性的表单项数据，才会被发送给服务器

在这里插入图片描述

常见的表单项

文本框

<input type="text" name="uesrname">

密码框

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

隐藏框

<input type="hidden" name="id">

日期框

<input type="date" name="birthday">

单选

<input type="radio" name="sex" value="男" checked>
<input type="radio" name="sex" value="女">

多选（后端用List来接收）

<input type="checkbox" name="fav" value="唱歌">
<input type="checkbox" name="fav" value="逛街">
<input type="checkbox" name="fav" value="游戏">

在这里插入图片描述

文件上传
文件上传，实行必须要这样设定

在这里插入图片描述
在这里插入图片描述

<input type="file" name="avatar">

4. HTTP 请求

4.1 请求组成

请求由三部分组成

  1. 请求行
  2. 请求头
  3. 请求体

可以用 telnet 程序测试

4.2 请求方式与数据格式

在这里插入图片描述

get 请求示例
GET /test2?name=%E5%BC%A0&age=20 HTTP/1.1
Host: localhost
  • %E5%BC%A0 是【张】经过 URL 编码后的结果
post 请求示例
POST /test2 HTTP/1.1
Host: localhost
Content-Type: application/x-www-form-urlencoded
Content-Length: 21

name=%E5%BC%A0&age=18

application/x-www-form-urlencoed 格式细节：

  • 参数分成名字和值，中间用 = 分隔
  • 多个参数使用 & 进行分隔
  • 【张】等特殊字符需要用 encodeURIComponent() 编码为 【%E5%BC%A0】后才能发送
json 请求示例
POST /test3 HTTP/1.1
Host: localhost
Content-Type: application/json
Content-Length: 25

{"name":"zhang","age":18}

json 对象格式

{"属性名":属性值}

其中属性值可以是

  • 字符串 “”
  • 数字
  • true, false
  • null
  • 对象
  • 数组

json 数组格式

[元素1, 元素2, ...]
multipart 请求示例
POST /test2 HTTP/1.1
Host: localhost
Content-Type: multipart/form-data; boundary=123
Content-Length: 125

--123
Content-Disposition: form-data; name="name"

lisi
--123
Content-Disposition: form-data; name="age"

30
--123--
  • boundary=123 用来定义分隔符
  • 起始分隔符是 --分隔符
  • 结束分隔符是 --分隔符--
数据格式小结

客户端发送

  • 编码
    • application/x-www-form-urlencoded ：url 编码
    • application/json：utf-8 编码
    • multipart/form-data：每部分编码可以不同
  • 表单只支持以 application/x-www-form-urlencoded 和 multipart/form-data 格式发送数据
  • 文件上传需要用 multipart/form-data 格式
  • js 代码可以支持任意格式发送数据

服务端接收

  • 对 application/x-www-form-urlencoded 和 multipart/form-data 格式的数据，Spring 接收方式是统一的，只需要用 java bean 的属性名对应请求参数名即可
  • 对于 applicaiton/json 格式的数据，Spring 接收需要使用 @RequestBody 注解 + java bean 的方式

4.3 session 原理

Http是：无状态，有会话

  • 无状态是指，请求之间相互独立，第一次请求的数据，第二次请求不能重用
  • 有会话是指，客户端和服务端都有相应的技术，可以暂存数据，让数据在请求间共享

服务端使用了 session 技术来暂存数据

存

GET /s1?name=zhang HTTP/1.1
Host: localhost

取

GET /s2 HTTP/1.1
Host: localhost
Cookie: JSESSIONID=560FA845D02AE09B176E1BC5D9816A5D

session 技术实现身份验证

Client LoginController LoginInterceptor Session 登录请求 检查用户名，密码，验证通过 存入用户名 登录成功 其它请求 获取用户名 用户名存在，放行 Client LoginController LoginInterceptor Session

4.4 jwt 原理

jwt 技术实现身份验证

Client LoginController LoginInterceptor 登录请求 检查用户名，密码，验证通过 登录成功，返回token 其它请求，携带token 校验token，校验无误，放行 Client LoginController LoginInterceptor

生成 token

GET /j1?name=zhang&pass=123 HTTP/1.1
Host: localhost

校验 token (注意后端中要用注解@RequestHeader接收请求头)

GET /j2 HTTP/1.1
Host: localhost
Authorization: eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiJ9._1-P_TLlzQPb1_lCyGwplMZaKQ8Mcw_plBbYPZ3OX28

在这里插入图片描述

在这里插入图片描述

5. CSS

即 Cascading Style Sheets，它描述了网页的表现与展示效果

5.1 选择器

  • type 选择器 - 根据标签名进行匹配（元素选择器）

  • class 选择器 - 根据元素的 class 属性进行匹配

  • id 选择器（id不能重复） - 根据元素的 id 属性进行匹配

（优先级：id选择器>class选择器>type选择器）

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

5.2 属性和值

* background-color : red; 背景色

  • …
  • display 是否显示 display: none 表示隐藏 display: block 表示显示

5.3 布局

与布局相关的 html 元素

  • div
  • template

在这里插入图片描述

我有点小叛逆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用HTML&CSS创建一个网页课程表
qq_45915712的博客
11-05 1万+
使用HTML&CSS创建一个网页课程表整体布局加入表头数据合并上下单元格并加入课表信息美化页面最终效果 整体布局 对于课程表，其实就是一个表格，其中加入CSS样式。 因此，我们先创建一个九行八列的表格（以我的课表为例）。 <table border="1"> <tr> <td> </td> <td> </td> <td> </td> <td> </t
Day04_HTML&CSS课堂笔记.md
08-04
零基础开始学习web，HTML和CSS
使用 HTML & CSS 编辑静态网页
weixin_60808029的博客
03-14 5966
文章目录一、HTML 概念概述二、HTML 语法使用说明三、CSS 概念概述四、CSS 中的选择器和属性 一、HTML 概念概述 HTML 是最基础的网页开发语言。是 Hyper Text Markup Language（超文本标记语言）的缩写，是一种用于创建网页的标准标记语言。 超文本 是指用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。 标记语言 是指由标签构成的语言。语法格式：<标签名称>。标记语言不是编程语言，是没有任何逻辑性的。 html文档后缀名 .html 或者.
Web前端 | HTML引入CSS样式的三种方式
m0_61933976的博客
10-04 1万+
HTML引入CSS样式的三种方式
Python find_element_by_css_selector 定位
一直被模仿，从未被超越
12-18 4664
1、通过 id 定位 # HTML <div id="goods"> <span id="title"></span> </div> # 通过 ID 定位 find_element_by_css_selector("#goods") # 通过 tag 与 id 组合定位 find_element_by_css_selector("sp...
三个漂亮的网页登录页面源码及素材——可用于前端初学者练习HTML&CSS
Etui۹(･༥･´)و的博客
10-11 3万+
注：这三个登录页面涉及到的图片素材可自行寻找，字体图标素材可以在阿里字体图标库获取（https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2），如需原版素材可联系作者QQ（3416252112） 废话不多说 先上图为敬！！ 文件目录结构 FIRST 1、html源码（index.html） <!DOCTYPE html> <html lang="zh"> <head> <me
web前端基础（一）——HTML+CSS
热门推荐
广龙宇的博客
08-18 13万+
系列文章目录 web前端基础（一）——HTML+CSS 目录 系列文章目录 前言 HTML HTML的介绍 1. html的定义 2. html的作用 HTML的基本结构 1. 结构代码 2. 浏览网页文件 vscode的下载与使用 1. vscode 的基本介绍 2. vscode 的安装 3. vscode 的插件安装 4. vscode 的插件卸载 5. 设置字体大小 6. 设置颜色主题 7. 设置默认浏览器[可选] 初识常用的HTML标签 1. 常用的 ..
HTML&CSS静态页面手动轮播图
qq_45867474的博客
08-15 3214
html部分代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
新闻列表案例（前端html，css）
gou1791241251的博客
09-19 6207
新闻列表案例（前端html，css）
Html&css&js 图片轮播，加箭头
qq_44331253的博客
03-04 1万+
轮换图箭头案例 方向箭头在图片上，应该使用绝对定位 父级盒子应该使用相对定位 Html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图</title> <link href="../css/imgmove.css" rel="stylesheet"/> </head> <body> <div
前端开发_HTML5_CSS部分-阴影(shadow)
u013185175的博客
12-18 9365
阴影(shadow) 1.引入 我们接下来学习一种比较特殊的样式特效——阴影。 2.阴影(shadow) (1)、概述:所谓的阴影就是我们日常生活中缩减到的一种特殊的影子效果。 (2)、阴影分类:阴影大概可以分为:文字阴影(text-shadow)、盒子阴影(box-shadow)。 3.文字阴影(text-shadow) (1)、文字阴影是正对文字产生的一种特效。 (2)、文字阴影相关的语法以参数说明 文字阴影语法以及相关属性: text-shadow:h-...
源码_html、css_前端_
10-02
供前端开发者学习，html、css相关的学习资料。
Font-Awesome-5.1.1_html5_fromykb_apperpen_css_前端_
10-01
一个基于CSS和LESS的字体和图标工具套件。
HTML678day_htmlCSS_前端基础_
10-01
黑马前端课程第一阶段就业班学习资料，第6天-第8天内容
HTML&CSS的思维导图笔记
04-12
HTML&CSS的思维导图笔记
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 564
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 294
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
最新发布
zhangwenok的博客
06-14 1270
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
Harmony 开发的艺术 面向对象
不懂先生的博客
06-13 1063
然后你可以创建多个子类，如“圆形”、“矩形”和“三角形”，它们都继承自“形状”类并实现了自己的“绘制”方法。尽管每个对象的类型可能不同（圆形、矩形、三角形等），但由于它们都继承了“形状”类并实现了相同的“绘制”方法，因此你可以通过父类引用来统一调用它们的方法。然后你可以创建一个“狗”类，它继承自“动物”类，并添加或覆盖一些特定的属性和方法（如“叫”和“摇尾巴”）。所以面向对象的三大特征（封装、继承、多态）在java语言中很容易实现的设计，搬到早期的JavaScript中，就变噩梦一样的存在。
尚硅谷web前端html5&css3
06-28
尚硅谷是一家提供IT技术培训的机构，其中包括Web前端HTML5和CSS3的课程。HTML5是一种用于创建网页内容的标记语言，而CSS3则是一种用于网页样式设计的语言。学习这两门技术可以帮助人们更好地设计和开发网页，提高...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值