HTML介绍
HTML 指的是超文本标记/标签语言 (Hyper Text Markup Language)
专门制作网页的计算机语言
普通的文本就是英文单词，英文字母一样的存在
超文本的意思是有一些单词或字母，在网页浏览器的世界中被赋予了特殊的权利
比如：我们都是普通人，但是有些人经过国家的选拔，穿上警服之后，他就被赋予了执法的特殊权利，普通人是没有执法权的
字母img只是普通的字母，没什么特殊的含义，而img被加上尖（<>）括号后，在网页的世界中，就具备了显示图片的作用
文件的后缀名必须是 “htm” 或 “html”
Java：高级语言
Mysql：存储和管理数据的仓库
XML：可扩展标记语言
HTML：超文本标记/标签语言
<html>
<head>
<title>拉钩有我</title>
</head>
<body> 必须火！
</body>
</html>
<html>标签它代表当前页面是一个HTML
<head>标签中可以声明HTML页面的相关信息
<body>标签中它主要是用于显示页面信息
标签要有开始，有结束，成双成对
开始标签与结束标签中的内容是标签的内容，如果没有标签内容，可以让标签自关闭，如<br/>
大多数标签它具有属性，属性值要使用引号引起来
HTML它本身是不区分大小写的
记事本编写网页太难了，我们推荐一款编写网页的神器
下载和安装 VSCode
下载地址：https://code.visualstudio.com/
最左边那个是扩展，即可以下载很多插件来使用，如中文插件
刚刚开始由于你没有扩展，会给你列出很多受欢迎的扩展（插件），当你安装扩展后，就不会给你列出了，这时只有推荐了
现在的很多可视化界面都可以下载很多扩展（如idea，vscode等等），扩展有中文扩展等等
vscode本身没有新建项目的选项，所以要先创建一个空的文件夹，如：vscode目录
然后打开vscode软件，在vscode软件中选择 File -> Open Folder 打开刚才创建的文件夹
右键目录，创建子目录lagou-html，在lagou-html目录下创建文件
输入Test1.html在代码编辑区，最上面输入"!"加回车，就是见证奇迹的时刻（会将html所有的基本架构都帮你写好）
输入"!"号，然后回车，就出现一下奇迹时刻
基本架构都帮你写好了
我们要运行页面
open in browser：打开在浏览器里，简称在浏览器里打开，
browser：浏览器
网上搜索谷歌浏览器，可以找到大多数的下载渠道，找一个认为合适的下载
首页的设置，在左下角
添加代码
//"open-in-browser.default":"chrome"
修改软件主题颜色-------------------------
文件 -> 首选项 -> 颜色主题
字体大小：文件 -> 首选项 -> 设置 -> 文本编辑器 -> 字体
文件标签---------------------------
<html>标签：代表当前书写的是一个HTML文档
<head>标签：存储的本页面的一些重要的信息，一般不考虑他的显示
<head>标签：有一个子标签<title>它是用于定义页面的标题的
<body>标签：书写的内容会显示出来
<body>标签的属性:
与xml的属性差不多的写，写在开始标签里面，但实际上是xml根据html来写的（W3C是万维网联盟，HTML和XML都是来自他手）
text：用于设置文字颜色
bgcolor：用于设置页面的背景色
background：用于设置页面的背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>我的第一个网页</title>
</head>
<body text='blue' bgcolor="pink" background="img/1.jpg">
<!-- 注释写法和属性写法与xml一样，属性可以是单引号和双引号或者不加
对于不加的话，就要小心变为整体，即基本要加空格隔开
xml属性可以是单引号和双引号，但必须加
实际是xml的写法与html一样的，xml是参照html的
pink 英文意思：粉红色
属性直接可以不加空格，只要不是组成一体的就可，xml不可以
可以看出html和xml不是一种语言，只是相似
上述的背景颜色只是被背景图片覆盖了而已，并不是替换了，即原来的背景颜色还在
可以理解为，被图片挡住了
图片使用相对路径，也可绝对路径，路径可以出现中文，但最好还是不要出现中文，保持习惯
不写中文路径99%不会报错，写中文路径98%不会报错，所有写英文路径
-->
hello，大家好！
</body>
</html>
<br/> 标签就是一个换行（回车）功能标签
标签中的 / 可有可无的
有/是html语言的标准化，但是html语言是一门不那么严谨的语言，且无论写否，最后都会被浏览器解释成<br>
像这样的/可以省略的标签，浏览器最后都会解释成没有/的标签，如input标签
而对于xml也可这样写，但必须有/，否则报错，但是他占一行的也算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
hello,大家好！ <br>
<!--第一次和大家见面，好紧张啊！-->
今天中午吃点啥？<br/>
鸡丝凉面吧！<br>
<!-- 网页默认不回车，即内容默认在窗口的从左到右显示（默认左对齐），可以通过代码改变，如css和js
会显示在一行，除非你加标签来表示，如<br> -->
</body>
</html>
在html里空白处是忽略的，如在body标签里打三个回车加上h，那么实际上与直接写h是一样的结果
但是如果是打空格的话，就不会，空格会显示出来，但无论是多少个空格，都只有一个空格起作用，即第一个空格起作用
其他空格没起作用
其中在<p>标签中的内容,会在开始与结束之间产生一个空白行，并且它会自动换行
由于p标签是一个段落，那么在没有其他可以离开这个段落的标签的话（自占一行的都可以）
或者没有p标签的结束标签，那么内容就会在这个段落里
对于p标签这个标签，我称他为特殊标签，因为结束标签有作用，只所以会有作用
是因为浏览器会自动补全，而有些不会，如div标签，即他不是特殊标签，有特殊标签的我会进行说明
不特殊的标签，结束标签没有作用，如div标签，这类标签通常需要css或者js来操作
特殊标签的结束标签通常也有与他开始标签一样的作用（也可当作结束使用）
即也可以实现段落，这样组合的标签，实际上每个单独标签都有作用
而<p>和</p>实际上单独写的时候，可以理解为代表两个小的空白行（比br所换的行小），其实就是<p></p>，自动补全
这对于大多数的特殊标签都有类似的作用（具体看标签作用），而因为这种特殊的标签（补全），导致（一般只有p和a是这样，实际上这只是浏览器的作用，我们了解即可）p标签之间没有嵌套（他是一个特殊的特殊，包括a标签，但是有些标签还是可以进入的，有些不行，如div，p标签不能嵌套div、p、h等块级元素，a标签不能嵌套a）
其实不特殊的标签也可以单独写结束标签，但是没有属性，且没作用，所以只能用来当作结束的标签了
而我们所说的标签作用实际上就是说开始标签，如div占一行，就是说<div>占一行
但在这里说明一点：<div>标记将自动关闭<p>元素，所以<p>标签里不会有div标签
就算在代码中写在里面，也会被浏览器解释为
p标签
div标签
p标签
多出来一个p标签
当然，只要我们规范的写，那么基本可以避免多数的特殊问题，因为这些特殊问题是遗留问题，在以后可能会有所改变，就如数据库到表的set对应的变化一样，我们只需要规范即可，因为知道这些，并无意义（随时发生改变），这一点建议不要死磕，因为并没有好处，反而浪费时间
我们可以将标签称为单标签（img，p）和双标签（div），和特殊标签（p），可以认为是这样的规定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>段落</title>
</head>
<body>
<p>我爱你中国！</p> <!-- 默认左对齐-->
<p align="center">我爱你中国！</p> <!-- 中间对齐-->
<p align="right">我爱你中国！</p> <!-- 右对齐
align 英文意思：排列
-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
拉
<hr color="red" width="50%"> <!--hr结束标签没有作用，代表一个水平线,且占一行
即拉勾网写在一起，还是会分开，充满整个窗口
占一行的意思就是，我这个内容必须只能在一行里显示（内容的行，即若在其他标签里，就参照该标签的行）
所以说块级元素里可以有块级元素，也可以有行内元素，但行内元素不可以有块级元素，虽然代码里写了
但显示时，是会跳出去的，即到下一行去，所以实际显示不在行内元素里
其他内容不可来
相当于自己将这一行占了，一般情况下其他内容只能在下一行进行操作，因为占一行的都有自动换行，类似于前后两个br
但中间只能操作标签的内容，只所以是一般情况下，是因为浮动会使得块级元素不自动换行
-->
勾
<hr size="10px" color="blue">
网
<hr width="30%" align="left">
<!-- align：可取值有left right center 代表水平线位置
size：代表水平线厚度（粗细），默认为2
width：代表水平线宽度
color：水平线的颜色
其中属性值的px可以省略，%是表示内容窗口(即body)大小的百分比，即30%代表内容窗口大小的30%
基本上所有的标签，默认都是左对齐，有些不是，如hr标签，默认居中
单位：size="5"，5设置后，有5个"像素"/"像素点"，像素就是构成计算机图片的最小单位
当你把图片放很大时，出现的小方块就是一个像素点
-->
</body>
</html>
div是一个块标签，用来进行布局的
普通的div并没有什么效果，肉眼也看不见，但div与CSS结合，就会更好对页面进行排版
div与span都是"容器"的作用，具体区别：
div会自动换行，我们也叫这样的标签为块级元素
span标签它不会自动换行，我们也叫它为行内元素
div：整体划分区块
span：局部划分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div style="width:100px; height: 100px; background: pink">hello</div>
<div style="width:100px; height: 100px; background: green">hello</div>
<!-- style 英文意思：样式
单独的div是没有任何表示的，为空，只要设置了样式才知道,且占一行
因为他是块的标签，即可以理解为一个小型的body，由于占一行，那么其他的内容不可进入
即占一行的都是块级元素，如p标签也是，但p标签自身有空白隔出
width设置宽度，在写样式时，双引号不可去掉，因为有分号在，一个分号表示这个样式的属性结束
后面可以继续写属性
该属性由":"，来设置，其中px不可以省略，若width省略则为默认
块级元素默认宽度为占满一行，默认高度由内容决定，即内容的高度
由于是一个小的body那么设置的背景颜色，只与这个div有关
对于大多数的标签，背景图片的属性也可以设置背景颜色，就如全部都是白色的图片
但是背景颜色的属性，就不可以设置图片，因为只能是一种颜色
即可以理解为，图片可以全是一种颜色，但颜色，不能是图片
对于块级元素可以看成移到后一行，并在后面加上<br>，所以我们通常会称块级元素是自动换行的
当然本身标签的作用也可以有，如p标签
-->
</body>
</html>
<font>标签可以设置字体，字的大小及颜色
常用属性:
face:用于设置字体，例如 宋体 隶书 楷体
size:用于设置字的大小（大小默认设置1-7，7最大，想更大，往后学css即可）,超过7用7表示，小于1用1表示
color:用于设置字的颜色
注：
我们所看到的屏幕上所有的颜色都是由红、绿、蓝这三种基色调混合而成的，记住：可以用路上的红绿灯表示，黄表示蓝
每一种颜色的饱和度和透明度都是可以变化的，用0～255的数值来表示
如纯红色表示为（255，0，0），十六进制表示为#FF0000
按这种表达方式，理论上我们可以得到256 * 256 * 256 = 16777216种颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<font face="隶书" size="7" color="#C80">我爱你中国</font>
<!--使用十六进制方式，取值范围 #000000 ~ #FFFFFF （黑色到白色）
当颜色值为#cc3300 时，可简化成 #c30 这种方式 -->
<hr>
<font face="隶书" size="7" color="rgb(88,191,150)">我爱你中国</font>
<!-- RGB颜色表示法：RGB（x,y,z）
x、y、z是0 ～ 255之间的整数，rgb字母大小写无所谓
-->
<!--对于设置小数时，没有特殊介绍的，都取整数，如6.9就是6
上述两个都表示不同的计算方法，计算颜色的方式
font 英文意思：字体
face 英文意思：特征
-->
</body>
</html>
在线颜色选择器：http://www.86y.org/code/colorpicker/color.html
百度搜索：字魂网，下载一个免费的字体，并安装到计算机中，在我们的网页中显示出来
点击这个免费商用，下载免费的字体
字体下载地址：
链接：https://pan.baidu.com/s/1SKxDvsIMcgu_trKnRdbUcg
提取码：alsk
下载后要想看效果，可在word文档里设置字体，可以找到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>我是标题1号</h1>
<h2>我是标题2号</h2>
<h3>我是标题3号</h3>
<h4>我是标题4号</h4>
<h5>我是标题5号</h5>
<h6>我是标题6号</h6>
<h7>我是标题7号</h7>
<h8>我是标题8号</h8>
<!--给一段文字起一个标题<h1> ----- <h6>
h1最大 h6最小，它们代表的是标题，自动换行，字体加粗
标题与标题之间产生一定的距离
注意:在HTML中允许标签进行嵌套的，但是一般都包裹嵌套，而不可以进行交叉嵌套
其中若是不存在的，可以理解成，什么都不起作用
即 "<h7>我是标题7号</h7>" 和 "我是标题7号" 是一样的
-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
拉勾网！ <br>
<b>拉勾网！</b> <br>
<i>拉勾网！</i> <br>
<del>拉勾网！</del> <br>
<u>拉勾网！</u> <br>
<!--
<b>：字体加粗
<i>：字体倾斜
<del>：删除线
<u>：下划线
-->
</body>
</html>
ol：有序列表
type=‘A’：字母排序
type=‘I’：罗马排序
start=“3” 序列从几开始
ul：无序列表
type=“disc”：默认，实心圆
type=“square”：方块
type=“circle”：空心圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<h2>有序列表</h2> <!-- 代表这一个从小到大排序，设置排序规则，从谁开始-->
<ol start="2">
<li>辣子鸡丁</li>
<li>打卤面</li>
<li>山西油泼面</li>
<li>锅包肉</li>
</ol>
<!--
start="2" 序列从几开始
start默认为1
没有设置规则（如A,I）的话，默认值为1，2，3...
start设置从谁开始，当start为2时，则从数值2开始
-->
<ol type="A">
<li>辣子鸡丁</li>
<li>打卤面</li>
<li>山西油泼面</li>
<li>锅包肉</li>
</ol>
<!--
type='A'：字母排序，必须为A,不可是其他字母，因为这只是代表排序
使得值为A,B，C
可以设置start，使得从谁开始
当start为2时，则从数值B开始
-->
<ol type="I">
<li>辣子鸡丁</li>
<li>打卤面</li>
<li>山西油泼面</li>
<li>锅包肉</li>
</ol>
<!--
type='I'：罗马排序，必须为I,不可是其他值，因为这只是代表排序
使得值为I,II，III
可以设置start，使得从谁开始
当start为2时，则从数值II开始
-->
<!--也就是说，本来默认是数字的，而I和A改变他们的显示-->
<hr />
<h2>无序列表</h2> <!-- 没有谁大谁小，设置显示方式-->
<ul>
<li>西红柿鸡蛋</li>
<li>西红柿鸡蛋</li>
<li>西红柿鸡蛋</li>
</ul>
<!--
type="disc"：默认，实心圆
-->
<ul type="circle" >
<li>西红柿鸡蛋</li>
<li>西红柿鸡蛋</li>
<li>西红柿鸡蛋</li>
</ul>
<!--
type="circle"：空心圆
-->
<ul type="square">
<li>西红柿鸡蛋</li>
<li>西红柿鸡蛋</li>
<li>西红柿鸡蛋</li>
</ul>
<!--
type="square"：方块
-->
<ol >
<li type="A">
<li>ss
<li>5</li>
</li>
</li>
<li>s</li>
</ol>
<!-- li标签，也可以设置自己的type,只不过不可以设置开始，即start的值
但他也会占一个值，即虽然你设置了，但下一个li是你本来获得值的下一个值，如下面的ss，不是1，而是2
且排列时，是一个一个排，直这个标签里没有li标签了
上面结果
A.
2.ss
3.5
4.s
对于大多数的标签，是可以嵌套的，但<ol>和<ul>虽然可以嵌套，但有些属性只作用与li标签
且由于就近原则，里面的li就只受他的ol或者ul标签了
之所以有嵌套，是因为标签只是一种作用，作用与内容，而内容是可以为标签的，即作用于标签
但ol有序和ul无序不同，他们的属性只作用于li标签，并不会作用于不是li标签的，且符合就近原则
type 英文意思：类型
disc 英文意思：圆盘
circle 英文意思：圆
square 英文意思：正方形的
最后注意：当有你设置两个同样属性时，如type="square" type="circle",谁在前面，谁起作用，后面的不起作用
即type="square"起作用，后面忽略，对于大多数标签都一样
记住有序和无序：无->wu->u->ul无序，即ul是无序，那么ol就是有序了
对于ul标签和ol标签也算占一行的，且li标签自带换行，即在ol和ul里也占一行
-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
大美女
<img src="img/cat.gi" width="400px" height="300px" border="10px" title="哇塞"
alt="图片加载失败啦啦" align=" middle"/>
<!-- img是为数不多的在自关闭的标签下,可以实现操作的
因为他设置的属性与内容无关，当然标签本身有作用的也可以自关闭,如p标签和br标签，br标签也是特殊标签
其中p标签是自带补充，br会省略/，即不会补充的才会省略/
<img>它可以让我们在网页引入一张图片
src 英文意思：文件名，指定图片，只能是图片，会判断他是不是图片，当然静态图片和动态图片都可，因为都是图片
若不是或者地址信息没有，则显示加载图片失败
width设置图片宽度，不写的话默认为图片的像素宽度
height设置图片高度，不写的话默认为图片的像素高度
border设置图片边框大小，不占用图片的宽高（一般来说默认是0），即多出来一些边框，就是这个，默认为黑色
title鼠标悬停图片上，并等待几秒，那么就会出现默认显示的文本信息
alt如果图片不可以显示时，默认显示的文本信息
align图片附件文字的对齐方式,就是规定了图像相对于周围元素的对齐方式
而不是相对一行或者窗口对齐，与table的align不同，table的是一行的对齐，与文字无光
可取值有
left：把图像对齐到左边
right：把图像对齐到右边
middle 英文意思：中部的，把图像与中央对齐,由于图像只在这一行，要达到相对于文字对齐，只能够是文字到中央
top：把图像与顶部对齐
bottom 英文意思：底部，把图像与底部对齐（默认）
对于一些标签，只要标签名字没错，那么就会一一读取标签信息，有错误的属性，就忽略，但正确的属性会有他的内容
如<img sr="ss" alt="ff"
上面img单词没错，读取信息，src单词错误，不读，alt没错，读取，少了">"则没有内容，这时显示ff
从第一个<开始后，若没有>，则<后面的所有内容就是第一个<对应标签的内容
如<br<br<br<br<br<br<br<br<br<br<br<br<br<br<br<br<br<br<br<br<br>d，没有换行
虽然最后一个看起来是正确的，但最后一个>只作用与第一个<，且由于是一个整体，那么即标签错误
若第一个br后面有空格，那么就可以换行，因为这时就不是整体了
对于大多数的标签都是这样
通常情况下=后面的px可以省略，而:后面的px不可省略
-->
</body>
</html>
<a>标签,可以实现跳转到其它页面操作.超链接内容不仅可以是文本，也可以是图片等信息,可以点击图片或者文本进行跳转
当然其他的内容也可以，如视频，即基本上所有的内容都可以跳转
最后实际上html也只是一个识别标签信息而已，虽然有时候有搞特殊的，但是我们按照规范即可，他的显示就与编程语言一样的显示，只是他是浏览器来进行操作的，css和js也是他利用的工具，一般都是从上到下，既然编程语言可以实现的，自然浏览器也能进行实现（就如xml可以被识别并操作，那么浏览器渲染自然也能）
你要相信，二进制可以按照你的想法进行显示给你看的，自然包括操作自己的文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 跳转到 互联网上的资源，需要补全 http:// ，这是协议部分-->
<a href="http://lagou.com">去求职</a>
<!-- 跳转本地资源文件-->
<a href="01 test.html">去第一个页面</a>
<!--发邮件-->
<a href="mailto:angiersun@lagou.com">站长邮箱</a>
<!--QQ聊天窗口-->
<a href="tencent://message/?uin=19998539&Menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=1:615050000:11"/>
<!-- 这个11可以改变，就是改变图片，功能不会变，但要进行操作，还需要网络，没有网络的话
图片都不会加载
点击后与会话的连接是没有反应的
a标签也有target属性：
_blank在新窗口中打开被链接文档
_self是默认值，在相同的框架中打开被链接文档（即本页面）
-->
</a>
<!--
href 英文意思：水平参考，代表的我们要跳转的路径,加上是http://或者https://表示访问网页路径
不加就是本地路径,其中可以访问文件夹或者文件，文件包括很多，如文本，图片等等
"mailto:邮箱地址"，其中邮箱地址可以不写，即直接写mailto:就可以打开邮箱，mailto:是一个整体，不可缺少
否则不起作用，主要是:来进行跳转的，:没有则是访问本地文件,而有:就是进行操作(打开对应软件或者其他）
这时就要看你前面的单词的作用了
如mailto就是对应邮箱软件，即加上:就是操作邮箱，并打开
而:后面就是你需要的内容了，这是自带的写法，:有很多作用,如打开qq聊天窗口，都是底层调用
点击这个链接
就会打开你计算机能够发送邮件的软件，然后邮箱地址，给你写好，你就可以进行操作了
tencent://message/?uin=1819998539&Menu=yes
qq的强制聊天代码?uin=后跟的是qq号,其中Menu=yes可以不加
但要注意，不支持与自己发起会话
原理是当浏览器（或其它）碰到 tencent://… 时
自动调用 Timwp.exe，并把 tencent://… 地址作为第一个参数传递给 Timwp.exe（临时对话）
就是到聊天窗口，跟寻常聊天一样，只不过这是网页操作而已
a标签的内容可以是文本或者图片，其实基本上不管什么内容，都可以进行跳转，如视频也可
tencent://message/?：腾讯通讯或者腾讯通信，后面对准qq号
-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>4行3列的表格</title>
</head>
<body>
<table border="1" width="400px" align="center" cellspacing="0">
<tr align="center" border=3>
<td colspan="3">年度报表</td>
</tr>
<tr>
<td rowspan="3">收入</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</table>
<!--
<table>：定义一个表格
border：边框，取值是像素为单位
对于有些显示器来说，一个像素就是4个或者多个像素点，一般是4个（好像少点，一般是高清屏幕，这里以这里的4个为主），如一个格子里面有4个格子，像素则既可是一个点，又可是多个点的集合
这里我说明一下像素点
由于计算机硬件最少只能识别一个像素点（该像素点的大小也与硬件相关），1.5像素点显示1像素点（可能是2）
就是一个像素点不可再分开，这是大多数缝隙的来源
当你放大到一定程度，那么就可以看到一个小格子，那就是像素点
但由于像素可以称为像素点，也可以是像素点的集合，所以我们通常用像素来介绍，但实际上是像素点最小（以前最小是一个像素，但是随着时间的发展，也就出现了像素点，所以，这在某种情况，我们一般将像素点称为像素了，所以说成像素最小也是合理的）
对于像素点和像素的细节说明或者说来源说明，解释如下，以1px为例：
在大多数情况下，"1px"表示一个像素，通常被视为屏幕上的最小可见单位，在Web开发中，CSS的像素（px）是相对于显示设备的屏幕分辨率而言的，一般情况下，1px等于一个设备上的一个物理像素点
然而，需要注意的是，像素（px）在某些情况下可能不是最小单位，特别是在高分辨率（如Retina显示屏）的设备上，在这些设备上，为了显示更清晰的图像和文本，每个CSS像素可能由多个物理像素点组成，这种情况下，可以将一个CSS像素视为多个物理像素的集合，即像素点的集合
在这种情况下，开发人员通常使用设备独立像素（Device-Independent Pixels，dp或dip）或逻辑像素（Logical Pixels）来指代适应多种设备分辨率的单位，这些单位在不同的设备上会根据屏幕密度进行缩放，以保持一致的显示效果
总之，通常情况下，"1px"表示一个像素，被视为屏幕上的最小可见单位，但在某些高分辨率设备上，一个CSS像素可能由多个物理像素组成
由于现在基本都是高清屏幕，或者高分辨率，所以这里我们以4个为主的说明
所以对于表格来说，缝隙的存在是因为表格的像素分配问题，他会使得颜色分配不到那么细
造成缝隙，当然不同显示器和浏览器有不同的效果
对于我的显示器，他并没有完全占到一个像素点，所以就有以下情况
如7个像素点的边框，内容也是7个像素点，由于内容的空白格的存在，使得表格扩大，其中会尽量的减少扩大像素
就如扩大0.5个像素时，让整体内容向近的一方进行移动，如0.75-1右边，1.25-1左边，使得可以内容得以存放
且其他没存放的刚好是一个像素点，这是最优解，所以表格缝隙的由来就是如此
由于我的显示器和浏览器不太一样，所以造成了上下左右都有缝隙，且采用最优解
当然对于不同的显示器和浏览器有不同结果
若是平常的显示器和浏览器，基本上会完全的占一个像素点
即左边和上边有缝隙，其他没有，而这样的缝隙就是最上面说的1.5个像素只能显示1像素，这样的操作基本上是靠右的
因为居中的话，左边是有解释标签的操作，即html中偏向于右，所以靠右
即左边和上边的缝隙就是不能细分一个像素点的原因
根据显示器来进行分配像素点，因为显示器的分配各有不同，分配越小，显示器的显示就越好
而对于这个缝隙，很难去改变，因为底层的缘故，所以基本上可以忽视（大多数是因为默认的物理像素问题，也就是设置中，设置显示器分辨率为100%时，一般可以解决，极少数是因为显示器本身的底层而出现的，这种情况忽略即可，以前的年代可能有，现在一般没有了）
可以将border改成outline，表示不占空间的边框，即可以设置在会占有缝隙的边框中，使得他的边框不显示
outline是不占空间的，不会增加额外的width或者height，也会受浏览器的影响
因为他是保护边框的，就如边框保护内容一样
通常情况下，这样的缝隙问题主要是硬件的像素点识别问题
对开发的影响几乎没有（因为就是一个像素点，开发中像素点有很多，一个像素点可以忽略不计）
所以可以不必在意，即可以忽略这个缝隙
width 代表的表格的宽度
align 代表表格的对齐方式，与这一行的对齐
取值
left 左对齐表格
right 右对齐表格
center 居中对齐表格
bordercolor:所有边框颜色，内部和外部都是
cellspacing：单元格间距（通常设置0表示单线表格，即单元格之间没有间距了，即边框相靠），实际上可以看成td与td之间的以及tr和tr之间的margin的四边距离
还有cellpadding单元格的内边距
<tr>：表格中的行 （Table Row）
align 代表表格的对齐方式
取值
left 左对齐内容（默认值）
right 右对齐内容
center 居中对齐内容（th 元素的默认值）
<td>：表格中的数据单元格 （Table DataCell）
colspan 指示列的合并,不要将列看成一列数据，因为一列数据是由所有行数组组成的
所以列就表示这一列，而列的合并就是两个列的合并，就是左右的合并
即多列合并
rowspan 指示行的合并，一行数据所有列组成的，所以不是左右，而是上下行的合并
即多行合并
再进行合并操作时，如三个变一个，那么只要一个td里设置就可以了，而不是三个，因为浏览器会帮你操作，若你写三个td
那么其中一个设置三个合并时，这时，就会出现多出的两个，由于是从左到右，那么右边，就会出现两个td
使得其他行也出现两个td的间隙，因为表格是对齐的
即参照最长的行，不分先后，即就是后面的行长点，那么前面的也要对齐后面的行
可以理解为设置了合并的td就相当于多个相对应的设置，如多个td（占列）和tr（占行）的作用
且只向后合并，如colspan向右合并，rowspan向下合并
注意：一个tr只能被合并操作添加（或者说多出）一个td，否则一般不会操作合并
最后要注意：一般来说边框是不共享的，如cellspacing只是边框距离，而不是共享边框
-->
</body>
</html>
注意：由表格可知，其实大多数标签都有属性的，每个标签服务与他里面的内容
而外层标签服务于内层标签，也可服务于内层标签的内容，但是内层标签服务的内容要优先于外层标签
即同样的操作，如字体大小的改变，会优先使用内层标签的大小，即谁近谁使用
且当一个属性操作完一个内容时，其他相同的属性就不会操作这个内容了，但不同的可以操作，以此类推
表单可以让我们将录入信息携带到服务器端
简单说，通过表单可以将要提交的数据提交到指定的位置
但一个一个的提交，不方便
表单正好解决了这个问题，将所有的数据形成一个整体，一起提交给服务器
常见的 登录页面、注册页面 都离不开表单的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="服务器的地址" method="post">
</form>
<!--form 英文意思：结构
from 英文意思：来自
这里要注意
action 英文意思：作用，指定整个表单提交的目的地,类似于a标签的href，即没有协议就是本地，有协议就是网页
只不过可以有数据
method 英文意思：方法，表单提交的方式，默认get
get：提交时，传输数据量少（传递普通文字信息，传递照片会失败）
明文提交（在浏览器的url后面会显示提交的数据，不适合用于登录），但效率快
post：提交时，传输数据量大（传递文字和图片都行）
密文提交（浏览器的url后面看不到提交的数据），但效率慢
-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="baidu" method="GET">
<p>帐号：<input name="a" type="text" placeholder="请输入帐号..." maxlength="5" ></p>
<p>密码：<input name="b" type="password" ></p>
<p>爱好：
<input name="hobby" type="checkbox" > 抽烟
<input name="hobby" type="checkbox" checked="checked"> 喝酒
<input name="hobby" type="checkbox"> 烫头
<input name="hobby" type="checkbox"> 泡澡
</p>
<p>性别：
<input type="radio" name="sex"> 男
<input type="radio" name="sex" checked="checked"> 女
</p>
<p>身份：
<input type="radio" name="role"> ceo
<input type="radio" name="role"> cto
<input type="radio" name="role"> coo
<input type="radio" name="role" checked="checked"> ufo
</p>
<!--
对于radio单选框，当你没有name属性时，可以选择多个
而有name属性时，相同的name属性，只能选择一个
这样的操作简称为分组
而checkbox复选框，选择几个，与name属性无关，但是一般来说，提交相同name的，一般会看成一起的（后面收到数组）
-->
<p>头像：
<input type="file">
</p>
<p>血型：
<select>
<option>A型</option>
<option>B型</option>
<option>C型</option>
<option selected="selected">O型</option>
</select>
</p>
<p>个人简介：
<textarea cols="10" rows="5"></textarea>
</p>
<p>
<input type="reset" value="清空">
<input type="submit" value="提交">
<input type="button" value="取消">
<button>保存</button>
</p>
</form>
<button>测试</button>
<!--
input 英文意思：输入
input也可以不用/结束，少数标签可以用，img也可以，基本上自关闭标签都可以使用
实际上对于可以自关闭的标签，他们的内容是要自己设置的，如使用value属性，而直接写内容
与他们本身无关
即只操作自己设置的内容，而直接写的内容，就相当于在空白处写的内容一样
placeholder属性：作用与框内，提示文本,值为提示信息
maxlength属性：最多能输入字符数量，值为最大数量
上面两个通常用于type设置text和password的input的开始标签里
<input>元素的type属性
text：默认值，普通的文本输入框,即不设置type属性或者设置的属性没有时，默认是，type="text"
password：密码输入框
checkbox：多选框/复选框
checked：被选中，也可以在其他的设置里写，如radio，值为checked，当然不写值也可，也会选中
基本上值与属性名相同的都可以不用写值,其实只要你写了这个单词，就会起作用
如checked=-=-=-=,也会起作用
所以更加证明了html的不严谨，只要识别即可，并根据这个来确定作用，并且某些情况可能只是判断值对不对，而进行一些默认的配置，比如border=，可能导致width固定，或者其他属性固定，所以为了不必要的出现，最好是有规范的，且要注意。html和css是用来浏览器的显示，一般不能直接操作很基本的组件，而js可以，所以js是核心，简单来说html是只操作识别的，并且判断识别内容是否合理
radio：单选按钮
file：上传文件
reset：重置按钮
submit：提交按钮
button：普通按钮
value属性：基本上只有自关闭标签有这个属性
用来设置标签的内部内容（内部内容就是不受外部标签影响的内容），后面有这个会说明
直接写在自关闭标签里的内容与在空白处写的内容一样，所以需要value来设置内容
所以可以说，大多数用value设置标签内容的标签，只有内部内容，即标签里的内容也是外部的，与空白处写一样
<select>：下拉列表/下拉框
<option>：列表中的项,标签内容是下拉框里面的内容，默认第一个option标签，会显示在下拉框里
selected：被选中，值为selected，即可以不用设置值，直接写selected也可
让设置的项显示在下拉框里，后设置的option标签，后起作用（起了就到他）
即最后显示的就是后设置的项的内容
从这里可以看出但凡属性名和值相同的，基本上只要有该单词就会起作用
这样的，我称他为设置项
但开发中我们最好还是养成好习惯，因为以后肯定会变的非常严谨的，虽然现在还可能不是
<textarea>：文本域（多行文本框）
可以通过 cols 和 rows 属性来规定 textarea 的尺寸,即cols规定多少列，rows规定多少行（一般是添加，默认初始1.5），汉字一般占用两列，数字和字母占用一列
右下角可以进行拖拽
cols 英文意思：列数
rows 英文意思：一行
注意只有当下拉框出来时才会真正的正确，因为下拉框也占两列（一般是1.5，请根据实际情况出发，0.5通常只是一个空格），所以会出现实际列数为设置的列数加上2
若cols设置的不是大于等于1的数，就会默认为20（在操作了下拉框的情况下，他可没有0.5，且下拉框直接占用2，css设置的一般也是这样），而rows默认为2
所以由于上述的限制，更好的办法是使用 CSS 的height 和 width 属性
注意：右下角可以进行宽高的增大和增小，自己可以进行测试
<button>：按钮
在form表单中，作用和submit一样，实际上是当没有对应的type时
button相当于input中加上type="submit"
所以要想改变这种情况，可以加上type="button"，这样他就不会变成input并加上type="submit"了
而不加上type="button"，而加上其他的，如type="text"，type="a"等等
则通常默认为input中加上type="submit"，所有需要这样的操作
因为是根据他是否有type="button"才进行变化的，来确定他是普通按钮
不在form表单中，就是普通按钮（配合后期的javascript，可扩展性更高）
-->
</body>
</html>
注意事项：
所有表单中的元素都要具有名称，id也可
否则提交到服务器之后，服务器不能通过名称来获得数据，或者无法区分识别多个元素之间的不同
单选框要想可以一次只选择一个，要具有相同的name值
所有的复选框以组为单位，组内的每个复选框都应该具有相同的name值，而checkbox复选框，选择几个，与name属性无关
通过<frameset>和<frame>框架标签可以定制HTML页面布局
可以理解为：用多个页面拼装成一个页面
注意，框架标签和body标签不共存，"有你没我，有我没你",因为其他页面里有body了
相当于浏览器开辟一个子页面了，二进制基本可以满足你的想象哦
由于html不严谨，即使有错误的写法（没满足条件），也会使得浏览器进行操作，即错误操作不识别
如框架标签外写body，那么框架标签不操作（识别）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<!--注意：在js中，他的参数name可以被变量进行设置改变，注意即可-->
<frameset rows="10%,*,13%">
<frame src="top.html"></frame>
<frameset cols="15%,*">
<frame src="left.html"></frame>
<frame src="right.html"></frame>
</frameset>
<frame src="foot.html"></frame>
</frameset>
<!--
frameset代表这个主页面，只能写有网页的，也可以内容（触发条件为，不支持该框架，即还是只能显示网页）
则需要noframes（只能是不支持这个框架的才显示），否则没有内容
frame代表这个主页面的子页面，由于子页面有body，所以frameset不可与body一起用
rows设置页面的行数，即分配子页面所占行比例，子页面也有这个属性
cols设置页面的列数，即分配子页面所占列比例，子页面也有这个属性
*代表除其他已分配好的百分比的所有内容（可以理解为1-所有设置的百分比）
且这样的比例，是从第一个frame标签开始，多余的不识别
src指定子页面的显示路径，与a标签的href类似，即可以是本地路径和网页路径
noframes标签：当别人使用的浏览器太旧，不支持框架这个功能时，他看到的将会是一片空白
这时要显示内容，就要使用这个标签，由于没有body，那么该标签里要写上body标签来进行显示
先写body，否则不会显示没在body标签的内容
若想要网页的比例分配不可拖拽，那么就用noresize="noresize"，使得比例固定，不可拖拽
-->
</html>
<meta>标签必须写在<head>标签之间
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--
meta标签设置网页信息
<meta charset="UTF-8">
设置编码
有很多种语言都可以在UTF-8里找到，即通常使用UTF-8
而字符编码gbk：中文简体，可以看出gbk范围太小，所以最好用UTF-8字符集
不同编码的解释方式不同，也有些是包括，若方式不同，造成没有，则使用相似的，这就是乱码的存在
<meta name="viewport" content="width=device-width, initial-scale=1.0">针对移动设备
其中viewport是名字（显示窗口）
content 英文意思：主要内容，一个属性多个值，值可以用符号（通常是逗号）隔开，底层的操作
width=device-width显示窗口宽度是客户端的屏幕宽度（就是满屏）
device 英文意思：设备
initial-scale=1.0显示的文字和图形的初始比例是1.0，即内容没有进行过缩放
initial 英文意思：最初的
scale 英文意思：规模
<meta http-equiv="X-UA-Compatible" content="ie=edge">
http-equiv="X-UA-Compatible"设置兼容模式，只所以这样设置，是因为同样的代码，在不同浏览器版本下，内容不一致
每个电脑内置的IE版本是不一样的，为了兼容所有的版本以最高级模式渲染文档（就是ie=edge）
也就是任何IE版本都以当前版本所支持的最高级标准模式渲染
通过meta标签来设置页面加载后在指定的时间后跳转到指定的页面:
<meta http-equiv="refresh" content="5; url=http://www.lagou.com">
注意：在html中如果跳转的是互联网上的网站资源，那么我们在书写路径时，一定要带协议的路径
-->
后面我们会使用link标签来导入css
注意:link标签也必须写在<head>标签中
特殊字符-----------------------------
我们在页面上除了可以通过键盘输入符号，也可以通过特殊字符来输入符号
上面的"?"是我编码的问题，具体自己可以测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<h1> ♥ 顶部导航 区域</h1>
<!--
在html里
用的最多的就是 （空格）
其他用的少
如♥（心型符号）
对于这些，你并不需要记住，只要有时候需要某些标志时，来这里即可，注意：二进制显示的都是图片，那么他识别给你的自然也可以是图片，并且你也要知道html只是一个集成操作，并不能操作底层，所以会操作一些html或者css的一些魔幻操作的出现，这就是原因，因为并没有很细节，而js是可以的（也可以拿取html的信息），虽然不能全部修改（因为系统文件需要自己修改系统文件才可以，使用者（浏览器）怎么能反过来呢，因为没有你我自然没有），最终，浏览器显示给你的页面也是可以动态渲染的，因为当你通过浏览器改变元素时，一般浏览器会重新渲染一遍，或者浏览器保留了块操作，只会渲染这个块，vue也就是这样，由此可以知道，浏览器的显示与元素之间有关联，而元素之间造成渲染的是修改形成的触发
-->
</body>
</html>
HTML5新特性-------------------
H5包含h4
大小写不敏感
标签，属性，属性的值
<inPUT tYPe="pasSWord"/>
引号可省略，或者写单引号，缺少都可以（即是错误的，错误的不识别，即默认为text）
<input type="password">
<input type=password>
省略了结尾标签
<p>哈哈哈哈哈哈哈
<p>哈哈哈哈哈哈哈
上面的说是省略，其实运行起来，html是自动帮我们补全了，如p标签省略结束标签或者开始标签，不加双引号等等
查看源代码，需要检查里的，即F12，看源代码，而网页源代码是进入到浏览器的源代码，而不是真正的源代码
但我们还是不用省略，最好养成好习惯，因为代码一多，就会有点乱，嵌套关系就难找了
Elements 英文意思：基本部分
新增语义化标签--------------------
html4中，所有的容器标签95%都会使用div，div过多的话，很难区分彼此
新增许多语义化标签，让div"见名知意"
section标签：表示页面中的内容区域，部分，页面的主体部分，英文意思：部分
article标签：文章，英文意思：文章
aside标签：文章内容之外的，标题，英文意思：在一边
header标签：头部，页眉，页面的顶部，英文意思：标头
hgroup标签：内容与标题的组合
nav标签：导航
figure标签：图文并茂，英文意思：图形
foot：页脚，页面的底部，英文意思：脚
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<nav>导航</nav>
<section>
xxx
<article>
<aside>文章标题</aside>
<div>文章的内容
<figure>
文字部分
图片部分
</figure>
</div>
</article>
xxx
</section>
<footer>页脚</footer>
</body>
</html>
<!-- 注意：他们其实就是div，只不过名称不是div而已，也就是相当于将div标签名称改变了-->
<!--
想在网页上播放视频，就要使用<video>（audio标签就是音频，一样的操作，一样的属性），属性有:
src：媒体资源文件的位置，这里的媒体资源文件就是视频等等
若不是媒体资源文件，虽然会显示，但不识别，即只有一个模型在那里
controls：控制面板，即可以控制播放，英文意思：控制
autoplay：自动播放（一般视频存在才会触发，谷歌失效，360浏览器可以，底层的原因，即底层设置的原因，一般禁止的只是带有声音的，如果没有声音，那么一般是可行的，注意只是一般，说明有些无论什么情况都禁止的，具体可以百度），英文意思：自动播放
loop：循环播放，英文意思：循环
-->
<video src="img/html-css-js之间的关系.mp4" controls loop autoplay></video>
<!--
这三个属性
属性名和值一样可以直接写单词
-->
表单的控件更加丰富了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>H5 <mark>新增</mark>的表单元素</h2>
<input list="citys">
<datalist id="citys">
<option value="北京"></option>
<option value="南京"></option>
<option value="重庆"></option>
</datalist>
<form action="">
<input type="color">
<br>
<input type="date">
<br>
<input type="month">
<br>
<input type="week">
<br>
<input type="number" min="10" max="20" step="2">
<br>
<input type="range">
<br>
<input type="search">
<br>
<progress></progress>
</form>
<!--
<input>，修改type属性：
color：调色板
date：日历，可设置年月日，最小是日
month：月历，只能设置月，最大和最小都是月
week：周历，可设置年月，最小是周
number：数值域，开始不显示，按一下上下显示最小的数
in：最小值（默认值是1）
max：最大值（默认值无上限）
step：递增量
range：滑块
search：搜索框（与普通框的区别就是带×号，可一键删除框中内容）
进度条<progress/>
高亮<mark>
input中list属性引用数据列表,其中包含输入字段的预定义选项（如模糊查询，即datalist标签）
通常作用于text值的输入框
联想输入框<datalist> （模糊查询）,设置id属性，唯一的，与name不同
在js里是不可以抓取相同id的标签的，因为不知到取谁，而name相同的话，就会是数组
这里定义id，是为了list的引入，即引入这样模糊查询，即会有提示，那么在input的默认text的框里，进行输入时
会出现选项的提示，或者你输入选项中的其中一个数时，也会提示出现相关的选项
类似于mysql的"%"操作，只要选项里有该数，就会提示，当框里没有数据时，也可直接点击框提示
选项<option>，只有内部内容，没有外部内容，即需要value设置内部内容
-->
</body>
</html>
715
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
