目录
HTML简介：
- HTML：超文本标记语言，由一系列标记标签组成，使用标记标签来描述网页。
- 标签的父类、关系：
标签：用尖括号括起来的就被称为标签 标签分类：
单标签：有开始标签或者结束标签
双标签：有开始标签和结束标签
标签的关系：
嵌套关系(父子关系)
并列关系(兄弟关系)
- 构成一个基础页面的标签：
<!--
快速创建页面的方式:
1.英文状态下的 !+enter 或者 !+tab
2.输入html 选择 html:5 + enter
-->
<!-- 声明html的版本 html5这个版本 -->
<!DOCTYPE html>
<!-- html根标签 lang ==> language = English -->
<html lang="en">
<!-- head 头部标签 -->
<head>
<!-- meta媒体标签 charset定义字符集 UTF-8-->
<meta charset="UTF-8">
<!-- 定义IE8以上的版本按最新的版本进行编译 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- name="viewport" 定义视图窗口 width=device-width 宽度=设备的宽度 initial-scale=1.0不缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 定义网页的标题 -->
<title>第一个页面</title>
</head>
<!-- 网页的主体 -->
<body>
第一个页面
</body>
</html>标签功能介绍：
-
标题标签：
<!--
标题标签h1~h6
特点：
1.会让字体变大变粗
2.h1~h6重要性依次减小
3.独占一行(默认宽度100%)
-->
今天星期六
还有七天放假
<h1>今天星期六</h1>
<h2>今天星期六</h2>
<h3>今天星期六</h3>
<h4>今天星期六</h4>
<h5>今天星期六</h5>
<h6>今天星期六</h6>效果：
-
段落标签：
<p></p>
特点：
1.独占一行(默认宽度100%)
2.段落与段落之间存在间隙
-
换行、水平线、特殊字符标签：
分别由<br>和<hr>表示，均为单标签。换行标签可随意添加到其它标签内的文本中或者不独占一行的标签之间，用于实现换行；hr标签则用于在页面中画一条水平线，可以设置宽高。
-
特殊字符标签：
单标签，且不由尖括号包裹，常见的有空格标签  、<、>等。
-
文本格式化标签：
文本格式包括文本的加粗、斜体、下划线、删除线等，他们对应的标签为b/strong、i/em、u/ins、s/del。
-
盒子标签：
由div和span表示。均为双标签，其中div独占一行，默认宽度为100%，可以设置宽高；其属性写在开始标签内，多个属性用空格隔开，主要用于页面框架的构建，如将页面划分为导航区与图片显示区等。而span则不独占一行，且不能设置宽高，多用于文字内容的表示。
-
图像标签：
由img表示，为单标签，不独占一行，可以设置宽高，有src、alt、title等属性，分别用于引入图片地址、图片加载失败提示和鼠标悬停提示等。
实现代码：
<!-- src --> <img src="https://scpic.chinaz.net/files/pic/pic9/201311/apic2098.jpg" alt=""> <!-- alt --> <img src="https://scpic.chinaz.net/files/pic/pic9/201311/apic2098.jpg" alt="加载失败"> <!-- title --> <img src="https://scpic.chinaz.net/files/pic/pic9/201311/apic2098.jpg" alt="" title="风景">-
路径：
路径分为了绝对路径和相对路径。绝对路径：一个文件实际存在于硬盘中的路径，如网络地址、本地磁盘等；相对路径：指的是与自身的目标档案相关的位置，
./：当前文件所在文件夹
../：上一级文件夹
/：放在后面表示进入文件夹，放在前面表示根目录（浏览器识别为C盘）
<!-- 网络地址 --> <img src="https://scpic.chinaz.net/files/pic/pic9/201311/apic2098.jpg" alt=""> <!-- 本地磁盘 --> <img src="C:\Users\o\Pictures\Saved Pictures\tree.jpg" alt=""> <!-- 相对路径 --> <img src="./img/01.jpg" alt=""> <img src="/day01/img/02.jpg" alt="有问题">-
链接标签：
用a表示，不独占一行，不可以设置宽高，其属性href用于引入链接地址，而target用于控制页面跳转，其_self值表示当前页面发生跳转，也就是默认跳转；_blank值用于跳转到新页面。注：a标签不能互相嵌套，浏览器会自动将其拆分为两个页面，在网页中只能用嵌套内的那个链接。
<!--
a标签
特点：
1.不独占一行
2.设置宽高不生效
属性：
1.href 引入链接地址
2.target 控制页面跳转方式
_self 当前页面发生跳转(默认)
_blank 新开页面发生跳转
-->
<!-- 网络地址 加上https://-->
<a href="https://www.baidu.com" style="width: 200px;height:200px;background-color:red;" target="_blank">百度一下</a>
<!-- 本地文件 路径-->
<a href="09-图像标签.html">图像文件</a>
<!-- 简单的下载 -->
<a href="./img.zip">下载文件</a>
<!-- 空链接 # -->
<a href="#">空链接</a>
<a href="https://www.sina.com" target="_blank">新浪</a>-
锚点定位：
用链接标签实现，给页面中的元素赋一个id值，在a标签内的herf属性值设为对应锚点元素标签的id值，即可实现锚点定位。
-
base标签：
用于当页面中的a超链接标签没有设置href属性的值和没有设置target属性的值时，默认使用base标签中的href属性的值和target属性的值。
<base target="_blank" href="https://sports.sina.com.cn/basketball/nba/2022-10-08/">
</head>
<body>
<!--
base标签
属性：
1.href 全局链接(当前页面的链接会优先基于href里面的地址进行跳转)
2.target 全局页面跳转方式(控制当前页面所有a标签的跳转方式)
-->
<a href="https://www.baidu.com" target="_self">百度</a>
<a href="https://www.qq.com">qq</a>
<a href="http://ddys.tv">低端影视</a>
<a href="doc-imqmmthc0125446.shtml">贝弗李</a>
<a href="doc-imqmmthc0131315.shtml">詹姆斯</a>-
列表标签：
分为有序列表和无序列表。有序列表ol下只能嵌套li标签，其属性有type、start和reversed，分别用于序号类型、序号起始以及序号反转；无序列表ul，其嵌套的也是li标签；自定义列表dl，其嵌套的标签有dt和dd，其中dd标签会相对于dd标签缩进一定字符。以上列表默认样式均可通过list-style属性的none值消除。
<!--
ol>li 有序列表
注意：ol下面只能嵌套li标签
属性：
1.type 序号的类型
1 A a i I
2.start 从几开始
3.reversed 序号反转
-->
<ol type="I" start="3" reversed>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ol>
<!-- 错误写法！！！ ol里面只能嵌套li标签 -->
<!-- <ol>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<div>555</div>
</ol> -->
<!--
ul>li 无序列表
注意：ul下面只能嵌套li标签
-->
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>-
表格标签
table 表格标签
caption 表格的标题
tr tablerow 行
td tabledata 单元格
th tablehead 表头(内容加粗，居中)
属性：
1.border 边框
2.cellspacing 控制边框与边框之间的间隙
3.cellpadding 控制内容与边框之间的间隙
4.align 对齐方式
left
center
right
规范
thead
tbody
tfoot
跨行跨列：
rowspan 跨行 给起始的单元格设置属性，跨几行就删除被跨行的单元格
colspan 跨列 给起始的单元格设置属性，跨几列就删除被跨列的单元格
-
表单标签：
input输入框有诸多类型，如文本输入框text、密码框password、单选框radio、复选框checkbox、提交按钮submit、按钮button、文件选择按钮file等，他们又有各自的属性。其中可以通过lable标签绑定单选框，实现单选功能；这些input输入框结合起来构成表单，由form标签表示，其关键属性有表单提交地址action、表单提交方法method等。
代码：
<!--
input 输入框
特点：
1.不独占一行
2.可以设置宽高
属性：
1.type 输入框的类型
text 文本输入框
password 密码输入框
radio 单选框
checkbox 复选框
submit 提交按钮 需要配合form表单来使用
button 按钮
file 文件上传(单个)
image 图片形式的上传按钮
2.value 默认值(提交的键值)
3.name 提交的键名(实现单选框绑定)
4.placeholder 占位符
5.maxlength 最大输入字符数
6.checked 默认选中
7.disabled 禁止选择
8.multiple
-->
<!--
form表单
属性：
1.action 表示的提交地址
2.method 提交的方式
get 将请求数据包含在请求头中，在网页地址栏中可以看到请求数据
post 将请求数据包含在请求体中，在网页地址栏中看不到请求数据
-->
<!--
label标签：实现单选框与其他元素绑定
属性：
1.for：与id值绑定在一起
-->
<form action="./05-合并单元格案例.html" method="get">
<input type="text" style="height: 200px;width:200px;" value="xioo" name="text">
<br>
<input type="password" name="luanx">
<br>
<input type="text" placeholder="请输入账号" maxlength="10">
<br>
<!-- 单选框radio -->
<input type="radio" name="sex" id="man" value="1"><label for="man">男</label>
<input type="radio" name="sex" id="woman" value="0"><label for="woman">女</label>
<br>
<input type="radio" name="sexs" id="men"><label for="men"><img src="./img/男士.png" alt=""></label>
<input type="radio" name="sexs" id="women"><label for="women"><img src="./img/女士.png" alt=""></label>
<br>
<!-- 复选框 checkbox -->
<input type="checkbox" name="hobby" id="" checked>王者
<input type="checkbox" name="hobby" id="" disabled>原神
<input type="checkbox" name="hobby" id="">吃鸡
<input type="checkbox" name="hobby" id="">追剧
<br>
<!-- 文件上传 -->
<input type="file" value="文件上传" >
<br>
<input type="file" value="文件上传" multiple>
<br>
<!-- 按钮 -->
<input type="button" value="点击">
<br>
<!-- 图片形式的上传按钮 -->
<input type="image" src="./img/1.png" alt="">
<br>
<!-- 重置 -->
<input type="reset" value="重置">
<input type="submit" value="提交">
</form>选择器：
- 概念：选中页面中的某一个或者一类标签。
-
基础选择器：
1.标签选择器：会选择页面上所有同名的标签
格式:
标签名 {
属性:属性值
}
作用：一般用来清除默认样式
2.类选择器: 选择所有同名的类名
格式：
.类名 {
属性:属性值
}
多类名: 类名与类名之间用空格隔开
3.id选择器：
格式：
#id值 {
属性:属性值
}
注意：id值唯一
4.通配符选择器：会选择页面上所有的元素
格式：
* {
margin:0;
padding:0;
}
作用:一般用来清除浏览器的默认样式
注：选择器优先级：行内>id选择器>类选择器>标签选择器>通配符选择器
2400
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
