前端的概述

最新推荐文章于 2022-04-28 23:59:49 发布
最新推荐文章于 2022-04-28 23:59:49 发布
阅读量87 收藏
点赞数
分类专栏： html  css 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60488295/article/details/121635260
版权

day01

1.前端的概述

  • web的发展史

    • web1.0 简单的静态页面 早期三大门户 搜狐 新浪 网易

    • web2.0 更注重用户之间的交互 用户即是信息的消费者也是制造者 微博

    • web3.0

      • 人工智能

      • 复杂的页面功能

      • 即时通讯

  • web的前景

    • pc端的网页

    • 移动端的网页

    • ios android

2.vscode编译器的使用

  • 快捷键

    • 复制本行到下一行 shift+alt+↓

    • 复制本行到上一行 shift+alt+↑

    • 查找 ctrl+F

    • 替换 ctrl+H

    • 同时写多行 alt+鼠标左键可以出现多个光标

3.浏览器内核

  • 浏览器的渲染引擎，作用是解析我们的代码

  • 五大浏览器，自主研发内核

谷歌 chrome火狐 mozilla欧朋 opera微软IE苹果safari
webkit>blinkgecko 高版本兼容webkitpresto>blinktridentwebkit

  • 360 猎豹 搜狗 （双内核：blink+trident）

4.网页三层结构

  • html-结构层--拥有什么

  • css-表示层--拥有的东西什么样子

  • js-行为层--用户的行为

HTML语言

html定义

  • hyper text markup language 超文本标记语言，不是编程语言

html文档(扩展名或者后缀名)

  • .txt .doc .xls

  • .html

html基本语法

  • 标签结构

    • 开始标签开始，结束标签结束

      <开始标签>  </结束标签>

    • 空标签

      • 在开始标签中结束，没有结束标签

      • <关键字>

      • 空标签内容没有任何内容

  • 标签属性

    • <cl name='chenglong' age='66' profession='actor'></cl>

    • 只能写在开始标签中，不能写在结束标签中

html基本结构

<!-- shift + 1 打出 ! 直接回车 -->
<!-- 注释的写法 ctrl + / --> 
•
<!-- 声明文档类型，告诉浏览器以哪种规范来解析文档，这是Html5的写法，不是标签，写在文档最上方 -->
<!DOCTYPE html>
<!-- html是文档最大的标签 -->
<html lang="en">
<head>
   <!-- head 包含元信息，css样式属性，js语言，标题 -->
   <!-- 字符编码
       gb2312 中文简体
       GBK 中文简体&繁体
       UTF-8 万国码，中文，英文，西班牙语，日文，韩文，法语 -->
   <meta charset="UTF-8">
   <!-- 窗口信息配置 -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- 标题 -->
   <title>你好</title>
</head>
<body>
   <!-- body 身体部分，包含所有页面呈现的结构标签 -->
</body>
</html>

6.常用标签

常用块级标签及特点

  • div

    • 最常用的块级标签

    • 网页应用场景

  • p

    • 段落标签

  • h1-h6

    • 标题标签

  • 特点：垂直上下排列，独立成行

常用内联标签及特点(行内标签)

  • span

    • 常用的行内标签，用户图标

  • strong（具有语义化）

  • b

    • 加粗

  • em（具有语义化）

  • i

    • 斜体

  • sub

    • 定义下标字

  • sup

    • 定义上标字

  • del

  • s(基本淘汰)

    • 删除线

  • 特点：默认在一行排列，超出一行会折行

其他标签

  • br

    • 换行标签

  • hr

    • 水平分隔线

7.图像标签

  • img

    • src 图片的路径

    • width 图片宽度 （当只设定宽度时，高度会等比例缩放）

    • height 图片高度

    • alt 友好提示

    • title 标题，鼠标悬浮时显示

  • 路径问题：

    • 绝对路径

      • 网络路径

      • 本地磁盘路径

    • 相对路径

      • 同级目录 ./

      • 上级目录 ../

      • 根目录 /

8.链接 a标签

  • 自带属性：

href: 链接的路径

target:

_self 在当前页跳转，默认就是

_blank 在新页面跳转

9.标签之间的关系

  • 我们在书写div标签时通常有两种结构：并列结构和嵌套结构。

