超文本标记语言，用于搭建网页的结构。
网页的组成：
HTML、CSS、JavaScript;其他多媒体内容：图片、视频、音频、超级链接等;所有的网页文件都是真实的、物理存在的文件.
程序员将网页源文件上传到服务器进行存储，用户后期通过客户端（如浏览器软件）发送HTTP请求 到服务器，服务器接收请求后进行响应，将存储的相关文件通过HTTP响应回传到用户本地客户端， 最终通过客户端将网页文件进行渲染，显示出最终用户看到的网页效果
客户端（Client）也叫用户端，指的是普通用户使用的终端，客户端有多种形式，比如最常用的就是 浏览器、app等，而web开发最主要的客户端形式还是浏览器。
浏览器(Browser)，是一种用户上网搜索、查看信息资源的应用程序。
功能：用于发送HTTP请求到服务器，接收服务器发回的HTTP响应，渲染HTML网页。
IE/Edge——Trident——IE内核
FireFox ——Gecko—— Firefox内核
Safari ——Webkit
Chrome ——Webk it→Blink ——统称为Chromium内核或Chrome内核
Opera ——Presto→Webk it→Blink
推荐：使用Chrome浏览器。(渲染效果好、市场占有率高、自带开发者调试工具)
HTTP请求
HTTP响应
h1-h6 ：标题标签的作用是给标签内部的元素内容添加对应级别标题的语义，不负责样式，样式由CSS负责。
<h1>
一级标题
</h1>
p : 双标签，内部只能放文本、图片、表单元素，作用是给标签内部的内容添加一个完整段落的语义，不负责内容自动换行的样式，换行效果是由CSS决定的。
<P>
段落
</P>
br : 单标签，没有建立新的段落的语义，只是简单的进行强制换行。
<br /> <!--强制换行-->
均为双标签，内部只能书写文字。
img : 单标签，本身相当于一个特殊的文本，作用是在指定位置插入一张图片，常用的插入图片类型：jpg、png、gif。
<!--width与height设置属性：只设置了其中一个，另一个会等比例变换；如果两个都设置，按照设置值加载。-->
<img src="smile01.jpg" width="200" height="100">
<img src="images/tupian/smile03.jpg" border="20">
<img src="../images/smile01.jpg" title="点击查看原网页" alt="这是一张微笑的表情" >
指目标文件与HTML文件位于同一级,直接书写文件名+后缀名;
<img src="smile01.jpg">
指目标文件在与HTML文件同一级的文件夹的内部，需要先查找文件夹名称，然后通过关闭 符号/进入文件夹查找里面的文件；如果有多层文件夹，需要/进入多层。
<img src="images/smile02.png">
<img src="images/tupian/smile03.jpg">
指目标文件在HTML文件所在文件夹的更上一级，需要跳出当前文件夹到上一层，路径写法 利用…/表示跳出一级，如果跳出多级书写多次…/，直到找到文件。
<img src="../../smile04.jpg" />
<img src="../images/smile01.jpg" />
例如从c盘或者d盘出发查找图片，书写时以c:/开头，后续类似子级查找写法直至找到 目标文件。
<img src="C:/Users/teacher/Documents/images/smile02.png" />
要查找的文件是来自网络资源，路径写法以http://开头。
<img src="http://img3.imgtn.bdimg.com/it/u=1084243323,278941980&fm=26&gp=0.jpg" />
<audio src="audio.mp3" controls="controls"></audio>
<video src="video.mp4" controls="controls" ></video>
a : 双标签，在指定位置添加超级链接，提供用户进行点击和跳转，可以实现两种跳转——跨页面跳转、页面内跳转。
全称hypertext reference，超文本引用，用于规定链接的目标地址；属性值为链接目标的路径地址, 可以使用相对路径或网址形式的绝对路径。
_self：——默认值，表示跳转的页面在当前窗口打开，不会打开新的窗口；
_blank——空白的，表示跳转的页面在新窗口打开。
<!--在当前窗口跳转-->
<a href="目标地址" target="_self">链接内容</a>
<!--在新开窗口跳转-->
<a href="目标地址" target="_blank">链接内容</a>
提示文字,该属性用于给用户进行提示，该链接的功能是什么，提高用户的体验。
<a href="目标地址">链接内容</a>
<a href="http://www.lagou.com" target="_blank">拉勾</a>
<a href="smile.html" title="点击查看源网页"><img src="images/smile02.png" /></a>
设置锚点:也就是设置跳转目标位置，有两种设置方式。
在目标位置找到任意一个标签，给它添加id属性，id的属性值必须是唯一的。
<h2 id="mubiao1">目标位置</h2>
在目标位置添加一个空的标签，只设置一个name属性，name属性值设置 方式与id相同，也必须是唯一的。
<a name="mubiao2"></a>
添加链接：链接到锚点，在需要点击的位置设置标签，给a的href属性设置属性值为#id属性值或者 #加a的name属性值。
<a href="#mubiao1">点击文本</a>
<a href="#mubiao2">点击文本</a>
<a href="new.html#mubiao">点击文本</a>
ul：unordered list，表示定义一个无序列表的大结构。
li：list item，列表项，定义的是无序列表内的某一项。
<h3>中国四大名著</h3>
<ul>
<li>
<h4>红楼梦</h4>
<ul>
<li>林黛玉</li>
<li>薛宝钗</li>
<li>王熙凤</li>
</ul>
</li>
<li>
<h4>西游记</h4>
<ul>
<li>孙悟空</li>
<li>沙和尚</li>
<li>猪八戒</li>
</ul>
</li>
</ul>
注意事项：
ol：ordered list，表示定义一个有序的列表的大结构。
li：list item，定义的是有序列表的每一项。
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ol>
dl：definition list，表示定义一个自定义列表的大结构。
dt：definition term，表示定义自定义列表中的一个主题或者术语。
dd：definition description，定义解释项，表示描述或解释前面的定义主题。
<dl>
<dt>张三</dt>
<dd>
<p>城市：北京</p>
<p>年龄：18</p>
</dd>
</dl>
<dl>
<dt>张三</dt>
<dd>
<p>城市：北京</p>
<p>年龄：18</p>
</dd>
</dl>
注意事项：
分割、区域、跨度的意思，俗称大盒子;双标签，是最经典的容器级标签，内部可以放置任意内容。
作用：多用于划分网页区域，进行结构布局。一般将相关的内容使用div包裹起来，整体设 置大的布局效果
小区域、小跨度的意思,俗称小盒子;也是双标签，容器级标签。
作用：在不改变整体效果的情况下，可以辅助进行局部调整。
table：表格，定义的是整个的表格大结构。
tr：table rows，表格的行，定义的是表格由多少行组成。
td：table data，表格数据，也叫表格单元格，定义的是每一行内部的单元格。
表格的单元格之间有默认的空隙，会导致双线边框。
<!--在css中设置td {width:100px;}-->
<table border="1" style="border-collapse: collapse;">
<tr>
<td colspan="2">1</td>
<td rowspan="2">2</td>
<td colspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td rowspan="2">5</td>
<td>6</td>
<td rowspan="2">7</td>
</tr>
<tr>
<td rowspan="2">8</td><!--跨行合并2行-->
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td colspan="2">12</td><!--跨列合并2列-->
<td>13</td>
</tr>
</table>
| 1 | 2 | 3 | ||
| 4 | 5 | 6 | 7 | |
| 8 | 9 | 10 | ||
| 11 | 12 | 13 | ||
<table border="1" style="border-collapse: collapse;">
<caption>各地区固定资产投资情况</caption>
<thead>
<tr>
<th rowspan="2">地区</th>
<th colspan="2">按总量分</th>
<th colspan="2">按比重分</th>
</tr>
<tr>
<th>自年初累计（亿元）</th>
<th>比去年同期增长</th>
<th>自年初累计</th>
<th>去年同期</th>
</tr>
</thead>
<tbody>
<tr>
<td>全国</td>
<td>1245</td>
<td>9.6</td>
<td>9.6</td>
<td>11</td>
</tr>
<tr>
<td>全国</td>
<td>1245</td>
<td>9.6</td>
<td>9.6</td>
<td>11</td>
</tr>
</tbody>
</table>
| 地区 | 按总量分 | 按比重分 | ||
|---|---|---|---|---|
| 自年初累计（亿元） | 比去年同期增长 | 自年初累计 | 去年同期 | |
| 全国 | 1245 | 9.6 | 9.6 | 11 |
| 全国 | 1245 | 9.6 | 9.6 | 11 |
表单是用来收集用户输入信息的。
在HTML中，一个完整的表单通常由表单域、提示信息和表单控件（也称为表单元素）3个 部分构成。
form : 双标签，容器级标签，是一个功能性标签，填写的表单信息要想正确的提交到后台服务器，必须放在一个form标签之内。
单标签，本身相当于一个特殊的文本。需要通过标签属性实现各种功能。
type=“text”——单行文本输入框,定义提供用户输入的单行文本的输入框，不能输入多行文字。 常用value属性定义默认的输入文字。
<input type="text" value="默认输入文本" >
type=“password”——密码输入框,定义提供用户输入的密码框。 password 字段中的字符会被做掩码处理（显示为星号或实心圆）。
<input type="password">
type=“radio”——单选框，定义提供用户点击选择的单选框。
单选框一般都是成组出现，多个单选框组成一组选择的情况。
同一组单选框之间必须是互斥的关系，通过给同一组单选框都设置相同的name属性值实现。
<input type="radio" name="sex" checked="checked"/> 男
<input type="radio" name="sex" /> 女
type=“checkbox”——复选框,定义提供用户点击选择的多选框。 复选框允许用户在有限数量的选项中选择零个或多个选项。 同一组复选框最好也设置相同的name属性。
<input type="checkbox" name="hobby" checked="checked"/> 唱歌
<input type="checkbox" name="hobby" /> 代码
<input type="checkbox" name="hobby" /> 运动
checked=“checked”——定义选框控件的默认被选中项
type=“button”——普通按钮，没有任何特殊功能。
type=“reset”——重置按钮，将一个form中填写的表单内容清空，恢复成默认。
type=“submit” ——提交按钮，将填写数据提交到form中指定的后台服务器，并重置清空form中填写的信息。
type=“image”——图像形式的按钮，默认与提交按钮的效果相同，使用的图片需要利用src属性查找正确路径。
type=“file”——定义输入字段和"浏览"按钮，供文件上传
type=“hidden”——定义隐藏的输入字段
name=“自定义”——定义控件的名称
value=“自定义”——定义控件的输入文本
size=数字——定义控件的宽度
maxlength=数字——定义允许输入的最多字符数
双标签，本身相当于一个特殊的文字；
制作可以输入多行文本的区域;
文本域可以设置默认输入的文字，在双标签之间书写默认文字。
textarea有两个标签属性，可以设置显示区域大小。
rows：行，属性值是数字，数字是几表示文本框显示的最大行数，如果超过了行数， 会被隐藏并且出现滚动条。
cols：列，属性值是数字，数字是几，表示在出现滚动条之后，每一行显示的最大字节数（一个汉字按2字节计算）。
<!--一行最多15个汉字，最多10行-->
<textarea cols="30" rows="10">
默认输入文字
</textarea>
下拉菜单需要至少两个标签完成结构；
select:选择，表示定义下拉菜单整体结构。
option:选项，表示定义下拉菜单的每一项。
两个标签都是双标签，文本级标签。
关系：select>option，option可以有任意多项。
默认情况下，选中的是第一项。 下拉菜单可以通过给标签设置selected属性，属性值为selected，更改默认选中项。
<select>
<option>广州</option>
<option selected="selected">北京</option>
<option>重庆</option>
<option>上海</option>
</select>
optgroup ： 双标签，可对选项进行分组
关系：select>optgroup>option
optgroup 可以设置一个label属性，表示给这一组选项添加一个分组标签名，分组标签optgroup 是不能被点击选择的。
<select>
<optgroup label="国内">
<option>广州</option>
<option selected="selected">北京</option>
</optgroup>
<optgroup label="国外">
<option>伦敦</option>
<option>巴黎</option>
</optgroup>
</select>
给表单元素设置id属性。
然后将需要绑定的其他内容用label标签包裹。
给label标签设置for属性，属性值为绑定的表单元素的id属性值。
<input type="checkbox" name="hobby" id="sport" />
<label for="sport">运动</label>
如果绑定内容和表单元素写在一起，可以化简绑定写法。 直接使用标签将绑定内容与表单元素一起进行嵌套。
<label><input type="radio" name="sex" />男</label>
<form>
<p>
用户名：<input type="text" value="请输入您的用户名">
</p>
<p>
密码：<input type="password">
</p>
<p>
性别: <input type="radio" name="sex" id="nan" checked="checked"> <label for="nan">男</label>
<label><input type="radio" name="sex">女 </label>
</p>
<p>
爱好：<label><input type="checkbox" name="hobby" checked="checked">绘画</label>
<label><input type="checkbox" name="hobby">音乐</label>
<label><input type="checkbox" name="hobby">代码</label>
</p>
<p>
文件：<input type="file" multiple="multiple">
</p>
<p>
自我介绍：<textarea cols="30" rows="5">请输入300字的自我介绍</textarea>
</p>
<p>
城市：<select>
<optgroup label="国内">
<option>北京</option>
<option>上海</option>
<option selected="selected">广州</option>
</optgroup>
<optgroup label="国外">
<option>伦敦</option>
<option>东京</option>
<option>纽约</option>
</optgroup>
</select>
</p>
<p>
<input type="button" value="普通按钮">
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
<input type="image" src="images/btn.png">
</p>
</form>
在普通文字书写时，有一些特殊符号不能直接书写（例如 连续的空格），或者符号具有特殊功能也不能直接书写 （例如<>符号）。 可以使用一些HTML提前预留好的替换字符进行书写，这 些替换字符叫做字符实体。
<!--空格--> < <!--小于--> > <!--大于-->
& <!--和号--> "<!--引号--> ¥<!--元-->
€<!--欧元--> §<!--小节--> ©<!--版权-->
®<!--注册商标-->
文章浏览阅读3.8k次，点赞9次，收藏28次。直接上一个工作中碰到的问题，另外一个系统开启多线程调用我这边的接口，然后我这边会开启多线程批量查询第三方接口并且返回给调用方。使用的是两三年前别人遗留下来的方法，放到线上后发现确实是可以正常取到结果，但是一旦调用，CPU占用就直接100%(部署环境是win server服务器)。因此查看了下相关的老代码并使用JProfiler查看发现是在某个while循环的时候有问题。具体项目代码就不贴了，类似于下面这段代码。while(flag) {//your code;}这里的flag._main函数使用while(1)循环cpu占用99
文章浏览阅读347次。idea shift f6 快捷键无效_idea shift +f6快捷键不生效
文章浏览阅读135次。Ecmacript 中没有DOM 和 BOM核心模块Node为JavaScript提供了很多服务器级别，这些API绝大多数都被包装到了一个具名和核心模块中了，例如文件操作的 fs 核心模块 ，http服务构建的http 模块 path 路径操作模块 os 操作系统信息模块// 用来获取机器信息的var os = require('os')// 用来操作路径的var path = require('path')// 获取当前机器的 CPU 信息console.log(os.cpus._node模块中有很多核心模块,以下不属于核心模块,使用时需下载的是
文章浏览阅读10w+次，点赞435次，收藏3.4k次。SPSS 22 下载安装过程7.6 方差分析与回归分析的SPSS实现7.6.1 SPSS软件概述1 SPSS版本与安装2 SPSS界面3 SPSS特点4 SPSS数据7.6.2 SPSS与方差分析1 单因素方差分析2 双因素方差分析7.6.3 SPSS与回归分析SPSS回归分析过程牙膏价格问题的回归分析_化工数学模型数据回归软件
文章浏览阅读7.5k次。如何利用hutool工具包实现邮件发送功能呢？1、首先引入hutool依赖<dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifactId> <version>5.7.19</version></dependency>2、编写邮件发送工具类package com.pc.c..._hutool发送邮件
文章浏览阅读867次，点赞2次，收藏2次。docker安装elasticsearch，elasticsearch-head，kibana，ik分词器安装方式基本有两种，一种是pull的方式，一种是Dockerfile的方式，由于pull的方式pull下来后还需配置许多东西且不便于复用，个人比较喜欢使用Dockerfile的方式所有docker支持的镜像基本都在https://hub.docker.com/docker的官网上能找到合..._docker安装kibana连接elasticsearch并且elasticsearch有密码
文章浏览阅读1.3w次，点赞57次，收藏92次。整理 | 郑丽媛出品 | CSDN（ID：CSDNnews）近年来，随着机器学习的兴起，有一门编程语言逐渐变得火热——Python。得益于其针对机器学习提供了大量开源框架和第三方模块，内置..._beeware
文章浏览阅读7.9k次。//// ViewController.swift// Day_10_Timer//// Created by dongqiangfei on 2018/10/15.// Copyright 2018年 飞飞. All rights reserved.//import UIKitclass ViewController: UIViewController { ..._swift timer 暂停
文章浏览阅读986次，点赞2次，收藏2次。1.硬性等待让当前线程暂停执行，应用场景：代码执行速度太快了，但是UI元素没有立马加载出来，造成两者不同步，这时候就可以让代码等待一下，再去执行找元素的动作线程休眠，强制等待 Thread.sleep(long mills)package com.example.demo;import org.junit.jupiter.api.Test;import org.openqa.selenium.By;import org.openqa.selenium.firefox.Firefox.._元素三大等待
文章浏览阅读3k次，点赞4次，收藏14次。Java软件工程师职位分析_java岗位分析
文章浏览阅读2k次。Java：Unreachable code的解决方法_java unreachable code
文章浏览阅读1w次。1、html中设置标签data-*的值 标题 11111 222222、点击获取当前标签的data-url的值$('dd').on('click', function() { var urlVal = $(this).data('ur_如何根据data-*属性获取对应的标签对象