二、HTML
2.1 介绍
HTML（HyperText Markup Language，超文本标记语言）
HTML是网页的骨架，用于定义网页的结构和内容。通过各种标签（如<div>、<p>、<a>、<img>等）来组织文本、图片、表格、表单等元素。
HTML就像是人体的骨骼和器官等框架。
CSS（Cascading Style Sheets），层叠样式表
作用：CSS用于控制网页的外观和格式。它可以设置字体、颜色、间距、边框、布局等样式，让网页看起来更加美观和有吸引力。
CSS更像是人体的皮肤、头发、眼睛的颜色等外观特征。
JavaScript（JS）
作用：JavaScript是一种脚本语言，用于实现网页的交互功能。它可以响应用户的操作（如点击、滚动、输入等），动态地改变网页的内容和样式，甚至与服务器进行交互。
JavaScript更像是人体的动作和行为。
2.2 演示
创建html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>我是一个按钮</button>
</body>
</html>
加上CSS
<button style="background-color: aquamarine;">我是一个按钮</button>
在botton标签内部加上背景色的属性，相当于添加了这个按钮的外观
js控制行为
<body><button style="background-color: aquamarine;">我是一个按钮</button><script>document.addEventListener('DOMContentLoaded', function() {var button = document.getElementsByTagName("button")[0];button.addEventListener("click", function() {alert("按钮被点击了");});});</script>
</body>
通常在script标签中用javascript来控制网页的行为
点击按钮后，浏览器弹窗显示。
2.3 什么是HTML
- HTML（超文本标记语言）
- 定义：HTML（HyperText Markup Language）是用于创建网页的标准标记语言。它通过一系列的标签来定义网页的结构和内容。
- HTML5：HTML5是HTML的最新版本，它在2008年正式发布，提供了更多现代网络应用的功能，如多媒体内容的处理、图形、动画等。
- 超文本
- 定义：超文本是指在文本的基础上，通过HTML标签引入其他网页、图片、音频、视频等多媒体资源，使网页内容更加丰富多样。
- 标记语言
- 定义：HTML是一种标记语言，它使用一系列的标签来描述网页内容的结构和格式。与编程语言不同，标记语言不包含程序逻辑如变量、流程控制等。
- HTML标签
- 双标签：如
<p>...</p>，用于包围内容，定义段落。 - 单标签：如
<input />，通常用于定义自包含的元素，如输入框。 - 属性：如
<a href="http://www.xxx.com">...</a>，用于提供额外的信息，如链接的URL。
- HTML基础结构
- 文档声明：位于HTML文件的第一行，声明文档类型和版本，如
<!DOCTYPE html>。 - 根标签：
<html>，包含整个HTML文档的所有内容。 - 头部元素：
<head>，包含文档的元数据，如<title>、<link>、<meta>等。 - 主体元素：
<body>，包含网页的所有可见内容。 - 注释：
<!-- 注释内容 -->，用于在HTML代码中添加注释，这些注释不会显示在网页上。
2.4 HTML常见标签
2.4.1 标题标签
标题标签一般用于在页面上定义一些标题性的内容,如新闻标题,文章标题等,有h1到h6六级标题。
<body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>
注意文档标题是显示在浏览器页面上面的，和页面中的标题要区分开来
2.4.2 段落标签
段落标签<p>一般用于定义一些在页面上要显示的大段文字,多个段落标签之间实现自动分段的效果。
2.4.3 换行标签
单纯实现换行的标签是<br>,如果想添加分隔线,可以使用<hr>标签
2.4.4列表标签
有序列表 ：分条列项展示数据的标签, 其每一项前面的符号带有顺序特征
- 列表标签 ol（
order list） - 列表项标签 li
今天吃：
<ol><li>肯德基</li><li>麦当劳</li><li>中国汉堡</li>
</ol>
无序列表：分条列项展示数据的标签, 其每一项前面的符号不带有顺序特征
- 列表标签 ul（
unorder list） - 列表项标签 li
今天吃：
<ul><li>肯德基</li><li>麦当劳</li><li>中国汉堡</li>
</ul>
2.4.5 超链接标签
点击后带有链接跳转的标签，也叫做a标签。
-
href属性用于定义连接
-
href中可以使用相对路径,不以/开头,以 当前文件 所在路径为出发点
在本文件目录下新建一个文件，叫做
test.html
在原文件中使用a标签，href属性输入要跳转的页面链接
<a href="test.html">相对路径本地资源连接</a> <br>
点击后跳转
另外，如果需要跳转的文件在不同的目录中，这个目录与当前文件的目录处于同一级别，可以用
../跳转到上一目录，再输入跳转文件的目录与跳转文件名。同时，
./代表当前目录。 -
href中可以使用绝对路径,以/开头,始终以一个固定路径作为基准路径作为出发点
将刚刚的test.html文件中的文本改为绝对路径测试
但此时浏览器却显示找不到该页面，这是因为href属性以
/开头时，表示的是一个绝对路径，但这个绝对路径是 相对于网站根目录 的，而不是以标准URL格式表示的。那怎么知道当前的具体根目录？
与服务器IP和端口号重合的部分就是当前的根目录了，所以我们这时候就知道了，需要将原文件中的href的绝对路径改为
/test.html。<a href="/test.html">绝对路径本地资源连接</a>
-
href中也可以定义完整的URL
<a href="https://uae.kfc.me/en/home">url地址</a>
-
-
target用于定义打开的方式
-
_self 在当前窗口中打开目标资源
不写target属性时，默认就是在当前窗口打开目标资源
-
_blank 在新窗口中打开目标资源
<a href="https://uae.kfc.me/en/home" target="_blank">url地址</a>
-
2.4.6 多媒体标签
img标签
- src：定义图片的链接，也可以采用相对和绝对路径
- title：用于鼠标悬停时显示的数字
- alt：图片加载失败时显示的文字
audio标签
- src：用于定义目标声音资源
- autoplay：用于控制打开页面时是否自动播放
- controls：用于控制是否展示控制面板
- loop：用于控制是否进行循环播放
video标签
- src：用于定义目标视频资源
- autoplay：用于控制打开页面时是否自动播放
- controls：用于控制是否展示控制面板
- loop：用于控制是否进行循环播放
2.4.7 表格标签
- table标签 代表表格
- thead标签 代表表头 可以省略不写
- tbody标签 代表表体 可以省略不写
- tfoot标签 代表表尾 可以省略不写
- tr标签 代表一行
- td标签 代表行内的一格
- th标签 自带加粗和居中效果的td
<h3 style="text-align: center;">第十六届蓝桥杯全国软件和信息技术专业人才大赛</h3>
<table border="1px" style="width: 400px; margin: 0px auto;"><tr><th>姓名</th><th>科目</th><th>奖项</th></tr><tr><td>白糖一号</td><td>python</td><td>一等奖</td></tr><tr><td>白糖二号</td><td>java</td><td>一等奖</td></tr><tr><td>白糖三号</td><td>c/c++</td><td>一等奖</td></tr>
</table>
-
通过rowspan实现单元行跨行
<h3 style="text-align: center;">第十六届蓝桥杯全国软件和信息技术专业人才大赛</h3> <table border="1px"; style="width: 400px; margin: 0px auto;"><tr><th>姓名</th><th>科目</th><th>奖项</th><th>备注</th></tr><tr><td>白糖一号</td><td>python</td><td>一等奖</td><td rowspan="3">晋级国赛</td><!--表示在当前单元格中往下一共占了三行--></tr><tr><td>白糖二号</td><td>java</td><td>一等奖</td><!--既然已经被上面的单元格占了，那么这里和下面一行的这个位置就不用写了--></tr><tr><td>白糖三号</td><td>c/c++</td><td>一等奖</td></tr> </table>
-
colspan实现单元格跨列
<h3 style="text-align: center;">第十六届蓝桥杯全国软件和信息技术专业人才大赛</h3> <table border="1px"; style="width: 400px; margin: 0px auto;"><tr><th>姓名</th><th>科目</th><th>奖项</th><th>备注</th></tr><tr><td>白糖一号</td><td>python</td><td>一等奖</td><td rowspan="3">晋级国赛</td></tr><tr><td>白糖二号</td><td>java</td><td>一等奖</td></tr><tr><td>白糖三号</td><td>c/c++</td><td>一等奖</td></tr><tr><!--表示在最后一行中横跨四列--><td colspan="4" style="text-align: center;">恭喜！！！</td></tr> </table>
2.4.8 表单标签
可以实现让用户在界面上输入各种信息并提交的一种标签. 是向服务端发送数据主要的方式之一。
form标签,表单标签,其内部用于定义可以让用户输入信息的表单项标签
-
action, form标签的属性之一,用于定义信息提交的服务器的地址
-
method, form标签的属性之一,用于定义信息的提交方式
-
get 方式：数据会在url后面以
?作为参数开始的标识，多个参数用&隔开<form action="http://www.baidu.com" method="get">用户名：<input type="text" name="username"/>密码：<input type="password" name="password"/><input type="submit" value="登录"><input type="reset" value="重置"> </form>
点击登录后，name属性中的参数会作为键，用户输入的信息作为值，呈现在跳转后的地址栏中：
不过这种提交方式会将用户的身份信息轻易暴露出去，所以我们一般用post提交方式
-
post 方式：数据会通过请求体发送，不会url后面作为参数呈现。
-
2.4.9 常见表单项标签
单行文本框：<input type="text" name="文字"><br/>密码框：<input type="password" name="secret"><br/>单选框：<input type="radio" name="sex" value="boy">男<input type="radio" name="sex" value="girl" checked="checked">女<br/><!--1. name属性相同的radio为一组，组内互斥2. 当用户选择一个radio提交时，这个radio的name属性和value属性组成一个键值对发送给服务器例如上面如果选择第一个单选框，表单将提交 sex = boy3. 设置checked属性设置刚开始时默认被选中的radio，若属性名与属性值一样，可以只写以个checked-->复选框：你喜欢的语言是<input type="checkbox" name="lang" value="python" checked>python<input type="checkbox" name="lang" value="java">java<input type="checkbox" name="lang" value="c/c++">c/c++<input type="checkbox" name="lang" value="go">go<br/>下拉框：你喜欢的运动是<select name="interesting"><option value="swimming">游泳</option><option value="running">跑步</option><option value="shooting" selected="selected">射击</option><option value="skating">溜冰</option></select><br/>隐藏域：<input type="hidden" name="userId" value="2233"/><br/><!--通过表单隐藏域设置的表单项不会显示到页面上，用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，例如：用户id等等。-->多行文本框：<textarea name="desc"></textarea></br>文件标签：<input type="file" name="file">
-