布鲁斯的快乐小屋

HTML基础

1. 相关专业术语

web：互联网。
w3c：万维网联盟，w3.org，为互联网提供各种标准。
xml：可扩展的标记语言，extension markup language，用于定义文档结构。
html：超文本标记语言，Hyper Text Markup Language，是w3c组织定义的语言标准，html是用于描述页面结构的语言。
MDN：Mozilla Development Network，Mozilla开发者社区。
css：CSS是用于描述页面展示的语言，是w3c组织定义的语言标准。html决定了网页有什么，css决定了网页长什么样子。html和css都是交给浏览器内核执行。
浏览器的组成：外壳shell + 内核core，常见的浏览器以及内核如下【五大浏览器、四大内核】
- IE：Trident
- Firfox：Gecko
- Chrom：webkit /blink(现在)
- Safari：webkit
- Opera：blink
版本和兼容性：W3C现在推荐的标准为html5+css3，css3目前还没有制作完成。
C/S架构(Client/Server)：bilibili、微信、QQ等——需要安装、偶尔更新、不跨平台，但是大型专业应用、安全性要求较高的应用需要采用C/S架构。
B/S架构(Browser/Server)：小程序、网页等——无需安装、无需更新、可跨平台。

2. 元素

元素element又叫做标签、标记，元素 = 起始标记(begin tag) + 结束标记(end tag) + 元素内容 + 元素属性，没有结束标记的元素叫做空元素。属性 = 属性名 + 属性值，属性大体上可以分为两类：

局部属性：某些元素特有的属性。
全局属性：所有元素通用的属性。

元素之间可以嵌套使用，因此元素之间就存在了父元素、子元素、祖先元素、后代元素、兄弟元素这些元素关系。

3. 标准的文档结构【`W3C`】

DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    
body>
html>