10.语义化

  • 概念：运用合适的标签和特定的属性去格式化文档（合适的场合用合适的标签和属性，合适的标签和属性用在合适的场合）

  • 优点：

    • 易于开发和维护

    • 用户体验比较好

    • 易于seo,易于爬虫抓取关键字，能和搜索引擎建立良好的沟通

    • 即使在没有css样式的情况下，也能呈现良好的效果

html字符实体

  • HTML 字符实体

      <!-- 金钱符号 -->
  &yen;
  <!-- 版权符号 -->
  &copy;
  <!-- 空格 -->
  <span>今天&nbsp;&nbsp;是周一</span>
  &lt;&gt;
初见766
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学习资料-Web前端概述.md
04-20
学习资料-Web前端概述.md学习资料-Web前端概述.md学习资料-Web前端概述.md学习资料-Web前端概述.md学习资料-Web前端概述.md学习资料-Web前端概述.md学习资料-Web前端概述.md学习资料-Web前端概述.md学习资料-Web前端...
Web前端概述.md
05-27
Web前端概述
前端概述
weixin_34332905的博客
09-19 170
前端 一、什么是前端 前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。 前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript...
day01
ILove_bugs的博客
08-31 179
1.课程的规划 第一阶段、css3/html5 第二阶段、JS交互 第三阶段、node开发 第四阶段、前端框架 :vue react 第五阶段、小程序+数据可视化 第六阶段、就业指导+项目实训 小目标：PC电商网站 2.前端的概述 web的发展史 web1.0 简单的静态页面 早期三大门户 搜狐 新浪 网易 web2.0 更注重用户之间的交互 用户即是信息的消费者也是制造者 微博 web3.0 人工智能
前端知识概述----公司内部的一次分享 分类： JavaScript ...
weixin_34206899的博客
04-16 972
因为公司内部一个纯后端团队要做一些适合自己团队的web页面，所以就有了这次分享。知识都是很基础，有的知识也只是做了解简单介绍。主要是想让大家对前端有一个基本的了解。现在做一个总结。欢迎大家拍砖。 知识概要 主要知识和分享要点如下的思维导图所示： 1）WEB前端是什么？ 今天的web前端的重要的组成部分： 2）WEB浏览器显示网页的基本流程 注意：图片...
HTML与XHTML的区别
weixin_30906701的博客
02-03 63
xhtml是html的格式升级时w3c推出的一种新的html标准 W3C 将 XHTML 定义为最新的HTML版本。XHTML 将逐渐取代 HTML。 html与xhtml的区别在于代码格式 html的代码格式如下 <html> <head> <title>页面的标题</title> </head> <body&gt...
前端介绍
m0_46307689的博客
03-05 3910
一、web前端概述 1.什么是前端？ 全称"Web前端开发"，简称“前端"，又称作“客户端开发" .可以这样简单的概括，只要是浏览器或移动设备上能直接被人看到的界面，都可以是前端开发者的工作负责范围。而配合前端工作的开发人员被称作“后端”也称作“服务器端" . 在互联网诞生初期(称作Web 1.0)网站主要内容都是静态，以图片和文字主，用户使用网站的行为也以浏览为主，“前端"词还并不存在。 但随着...
替代前端：流行的互联网平台（例如YouTube或Twitter）的替代开源前端概述
02-06
为了解决这些问题，开源社区已经开发出了一系列替代前端，旨在提供更加安全、私密和广告免费的用户体验。本文将详细介绍一些流行的开源替代前端，帮助用户了解如何保护自己的隐私并获得更优质的在线体验。 1. ...
一份详细的前端开发资源概述.zip
最新发布
05-31
【前端开发资源概述】 前端开发是构建Web应用的重要部分，主要负责用户与应用程序之间的交互。这份详尽的资源概述将涵盖前端开发的核心概念、技术栈、工具链以及学习路径，帮助初学者和经验丰富的开发者更好地理解...
前端测试报告1
08-03
**测试报告概述** 本文档是一份关于“二手交易平台（线上市场）”的前端测试报告，主要目的是记录并分析项目的测试结果，确保系统功能的稳定性和可用性。此报告由啊对对队完成，包含了测试用例的设计、环境配置、...
前端开发概述（简单笔记）
猪猪的博客
07-01 432
此系列的全部内容的笔记均来自于b站的python高级编程： python 高级编程 (day07Html和CSS~day10jQuery和js库) 第二部分 效果图是由UI设计师用Photoshop(少量设计师用firework)来设计的 把效果图布局成页面，需要用到HTML语言和CSS语言 页面功能的开发需要用到javascript 为了快速开发和系统开发，还需要学习一些前端的javascript库和框架 学习目录： HTML CSS Photoshop 前端页面开发流程 ..
前端 概述
weixin_46582141的博客
04-28 226
前端概述
Web 前端概述
star_mei的博客
09-07 341
前端三大要素是 HTML ，CSS ， JS。 HTML负责网页的结构布局；CSS负责网页的样式；JS则负责网页的交互，说的浅显一点就是网页的动态。 一个开发网站的公司里应有UI设计师，前端工程师，后台开发工程师。其中UI设计人员负责将网站的首页，分页利用PS，AW等制图软件设计出来，交由客户看。客户满意后，前端人员负责用代码将其实现，然后再交给后台工程师，由他们进行收尾。
WEB前端：(1)概述
super_lixiang的博客
08-20 1077
   做web前端也就是页面是为了和用户做显示数据和交互的，主要的技术栈是HTML,CSS,Javascript以及JQuery，这些是必不可少的，其中JQuery只是JS的一个库而已，把JS和页面元素的交互变得非常简单。HTML只负责内容(标题，正文，表格，表单)，CSS（Cascading Style Sheet）层叠样式表，给HTML设定样式，而JS主管交互的。    ...
