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
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
html
<button style="background-color: aquamarine;">我是一个按钮</button>在botton标签内部加上背景色的属性，相当于添加了这个按钮的外观
js控制行为
html
<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六级标题。
python
<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
html
今天吃：
<ol>
<li>肯德基</li>
<li>麦当劳</li>
<li>中国汉堡</li>
</ol>
无序列表：分条列项展示数据的标签, 其每一项前面的符号不带有顺序特征
- 列表标签 ul（
unorder list） - 列表项标签 li
html
今天吃：
<ul>
<li>肯德基</li>
<li>麦当劳</li>
<li>中国汉堡</li>
</ul>
2.4.5 超链接标签
点击后带有链接跳转的标签，也叫做a标签。
-
href属性用于定义连接
-
href中可以使用相对路径,不以/开头,以 当前文件 所在路径为出发点
在本文件目录下新建一个文件，叫做
test.html
在原文件中使用a标签，href属性输入要跳转的页面链接
html<a href="test.html">相对路径本地资源连接</a> <br>
点击后跳转
另外，如果需要跳转的文件在不同的目录中，这个目录与当前文件的目录处于同一级别，可以用
../跳转到上一目录，再输入跳转文件的目录与跳转文件名。同时，
./代表当前目录。 -
href中可以使用绝对路径,以/开头,始终以一个固定路径作为基准路径作为出发点
将刚刚的test.html文件中的文本改为绝对路径测试
但此时浏览器却显示找不到该页面，这是因为href属性以
/开头时，表示的是一个绝对路径，但这个绝对路径是 相对于网站根目录 的，而不是以标准URL格式表示的。那怎么知道当前的具体根目录？
与服务器IP和端口号重合的部分就是当前的根目录了，所以我们这时候就知道了，需要将原文件中的href的绝对路径改为
/test.html。html<a href="/test.html">绝对路径本地资源连接</a>
-
href中也可以定义完整的URL
html<a href="https://uae.kfc.me/en/home">url地址</a>
-
-
target用于定义打开的方式
-
_self 在当前窗口中打开目标资源
不写target属性时，默认就是在当前窗口打开目标资源
-
_blank 在新窗口中打开目标资源
html<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
html
<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实现单元行跨行
html<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实现单元格跨列
html<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后面以
?作为参数开始的标识，多个参数用&隔开html<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 常见表单项标签
html单行文本框：<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 = boy 3. 设置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">
-