：文档声明，告诉浏览器当前文档使用的HTML标准是HTML5，如果不写文档声明，可能导致浏览器进入怪异渲染模式。
：根元素，一个html文件中有且只能有一个根元素，它是所有元素的父元素或祖先元素。在HTML5中可以省略根元素。
lang属性：全局属性，表示该元素内部的文字使用的是哪一种自然语言。
- en：英语。
- cmn-hans：汉语。zh-CN也表示汉语，但是已经过时了。
：文档头，文档头中的内容不会显示到页面上。
- 元素：文档的元数据，附加信息。charset属性用来指定网页内容的编码。
```
<head>
 <meta charset="UTF-8">
 
 
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
head>
```
- </title</code>：网页的标题。 </li> </ul> </li> <li> <code><body></body></code>：文档体，页面上所有要参与显示的元素，都应该放到文档体中。 </li> </ul> <h2>4. 语义化</h2> <code>语义化</code>即每一个HTML元素都有具体的含义，即选择什么元素取决于内容的含义，而不是显示出的效果。如<code>a</code>元素表示超链接，<code>p</code>元素表示段落，<code>h1</code>表示一级标题等等。元素的显示效果由<code>CSS</code>控制，不同元素在浏览器中具有不同的显示效果，是因为浏览器自带默认的<code>CSS</code>样式。那为什么需要语义化？ <ul> <li> 为了搜索引擎优化<code>SEO</code>：语义化便于搜索引擎<code>bing、百度、Google</code>爬虫理解，和搜索引擎建立良好的沟通，能让爬虫爬取更多关键有效的信息。 </li> <li> 便于其它开发者阅读代码。 </li> <li> 方便其他设备阅读，如屏幕阅读器，盲人设备和移动设备等。 </li> </ul> <h2>5. 文本元素</h2> 在使用文本元素时，经常需要用到一些测试文本，这时就可以使用乱数假文<code>lorem</code>，乱数假文即没有任何实际含义的文字，经常用来测试排版。如下： <pre><code class="prism language-html"> <p>Lorem, ipsum dolor.</p> <p>Quidem, autem voluptatem?</p> <p>Ratione, vitae molestiae.</p> <p>Harum, sint illo!</p> <p>Voluptates, nihil dolorem?</p> <p>Aliquam, vel labore?</p> </code></pre> 在<code>html</code>中，常用的文本元素如下： <ul> <li> <code>h</code>元素：<code>h1~h6</code>，共六级标题。 <pre><code class="prism language-html"> <h1>1级标题</h1> <h2>2级标题</h2> <h3>3级标题</h3> <h4>4级标题</h4> <h5>5级标题</h5> <h6>6级标题</h6> </code></pre> </li> <li> <code>p</code>元素：表示一个段落。 <pre><code class="prism language-html"><p>这是一个段落</p> <p>这是一个段落</p> <p>这是一个段落</p> </code></pre> </li> <li> <code>span</code>元素：无语义，仅用来设置样式。 <pre><code class="prism language-html"><p> 三原色有<span style="color: red;">红</span>、<span style="color: green;">绿</span>、<span style="color:blue">蓝</span> </p> </code></pre> </li> <li> <code>pre</code>元素：预格式化文本元素。 <ul> <li> 空白折叠：在源代码中的连续空白字符【空格、换行、制表符】，在页面显示时会被折叠为一个空格。 </li> <li> 在<code>pre</code>元素中的内容不会出现空白折叠，里面的内容会按照源代码格式显示到页面上。该元素通常用于在网页中显示一些源代码。<code>pre</code>元素功能的本质是它有一个默认的<code>CSS</code>属性<code>white-space: pre</code>，显示代码时，通常外面会加上<code>code</code>元素，<code>code</code>表示代码区域。 <pre><code class="prism language-html"><pre> <code> var i = 2; if(i) { console.log(i); } </code> </pre> </code></pre> <pre><code>实体字符entity: 通常用于在页面中显示一些特殊字符 - &单词;(常用) - &#数字; 常用的实体字符: 更多的见w3.org - < < - > > - 空格 - © 版权符号 - & & </code></pre> </li> </ul> </li> </ul> <h2>6. 超链接<code>a</code>元素</h2> <ul> <li> 常用属性 <ul> <li><code>href</code>：<code>hyper reference</code>，通常表示跳转地址。</li> <li><code>id</code>：全局属性，表示元素在文档中的唯一编号。</li> <li><code>target</code>：表示跳转窗口位置。 <ul> <li><code>_self</code>：在当前窗口打开，默认值。</li> <li><code>_blank</code>：在新窗口中打开。</li> </ul> </li> <li><code>title</code>：全局属性，表示提示信息。</li> </ul> </li> <li> 常见的链接 <ul> <li> 普通链接：跳转地址 <pre><code class="prism language-html"> <a href="https://baidu.com">百度</a> </code></pre> </li> <li> 锚链接：跳转到某个锚点。如果当前锚点是在当前网页，则页面不会刷新，否则页面刷新。 <ul> <li> <code><a href="#指定id">内容</a></code>：跳转到指定锚点。 </li> <li> <code><a href="#">内容</a></code>：跳转到当前页面顶部，不会刷新网页。 </li> <li> <code><a href="">内容</a></code>：刷新当前网页。 <pre><code class="prism language-html"> (a[href="#chapter$"]>{章节$})*6  ((h2[id="chapter$"]>{章节$})+(p>lorem100)*3)*6 </code></pre> </li> </ul> </li> <li> 功能链接：点击后执行<code>JS</code>代码，触发某个功能。 <pre><code class="prism language-html"> <a href="javascript:alert('哈哈哈')">弹出哈哈哈</a>  <a href="mailto:2781196094@qq.com">发送邮件</a>  <a href="tel:1899023926035">拨打电话</a> </code></pre> </li> </ul> </li> </ul> <h2>7. 路径的写法</h2> <ul> <li><code>站内资源</code>：当前网站的资源，一般使用相对路径。绝对路径的书写方式为<code>schema://host:port/path</code>。 <ul> <li><code>schema</code>：协议名，<code>https、http、file(表示本地文件)</code>，当跳转目标和当前页面协议相同时，可以省略协议。</li> <li><code>host:port</code>：<code>主机名:端口号</code>，主机名可以是域名、<code>IP</code>地址，如果协议是<code>http</code>则默认端口号为<code>80</code>。如果协议是<code>https</code>，则默认端口号为<code>443</code>。端口号一般有默认值，可以省略。</li> <li><code>path</code>：路径。</li> </ul> </li> <li><code>站外资源</code>：非当前网站的资源，只能使用绝对路径。 <ul> <li><code>./</code>：表示当前资源所在目录，可以省略。</li> <li><code>../</code>：表示上一级目录。</li> </ul> </li> </ul> <h2>8. 图片元素<code>img</code></h2> <ul> <li> <code>img</code>元素是一个空元素，常用属性如下： <ul> <li><code>src</code>：<code>source</code>，图片地址。</li> <li><code>alt</code>：当图片资源失效时，将使用该属性的文字替代图片。</li> <li><code>width</code>与<code>height</code>：设置图片的宽高，一般只设置一个，另一个属性会进行等比例缩放。</li> </ul> </li> <li> 与<code>a</code>元素联用：点击图片跳转到指定链接。 <pre><code class="prism language-html"> <body> <a href="https://www.yili.com" target="_blank"> <img src="./imgs/logo.png" alt="伊利官方网站"> </a> </body> </code></pre> </li> <li> 与<code>map</code>元素联用：点击图片的不同区域跳转到不同的地址。<code>img</code>元素中使用<code>usemap="#mapname"</code>和<code>map</code>元素进行关联。 <pre><code class="prism language-html"><body> <img src="./imgs/solar.png" alt="八大行星" title="八大行星" width="1000" usemap="#solar_map"> <map name="solar_map">  <area shape="circle" coords="167, 312, 100" href="https://baike.baidu.com/item/%e5%9c%b0%e7%90%83/6431" alt="地球" target="_blank">  <area shape="rect" coords="167, 312, 100" href="https://baike.baidu.com/item/%e5%9c%b0%e7%90%83/6431" alt="金星" target="_blank">  <area shape="poly" coords="167, 312, 100" href="https://baike.baidu.com/item/%e5%9c%b0%e7%90%83/6431" alt="天王星" target="_blank"> </map> </body> </code></pre> </li> <li> 与<code>figure</code>元素联用：当图片配有文字描述时，计算机并不知道该图片与文字有所关联，可以使用<code>figure</code>元素将其关联起来。 </li> </ul> <h2>9. <code>figure</code>、<code>figcaption</code>元素</h2> <ul> <li>概述：<code>figure </code>用于定义一个可附加标题的内容元素，其子元素<code>figcaption</code>用来为<code>figure</code>元素添加标题或描述信息，通常用于把图片、图片标题、描述内容包裹起来，如页面中的插图卡片。</li> <li>特性以及注意点： <ul> <li>于<code>HTML5</code>中新增，浏览器支持程度比较高，<code>IE8</code>及以下不支持。</li> <li><code>figure</code>的浏览器默认样式是宽度<code>100%</code>，高度依赖其内容的高度。</li> <li><code>figure</code>可以有多个子元素，但最好只有一个<code>figcaption</code>元素。</li> <li><code>figure</code>元素的内容不仅仅限于图片, 还可以包括诗词、代码段、表格。</li> </ul> </li> </ul> <h3>9.1 应用场景</h3> <ul> <li> 图片 <pre><code class="prism language-html"><figure> <img src="image.png" alt=""> <figcaption>caption and descriptions</figcaption> </figure> </code></pre> </li> <li> 代码段 <pre><code class="prism language-html"><figure> <figcaption>code</figcaption> <pre> function log(val) { console.log(val) } log('hello world') </pre> </figure> </code></pre> </li> <li> 引用文本 <pre><code class="prism language-html"><figure> <figcaption>Shakespeare: </figcaption> <blockquote>Nutrition books in the world. There is no book in life, there is no sunlight; wisdom without books, as if the birds do not have wings.</blockquote> </figure> </code></pre> </li> <li> 诗词 <pre><code class="prism language-html"><figure> <figcaption>滕王阁序</figcaption> <p>落霞与孤鹜齐飞，秋水共长天一色。</p> </figure> </code></pre> </li> </ul> <h3>9.2 插图卡片特效</h3> <pre><code><!DOCTYPE html> <html lang="zh"> <head> <meta chartset="UTF-8"> <title>图片插图
 MessyDuke Duke is very bored. When he looks at the sky, he feels to run.
 
 10. 多媒体元素audio、video
 - video：视频，通常使用.mp4文件、.webm文件。
 - audio：音频，通常使用.mp3文件。
 - 布尔属性：只有两种状态，要么不写False，要么取值为属性名或只写属性名True。audio、vedio常用的布尔属性如下：
 - controls：控制控件的显示。
 - autoplay：自动播放。
 - muted：静音播放。
 - loop：循环播放。
