Web标准
主要包括：结构，外观，行为三个方面
HTML标签，把标签学会，这门语言就基本学会了
双标签的关系，并列关系和包含关系
每个标签起作用的位置
vscode自动生成的代码的解释
<!DOCTYPE>文档类型声明标签，而不属于html标签
作用是告诉浏览器使用哪种HTML版本来显示网页
<html lang = "en">
lang表示语言，“en”表示是英文
定义字符集
<meta charset ="UTF-8"/>
这一句不写的话就会乱码，
标题标签
<h1></h1>
有h1~h6,分别表示几级标题，如<h1></h1>就是一级标题
段落标签
<p></p>
换行标签
<br />
盒子标签
div和span
div一人独占一行
span是多个并列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div> 范德萨范德萨</div>
<div> 范德萨范德萨</div>
<span> 刘洋</span>
<span> 唐昌涛</span>
<span> 文旅航</span>
</body>
</html>运行结果
abbr缩写标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p> 我是一个很<abbr title="字面意思，就是很厉害">厉害</abbr>的人</p>
</body>
</html>
当鼠标放在上面时，就能显示预先写好的信息
用法：
先写一段话，然后将需要有以上效果的词用
<abbr></abbr>括起来，并且在第一个abbr后面接上
title = "当鼠标放在缩写的词上面时，需要显示的内容"
address地址标签
通常用来显示文章作者的联系信息
用法：
<address>
简单介绍作者，，，
将作者名字用
<a href="邮件地址">作者名字</a>包裹起来
</address>
代码：
<body>
<address>
我是一个特别固执的人，名字叫做<a href="yhy.html">小鬼</a><br>
</address>
</body>
<cite> 标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。
用<cite></cite>包裹起来的内容会变成斜体
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
图像标签
<img>,单标签
<img src = "图像的URL"/>注意有反斜杠
首先要把图片放到与html文件同样的文件夹下
<img src = "img.jpg" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src = "img.jpg" />
</body>
</html>运行结果
img的属性，如src，alt，和title
src是文件路径，是必须的
alt是当图片显示不出来时，用文本替换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h4>图片标签演示</h4>
<img src = "img.jpg" />
<h4>图片标签演示，当图片显示不出来时，替换文本</h4>
<img src = "没有这张图片.jpg" alt="网络出了点问题,,," />
</body>
</html>
当鼠标放在图片上时，显示的文本---title
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h4>图片标签演示</h4>
<img src = "img.jpg" />
<h4>图片标签演示，当图片显示不出来时，替换文本</h4>
<img src = "没有这张图片.jpg" alt="网络出了点问题,,," />
<h4>图片标签演示，当鼠标放在图片上时，显示的文本</h4>
<img src = "img.jpg" title = "鼠标放在图片上"/>
</body>
</html>改变图片的长，宽，边框厚度，width，height,border
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h4>图片标签演示</h4>
<img src = "img.jpg" width="200" border="100" />
</body>
</html>运行结果
HTML超链接
用<a></a>来设置超链接
在<a>中设置href属性来描述链接的地址
用法：
<a href = "url">用来点击的文本</a>
"用来点击的文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
url是跳转的网址
HTML超链接的target属性
如果要在新界面打开该链接，只需在href后面加上target="_blank"即可
HTML超链接，点击图片跳转
<a href="Main.java"> <img src = "img.jpg" width="30"> </a>
<body>
<address>
我是一个特别固执的人，名字叫做<a href="yhy.html">小鬼</a><br>
</address>
<p> <a href="Main.java"> <img src = "img.jpg" width="30"> </a></p>
</body>
HTML <head>，要写在<head></head>里面的元素及其作用
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
<title> 元素:
- 定义了浏览器工具栏的标题
- 当网页添加到收藏夹时，显示在收藏夹中的标题
- 显示在搜索引擎结果页面的标题
<base> 元素:
指定了链接的前缀地址，和是否在新页面打开
<base href="http://www.runoob.com/images/" target="_blank">
HTML <link> 元素
连接css文件
CSS 可以通过以下方式添加到HTML中:
- 内联样式- 在HTML元素中使用"style" 属性，
<p style="color:blue">这是一个段落。</p>
- 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
- 外部引用 - 使用外部 CSS 文件
最好使用外部引用的方式
一，内联样式
HTML样式实例 - 背景颜色
在body，h1，h3，p等标签后面加上一定语句能达到设置背景颜色的目的
如：
<body style = "backgroud-color : yellow">
</body>
如：
<h2 style = "backgroud - color :green"> 内容内容内容</h2>
HTML 样式实例 - 字体, 字体颜色 ，字体大小
同样的，在body，h1，h3，p等标签后面加上一定语句
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
二，内部样式表
当单个文件需要特别样式时，就可以使用内部样式表
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
三，外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
HTML 表格
用法：表格由 <table> 标签来定义。行由 <tr> 标签定义，列由 <td> 标签定义。字母 td 指表格数据（table data），即数据单元格的内容。
<h4>一行三列:</h4>
<table >
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
表格的表头使用 <th> 标签进行定义。
HTML无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
运行结果：
HTML 有序列表
<ol>
<li>小鬼</li>
<li>capper</li>
</ol>
HTML 自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML 表单
<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>
表单是一个包含表单元素的区域。
表单元素允许用户在表单中输入内容，文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）
用法：
用<form></form>来创建表单
在需要有输入框的地方，添加以下语句
<input type ="" name = "">即可
如
<input type="text" name="firstname">
以下语句都添加在<form></form>里面
单选按钮
给input的属性type 设置成radio即可
<input type="radio" name="sex" value="male">男
注意，要实现单选效果，需要2个单选词条的name是一样的，表示这是一组单选，只能选择其中一个
<form action="">
<input type="radio" name="sex"> 男<br>
<input type="radio" name ="sex"> 女 <br>
</form>
复选框（多选按钮）
给input的属性type 设置成checkbox即可
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车
创建下拉菜单
也是在表单里面的，即form
用法：
<select>
<option> value = "one" 选项1</option>
<option> value = "two" 选项2</option>
</select>
option即各个选项
提交按钮(Submit)
当用户输入完后，点击提交按钮，会将表单的内容传送至服务器
表单的action动作属性定义了服务端的文件名
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
表单还有一个属性：method，它用于定义表单数据的提交方式，可以是以下值：
post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。
创建按钮
<form action="">
<input type="button" value="Hello world!">
</form>
URL
URL指是是统一资源定位器，简单来说，就是一个网页地址，当你点击某个URL后，会跳转到对应网页
一个统一资源定位器(URL) 用于定位万维网上的文档。
语法：scheme://host.domain:port/path/filename
scheme： 定义因特网服务的类型。最常见的类型是 http
host：定义主机（www）
domain:定义英特网域名
port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）
filename - 定义文档/资源的名称
常见的 URL Scheme
以下是一些URL scheme：
| Scheme | 访问 | 用于... |
|---|---|---|
| http | 超文本传输协议 | 以 http:// 开头的普通网页。不加密。 |
| https | 安全超文本传输协议 | 安全网页，加密所有信息交换。 |
| ftp | 文件传输协议 | 用于将文件下载或上传至网站。 |
| file | 您计算机上的文件。 |
总结，速查标签HTML 速查列表 | 菜鸟教程 (runoob.com)