web前端概述
qq_43807202的博客
11-27 444
  CSS：CSS是网页外观的重要一点，CSS可以帮助把网页外观做得更加美观。 JavaScript：JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。 框架：分为样式组件类框架和js库框架 构建/管理工具：npm和bower基本上是用来管理模块，gulp、webpack、parcel都是打包工具 规范：前端编码规范，js风格规范，代码规范。...
Web前端开发概述
wangyongqi的博客
11-28 1633
第一关： Web系统的组成 Web是Internet上最受欢迎的一种多媒体信息服务系统。 整个系统由Web服务器、浏览器和通信协议组成。 Web开发 Web开发就是设计实现Web系统的过程。主要包括浏览器端页面的制作和服务器端程序的编写。  浏览器端称作Web前端；  服务器器端称作Web后端。 浏览器 浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种软件。 常见的浏览器有：Firefox、Internet Explorer、Safari、Opera、
HTML（超文本标记语言）
weixin_47183168的博客
12-07 623
HTML是HyperText Markup Language的简称，它是一种用于创建网页的标准标记语言。 标记语言是由标签构成的语言。例如html，xml；标记语言不是编程语言。 HTML 运行在浏览器上，由浏览器来解析。 标签的内部可以定义属性，属性由键值对组成，值需要用双引号引起来，多个属性用空格隔开 <标签名称 属性名1="属性值" 属性名2="属性值"></标签名称> <p id="p1" name="p1"></p> 基本结构 &lt.
web前端开发概述
weixin_43839828的博客
11-28 651
1.  web是internet上最受欢迎的一种多媒体信息服务系统，整个系统包括web服务器、浏览器、通信协议。 2.  UI（user interface 用户界面） 3.  URL（uniform resource locator 统一资源定位符） 基本URL包括模式（协议）、服务器名称（IP地址）、路径和文件名。 协议://用户名：密码@子域名.域名.顶级域名：端口号/目录/文件名....
前端工程化概述
weixin_33798152的博客
04-02 348
前端工程化概述 什么是工程化 定义 工程化即系统化、模块化、规范化的一个过程。 如果说计算机科学要解决的是系统的某个具体问题，或者更通俗点说是面向编码的，那么工程化要解决的是如何提高整个系统生产效率。 与其说软件工程是一门科学，不如说它更偏向于管理学和方法论。 解决什么问题 工程化解决的问题是，如何提高编码、测试、维护阶段的生产效率。 什么是前端 ...
"前端学习笔记：HTML基础与Web标准概述
前端学习笔记(B站黑马程序员) 我是根据黑马程序员的教程来学习前端开发的，并进行了详细的笔记记录。在学习过程中，我接触到了许多前后端的知识，其中包括了 HTML 的介绍，常用浏览器，以及 Web 标准等内容。 首先...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值