```
<audio src="video&audio/高鱼 - 天下.mp3" controls="controls" loop="loop" autoplay="autoplay">audio>
```
 - 兼容性问题：旧版的浏览器不支持audio、video元素，或者不同的浏览器支持的音频格式可能不一致，因此开发中一般同一个视频可能会准备多种格式。
```
<video controls autoplay muted loop style="width:500px;">
 <source src="media/open.mp4">
 <source src="media/open.webm">
 
 对不起, 您的浏览器不支持播放.mp4、.webm格式文件, 请下载最新版浏览器
 p>
video>
```
 11. 列表元素
 - 有序列表：ol表示整个列表，li表示列表中每一项。ol的子元素只能是li。
 - type属性：除非列表中序号很重要才使用type属性，否则使用CSS中的list-style-type属性设置序号样式。
 - a：表示小写字母编号。
 - A：表示大写字母编号。
 - i表示小写罗马数字编号。
 - I：表示大写罗马字母编号。
 - 1：表示使用数字编号，默认值。
 - reverse属性：布尔属性，倒序。
```
把大象装进冰箱需要哪三步p>
<ol type="i">
 <li>打开冰箱门li>
 <li>把大象放进去li>
 <li>关上冰箱门li>
ol>
```
 - 无序列表：ul表示整个列表，li表示列表中每一项，ul的子元素只能是li，开发中无序列表常用于制作菜单或新闻列表。
```
想要去旅游的城市p>
<ul>
 <li>重庆li>
 <li>浙江li>
 <li>北京li>
ul>
```
 - 定义列表：通常用于一些术语的定义，dl表示整个列表，dt表示术语，dd表示术语的描述。
```
HTML中的术语解释p>
<dl>
 <dt>HTMLdt>
 <dd>
 超文本标记语言XXXXXp>
 dd>
 <dt>元素dt>
 <dd>
 组成HTML文档的单元XXXXp>
 dd>
dl>
```
 12. 容器元素
 
 容器元素，表示一块区域，内部用于放置其他元素。在网页中最常见的容器元素就是div元素，div元素没有语义，浏览器无法理解每个div区域的含义。语义化容器元素即浏览器很容易理解每个区域的含义，如下：
 - article：通常用于表示整篇文章。
 - header：通常用于表示页头，也可以用于表示文章的头部。
 - footer：通常用于表示页脚，也可以用于表示文章的尾部。
 - section：通常用于表示文章的章节。
 - aside：通常用于表示侧边栏，即一些附加信息。
 - nav：通常用于表示导航信息。
