html基础介绍
1、html结构
<!DOCTYPE html> //声明为 HTML5 文档
<html lang="zh-CN"> //HTML 页面的根节点
//lang=:"zh-CN"告诉浏览器，内容是中文的，无需翻译
<head> //子节点
<meta charset="UTF-8">
//定义网页编码格式为 utf-8（由于在大部分浏览器中直接输出中文会出现乱码，所以要在头部将字符声明为UTF-8）
<title></title> //文档的标题
</head>
<body> //包含了可见的页面内容
</body>
</html>
2、标签
a、标签区分
按包含关系分，外面的是父标签，内部是子标签，同级的是兄弟标签。
eg：html是父标签，它内部的head、body就是它的子标签
按单、双标签分，分为单标签和双标签
！！注意！！：单标签不能包裹双标签，双标签可以包裹单标签
按行级、块级分，行级标签不能包裹块级标签
块级标签独占一行
行级标签非独占一行，从左往右排列
！！注意！！：行级标签不能包裹块级标签，块级标签可以包裹行级标签
b、常用标签
标题添加图标
<link rel="shortcut icon" href="图标路径">
在标题添加一个小图标，协助head里面
换行标签
//代码中的换行或者空格，只会让元素中间产生一点间隙
<br> //通过<br>标签可以实现换行，是一个单标签
//等同于<br/> /表示标签结束，在html5可以省略
eg：
ikun
ikun
<br>ikun
水平线标签
<hr> //<hr> 水平线、分割线，独占一行,块级标签
加粗标签
<strong>加粗字体</strong> //字体加粗，双标签，行级标签
标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6> //标题标签，h1~h6有六个，块级标签
斜体标签
<em>倾斜字体</em> //让文字倾斜，行级标签
段落标签
<p> 一段文字 </p> //段落标签，收纳文本，块级标签
div标签
<div></div> //div是块级标签，无特殊效果，适合用于布局
span标签
<span></span> //span是行级标签，无特殊效果，适合用于布局
a标签
<body>
<a href="https://www.bilibili.com/">跳转到B站</a>
<!--
a标签，超链接，行级标签
内部不仅可以放文字，也可以放其他元素
1、页面间链接 从一个页面跳转到另一个页面
hraf属性：指定跳转的网址
target属性：指定页面打开方式，
当前页面打开(默认方式) _self 自己
新标签页打开 _blank 空标签页
title属性：鼠标悬停时的提示文字
-->
<a href="https://www.bilibili.com/" target="_blank" title="点击文字实现跳转">
<h1>跳转到B站</h1>
</a>
<a href="https://www.bilibili.com/">
<div>跳转到B站</div>
<h1>跳转到B站</h1>
</a>
<hr>
<!--
2、功能性链接
-->
Email:<a href="mailto:[email protected]">[email protected]</a>
<hr>
<!--
3、回到顶部功能，锚点
在顶部的a标签，通过name属性指定锚点的名字、
然后在底部的a标签，通过href属性中间写#加锚点名实现跳转
-->
<a href="#" name="BackTop">TOP</a>
<!--
p{xxx}*50 快捷生成50个内容为xxx的p标签
div*20#d$ 快捷生成20个id名从d1到d20的div *x——>生成x个 #——>id名 $——>从1开始排列
div*20.c$ 快捷生成20个class名从c1到c20的div
-->
p{间隔}*50
<a href="#BackTop">回到顶部</a>
</body>
img标签
<body>
<!--
src ——> sources资源
src属性：填引用的图片路径
alt属性：图片加载失败时显示的文字 alter 改变
title属性：鼠标悬停时显示文字
width，height属性：设置图片的宽高 width:宽度 height:高度
默认以像素(px)为单位
-->
<img src="C:\Users\11567\Desktop\Java230201\code\sources\face.png" alt="图片加载失败">
<img src="../sources/face.png" alt="图片加载失败">
<img src="#" alt="图片加载失败">
</body>
音频视频标签(特殊字符)
<body>
<!--
video视频
audio音频
src属性：引入文件、资源
controls属性：加载控制台、播放控件
poster属性：封面，填图片资源的路径
图片格式： .jpg .png .jpeg .ico .gif
视频格式： .flv .mp4 .avi .mov .mkv
音频格式： .mp3 .wav .aac
html 标签中，当属性名和值一样时，可以只写属性名
-->
<video src="../sources/a.mp4" controls poster="../sources/face.png"></video>
<audio src="../sources/kgzw.mp3" controls></audio>
<hr>
<!--
copyright版权
对于特殊字符，在页面中不能正常显示，就使用特殊字符编码
-->
版权符号:©
</body>
列表
列表种类：
有序列表——ol，列表项——li
无序列表——ul，列表项——li
自定义列表——dl,列表项——dt和dd
有序列表
有序列表ol,会生成序列
系列默认是数字，可以通过type调整
1表示数字，A/a表示大写/小写字母，I/i表示罗马数字
无序列表
有序列表ul,会生成图形修饰
图形默认是圆点，可以通过type调整
disc实体圆 square实体方块 circle空心圆 none取消点
自定义列表
自定义列表dl，列表项里含有dt和dd
dt用于列表标题 title dd用于列表内容 data
有序列表用的最少，dl自定义列表一般用在网页底部
无序列表用得最多，通常会去掉它的所有样式 (list-style:none;)
ol——ordered list 有序列表
ul——unordered list 无序列表
dl——defined list 自定义列表
li——list item 列表项
dt——title 标题
dd——data 数据
框架标签
<body>
<!--
iframe框架标签可以在当前页面内部加载其他网页,行级标签
src属性：填写网址
scrolling属性：滚动条，auto自动 | yes 是 | no 否
frameborder属性：设置边框线 一般设置为0
width，height属性：设置宽高
-->
<iframe src="https://www.bilibili.com/" frameborder="0" scrolling="yes" width="100" height="500px"></iframe>
<iframe src="https://www.bilibili.com/" frameborder="1" scrolling="no" width="100" height="500px"></iframe>
</body>
表单
<body>
<!--
form表单，提交数据到指定位置
action属性：数据提交的地址 #号会提交到当前页面
method属性：提交方式
get方式(默认)，代表从服务器获取数据，提交的数据在地址栏可见，数据大小有限
post方式，代表向服务器提交数据，提交的数据地址栏不可见，数据大小无限制
当发送密码数据、发生文件数据时，应使用post方式
当搜索信息，切换页面时，可以用get方式
注意！！！！：
带有name属性的，可以输入值的标签，才会被提交
username 用户名 submit 提交 input 输入 method 方法
-->
<form action="#" method="get">
用户名:<input type="text" name="username"><br>
密码 :<input type="password" name="password"><br>
<input type="submit">
</form>
</body>
常用表单标签
<body>
<!--
input标签，有多种类型，通过type指定
text 文本
passward 密码
file 文件
input有个value属性，保存用户输入值，默认不需要写
表单提交数据时，将name和value 拼接在一起
-->
<form action="#" method="get">
搜索：<input type="text" name="ss" value="百度一下"><br>
<input type="submit" value="百度一下">
</form>
<form action="#" method="post">
用户名：<input type="text" name="username" value="username"><br>
密码：<input type="password" name="passward"><br>
<input type="submit" value="登录">
</form>
<form action="#" method="post">
头像：<input type="file" name="picture"><br>
<input type="submit" value="上传">
</form>
</body>
注
密码和文件的method用post
表格
<body>
<!--
必不可少的三个标签
table 表格
tr - table row 表格行
td - table data 表格数据
语言部分，将表格划分成不同的区域，便于操作：
caption 说明，只能在table标签下面第一行
thead table head 表格头部
border 边框
bgcolor background color 背景色 skyblue 天空蓝
tbody - table head 表格的身体
tfoot - table foot 表格的底部
跨行跨列：
rowspan 跨行 从上往下跨若干个单元格，值>=2有效
colspan 跨列 column 列 从左到右跨单元格，值>=2有效
注：被跨的单元格要删除
-->
<table border="1">
<caption>学生成绩</caption>
<thead bgcolor="skyblue">
<tr>
<td>姓名</td>
<td>科目</td>
<td>成绩</td>
</tr>
</thead>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>88</td>
</tr>
<tr>
<td>数学</td>
<td>91</td>
</tr>
<thead bgcolor="yellow">
<td colspan="2">平均分</td>
<td>93</td>
</thead>
</table>
3、路径问题
路径：
路径分为绝对路径和相对路径
绝对路径：在Windows系统从盘符开始的路径
eg：C:\Users\11567\Desktop\Java230201\code\sources\face.png
相对路径：相对于当前文件的路径，从当前文件开始
eg:../sources/face.png
./ 表示当前目录
../ 表示上一级目录
../../ 表示再上一级目录，依次类推