建免费网站,顺企网黄页企业,黑帽seo技术培训,优秀网站的颜色搭配（一）前端概述 1、定义 前端是Web应用程序的前台部分，运行在PC端、移动端等浏览器上，展现给用户浏览的网页。通过HTML、CSS、JavaScript等技术实现，是用户能够直接看到和操作的界面部分。上网就是下载html文档，浏览器是一个解释器，运行从服务器下载的html文件，解析html、…（一）前端概述 1、定义 前端是Web应用程序的前台部分，运行在PC端、移动端等浏览器上，展现给用户浏览的网页。通过HTML、CSS、JavaScript等技术实现，是用户能够直接看到和操作的界面部分。上网就是下载html文档，浏览器是一个解释器，运行从服务器下载的html文件，解析html、css和js代码，呈现网页效果。 2、功能 前端负责将后端提供的数据和逻辑以可视化的形式展现给用户，实现用户与网站或应用的交互。前端开发涉及到多种技术和工具，如框架、库、编辑器等，旨在提升用户体验和交互效果。 3、核心技术 HTML：超文本标记语言（typer text markup language），用于定义网页的结构和内容，由各种标签组成，包括标题、段落、图像、链接，甚至音乐、程序等非文字元素等。CSS：层叠样式表，用于定义网页的外观和布局，控制网页元素的样式和布局。JavaScript：一种脚本语言，用于实现网页的动态效果和交互功能，如表单验证、动画效果、异步数据请求等。 4、发展历程与趋势 早期发展：在互联网发展的早期，前端开发主要是使用HTML和CSS来制作静态网页。随着JavaScript的诞生和浏览器技术的发展，前端开发逐渐从静态向动态转变。现代前端：现代前端开发已经发展成为一门涉及多种技术、框架和工具的复杂领域。随着响应式设计、单页面应用（SPA）、前端框架（如React、Vue、Angular）等的出现，前端开发变得更加高效和灵活。未来趋势：前端技术的未来发展将更加注重性能优化、跨平台兼容性、用户体验和交互设计等方面。同时，随着WebAssembly、PWA（渐进式Web应用）等新技术的兴起，前端开发的边界也在不断扩展。 5、前端开发流程 需求分析：理解用户需求，确定前端界面的功能和设计要求。UI设计：根据需求分析结果，设计网页的布局、样式和交互效果。编码实现：使用HTML、CSS、JavaScript等技术实现UI设计，并进行功能开发。测试与优化：对前端界面进行功能测试、性能测试和兼容性测试，并根据测试结果进行优化。部署与维护：将前端代码部署到服务器上，并进行后续的维护和更新工作。 6、 BS模式 cs模式需要自己写客户端，bs模式直接用浏览器作为客户端，不用自己写了 # 最简单的web开发例子：import socketdef main():sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)sock.bind(('localhost',8089))sock.listen(5)while True:connection, address = sock.accept()buf = connection.recv(1024)connection.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8"))connection.sendall(bytes("h1Hello,World/h1","utf8"))connection.close()if __name__ == '__main__':main() （二）HTML介绍 1、HTML概念 HTML全称是：htyper text markup language 即超文本标记语言超文本：就是指页面内可以包含文字、图片、链接，甚至音乐、程序等非文字元素。标记语言：标记（标签）构成的语言.网页==HTML文档，由浏览器解析，用来展示的静态网页：静态的资源，如xxx.html，只能看，不能点击等操作与后台交互动态网页：html代码是由某种开发语言根据用户请求动态生成的html文档树形结构图： !--注释：html文档结构--
!DOCTYPE html
html lang="en"
headmeta charset="UTF-8"titleTitle/title!--这里用style标签遍写CSS代码，或引入CSS文档（推荐）--
/head
body!--这里写网页正文html代码--
/body!--这里用script标签遍写js/jQuery代码，或引入js/jQuery文档（推荐）--
/html 2、标签概念 由一对尖括号包裹的单词构成，例如：html所有标签中的单词不能以数字开头标签不区分大小写.html 和 HTML.，推荐使用小写.标签分为两部分：开始标签a 和 结束标签/a.，两个标签之间的部分，我们叫做标签体有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭合标签，例如: br/ hr/ input / img /标签可以嵌套，但是不能交叉嵌套. ab/a/b标签分为三种： 块级标签block：一个标签独占一行，宽度缺省是它的容器的100%，除非设定一个宽度，可以嵌套内联标签和块级标签，如：ph1tableolulformdiv内联标签inline：只占自己的内容（文字或图片）长度，不能设置宽width和高height，只能嵌套文本或内联标签，如：ainputimgsubsuptextareaspan。行内块标签inline-block：既具有行内标签特性又具有块级标签特性的标签，它们可以与其他元素位于同一行，同时可以设置宽度和高度，如：imginputtextareaselectlabeltdoption。通过display属性可以将这三种标签互相转换。 inline-block元素之间会产生间隙，由于HTML中的空白字符（如空格、换行、制表符等）被当作渲染内容的一部分。当浏览器解析HTML代码时，这些空白字符会被渲染为文本节点，并在两个inline-block元素之间生成间隔。这个间隔的大小取决于父元素的字体大小，通常会等于当前字体的字符宽度。 div style="display:inline-block; background-color:red; width:100px; height:100px;"/div
div style="display:inline-block; background-color:blue; width:100px; height:100px;"/div!--
由于两个inline-block元素之间存在一个空格字符，最终的渲染效果是两个块元素之间会有间隙。
为了解决这个问题，可以采用以下几种方法：
--
!--1.删除空白字符：直接删除HTML代码中的空格或换行符，即同行紧挨着写。例如：--
div style="display:inline-block; background-color:red; width:100px; height:100px;"/divdiv style="display:inline-block; background-color:blue; width:100px; height:100px;"/div
!--2.设置父元素的font-size为0：将父元素的字体大小设置为0，可以消除间隙。然后在子元素上单独设置合适的字体大小。例如：--
div style="font-size:0;"div style="display:inline-block; background-color:red; width:100px; height:100px; font-size:16px;"/divdiv style="display:inline-block; background-color:blue; width:100px; height:100px; font-size:16px;"/div
/div
!--3.使用负margin：为inline-block元素添加负的margin来去除间隙。例如：--
div style="display:inline-block; background-color:red; width:100px; height:100px; margin-right:-4px;"/div
div style="display:inline-block; background-color:blue; width:100px; height:100px;"/div
!--4.使用CSS注释：在inline-block元素之间使用CSS注释来去除空白字符。例如：--
div style="display:inline-block; background-color:red; width:100px; height:100px;"/div!--
--div style="display:inline-block; background-color:blue; width:100px; height:100px;"/div
!--5.使用flexbox或grid布局(详见第二章css的display属性)：现代布局方式（如flexbox和grid）天然避免了inline-block的间隙问题:
使用现代布局方式如Flexbox（弹性盒布局）和Grid（网格布局）可以有效地避免inline-block元素之间的间隙问题。这两种布局方式提供了更为强大和灵活的布局能力，使得元素之间的排列和对齐变得更加简单和直观。Flexbox：Flexbox主要用于一维布局，即沿着一个主轴（水平或垂直）对元素进行排列。通过设置父元素的display: flex;，你可以很容易地控制子元素的对齐方式、分布方式、顺序以及它们之间的间距。Flexbox中的间隙（gap）属性可以直接控制元素之间的间距，而不会像inline-block那样受到空白字符的影响。Grid：Grid则用于二维布局，它允许你同时控制行和列的布局。通过设置父元素的display: grid;，你可以定义一个网格模板，指定行和列的大小、数量以及它们之间的间距（通过grid-gap或row-gap和column-gap属性）。Grid布局提供了极高的灵活性和控制能力，使得创建复杂的页面布局变得轻而易举。使用Flexbox或Grid布局时，你不再需要担心inline-block元素之间的间隙问题，因为这些布局方式通过明确的属性和规则来控制元素之间的间距和对齐。此外，它们还提供了许多其他有用的特性，如响应式设计、自动调整大小、对齐方式的选择等，使得页面布局更加灵活和强大。因此，在现代Web开发中，Flexbox和Grid布局已经成为首选的布局方式，逐渐取代了传统的布局方法（如浮动布局和inline-block布局）。如果你正在开发一个新的Web项目或重构一个现有的项目，考虑使用这些现代布局方式可能会带来更好的效果和更高的效率。
--注意嵌套规则： 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dtli内可以包含div习惯上把内联标签与内联标签并列，块级标签与块级标签并列，块级与内联并列可以通过div标签把内联标签放在里面。 !DOCTYPE html
html lang="en"
headmeta charset="UTF-8"titleTitle/titlestyle[suoning]{color: blueviolet;}.hediv{color: bisque;}/style
/head
bodydiv class="he"111p class="fr"222div333/div/pdiv444/div/div
***************************div suoning="sb"dddppppp/p/divp suoning="sb2"ddd2ppppp2/p/p
/body
/html 3、标签的属性 通常是以键值对形式出现的. 例如 name="alex"属性只能出现在开始标签 或 自闭合标签中.属性名字全部小写属性值必须使用双引号或单引号包裹 例如name="alex"如果属性值和属性名完全一样，直接写属性名即可，例如 readonly在HTML中，标签属性按功能可以分为两种： 全局属性可以应用于多种不同的HTML元素，为网页开发提供了丰富的功能和灵活性；特定属性仅适用于特定的HTML元素。 事件属性是一种特殊的属性 3.1 全局属性 可以应用于几乎所有HTML元素的属性。它们不特定于某个元素，而是为所有元素提供通用的功能。以下是一些常见的全局属性： class：用于为元素指定一个或多个类名（classname），多个类名用空格分隔，这些类名可以与CSS和JavaScript一起使用，以实现样式和行为的定制。 id：为元素指定一个唯一的标识符。在文档中，id的值可以是任何字符串，但应该是唯一的，常用于通过JavaScript或CSS选择特定的元素。 style：直接在元素上定义内联样式，值是合法的CSS样式声明，用于控制元素的外观和布局。 title：值为任何文本字符串，为元素提供额外的说明或标题，当用户将鼠标悬停在元素上时，这些说明通常会显示为工具提示。 data-*（自定义数据属性）：允许开发者为元素添加自定义的数据属性，值可以是任意字符串，这些属性可以通过JavaScript访问和操作。 hidden：值为hidden或''（空字符串），如果设置了这个属性，元素将不会被呈现，也不会占据页面上的任何空间。 tabindex：一个数字（例如1表示第一个）或0（表示可访问性焦点），指定元素在键盘导航中的顺序（通过Tab键），以及元素是否可以通过键盘获得焦点。 accesskey：为元素设置一个快捷键，用户可以通过按下该键快速访问元素，值为一个键盘字符，例如“O”。 contenteditable：指定元素的内容是否可编辑，值为true或false。 contextmenu：自定义鼠标右键点击时弹出的上下文菜单内容。但请注意，这个属性目前只有Firefox浏览器支持，值为一个menu元素的唯一ID dir：设置元素内文本的书写方向，值为ltr（从左到右）、rtl（从右到左）或auto。 draggable：指定元素是否可以被拖拽，值为true、false或auto。 dropzone：设置元素拖放类型，值可以是copy（拷贝）、move（移动）或link（指向原始数据链接）。但目前主流浏览器还不支持这个属性。 lang：设置元素内容的语言，值为有效的ISO语言代码，例如en（英文）、zh-CN（简体中文）等。 spellcheck：指定是否对元素进行拼写和语法检查，值为true或false。 translate：指定元素及其子孙节点的内容是否需要本地化，但目前主流浏览器还不支持这个属性，值为yes或no。 3.2 事件属性 在HTML中，事件属性用于定义元素上可触发的事件的行为。以下是一些常见的事件属性： （1）全局事件属性： onload：当页面或某个资源加载完成后触发。onunload：当用户离开页面时触发，如关闭页面或跳转到其他页面。onchange：当元素的值发生变化时触发，常用于表单元素。onclick：当鼠标点击元素时触发。ondblclick：当鼠标双击元素时触发。onfocus：当元素获得焦点时触发，如文本框。onblur：当元素失去焦点时触发。onmousedown：当鼠标按下时触发。onmouseup：当鼠标释放时触发。onmousemove：当鼠标在元素上移动时触发。onmouseover：当鼠标移到元素上时触发。onmouseout：当鼠标移出元素时触发。onkeydown：当用户按下键盘上的某个键时触发。onkeypress：当用户按住并释放键盘上的某个键时触发（不包括功能键），但在某些浏览器中可能不支持所有按键3。onkeyup：当用户释放键盘上的某个键时触发。onselect：当元素中的文本被选中时触发。onsubmit：当表单提交时触发。onreset：当表单重置时触发。 （2）特定元素的事件属性（如媒介元素、表单元素等）： 媒介事件（如onabort,onwaiting等）适用于视频、音频等媒介元素。表单事件（如上面提到的onchange,onsubmit,onreset等）专门用于表单元素。 这些事件属性可以通过JavaScript来监听和处理，从而实现丰富的交互效果。 4、常用标签
4.1 !DOCTYPE html标签 由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同(Quirks mode或者称为CompatibilityMode)由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standarsmode)为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。 window.top.document.compatMode：
//BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
//CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
/*
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，
那么compatMode默认就是BackCompat，浏览器按照自己的方式解析渲染页面，
也就是说，同一个html文档在不同的浏览器会显示不同的样式。
*/ 在html文档开头添加!DOCTYPE html标签，就等同于开启了标准模式，浏览器只能按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。 4.2 head标签 html文档头，head/head之间包含了关于该文档的元数据（metadata）和引入外部资源，，即提供关于文档内容、结构、样式以及与其他文档关系的信息，从而确保网页能够正确地显示和运行。这些信息通常不会直接展示在网页上，但对于机器（例如搜索引擎爬虫和浏览器）来说却是至关重要的。head标签中常见的一些子元素及其用途如下： （1）titletitle_text/title 无特定属性，定义网页的标题，这个标题会显示在浏览器的标签页上，同时也是搜索引擎在搜索结果中展示的重要信息。 title我的网页标题/title （2）meta 提供关于文档的元数据，如字符编码、作者、描述、关键词等meta标签的组成：meta标签共有4个常用属性，它们分别是charset属性、http-equiv属性、name 属性和content属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。 （2.1）charset属性