```
<article>
 <header>
 <h1>地球大爆炸h1>
 header>
 <section>
 第一章p>
 Lorem, ipsum dolor.p>
 Officiis, magni velit.p>
 Nobis, esse odio.p>
 section>
 <section>
 第二章p>
 Lorem, ipsum dolor.p>
 Officiis, magni velit.p>
 Nobis, esse odio.p>
 section>
 <aside>侧边栏aside>
 <footer>作者: XXXfooter>
article>
```
 13. 块级元素 & 行内元素
 
 在HTML和CSS的体系中，块级元素和行内元素是两种不同类型的HTML元素，它们在页面布局和显示方式上有着显著区别。
 - 块级元素：独占一行，可以设置宽高，可以包含其他块级元素或行内元素。常见的块级元素有容器元素、h1-h6、p、li、ol、from等。
 - 行内元素：不独占一行，通常不能通过CSS设置宽高【部分元素如img元素除外】，宽高由内容决定，一般只能包含行内元素。常见的行内元素有a、span、img等等。
 对于更具体的元素说明以及元素间的嵌套关系，可以去mdn等网站查看。
 
 14. 其它元素
 - del：文本删除效果
 - ins：文本下划线效果
 - sub：文本下标效果
 - sup：文本上标效果
 - abbr：显示缩写说明
```
/*鼠标移到缩写文本处可以显示缩写说明*/
<abbr title="缩写说明">
 缩写文本
abbr>
```
 15. 常见的图片格式
 - jpg格式：有损的压缩格式，把肉眼不容易观察出来的细节丢弃。优点是支持颜色丰富，占用空间较少；缺点是不支持透明背景、不支持动态图。常用于网站的产品宣传图。
 - png格式：无损的压缩格式，能够更高质量的保存图片。优点是支持颜色丰富，支持透明背景；缺点是占用空间略大，不支持动态图。常用于公司logo、重要配图。
 - bmp格式：不进行压缩的一种格式，在最大程度上保留图片上的更多细节。优点是支持颜色丰富，保留细节更多；缺点是占用空间极大，不支持动态图。常用于一些大型游戏中的图片。
 - gif格式：优点是支持简单的透明背景，支持动态图。缺点是支持的颜色较少。常用于网页中的动态图片。
 - webp格式：谷歌推出的一种格式，专门用来在网页中呈现图片。具备上述几种格式的优点，但兼容性不太好。常用于网页中的各种图片。
 - base64格式：
 - 本质：一串特殊的文本，要通过浏览器打开，传统的看图软件无法打开。
 - 原理：把图片进行base64编码，形成一串文本，靠一些网站和工具生成。
 - 使用：直接作为图片标签的src属性的值即可。
 - 使用场景：一些较小的图片或需要和网页一起加载的图片。
 - 图片为什么要转换成base64格式：
 - 提升性能：网页中的每一张图片，都需要使用一个https请求下载而来。而base64可以随着HTML的下载的同时下载到本地，减少https请求。
 - 加密：让用户一眼看不出来是一张图片，只能看到编码。
 - 方便引用：在多个文件同时使用某些图片时，可以把图片转为base64格式的文件，把样式放在全局中，比如common.css，以后在使用时就可以直接加类名，而不需要多层寻找文件路径，提升开发效率。

你可能感兴趣的:(html,前端)

