HTML入门学习
前言
Web开发介绍
开发工具
HTML发展史
HTML概念
HTML历史
XHTML
`XHTML`与`HTML`的区别
HTML语义化
HTML初识
HTML常用标签
基本结构
标题标签
段落标签
div标签与span标签
链接
图片标签
列表
表格
表单
input的相关属性
input的type属性用途
数字输入框
密码输入框
email输入框
url输入框
提交按钮
重置按钮
搜索框
文件上传
单选按钮
多选按钮
其它相关表单元素
前言
Web诞生
Internet
中文正式译名为因特网，又叫作国际互联网，是由所有使用公共语言互相通信的计算机连接而组成的全球网络。
起源发展
20世纪60年代美国国防部高级研究计划局（ARPA）建设了一个军用网，叫做“阿帕网”（ARPAnet），于1969年正式启用。、
1992年，美国IBM、MCI、MERIT三家公司联合组建了一个高级网络服务公司（ANS），建立了一个新的网络，使Internet开始商用化。
WWW（万维网）
WWW是World Wide Web的缩写，也可以写为W3，中文名为万维网。是集文本、声音、图像、视频等多媒体信息于一身的全球信息资源网络。用户通过浏览器在WWW中搜索和浏览自己感兴趣的所有信息。
Web开发介绍
Web开发分为前端开发与后端开发，在以前是不区分前后端的，前后端的相互独立开发减少了业务难度，也使得后端的错误不会直接反映到前端。
前端开发
前端指的是直接与用户接触的网页，网页上通常有HTML、CSS、Javascript等内容。
后端开发
后端指的是程序、数据库和服务器层面的开发。
Web开发的标准
Web应用开发需要遵循的标准就叫Web标准，这里Web标准是一系列标准的集合。XML、HTML和XHTML），表现标准（CSS），行为标准（DOM、Javascrip）。
HTML
HTML用来构成网页的内容，内容就是网页制作者放在页面上想让用户浏览的信息，例如文字、图片、视频等等，简单来说就是用来定义网页的内容。
CSS
CSS决定网页样式的展现，也就是网页的外观。
JavaScript
JavaScript定义网页上的交互，控制网页的行为。
开发工具
开发工具可以使用微软的VScode，它具有丰富的插件，能够快速进行开发。
HTML发展史
HTML概念
HTML又叫做超文本标记语言，用来构建网页的一种标记语言
HTML历史
1993年由互联网工程工作小组（IETF）发布工作草案1995年发布HTML2.0版本
1997年1月14日由W3C发布HTML3.2版本
1997年12月18日由W3C发布HTML4.0版本
1999年由W3C发布HTML4.01版本
2000年由W3C发布XHTML1.0版本，它是一种更严格的HTML代码
XHTML
XHTML是可扩展超文本标记语言，是一种更加严格、更加纯净的HTML语言。
XHTML与HTML的区别
XHTML元素必须被正确地嵌套
XHTML元素必须被关闭
标签名必须用小写字母
XHTML文档必须拥有根元素
HTML语义化
HTML5中新增加了很多语义化标签，不同的HTMI标签代表了不同的网页内容。
语义化 优势
HTML初识
HTML标签
单标签
单标签：只有一个标签就能表达完整的含义
例如：
反斜线不用写标签也是可以被渲染出来的，
双标签
双标签：由开始标签和结束标签一起组成
例如：
``
元素
一对标签包含的所有内容，其中元素的内容是指开始标签和结束标签之间的内容。
例如：Hello World
属性
标签可以有很多属性，属性总是在开始标签中定义，而且是以名值对的形式出现，其中属性值以双引号包裹。
例如：
一个简单的页面
< htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> title > head > < body> < div> div > body > html >
HTML常用标签
基本结构
< htmllang = " en" > < head> head > < body> body > html > 如上代码是HTML的一个基本结构，HTML5的文档声明标签，表示这个文档是HTML5的文件，html对大小写并不敏感，即使用大写的代码也会最终当作小写进行处理的，但是为了代码的规范，除了声明标签，其它的html标签均使用小写。
html的根标签，lang=en表示这个页面是英文的，JS等内容。
< head> < metacharset = " UTF-8" > < title> title > head > UTF-8，Document Document，最终会反映到浏览器渲染的页面上。
我们可以在编辑器中保存我们所写的页面为HTML文件（后缀名为.html），然后通过浏览器打开，也可以凭借VScode丰富的插件来打开文件，有关VScode的插件用法可以在网上查阅相关信息。
标题标签
< htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> title > head > < body> < h1> h1 > < h2> h2 > < h3> h3 > < h4> h4 > < h5> h5 > < h6> h6 > body > html >
之后的代码将不给出完整代码，只给出必要代码。
h1是最高的级别，也会被渲染成字体最大的级别。被包裹在标签内的是它的文本内容，最终会被浏览器渲染出来。
段落标签
有段落标题自然会有段落，段落标签使用的是
< p> p >
需要注意的是，标签里的文本内容会依据浏览器的大小自动折行（实际上文本内容是依据标签大小折行的，而标签大小则依据浏览器视口大小），这也是html的优势。
div标签与span标签
如果说有最基本的元素，那么标签可以算作基本标签，
可定义文档中的分区或节（division/section）。
标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
标签是一个块级标签，可以作为一个容器包裹其它元素进行使用。
< div> div > < div> div > < span> span > < span> span >
上述代码渲染成的页面如上图所示，可以看到在默认情况下一个标签占据浏览器一行，并且高度由内部文本内容决定，而
默认时，高度由文本内容决定，宽度也由内部文本内容决定，可以在浏览器内按F12详细查看这两个标签的信息：
通过div就能将页面内容划分开，再配合css层叠样式就能得到想要的页面效果。
链接
在一个网页中经常存在一段文字或图片点击时就能跳转到其它页面，这就是通过
< ahref = " http://www.baidu.com" > < span> span > a >
在a标签内包裹着span标签，span内是我们想要通过点击它就能跳转的文字。
a标签内的href属性可以指定我们要跳转的页面，上述是百度官网。a标签还含有一个target属性，默认的值是_self，表示如果点击链接那么会在当前窗口打开链接，还可以设置成_blank表示在新窗口中打开链接。
图片标签
图片标签使用src，代表图片地址，一个是alt，表示图片无法显示时的替代文本。
src属性可以使用相对路径，也可以用绝对路径。
< imgsrc = " https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1592463426&di=4b7413ebc5eaa0e536ac0447a46603a7&imgtype=jpg&src=http%3A%2F%2Fimg6.bdstatic.com%2Fimg%2Fimage%2Fpublic%2Fhelian.jpg" alt = " 百度图片" /> 以上所使用的就是绝对路径。因为html文件最终会部署到服务器内，所以使用类似./../这个方式是可以遍历到以当前文件为起点的其它文件的，例如，./hello.txt访问的是同级目录中的hello.txt文件，而./../hello.txt访问的是父级目录中的hello.txt文件，其它有关相对路径知识请自行百度解决，此处不再赘述。
还可以为img设置title属性，当鼠标悬浮在图片上方时，会显示设置的title内容。
列表
在word中经常可以通过项目符号在一个个项目前添加符号，在html中也有列表标签
有序列表
< ol> < li> li > < li> li > < li> li > < li> li > < li> li > < li> li > < li> li > ol >
如上代码所示，有序列表用
在type属性可以更改以数字作为开头的列表排序方式，比如设置type='a'就能以小写英文字母作为排序规则。
< oltype = " a" > < li> li > < li> li > < li> li > < li> li > < li> li > < li> li > < li> li > ol >
无序列表
无需列表用
< ul> < li> li > < li> li > < li> li > < li> li > < li> li > < li> li > < li> li > ul >
同样的，ol也可以通过设置type来设置排序的样式，type=square时，渲染出来的效果是每一项前都有一个黑色方块。
自定义列表
< dl> < dt> dt > < dd> dd > < dd> dd > < dd> dd > < dd> dd > < dd> dd > < dt> dt > < dd> dd > < dd> dd > < dd> dd > < dd> dd > < dd> dd > dl >
如上是自定义列表的基本结构。
dt标签是自定义列表的标题标签，dd是每一项自定义列表的内容。
dl是description list的缩写，dtdescription title的缩写，dd是description definition的英文缩写，在了解英文语义时，就能很方便的进行记忆。
表格
表格的基本内容：
< table> < caption> caption > < tr> < th> th > < th> th > < th> th > tr > < tr> < td> td > < td> td > < td> td > tr > < tr> < td> td > < td> td > < td> td > tr > table >
以上会被渲染出没有边框的表格出来，标签表示接下来的区域是表格内容。
标签表示一行表格的内容，定义表格的表头内容，而则定义出表格基本单元格内容。
为了增添表格的语义化，增加、、标签（实际上不仅仅为了语义化，还有方便网页对整个表格的加载）：
< table> < caption> caption > < tr> < th> th > < th> th > < th> th > tr > < tr> < td> td > < td> td > < td> td > tr > < tr> < td> td > < td> td > < td> td > tr > table > < table> < caption> caption > < thead> < tr> < th> th > < th> th > < th> th > tr > thead > < tbody> < tr> < td> td > < td> td > < td> td > tr > < tr> < td> td > < td> td > < td> td > tr > < tr> < td> td > < td> td > < td> td > tr > tbody > < tfoot> < tr> < td> td > < td> td > < td> td > tr > tfoot > table >
tr是table row的英文缩写，表示表格中的行；th是table head的英文缩写，表示表头；td是table data的英文缩写，表示表格中的基本单元格。
表格属性
对于如上这样有着合并跨越、并且还含有居左对齐和顶端对齐的表格，接下来我们将单纯依靠html的属性来完成。
< tableborder = " 1" width = " 300" height = " 100" > < tr> < tdrowspan = " 2" align = " center" > td > < tdcolspan = " 3" align = " center" > td > tr > < tr> < tdcolspan = " 3" align = " left" > td > tr > < tr> < tdalign = " right" > td > < tdalign = " right" > td > < tdrowspan = " 3" colspan = " 2" align = " center" valign = top> td > tr > < tr> < tdalign = " right" > td > < tdalign = " right" > td > tr > < tr> < tdalign = " right" > td > < tdalign = " right" > td > tr > table >
如上，设置单元格合并跨越是通过为td标签设置rowspan与colspan属性达到的，rowspan是要跨越合并的行的数目，colspan则是列的数目。对齐方式则通过align与valign完成，align是水平对齐方式，valign是列对齐方式`。
表格的边框则通过为table设置border属性以达到。
以上是通过html的属性做出的表格效果，但是建议将表格效果通过css达到，html应当更多地偏重于页面结构地设置与语义化。
表单
定义表单结构使用
< formaction = " " method = " get" > < div> < inputtype = " text" > div > form >
form中含有的action属性表示的是这个表单要被提交到的地址，method表示文件被提交的方式，被提交的方式一般有两种：post与get。
input的相关属性
input元素中的type='text'出现一个输入框，当input中含有一个属性required时，表示该输入框中一定要输入内容,否则按提交按钮时无法提交。
< formaction = " " method = " get" > < div> < inputtype = " text" required > div > < inputtype = " submit" value = " 提交" > form >
当input中设置了readonly属性时，表示输入框中已经设置的value值不可通过输入更改，在提交时，value值会提交到后台；如果给input设置了disabled，也能达到readonly只读的效果，但不会把value值提交到后台中。
input中设置palceholder表示设置一个"提示信息"，该"提示信息"文本内容，在输入框获得焦点时隐藏起来。
< inputtype = " text" name = " " id = " " placeholder = " 默认内容" >
input的hidden表示将输入框隐藏起来，但在提交信息时，依然会被提交（看不见，但是存在）。
input的pattern可以为input设置一个正则表达式，用于javascript来验证input的输入内容是否符合正则的格式。
input的type属性用途
input标签中的type决定了input的用途。
数字输入框
type=number表示要求输入框内的值是数字；
< div> < inputtype = " number" > div >
密码输入框
type=password表示输入的内容会以黑点隐藏起来，
< div> < inputtype = " password" > div >
email输入框
type=email要求输入框内的内容符合email格式；
url输入框
type=url要求输入框内的内容符合url格式；
提交按钮
type=submit时，输入框变成一个按钮
< formaction = " " method = " get" > < div> < inputtype = " text" required > div > < inputtype = " submit" value = " 提交" > form >
它用于向表单的action提交表单的内容。
重置按钮
与type=submit类似的还有type=reset，它与submit一样根据value属性渲染出按钮内容，如果按这个按钮会将输入框的内容重置。
搜索框
将input的type设置成search会出现搜索框，我们进行搜索时一般会留有搜索历史，如果不想显示搜索历史，只需将search的input中添加autocomplete="off"即能关闭搜索历史。
< inputtype = " search" list = " fruits" > < form> < datalistid = " fruits" > < optionvalue = " orange" > option > < optionvalue = " apple" > option > < optionvalue = " banana" > option > datalist > form >
该搜索框采用了自定义的数据源
文件上传
把input中的type属性设置成file表示上传文件，文件格式用accept属性进行限制，例如要求上传"jpg"或者"png"格式文件时，accept设置成accept=.jpg,.png，accept可以接收多种文件格式，文件拓展名以逗号隔开；在input内使用multiple，同时name属性设置的值后面加上"[]"，可以同时上传多个文件。
< inputtype = " file" name = " " id = " " accept = " .png,.jpg" > 单选按钮
< formaction = " " method = " get" > < labelfor = " man" > < inputtype = " radio" name = " sex" value = " man" id = " man" > label > < labelfor = " woman" > < inputtype = " radio" name = " sex" value = " woman" id = " woman" checked > label > form >
这个单选按钮的设置关键在于要将多个选项的name属性设为一致，另外就是为单选按钮设置checked时，它会默认被选中。
设置label标签的优点在于，被点击label包裹的所有内容（包括文本内容），它都会指向label标签中for属性对应id值（意思是for等于号右边的是一个标签的id）。
多选按钮
< inputtype = " checkbox" name = " program[]" value = " 12" > < labelfor = " 12" > label > < inputtype = " checkbox" name = " program[]" value = " 13" > < labelfor = " 13" > label >
和radio类似，不过name="program[]"中的program[]像是一个数组（或者列表），实际上checkbox的value被点击后确实会被添加进这个数组（或者列表），表单提交后会传进后台。
其它相关表单元素
文本域
textarea文本域，rows控制行数，cols控制列数，textarea设置默认值时不能使用value值，可以直接用代码块包裹默认值。
< textareaplaceholder = " 提示信息" name = " info" cols = " 20" rows = " 3" > textarea >
下拉列表
select用于设置下拉列表，option表示设置可以选择的子选项，option中设置一个selected表示该选项默认被选中。
< labelfor = " " > < selectname = " check-bar" id = " " > < optionvalue = " 0" selected > option > < optionvalue = " 1" > option > < optionvalue = " 2" > option > select > label >
你可能感兴趣的:(HTML极简入门学习)
移动端城市区县二级联动选择功能实现包
good2know
本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
自律打卡第四天：比昨天进步一点点
花儿的念想
今天新闻我们县城又确诊了一例，截止目前已经确诊的三例了，打开，看了一篇简友写的武汉的真实情况，有病住不了院，还没等到床位已经去世的消息，心里更加的难受，武汉尚且这样，如果是我们这没有高速没有火车的十八线的小县城发生这种情况，那情况将是更加的不堪设想，不敢想，唯有祈求灾难早点快去，平安才是最大的福气。突然觉得我的自律打卡，比昨天进步一点点。更希望疫情战争每一天都要比昨天好一点，希望一觉醒来听到的是好
贝多芬诞辰250周年纪念
万千星河赴远方
就算不是古典音乐爱好者，你也一定听说过贝多芬。作为古典音乐史上最伟大的音乐家之一，他不仅是古典主义风格的集大成者，同时也是浪漫主义风格的开创者。贝多芬肖像画（1813年）贝多芬的一生共创作了9部交响曲、36首钢琴奏鸣曲、10部小提琴奏鸣曲、16首弦乐四重奏、1部歌剧及2部弥撒曲等等。数量虽然不及前辈海顿、莫扎特多，但他几乎改造了当时所有的音乐表达形式，赋予了它们全新的价值，对后世音乐的发展产生了极
《极简思维》第三部分
小洋苏兮
整理你的人际关系如何改善人际关系？摘录：因为人际关系问题是人们生活中不快乐的主要原因。感想：感觉这个说的挺对，之前我总是埋头学习，不管舍友不管自己的合作伙伴的一些事情，但实际上，这学期关注了之后好多了摘录：“亲密关系与社交会让你健康而快乐。这是基础。太过于关注成就或不太关心人际关系的人都不怎么快乐。基本上来说，人类就是建立在人脉关系上的。”感想：但是如果有时想的太多就不太好，要以一个开放的心态跟别
SpringMVC的执行流程
1、什么是MVCMVC是一种设计模式。MVC的原理图如下所示M-Model模型（完成业务逻辑：有javaBean构成，service+dao+entity）V-View视图（做界面的展示jsp，html……）C-Controller控制器（接收请求—>调用模型—>根据结果派发页面2、SpringMVC是什么SpringMVC是一个MVC的开源框架，SpringMVC=Struts2+Spring，
车载刷写架构 --- 刷写思考扩展
汽车电子实验室
电子电器架构——刷写方案 架构 开发语言 关于网关转发性能引起的思考 汽车中央控制单元HPC软件架构 车载诊断进阶篇
我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：做到欲望极简，了解自己的真实欲望，不受外在潮流的影响，不盲从，不跟风。把自己的精力全部用在自己。一是去掉多余，凡事找规律，基础是诚信；二是系统思考、大胆设计、小心求证；三是“一张纸制度”，也就是无论多么复杂的工作内容，要在一张纸上描述清楚；四是要坚决反对虎头蛇尾，反对繁文缛节，反对老
诗圣《杜甫》
Minikaren
今天在樊登听书听完冯至先生《杜甫》一书。童年幸福无忧，青年四海壮游，中年四处漂泊，老年病寒交加。生于盛唐，却不能长在繁华盛世，七年多的安史之乱以安禄山和史思明双双被儿子杀死而谢幕，然而国家历经战乱，百姓颠沛流离，民不聊生，国家焉能不衰？成也玄宗，败也玄宗！难怪道家的太极说，盛极而衰，衰极又盛，其实只不过是一种心理的外化，极度膨胀的虚荣心打败了当年意气风发的励精图治之心，宠幸奸臣李林甫，国家选拔人才
Selenium 特殊控件操作与 ActionChains 实践详解
小馋喵知识杂货铺
selenium 测试工具
1.下拉框单选操作(a)使用SeleniumSelect类（标准HTML标签）Selenium提供了内置的Select类用于操作标准下拉框，这种方式简单且直观。fromselenium.webdriver.support.uiimportSelect#定位下拉框dropdown=Select(driver.find_element("id","dropdown_id"))#通过以下三种方式选择单个
斗罗大陆：没有魂环的唐三紫极魔瞳加鬼影迷踪战力有多强
嘚瑟_a3a5
自从唐三穿越到斗罗大陆以后，由于修炼体系和前世的不同，虽然玄天功也是勤修不辍可是无论怎样修炼都毫无进展，总是难以突破瓶颈，而紫极魔瞳和鬼影迷踪也因为内力的限制发挥不出其真正的威力。后来通过在素云涛那里了解了一些斗罗大陆修炼的方法和体系之后，唐三才知道魂力也就是他前世的内力需要突破的话需要附加魂环以后才可以进入下一阶段的修炼。而在小刚老师详细介绍和针对唐三的具体情况分析指导以后，唐三也不再迷茫决定重
微信公众号回调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标准
前端面试每日 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领域数据（如遥感影像数据、气象数据、土地土壤数据、农业数据等），大家可以点击上方专栏查看，也可以看这一篇汇总文
GitLab 18.2 发布几十项与 DevSecOps 有关的功能，可升级体验【二】
极小狐
gitlab 极狐gitlab devsecops devops ci/cd
沿袭我们的月度发布传统，极狐GitLab发布了18.2版本，该版本带来了议题和任务的自定义工作流状态、新的合并请求主页、新的群组概览合规仪表盘、下载安全报告的PDF导出文件、中心化的安全策略管理（Beta）等几十个重点功能的改进。下面是对部分重点功能的详细解读。关于极狐GitLab的安装升级，可以查看官方指导文档。18.2.0容器镜像registry.gitlab.cn/omnibus/gitla
【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://
深入剖析 boost::unique_lock＜boost::mutex＞
程序员乐逍遥
C++ Boost库 C/C++多线程编程专题 C++ boost 线程 锁
在高并发的C++程序中，线程安全是永恒的主题。而boost::unique_lock作为Boost.Thread库中的核心组件，为开发者提供了强大、灵活且异常安全的互斥量管理机制。它不仅是RAII（ResourceAcquisitionIsInitialization）设计模式的典范，更是实现复杂线程同步逻辑的基石。一、从lock_guard的说起在介绍unique_lock之前，我们先回顾其“简
《尚书·吕刑》诗解3刑罚中正
琴诗书画
《尚书·吕刑》诗解3刑罚中正题文诗：用刑之道,囚证两造,悉皆具备,师听其言,五刑之辞.五辞简核,信实有罪,正于五刑;五刑不简,正于五罚;五罚不符,正于五过,过失可宥,则教宥之.五过之疵:畏官惧权,诈反囚辞,内亲用事,行货枉法,受人请托,其罪惟均,其审克之.刑疑有赦,罚疑有赦,勿妄入罪,不妄赦免,清证审察,不得不慎.简核诚信,有合众心,惟貌有稽,有所考合.无简不听,具严天威,敬天畏民,勿轻听用.上下
2021-11-8饮食搭配
寻欢_作乐
今天是什么日子起床：5就寝：10天气：晴朗，但是特别冷心情：郁闷，不想上班。星期一综合症纪念日：任务清单昨日完成的任务，最重要的三件事：外语听力输入无，看的东西太多太散，没有收获。看了很多美食做法，准备好好节食减肥。输出一篇，每周食材清单改进：目标极简，深度。选好不变。习惯养成：早晚学习一个小时。周目标·完成进度60，5学习·信息·阅读无健康·饮食·锻炼早晚护肤完成。人际·家人·朋友无工作·思考暂
UCLAMP0501P.TCT SEMTECH：超低电容TVS二极管 0.25pF+20kV防护!
UCLAMP0501P.TCTSEMTECH：超低电容TVS一、产品简介UCLAMP0501P.TCT是SEMTECH最新推出的超低电容单通道TVS二极管，采用第五代硅雪崩技术，专为5G手机天线、IoT设备、超极本USB4接口设计。以0.25pF行业最低电容和20kV防护等级，成为高速信号保护的终极解决方案！二、五大颠覆性优势信号0损伤0.25pF超低电容（比头发丝细1000倍）支持40GbpsT
RCLAMP0504S.TCT 升特半导体TVS二极管 无损传输+军工防护+纳米护甲 ESD防护芯片
深圳市尚想信息技术有限公司
ESD防护芯片 Semtech USB4 车规电子 AI硬件
RCLAMP0504S.TCTSemtechTVS二极管阵列一、产品简介RCLAMP0504S.TCT是Semtech新一代超低电容TVS二极管阵列，专为USB4、Thunderbolt™4、HDMI2.1等超高速接口打造！以0.3pF行业最低电容和20Gbps无损传输能力，成为高端电子设备的"隐形防护盾"！二、五大颠覆性优势信号0损耗0.3pF超低电容（比前代降低40%），支持20Gbps超高速
RCLAMP0512TQTCT 升特半导体 TVS二极管 12通道全防护芯片 以太网/PLC控制/5G基站专用
RCLAMP0512TQTCTSemtech：12通道全防护TVS阵列一、产品简介RCLAMP0512TQTCT是Semtech最新推出的12通道超低电容TVS二极管阵列，专为工业以太网、PLC控制、5G基站等高干扰环境设计！凭借0.4pF超低电容+30kV浪涌防护能力，成为严苛环境下的"电路防弹衣"！二、六大核心优势军工级防护标准30kV/10kA浪涌防护（IEC61000-4-5Level4）
极简生活让我变得孤僻了，习惯是个可怕的东西
小雅_10a7
最近这段时间，我从小喇叭变成了沉默的小绵羊，发现自己有点孤僻了，不想去管那么多人和事，自己默默的回归极简生活，本人是典型的双子女。以前的自己爱好跟形形色色的人聊天，聊八卦，喜欢听各种故事，不夸张的说，就是人群中的小精灵，小蜜蜂，突然有一天，感觉自己突然变成不爱说了，也不怎么听别人的故事了，感觉就沉浸在自己的小世界，固守着自己曾经的认知，不接触新事物，连回家的路，都习惯性走同样的路，一次不是以往的路
RCLAMP2574N.TCT Semtech：超低钳位TVS二极管 0.5pF超低电容+±30kV超强防护
深圳市尚想信息技术有限公司
TVS二极管 Semtech半导体 工业以太网 车载电子 5G防护
RCLAMP2574N.TCTSemtech：超低钳位TVS阵列一、产品简介RCLAMP2574N.TCT是Semtech新一代多通道TVS二极管阵列，采用专利硅雪崩技术，专为千兆以太网、工业总线、汽车电子等严苛环境设计。以0.5pF超低电容和±30kV超强防护能力，成为高速接口的"防弹护甲"！二、五大核爆优势军工级防护±30kV接触放电（IEC61000-4-2Level4++）0.5ns极速响
2020-04-06
紫洞箫
上午你又哭了一场。其实，我真的很理解你的感受。你真的是个好孩子乖孩子，吃过早饭你就乖乖自觉地去做题，虽然不是你想做的类型，可是还是认真地按照考试流程去做。我练字等着检查你的试卷，数学做完由于几个粗心的地方没有得一百分，我也没有苛责你。只是提醒你，以后要细心点，休息一会就去做语文，因为写话都是老生常谈，所以想让你做另外一个，可是你就是不同意。就依你，但是我提醒你要写出新的东西，不能像一年级那时候样简
移动端适配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
java类加载顺序
3213213333332132
java
package com.demo;
/**
* @Description 类加载顺序
* @author FuJianyong
* 2015-2-6上午11:21:37
*/
public class ClassLoaderSequence {
String s1 = "成员属性";
static String s2 = "
Hibernate与mybitas的比较
BlueSkator
sql Hibernate 框架 ibatis orm
第一章 Hibernate与MyBatis
Hibernate 是当前最流行的O/R mapping框架，它出身于sf.net，现在已经成为Jboss的一部分。 Mybatis 是另外一种优秀的O/R mapping框架。目前属于apache的一个子项目。
MyBatis 参考资料官网：http:
php多维数组排序以及实际工作中的应用
dcj3sjt126com
PHP usort uasort
自定义排序函数返回false或负数意味着第一个参数应该排在第二个参数的前面, 正数或true反之, 0相等usort不保存键名uasort 键名会保存下来uksort 排序是对键名进行的
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8&q
DOM改变字体大小
周华华
前端
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml&q
c3p0的配置
g21121
c3p0
c3p0是一个开源的JDBC连接池，它实现了数据源和JNDI绑定，支持JDBC3规范和JDBC2的标准扩展。c3p0的下载地址是：http://sourceforge.net/projects/c3p0/这里可以下载到c3p0最新版本。
以在spring中配置dataSource为例：
<!-- spring加载资源文件 -->
<bean name="prope
Java获取工程路径的几种方法
510888780
java
第一种：
File f = new File(this.getClass().getResource("/").getPath());
System.out.println(f);
结果:
C:\Documents%20and%20Settings\Administrator\workspace\projectName\bin
获取当前类的所在工程路径;
如果不加“
在类Unix系统下实现SSH免密码登录服务器
Harry642
免密 ssh
1.客户机
(1)执行ssh-keygen -t rsa -C "
[email protected] "生成公钥，xxx为自定义大email地址
(2)执行scp ~/.ssh/id_rsa.pub root@xxxxxxxxx:/tmp将公钥拷贝到服务器上，xxx为服务器地址
(3)执行cat
Java新手入门的30个基本概念一
aijuans
java java 入门 新手
在我们学习Java的过程中,掌握其中的基本概念对我们的学习无论是J2SE,J2EE,J2ME都是很重要的,J2SE是Java的基础,所以有必要对其中的基本概念做以归纳,以便大家在以后的学习过程中更好的理解java的精髓,在此我总结了30条基本的概念。 Java概述: 目前Java主要应用于中间件的开发(middleware)---处理客户机于服务器之间的通信技术,早期的实践证明,Java不适合
Memcached for windows 简单介绍
antlove
java Web windows cache memcached
1. 安装memcached server
a. 下载memcached-1.2.6-win32-bin.zip
b. 解压缩，dos 窗口切换到 memcached.exe所在目录，运行memcached.exe -d install
c.启动memcached Server,直接在dos窗口键入 net start "memcached Server&quo
数据库对象的视图和索引
百合不是茶
索引 oeacle数据库 视图
视图
视图是从一个表或视图导出的表，也可以是从多个表或视图导出的表。视图是一个虚表，数据库不对视图所对应的数据进行实际存储，只存储视图的定义，对视图的数据进行操作时,只能将字段定义为视图,不能将具体的数据定义为视图
为什么oracle需要视图;
&
Mockito(一) --入门篇
bijian1013
持续集成 mockito 单元测试
Mockito是一个针对Java的mocking框架，它与EasyMock和jMock很相似，但是通过在执行后校验什么已经被调用，它消除了对期望 行为（expectations）的需要。其它的mocking库需要你在执行前记录期望行为（expectations），而这导致了丑陋的初始化代码。
&nb
精通Oracle10编程SQL(5)SQL函数
bijian1013
oracle 数据库 plsql
/*
* SQL函数
*/
--数字函数
--ABS(n):返回数字n的绝对值
declare
v_abs number(6,2);
begin
v_abs:=abs(&no);
dbms_output.put_line('绝对值：'||v_abs);
end;
--ACOS(n):返回数字n的反余弦值，输入值的范围是-1~1，输出值的单位为弧度
【Log4j一】Log4j总体介绍
bit1129
log4j
Log4j组件：Logger、Appender、Layout
Log4j核心包含三个组件：logger、appender和layout。这三个组件协作提供日志功能：
日志的输出目标
日志的输出格式
日志的输出级别(是否抑制日志的输出)
logger继承特性
A logger is said to be an ancestor of anothe
Java IO笔记
白糖_
java
public static void main(String[] args) throws IOException {
//输入流
InputStream in = Test.class.getResourceAsStream("/test");
InputStreamReader isr = new InputStreamReader(in);
Bu
Docker 监控
ronin47
docker监控
目前项目内部署了docker，于是涉及到关于监控的事情，参考一些经典实例以及一些自己的想法，总结一下思路。 1、关于监控的内容 监控宿主机本身
监控宿主机本身还是比较简单的，同其他服务器监控类似，对cpu、network、io、disk等做通用的检查，这里不再细说。
额外的，因为是docker的
java-顺时针打印图形
bylijinnan
java
一个画图程序 要求打印出：
1.int i=5;
2.1 2 3 4 5
3.16 17 18 19 6
4.15 24 25 20 7
5.14 23 22 21 8
6.13 12 11 10 9
7.
8.int i=6
9.1 2 3 4 5 6
10.20 21 22 23 24 7
11.19
关于iReport汉化版强制使用英文的配置方法
Kai_Ge
iReport汉化 英文版
对于那些具有强迫症的工程师来说，软件汉化固然好用，但是汉化不完整却极为头疼，本方法针对iReport汉化不完整的情况，强制使用英文版，方法如下：
在 iReport 安装路径下的 etc/ireport.conf 里增加红色部分启动参数，即可变为英文版。
# ${HOME} will be replaced by user home directory accordin
[并行计算]论宇宙的可计算性
comsci
并行计算
现在我们知道,一个涡旋系统具有并行计算能力.按照自然运动理论,这个系统也同时具有存储能力,同时具备计算和存储能力的系统,在某种条件下一般都会产生意识......
那么,这种概念让我们推论出一个结论
&nb
用OpenGL实现无限循环的coverflow
dai_lm
android coverflow
网上找了很久，都是用Gallery实现的，效果不是很满意，结果发现这个用OpenGL实现的，稍微修改了一下源码，实现了无限循环功能
源码地址：
https://github.com/jackfengji/glcoverflow
public class CoverFlowOpenGL extends GLSurfaceView implements
GLSurfaceV
JAVA数据计算的几个解决方案1
datamachine
java Hibernate 计算
老大丢过来的软件跑了10天，摸到点门道，正好跟以前攒的私房有关联，整理存档。
-----------------------------华丽的分割线-------------------------------------
数据计算层是指介于数据存储和应用程序之间，负责计算数据存储层的数据，并将计算结果返回应用程序的层次。J
&nbs
简单的用户授权系统,利用给user表添加一个字段标识管理员的方式
dcj3sjt126com
yii
怎么创建一个简单的(非 RBAC)用户授权系统
通过查看论坛，我发现这是一个常见的问题，所以我决定写这篇文章。
本文只包括授权系统.假设你已经知道怎么创建身份验证系统(登录)。 数据库
首先在 user 表创建一个新的字段(integer 类型),字段名 'accessLevel',它定义了用户的访问权限 扩展 CWebUser 类
在配置文件(一般为 protecte
未选之路
dcj3sjt126com
诗
作者:罗伯特*费罗斯特
黄色的树林里分出两条路,
可惜我不能同时去涉足,
我在那路口久久伫立,
我向着一条路极目望去,
直到它消失在丛林深处.
但我却选了另外一条路,
它荒草萋萋,十分幽寂;
显得更诱人,更美丽,
虽然在这两条小路上,
都很少留下旅人的足迹.
那天清晨落叶满地,
两条路都未见脚印痕迹.
呵,留下一条路等改日再
Java处理15位身份证变18位
蕃薯耀
18位身份证变15位 15位身份证变18位 身份证转换
15位身份证变18位，18位身份证变15位
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 201
SpringMVC4零配置--应用上下文配置【AppConfig】
hanqunfeng
springmvc4
从spring3.0开始，Spring将JavaConfig整合到核心模块，普通的POJO只需要标注@Configuration注解，就可以成为spring配置类，并通过在方法上标注@Bean注解的方式注入bean。
Xml配置和Java类配置对比如下：
applicationContext-AppConfig.xml
<!-- 激活自动代理功能 参看：
Android中webview跟JAVASCRIPT中的交互
jackyrong
JavaScript html android 脚本
在android的应用程序中,可以直接调用webview中的javascript代码,而webview中的javascript代码,也可以去调用ANDROID应用程序(也就是JAVA部分的代码).下面举例说明之:
1 JAVASCRIPT脚本调用android程序
要在webview中,调用addJavascriptInterface(OBJ,int
8个最佳Web开发资源推荐
lampcy
编程 Web 程序员
Web开发对程序员来说是一项较为复杂的工作，程序员需要快速地满足用户需求。如今很多的在线资源可以给程序员提供帮助，比如指导手册、在线课程和一些参考资料，而且这些资源基本都是免费和适合初学者的。无论你是需要选择一门新的编程语言，或是了解最新的标准，还是需要从其他地方找到一些灵感，我们这里为你整理了一些很好的Web开发资源，帮助你更成功地进行Web开发。
这里列出10个最佳Web开发资源，它们都是受
架构师之面试------jdk的hashMap实现
nannan408
HashMap
1.前言。
如题。
2.详述。
(1)hashMap算法就是数组链表。数组存放的元素是键值对。jdk通过移位算法（其实也就是简单的加乘算法），如下代码来生成数组下标(生成后indexFor一下就成下标了）。
static int hash(int h)
{
h ^= (h >>> 20) ^ (h >>>
html禁止清除input文本输入缓存
Rainbow702
html 缓存 input 输入框 change
多数浏览器默认会缓存input的值，只有使用ctl+F5强制刷新的才可以清除缓存记录。
如果不想让浏览器缓存input的值，有2种方法：
方法一： 在不想使用缓存的input中添加 autocomplete="off";
<input type="text" autocomplete="off" n
POJO和JavaBean的区别和联系
tjmljw
POJO java beans
POJO 和JavaBean是我们常见的两个关键字，一般容易混淆，POJO全称是Plain Ordinary Java Object / Pure Old Java Object，中文可以翻译成：普通Java类，具有一部分getter/setter方法的那种类就可以称作POJO，但是JavaBean则比 POJO复杂很多， Java Bean 是可复用的组件，对 Java Bean 并没有严格的规
java中单例的五种写法
liuxiaoling
java 单例
/**
* 单例模式的五种写法：
* 1、懒汉
* 2、恶汉
* 3、静态内部类
* 4、枚举
* 5、双重校验锁
*/
/**
* 五、 双重校验锁，在当前的内存模型中无效
*/
class LockSingleton
{
private volatile static LockSingleton singleton;
pri
