web开发基础知识

article/2025/10/14 3:33:30

web开发基础知识学习

一、网页开发三剑客

​ 我们看到的网页通过代码来实现的 ，这些代码由浏览器解释并渲染成你看到的丰富多彩的页面效果。 这个浏览器就相当于Python的解释器，专门负责解释和执行(渲染）网页代码。写网页的代码是专门的语言， 主要分为Hmtl \ CSS \ JavaScript, 被称为网页开发三剑客，分别作用如下：

  • Html：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。主要负责编写页面架构，有点像建房子时，造的毛坯房。
  • CSS： (Cascading Style Sheets) 用于渲染HTML元素标签的样式。让你的网页样式变的丰富多彩起来，可以改变字体、颜色、排列方式、背景颜色等相当于给你的毛坯房做装修。
  • JavaScript：网页脚本语言，可以让你的网页动起来，比如一张图片鼠标放上去自动变大、一个按钮自动变色、提交表单时少填或填错了字段会提示报错等，都是JavaScript实现的。

image-20220227105506664

以上三个组件是做网站必须掌握的技能

二、HTML

  1. 简介：

    <!DOCTYPE html>
<html><head><meta charset="utf-8"><title>路飞学城</title></head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body>
</html>
    • <!DOCTYPE html>声明为 HTML5 文档
    • <html>元素是 HTML 页面的根元素
    • <head> 标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
    • <meta>元素包含文档的元数据， 如定义网页编码格式为 utf-8、关键词啥的
    • <title>元素里描述了文档的标题
    • <body>元素包含了可见的页面内容
    • <h1>元素定义一个大标题
    • <p>元素定义一个段落

  2. 什么是html

    HTML 是用来描述网页的一种语言。

    • HTML 指的是超文本标记语言: HyperText Markup Language
    • HTML 不是一种编程语言，而是一种标记语言
    • 标记语言是一套标记标签 (markup tag)
    • HTML 使用标记标签来描述网页
    • HTML 文档包含了HTML 标签及文本内容
    • HTML文档也叫做 web 页面

    HTML 标签

    HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

    • HTML 标签是由尖括号包围的关键词，比如
    • HTML 标签通常是成对出现的，比如<b> 和 </b>,标签对中的第一个标签是开始标签，第二个标签是结束标签

  3. html网页结构

    image-20220227111922380

    注意：只有<body>区域的内容（白色部分）才会显示

  4. 常用元素入门

    <H2>这是一个二级标题</H2><p>这是一个段落</p>    <!--一个P标签是一行，相当于自动换行--><a href="https://www.wangpc.ink" target="_blank">这是我的个人主页</a>  <!--targert属性是点击网址打开新的窗口--><br>                  <!--换行标签--><img src="https://cdn.jsdelivr.net/gh/6vision/PicBED@latest/images/2022/02/27/868d1f3ead9430ad665ed79eb923cc16-image-20220227111922380-4537e6.png" width="500" height=""><table border="1" cellpadding="20"><tr>          <!--tr是新起一行--><th>姓名</th><th>性别</th><th>年龄</th>  <!--th是表头--></tr><tr><td>vision</td><td>男</td><td>24</td></tr></table><ol>                      <!--有序列表--><li>蛋糕</li><ul>               <!--无序列表--><li>巧克力蛋糕</li><li>慕斯蛋糕</li><li>水果蛋糕</li></ul><li>水果</li><li>零食</li>

  5. div和span元素

    image-20220227135000697

    大多数html元素别定义为块级元素或内联元素

    • 块级元素：

      块级元素在浏览器显示时候，通常会以新行开始（结束），比如<h1>,<p>,<ul>,<table>

      <div>元素是块级元素，它可用于组合其他html元素的容器：没有特定的含义，如果与css一起使用，可用于对大的内容块设置样式属性

      <div>元素的另一个常见用途就是对文档布局。

    • html内联元素

      通常显示时候不会以新行开始，比如<b>,<td>,<img>

      <span>元素也没有特定含义，是内联元素可做部分文本的容器，与css一同使用，可为部分文本设置样式属性

  6. css样式初识

    CSS（cascading style sheets）用于渲染html元素标签的样式

    CSS可以通过以下三种方式添加到html中

    • 内联样式：在html元素中是用style属性

    • 内部样式表-在html头部区域使用

三、css样式基础

  1. 选择器

  • id选择器

    id就像一个元素的身份证号，可以在网页里唯一代表某个元素，可以通过这个id快速找到它对应的元素对象

    image-20220227211436052

  • class选择器：为多个元素设置同一个样式可以使用类选择器

    image-20220227211617803

  • 直接通过元素名设置样式：为页面所有的<p>或<input>标签加上同样的样式，可以直接通过元素名批量设置

image-20220227211839285

注意：id&class选择器的样式优先级大于元素名选择器

组合选择器

  1. 盒子模型

    box-model

    不同部分的说明：

    • Margin(外边距) - 清除边框外的区域，外边距是透明的。
    • Border(边框) - 围绕在内边距和内容外的边框。
    • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
    • Content(内容) - 盒子的内容，显示文本和图像。
    div {width: 300px;border: 25px dashed yellow;padding: 25px;margin: 25px;
}

    <body><h2>盒子模型演示</h2><p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p><div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、5px 黄色边框。</div></body>

    效果：

    image-20220227213757910

  2. css常见属性：见菜鸟教程

  3. 定位和布局：.position

    fixed生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
    relative生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
    static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

    转载请注明：

作者：vision

文章标题：一次性解决office部署问题（即点即用等）

文章来源：1：我的研学之路2：vision_wang的csdn


http://chatgpt.dhexx.cn/article/maRtJY2B.shtml

相关文章

HTML基础知识总结

HTML基础知识总结

原文 经过这段时间的学习&#xff0c;对于html的一些基础知识有了一定的了解。所谓好记性不如烂笔头&#xff0c;唯有一点点累积&#xff0c;才能汇聚成知识的海洋。现在&#xff0c;我对这段时间的学习做一个总结。 一、HTML的定义 HTML&#xff0c;超文本标记语言&#xf…
阅读更多...
前端-HTML基础知识详解

前端-HTML基础知识详解

每日分享&#xff1a; 不贪婪 凡事皆有度&#xff0c;把握好分寸&#xff0c;学会知足常乐。 目录&#xff1a; 初始常用的HTML标签资源路径列表标签表格标签表单标签表单提交 一、初始常用的HTML标签 小结 学习html语言就是学习标签的用法编写html标签一般用小写html标签…
阅读更多...
html5基础知识第四章其他标签

html5基础知识第四章其他标签

以下内容是学习期间整理&#xff0c;有些语句是便于理解&#xff0c;便于快速入门写的。并不权威。 表格&#xff1a; <table><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tb…
阅读更多...
HTML5-基础知识

HTML5-基础知识

HTML5 author 鲁伟林 一直开发后端&#xff0c;现在开始全栈培养自己。 学习html的网址是&#xff1a;http://www.runoob.com/html/html5-intro.html gitHub地址: https://github.com/thinkingfioa/Notes/tree/master/front-developer/html5 1 HTML5特性 HTML5中的一些有趣的新…
阅读更多...
【基础html5 基础知识点】(全)

【基础html5 基础知识点】(全)

一、新特性 1. Doctype更简单<!DOCTYPE html> 2. 简单的编码类型 <meta charset”utf-8″ /> 3. 大小写都可 <input tYPe"text" name"" id""> 4. 布尔值 <input type"radio" checked> 5. 可以省略…
阅读更多...
HTML5前端知识图谱

HTML5前端知识图谱

HTML5知识图谱 前端知识必备概要HTML5知识概要前端开发知识库体系1. HTML5知识库2. CSS3知识库3. JavaScript知识库4. jQuery知识库5.Node.js知识库6.AngularJS知识库7.React知识库 前端开发知识库细分HTML知识图谱CSS知识图谱1. css 内容排版2. css 布局模型3. css 盒子模型4.…
阅读更多...
html5 基础知识总结

html5 基础知识总结

W3C的建立 伯纳斯李1994年建立万维网联盟&#xff08;W3C&#xff09; W3C的出现为了制订网页开发的标准&#xff0c;以使同一个网页在不同的浏览器中有相同的效果。 所以&#xff0c;我们需要制订我们编写的网页都需要遵循W3C的规范&#xff01; 网页的结构思想 根据W3C标…
阅读更多...
HTML5基础知识汇总

HTML5基础知识汇总

HTML是Hypertext Markup Language的缩写&#xff0c;中文翻译为&#xff1a;超文本标记语言 HTML文档结构和基本语法 HTML5基本语法 扩展名.html/.htm内容类型(ContentType):text/html文档类型:<!DOCTYPE html> 字符编码 HTML4: <meta http-equiv"Content-Typ…
阅读更多...
HTML5基础知识(全面)

HTML5基础知识(全面)

1. 熟记各大主流浏览器内核版本面试常问哦 浏览器名称内核opera欧朋最初是自己的Presto内核&#xff0c;后谷歌Webkit 到BlinkFirefox火狐Gecko内核俗称Firefox内核Chrome谷歌统称为Chromium或Blink内核Safari苹果Webkit不受IE、Firefox内核约束IE浏览器Trident内核360浏览器I…
阅读更多...
HTML5 基础知识总结(全)

HTML5 基础知识总结(全)

文章目录 1.文档类型2.字符集3.标签< h1 >到< h6 >4.文本格式化标签&#xff08;熟记&#xff09;5.标签属性6.图像标签img7.链接标签8.锚点定位9. base标签10.特殊字符11.注释标签12.相对路径13.div span标签14.无序列表ul15.有序列表ol16.自定义列表17.font标签1…
阅读更多...
HTML5基础知识

HTML5基础知识

目录 一、初识HTML 二、网页基本标签⭐ 2.1标题标签 2.3换行标签 2.4水平线标签 2.5字体样式标签 2.6注释和特殊符号 三、图像&#xff0c;超链接&#xff0c;网页布局 3.1图像标签 3.2链接标签 3.3块元素和行内元素 四、列表&#xff0c;表格&#xff0c;媒体…
阅读更多...
lle算法c 语言,LLE（Locally Linear Embedding）算法

lle算法c 语言,LLE（Locally Linear Embedding）算法

Core idea LLE is inherently a non-linear dimensionality reduction strategy 即局部线性嵌入算法。该算法是针对非线性信号特征矢量维数的优化方法&#xff0c;这种维数优化并不是仅仅在数量上简单的约简&#xff0c;而是在保持原始数据性质不变的情况下&#xff0c;将高维空…
阅读更多...
（流形降维）局部线性嵌入 - LLE

（流形降维）局部线性嵌入 - LLE

文章目录 一&#xff0c;流形学习概述二&#xff0c;如何使用LLE进行数据降维1.参数说明2.官网示例 三&#xff0c;实例说明1.PCA与LLE降维的区别2.每个点的邻居数量对降维结果的影响 四&#xff0c;LLE总结 一&#xff0c;流形学习概述 更多关于LLE原理 参考&#xff1a;局部…
阅读更多...
机器学习（二）降维（PCA，kPCA，LLE）

机器学习（二）降维（PCA，kPCA，LLE）

写在前面 这是一个新的板块&#xff0c;用于记录作者机器学习的学习历程&#xff0c;同时分享自己的学习笔记给大家&#xff0c;希望这份笔记能帮助大家&#xff0c;同时也欢迎大家一起学习交流指正&#xff0c;我会尽量做到周更。如果有用的话请记得关注点赞收藏&#xff01;&…
阅读更多...
数据分析-降维-PCA-LDA-LLE

数据分析-降维-PCA-LDA-LLE

目录 前言 矩阵分解法 主成分分析&#xff08;PCA&#xff09; 核PCA 非负矩阵分解&#xff08;NMF&#xff09; FactorAnalysis 独立主成分分析&#xff08;ICA&#xff09; 判别分析法&#xff08;LDA&#xff09; 基于流形学习的数据降维方法 LLE MDS MDS实现 t…
阅读更多...
对人脸数据集，采用PCA,KPCA,MDS,LLE,ISOMAPE五种方式降维 ---模式识别课程设计

对人脸数据集，采用PCA,KPCA,MDS,LLE,ISOMAPE五种方式降维 ---模式识别课程设计

对人脸数据集“Labeled Faces in the Wild”&#xff1a;sklearn.datasets.fetch_lfw_people&#xff0c;下载地址aka LFW:http://vis-www.cs.umass.edu/lfw/lfw-funneled.tgz&#xff0c; 采用PCA,KPCA,MDS,LLE,ISOMAPE五种方式降维&#xff0c;比较基于SVM或决策树等分类器的…
阅读更多...
LLE算法实现与sklearn实现

LLE算法实现与sklearn实现

在pyhton的机器学习库sklearn中&#xff0c;LLE等降维算法可以直接调用&#xff0c;在本次大作业中&#xff0c;根据LLE的推导过程编写算法实现了LLE&#xff0c;与mainfold自带的LLE进行对比。由于后面的实验中都是直接调用LocallyLinearEmbedding&#xff0c;所以用大量篇幅介…
阅读更多...
一句话总结LLE（流形学习）

一句话总结LLE（流形学习）

一句话总结LLE&#xff08;流形学习&#xff09; 核心&#xff1a;用一个样本点的邻居的线性组合近似重构这个样本&#xff0c;将样本投影到低维空间中后依然保持这种线性组合关系。 局部线性嵌入&#xff08;简称LLE&#xff09;将高维数据投影到低维空间中&#xff0c;并保持…
阅读更多...
流行学习一LLE_机器学习

流行学习一LLE_机器学习

前言&#xff1a; 流行学习主要用于聚类&#xff0c;分类和回归算法,例如人脸识别&#xff08;旋转不变性&#xff0c;光照不变性&#xff09; 流行是几何中一个概念&#xff0c;它是高维空间中的几何结构&#xff0c;即高维空间中点构成的集合。 简单的理解为二维空间的曲线&a…
阅读更多...
lle算法c 语言,局部线性嵌入算法（LLE）与其Python实现-Go语言中文社区

lle算法c 语言,局部线性嵌入算法（LLE）与其Python实现-Go语言中文社区

PCA是至今为止运用最为广泛的数据降维算法&#xff0c;它通过最小化重构误差达到将高维数据映射到低维并同时保留数据中所存在的绝大部分信息。但是一般的PCA也有缺点&#xff0c;它只能实现线性降维。当然现在也有kernel PCA可以实现非线性降维&#xff0c;但我们今天介绍的是…
阅读更多...
推荐文章

Copyright @ 2022~2023