移动端城市区县二级联动选择功能实现包 good2know
本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
day15｜前端框架学习和算法 universe_01 前端算法笔记
T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的
SpringMVC的执行流程
1、什么是MVCMVC是一种设计模式。MVC的原理图如下所示M-Model模型（完成业务逻辑：有javaBean构成，service+dao+entity）V-View视图（做界面的展示jsp，html……）C-Controller控制器（接收请求—>调用模型—>根据结果派发页面2、SpringMVC是什么SpringMVC是一个MVC的开源框架，SpringMVC=Struts2+Spring，
Selenium 特殊控件操作与 ActionChains 实践详解小馋喵知识杂货铺 selenium 测试工具
1.下拉框单选操作(a)使用SeleniumSelect类（标准HTML标签）Selenium提供了内置的Select类用于操作标准下拉框，这种方式简单且直观。fromselenium.webdriver.support.uiimportSelect#定位下拉框dropdown=Select(driver.find_element("id","dropdown_id"))#通过以下三种方式选择单个
微信公众号回调java_处理微信公众号消息回调 weixin_39607620 微信公众号回调java
1、背景在上一节中，咱们知道如何接入微信公众号，可是以后公众号会与咱们进行交互，那么微信公众号如何通知到咱们本身的服务器呢？咱们知道咱们接入的时候提供的url是GET/mp/entry，那么公众号以后产生的事件将会以POST/mp/entry发送到咱们本身的服务器上。html2、代码实现，此处仍是使用weixin-java-mp这个框架实现一、引入weixin-java-mpcom.github.
人工智能应用研究快讯 2021-11-30 峰谷皆平
[HTML]ArtificialIntelligenceforSkinCancerDetection:ScopingReviewATakiddin,JSchneider,YYang,AAbd-Alrazaq...JournalofMedicalInternet...,2021ABSTACT:Background:Skincanceristhemostcommoncancertypeaffectin
【Jupyter】个人开发常见命令 TIM老师 #Pycharm &VSCode python Jupyter
1.查看python版本importsysprint(sys.version)2.ipynb/py文件转换jupyternbconvert--topythonmy_file.ipynbipynb转换为mdjupyternbconvert--tomdmy_file.ipynbipynb转为htmljupyternbconvert--tohtmlmy_file.ipynbipython转换为pdfju
用代码生成艺术字：设计个性化海报的秘密
本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准
vue element 封装表单影子信息 vue vue.js javascript 前端
背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进
前端面试每日 3+1 —— 第39天浪子神剑
今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss
GDP经济社会人文民生栅格数据下载网站汇总疯狂学习GIS
本文为“GIS数据获取整理”专栏（https://blog.csdn.net/zhebushibiaoshifu/category_10857546.html）中第八篇独立博客，因此本文全部标题均由“8”开头。本文对目前主要的GDP、社会与经济数据获取网站加以整理与介绍，若需其它GIS领域数据（如遥感影像数据、气象数据、土地土壤数据、农业数据等），大家可以点击上方专栏查看，也可以看这一篇汇总文
【MySQL】MySQL数据库如何改名武昌库里写JAVA 面试题汇总与解析 spring boot vue.js sql java 学习
MySQL建库授权语句https://www.jianshu.com/p/2237a9649ceeMySQL数据库改名的三种方法https://www.cnblogs.com/gomysql/p/3584881.htmlMySQL安全修改数据库名几种方法https://blog.csdn.net/haiross/article/details/51282417MySQL重命名数据库https://
前端数据库：IndexedDB从基础到高级使用指南
文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.
【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三）笙囧同学 java 前端状态模式
核心功能设计用户管理系统用户管理是整个系统的基础，我设计了完整的用户生命周期管理：用户注册流程验证失败验证通过验证失败验证通过用户名已存在用户名可用失败成功用户访问注册页面填写注册信息前端表单验证显示错误提示提交到后端后端数据验证返回错误信息用户名唯一性检查提示用户名重复密码加密处理保存用户信息保存成功?显示系统错误注册成功跳转登录页面登录认证机制深度解析我实现了一套企业级的多层次安全认证机制：认
从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战
作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：[email protected]各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯前言在AI技术飞速发展的今天，如何将前沿的大模型技术与实际应用相结合，一直是我们开发者关注的焦点。今天，笙囧同学将带大家从零开始，构建一个基于GigaChatAI的艺术创作平台，实现React前端+Django后端的完整全栈解决方案。这不仅仅是
14.tornado操作之应用Websocket协议实现聊天室功能孤寒者 Tornado框架从入门到实战 websocket tornado 聊天室功能实现 python
目录：每篇前言：1.什么是WebSocket（1）定义（2）优点（3）和HTTP对比（4）适用场景2.WebSocket关键方法3.本tornado项目中使用WebSocket（1）准备一个聊天室的页面：第一步：编写视图：第二步：编写接口：（app.py中加入以下接口！）第三步：编写前端页面：测试接口——响应OK！（2）使用WebSocket：（3）聊天室的聊天功能的最终实现：第一步：战前准备第二
为什么学习Web前端一定要掌握JavaScript？ web前端学习指南
为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。
小架构step系列25：错误码秋千码途架构 java
1概述一个系统中，可能产生各种各样的错误，对这些错误进行编码。当错误发生时，通过这个错误码就有可能快速判断是什么错误，不一定需要查看代码就可以进行处理，提高问题处理效率。有了统一的错误码，还可以标准化错误信息，方便把错误信息纳入文档管理和对错误信息进行国际化等。没有错误码的管理，开发人员就会按自己的理解处理这些错误。有些直接把堆栈直接反馈到前端页面上，使用看不懂这些信息体验很差，也暴露了堆栈信息有
Java朴实无华按天计划从入门到实战（强化速战版-66天）岫珩 Java 后端 java 开发语言学习 Java 时间安排学习计划
致敬读者感谢阅读笑口常开生日快乐⬛早点睡觉博主相关博主信息博客首页专栏推荐活动信息文章目录Java朴实无华按天计划从入门到实战（强化速战版-66天）1.基础（18）1.1JavaSE核心（5天）1.2数据库与SQL（5天）1.3前端基础（8天）2.进阶（17天）2.1JavaWeb核心（5天）2.2Mybatis与Spring全家桶（6天）2.3中间件入门（4天）2.4实践项目（2天）3.高阶（1
《跨域资源共享CORS的深层逻辑与前端实践精要》
不同源头的资源交互已成为常态，而跨域资源共享（CORS）正是支撑这种交互的隐形架构。现代Web安全体系中平衡开放与防护的精妙设计。理解CORS的深层逻辑，不仅能解决实际开发中的跨域难题，更能触及网络安全与资源流通的核心矛盾，为前端工程师构建稳健的应用提供底层认知支撑。跨域资源共享的诞生，源于网络安全与应用发展的必然冲突。浏览器的同源策略，作为早期网络安全的基石，通过限制不同源文档的交互，有效阻挡了
深入了解 Kubernetes（k8s）：从概念到实践
目录一、k8s核心概念二、k8s的优势三、k8s架构组件控制平面组件节点组件四、k8s+docker运行前后端分离项目的例子1.准备前端项目2.准备后端项目3.创建k8s部署配置文件4.部署应用到k8s集群在当今云计算和容器化技术飞速发展的时代，Kubernetes（简称k8s）已成为容器编排领域的事实标准。无论是互联网巨头、传统企业还是初创公司，都在广泛采用k8s来管理和部署容器化应用。本文将带
移动端适配rem方案简单的码农
1.rem+动态html的font-size1.rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的font-size尺寸。2.比如如下案例：设置一个盒子的宽度是2rem；设置不同的屏幕上html的font-size不同；image这样在开发中，我们只需要考虑两个问题：问题一：针对不同的屏幕，设置html不同的font-s
Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录二倍速播放前端 vue.js
1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非
redis反弹shell时kali无法接收回弹的解决方法显哥无敌 shell redis
无法接受回谈大概率是bash命令写的不对，那个crontab中间的星号个数是有意义的，不是随便加的，下面贴一下crontab的基本用法https://www.cnblogs.com/zhoading/p/11572630.html{minute}{hour}{day-of-month}{month}{day-of-week}{full-path-to-shell-script}如果是要cronta
native.js设置可缩放的webview并隐藏缩放控件 Nanayai
需求明确:webview页面可以手指缩放,并且不要那个原生控件;实现思路:1.使用h5+封装好的方法:设置scalable属性,并在html中设置meta标签:user-scalable=yes或不设置,minimum-scale和maximum-scale需要注意不要都设为1:mui.openWindow({url:"someThing",id:"someThing",styles:{scala
大厂都在用的前端缓存策略，你掌握了吗？ AI架构全栈开发实战笔记前端缓存 ai
大厂都在用的前端缓存策略，你掌握了吗？关键词：前端缓存、HTTP缓存、ServiceWorker、CDN缓存、缓存策略、性能优化、浏览器缓存摘要：本文将深入探讨前端开发中常用的缓存策略，从浏览器缓存到ServiceWorker，从HTTP缓存头到CDN缓存，全面解析大厂都在使用的高效缓存技术。通过生动的比喻和实际代码示例，帮助开发者理解并掌握这些提升Web应用性能的关键技术。背景介绍目的和范围本文
Redis反弹Shell 波吉爱睡觉 web安全 #未授权访问漏洞 #SSRF redis 网络安全 web安全
这里我来总结几种Redis反弹Shell的方法一、利用Redis写WebShell前提条件开了web服务器，并且知道路径，还需要有文件读写增删改查的权限条件比较苛刻，但是满足条件上传就会简单一点，我们直接将文件写入www目录下，完了使用工具连接即可。语句：redis:6379>configsetdir/var/www/html/redis:6379>configsetdbfilenameshell
26. 什么是雪碧图，作用和原理了解吗 yqcoder 前端面试-CSS css 前端 html
总结小图合成一张，使用background来使用，减少资源请求一、什么是雪碧图？雪碧图（CSSSprite）是一种前端优化技术，指的是将多个小图标合并成一张大图，通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图，减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不
H5UI微信小程序前端框架实战指南 ai
本文还有配套的精品资源，点击获取简介：H5UI是一个为微信小程序开发设计的前端框架，基于H5技术，提供简洁高效的组件库。框架集成了丰富的UI元素，如按钮、表格、导航栏等，简化了界面布局和交互的实现。通过安装、引入、使用组件和事件绑定四个步骤，开发者可以轻松构建功能齐全的应用。了解性能优化等注意事项对于高效开发同样重要。1.微信小程序前端开发框架介绍微信小程序概述微信小程序是微信官方推出的一种无需下
Windows下Oracle安装图解叫我老村长
Windows下Oracle安装图解----oracle-win-64-11g详细安装步骤一、Oracle下载官方下地址http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.htmlwin32位操作系统下载地址：http://download.oracle.com/otn/nt/oracle11g
Java序列化进阶篇 g21121 java序列化
1.transient 类一旦实现了Serializable 接口即被声明为可序列化，然而某些情况下并不是所有的属性都需要序列化，想要人为的去阻止这些属性被序列化，就需要用到transient 关键字。
escape()、encodeURI()、encodeURIComponent()区别详解 aigo JavaScript Web
原文：http://blog.sina.com.cn/s/blog_4586764e0101khi0.html JavaScript中有三个可以对字符串编码的函数，分别是： escape,encodeURI,encodeURIComponent，相应3个解码函数：,decodeURI,decodeURIComponent 。下面简单介绍一下它们的区别 1 escape()函
ArcgisEngine实现对地图的放大、缩小和平移 Cb123456 添加矢量数据对地图的放大、缩小和平移 Engine
ArcgisEngine实现对地图的放大、缩小和平移: 个人觉得是平移，不过网上的都是漫游，通俗的说就是把一个地图对象从一边拉到另一边而已。就看人说话吧. 具体实现: 一、引入命名空间 using ESRI.ArcGIS.Geometry; using ESRI.ArcGIS.Controls; 二、代码实现.
Java集合框架概述天子之骄 Java集合框架概述
集合框架集合框架可以理解为一个容器，该容器主要指映射(map)、集合(set)、数组(array)和列表(list)等抽象数据结构。从本质上来说，Java集合框架的主要组成是用来操作对象的接口。不同接口描述不同的数据类型。简单介绍： Collection接口是最基本的接口，它定义了List和Set，List又定义了LinkLi
旗正4.0页面跳转传值问题何必如此 java jsp
跳转和成功提示 a) 成功字段非空forward 成功字段非空forward，不会弹出成功字段，为jsp转发，页面能超链接传值,传输变量时需要拼接。接拼接方式list.jsp?test="+strweightUnit+"或list.jsp?test="+weightUnit+&qu
全网唯一:移动互联网服务器端开发课程 cocos2d-x小菜 web开发移动开发移动端开发移动互联程序员
移动互联网时代来了！ App市场爆发式增长为Web开发程序员带来新一轮机遇，近两年新增创业者，几乎全部选择了移动互联网项目！传统互联网企业中超过98%的门户网站已经或者正在从单一的网站入口转向PC、手机、Pad、智能电视等多端全平台兼容体系。据统计，AppStore中超过85%的App项目都选择了PHP作为后端程
Log4J通用配置|注意问题笔记 7454103 DAO apache tomcat log4j Web
关于日志的等级那些去百度就知道了！这几天要搭个新框架配置了日志记下来！做个备忘！ #这里定义能显示到的最低级别,若定义到INFO级别,则看不到DEBUG级别的信息了~! log4j.rootLogger=INFO,allLog # DAO层 log记录到dao.log 控制台和总日志文件 log4j.logger.DAO=INFO,dao,C
SQLServer TCP/IP 连接失败问题 ---SQL Server Configuration Manager darkranger sql c windows SQL Server XP
当你安装完之后,连接数据库的时候可能会发现你的TCP/IP 没有启动.. 发现需要启动客户端协议 : TCP/IP 需要打开 SQL Server Configuration Manager... 却发现无法打开 SQL Server Configuration Manager..?? 解决方法: C:\WINDOWS\system32目录搜索framedyn.
[置顶] 做有中国特色的程序员 aijuans 程序员
从出版业说起网络作品排到靠前的，都不会太难看，一般人不爱看某部作品也是因为不喜欢这个类型，而此人也不会全不喜欢这些网络作品。究其原因，是因为网络作品都是让人先白看的，看的好了才出了头。而纸质作品就不一定了，排行榜靠前的，有好作品，也有垃圾。许多大牛都是写了博客，后来出了书。这些书也都不次，可能有人让为不好，是因为技术书不像小说，小说在读故事，技术书是在学知识或温习知识，有些技术书读得可
document.domain 跨域问题 avords document
document.domain用来得到当前网页的域名。比如在地址栏里输入：javascript:alert(document.domain); //www.315ta.com我们也可以给document.domain属性赋值，不过是有限制的，你只能赋成当前的域名或者基础域名。比如：javascript:alert(document.domain = "315ta.com");
关于管理软件的一些思考 houxinyou 管理
工作好多看年了,一直在做管理软件,不知道是我最开始做的时候产生了一些惯性的思维,还是现在接触的管理软件水平有所下降.换过好多年公司,越来越感觉现在的管理软件做的越来越乱. 在我看来,管理软件不论是以前的结构化编程,还是现在的面向对象编程,不管是CS模式,还是BS模式.模块的划分是很重要的.当然,模块的划分有很多种方式.我只是以我自己的划分方式来说一下. 做为管理软件,就像现在讲究MVC这
NoSQL数据库之Redis数据库管理(String类型和hash类型) bijian1013 redis 数据库 NoSQL
一.Redis的数据类型 1.String类型及操作 String是最简单的类型，一个key对应一个value，string类型是二进制安全的。Redis的string可以包含任何数据，比如jpg图片或者序列化的对象。 Set方法：设置key对应的值为string类型的value
Tomcat 一些技巧征客丶 java tomcat dos
以下操作都是在windows 环境下一、Tomcat 启动时配置 JAVA_HOME 在 tomcat 安装目录，bin 文件夹下的 catalina.bat 或 setclasspath.bat 中添加 set JAVA_HOME=JAVA 安装目录 set JRE_HOME=JAVA 安装目录/jre 即可；二、查看Tomcat 版本在 tomcat 安装目
【Spark七十二】Spark的日志配置 bit1129 spark
在测试Spark Streaming时，大量的日志显示到控制台，影响了Spark Streaming程序代码的输出结果的查看(代码中通过println将输出打印到控制台上)，可以通过修改Spark的日志配置的方式，不让Spark Streaming把它的日志显示在console 在Spark的conf目录下，把log4j.properties.template修改为log4j.p
Haskell版冒泡排序 bookjovi 冒泡排序 haskell
面试的时候问的比较多的算法题要么是binary search，要么是冒泡排序，真的不想用写C写冒泡排序了，贴上个Haskell版的，思维简单，代码简单，下次谁要是再要我用C写冒泡排序，直接上个haskell版的，让他自己去理解吧。 sort [] = [] sort [x] = [x] sort (x:x1:xs) | x>x1 = x1:so
java 路径配置文件读取 bro_feng java
这几天做一个项目，关于路径做如下笔记，有需要供参考。取工程内的文件，一般都要用相对路径，这个自然不用多说。在src统计目录建配置文件目录res,在res中放入配置文件。读取文件使用方式： 1. MyTest.class.getResourceAsStream("/res/xx.properties") 2. properties.load(MyTest.
读《研磨设计模式》-代码笔记-简单工厂模式 bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 个人理解：简单工厂模式就是IOC; * 客户端要用到某一对象，本来是由客户创建的，现在改成由工厂创建，客户直接取就好了 */ interface IProduct {
SVN与JIRA的关联 chenyu19891124 SVN
SVN与JIRA的关联一直都没能装成功，今天凝聚心思花了一天时间整合好了。下面是自己整理的步骤：一、搭建好SVN环境，尤其是要把SVN的服务注册成系统服务二、装好JIRA，自己用是jira-4.3.4破解版三、下载SVN与JIRA的插件并解压，然后拷贝插件包下lib包里的三个jar，放到Atlassian\JIRA 4.3.4\atlassian-jira\WEB-INF\lib下，再
JWFDv0.96 最新设计思路 comsci 数据结构算法工作企业应用公告
随着工作流技术的发展，工作流产品的应用范围也不断的在扩展，开始进入了像金融行业(我已经看到国有四大商业银行的工作流产品招标公告了)，实时生产控制和其它比较重要的工程领域，而
vi 保存复制内容格式粘贴 daizj vi 粘贴复制保存原格式不变形
vi是linux中非常好用的文本编辑工具，功能强大无比，但对于复制带有缩进格式的内容时，粘贴的时候内容错位很严重，不会按照复制时的格式排版，vi能不能在粘贴时，按复制进的格式进行粘贴呢？答案是肯定的，vi有一个很强大的命令可以实现此功能。在命令模式输入:set paste，则进入paste模式，这样再进行粘贴时
shell脚本运行时报错误：/bin/bash^M: bad interpreter 的解决办法 dongwei_6688 shell脚本
出现原因：windows上写的脚本，直接拷贝到linux系统上运行由于格式不兼容导致解决办法： 1. 比如文件名为myshell.sh，vim myshell.sh 2. 执行vim中的命令 : set ff?查看文件格式，如果显示fileformat=dos，证明文件格式有问题 3. 执行vim中的命令 :set fileformat=unix 将文件格式改过来就可以了，然后:w
高一上学期难记忆单词 dcj3sjt126com word english
honest 诚实的；正直的 argue 争论 classical 古典的 hammer 锤子 share 分享；共有 sorrow 悲哀；悲痛 adventure 冒险 error 错误；差错 closet 壁橱；储藏室 pronounce 发音；宣告 repeat 重做；重复 majority 大多数；大半 native 本国的，本地的，本国
hibernate查询返回DTO对象，DTO封装了多个pojo对象的属性 frankco POJO hibernate查询 DTO
DTO-数据传输对象；pojo-最纯粹的java对象与数据库中的表一一对应。简单讲：DTO起到业务数据的传递作用，pojo则与持久层数据库打交道。有时候我们需要查询返回DTO对象，因为DTO
Partition List hcx2013 partition
Given a linked list and a value x, partition it such that all nodes less than x come before nodes greater than or equal to x. You should preserve the original relative order of th
Spring MVC测试框架详解——客户端测试 jinnianshilongnian
上一篇《Spring MVC测试框架详解——服务端测试》已经介绍了服务端测试，接下来再看看如果测试Rest客户端，对于客户端测试以前经常使用的方法是启动一个内嵌的jetty/tomcat容器，然后发送真实的请求到相应的控制器；这种方式的缺点就是速度慢；自Spring 3.2开始提供了对RestTemplate的模拟服务器测试方式，也就是说使用RestTemplate测试时无须启动服务器，而是模拟一
关于推荐个人观点 liyonghui160com 推荐系统关于推荐个人观点
回想起来，我也做推荐了3年多了，最近公司做了调整招聘了很多算法工程师，以为需要多么高大上的算法才能搭建起来的，从实践中走过来，我只想说【不是这样的】第一次接触推荐系统是在四年前入职的时候，那时候，机器学习和大数据都是没有的概念，什么大数据处理开源软件根本不存在，我们用多台计算机web程序记录用户行为，用.net的w
不间断旋转的动画 pangyulei 动画
CABasicAnimation* rotationAnimation; rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; rotationAnimation.toValue = [NSNumber numberWithFloat: M
自定义annotation sha1064616837 java enum annotation reflect
对象有的属性在页面上可编辑，有的属性在页面只可读，以前都是我们在页面上写死的，时间一久有时候会混乱，此处通过自定义annotation在类属性中定义。越来越发现Java的Annotation真心很强大，可以帮我们省去很多代码，让代码看上去简洁。下面这个例子主要用到了 1.自定义annotation：@interface，以及几个配合着自定义注解使用的几个注解 2.简单的反射 3.枚举
Spring 源码 up2pu spring
1.Spring源代码 https://github.com/SpringSource/spring-framework/branches/3.2.x 注：兼容svn检出 2.运行脚本 import-into-eclipse.bat 注：需要设置JAVA_HOME为jdk 1.7 build.gradle compileJava { sourceCompatibilit
利用word分词来计算文本相似度 yangshangchuan word word分词文本相似度余弦相似度简单共有词
word分词提供了多种文本相似度计算方式：方式一：余弦相似度，通过计算两个向量的夹角余弦值来评估他们的相似度实现类：org.apdplat.word.analysis.CosineTextSimilarity 用法如下： String text1 = "我爱购物"; String text2 = "我爱读书"; String text3 =

HTML基础

1. 相关专业术语

2. 元素

3. 标准的文档结构【`W3C`】

MessyDuke

10. 多媒体元素`audio`、`video`

11. 列表元素

12. 容器元素

13. 块级元素 `&` 行内元素

14. 其它元素

15. 常见的图片格式

你可能感兴趣的:(html,前端)

HTML基础

1. 相关专业术语

2. 元素

3. 标准的文档结构【W3C】

MessyDuke

10. 多媒体元素audio、video

11. 列表元素

12. 容器元素

13. 块级元素 & 行内元素

14. 其它元素

15. 常见的图片格式

你可能感兴趣的:(html,前端)

3. 标准的文档结构【`W3C`】

10. 多媒体元素`audio`、`video`

13. 块级元素 `&` 行内元素