这是我的第一篇掘金博文，开启掘金写作之路。
嗨！大家好，我是子钦。目前读大二的菜菜，在不断摸索中......
今天是HTML5的学习笔记及一点学习心得。我会尽量写的清楚，希望可以帮助到零基础的同学。HTML5中有各种各样的标签，加强记忆和练习掌握这部分知识是很容易的。
通常我们看到的网页是是以.htm或.html结尾的文件，通俗称为HTML文件。HTML是超文本标记语言，是用来描述网页的一种语言。
接下来我们一起开始学习HTML叭~
网页的基本信息
下面是一段简单的代码
<!DOCTYPE html> <!-- !DOCTYPE：告诉浏览器我们使用的什么规范 --><html lang="en"> <head> <meta charset="UTF-8"> <!-- meta：描述性标签，用来描述网页的一些信息 一边用来描述SEO--> <title>第一个网页</title> </head> <body> Hello，我是子钦。目前读大二的菜菜，在不断摸索中学习，希望大佬能带我一起“卷”。</body></html>
在HTML5中的注释如上面的浅色文字 ，该注释可以是一行也可以同时是多行。
在代码中大家会发现有head和body，没错的~网页主要包含两部分：网页头部、网页主体。
网页的头部
<head> <meta charset="UTF-8"> <title>我的第一个网页</title> </head>
网页的主体
<body> Hello，我是子钦。目前读大二的菜菜，在不断摸索中学习，希望大佬能带我一起“卷”。</body>
头部中包含了网页的标题
<title>第一个网页</title>
接下来介绍HTML中的标签
基本标签
标题标签
标题为加粗字体共六级，字号逐次减小
<h1> 一级标题 </h1><h2> 二级标题 </h2>.....<h6> 六级标签 </h6>
段落标签
<p>段落标签</p>
注：在开发工具中换行或另起一段，在网页中是不会显示的。必须使用段落标签、换行标签。
换行标签
<br> <!-- 注意换行标签为单标签 ->
这里有同学会有疑问，段落标签和换行标签有何不同呢？
段落之间间距较大，行间距较小。这样会很容易的区分段落之间的关系，不至于与段内换行混淆。
字体样式标签
这里主要介绍粗体、斜体
粗体：<strong> I loue you </strong> <br>斜体：<em> I loue you </em>
特殊符号用转义字符 &
在开发工具中无论输入多少空格网页只会显示一个空格，用  ;可以表示多个空格，要注意结尾的英文分号哦~
> ;
大于号
< ;
小于号
© ;
©版权符号
图像标签
<img src="resources\image\1.jpg" alt="快手图片" title="悬停文字" height="500" width="1000" >
src
图片地址
alt
当图片路径不对时或者图片加载失败时，显示该名称
title
鼠标悬停时显示的文字
height
图片的高度
width
图片的宽度
height和width用来调节图片的大小
绝对地址
：以盘符开始，例如：
C:\Program Files\AMD
相对地址
：相对于当前而言，从现在的位置开始找到目标位置
../
：表示上一级目录
链接标签
<a href="http://www.baidu.com" target="_blank" >点我跳转至百度</a><a href="图像标签.html" target="_self"> <img src="resources\image\1.jpg" alt="快手图片" title="悬停文字" height="300" width="500" ></a>
href
表示要跳转的位置
target
默认在该页面打开
”_blank“
在新页面打开
“_self”
在该页面打开
超链接打开方式默认为**“-self”**，文字添加超链接后会变为蓝色；图片添加超链接后，鼠标停留在图片上会变为小手手。
点击有超链接的文字或图片会跳转到href所指定的位置，如百度，自己做的网页等都是可以哒~
锚链接
1.需要一个锚标记
2.跳转到标记
3.用“#”+锚标记
<a name="top"></a><a href="#down">到底部</a>...... <p><a href="#top">回到顶部</a></p><p><a name="down"></a></p>
该功能与上面超链接原理相同，自己在顶部或尾部设置个锚标记，跳转时用 ”#+锚标记“ 即可。
也可以从一个网页跳转到新网页的底部，这里不再赘述。代码如下：
<a href="链接标签.html#down" target="_blank">跳转</a>
简单介绍一下行内元素和块元素
块元素: 总是从新的一行开始，即各个块级元素独占一行，默认垂直向下排列
行内元素：和其他元素都在一行，即行内元素和其他行内元素都会在一条水平线上排列
块元素：<p> <h1>...<h6>行内元素：<a> <strong></strong> <em></em>
内联标签：在网页（一块给定区域）中打开另一个网页
<iframe src="" name="hello" height="800" width="1000"></iframe><!-- 上面代码为给定区域 --><a href="链接标签.html" target="hello"> 点击跳转 </a><!-- 上面代码表示需要打开的新页面及打开方式，打开方式为上面给定的“hello”即：在上方指定区域打开新网页-->
列表标签
有序列表：
<ol> <li>java</li> <li>html</li> <li>css</li> <li>js</li> <li>c/c++</li></ol>
无序列表：
<ul> <li>java</li> <li>html</li> <li>css</li> <li>js</li> <li>c/c++</li></ul>
自定义列表：
dl：标签
dt：列表名称
dd：列表内容
<dl> <dt>学科</dt> <dd>java</dd> <dd>web前端</dd> <dd>C语言</dd> <dt>位置</dt> <dd>北京</dd> <dd>郑州</dd></dl>
有序标签会标有“1、2、3......”，无序标签前面会有一个“点”，如下：
- java
媒体标签
<video src="resources/video/1.mp4" controls autoplay> </video><br><audio src="resources/audio/周迅%20-%20飘摇.mp3" controls autoplay> </audio>
video
视频因素
audio
音频因素
controls
控制条
autoplay
自动播放
表格标签
<table border="1px"><tr ><!-- 跨列--> <td>1-1</td> <td>1-2</td> <td>1-3</td></tr><tr><!-- 跨行--> <td>2-1</td> <td>2-2</td> <td>2-3</td></tr><tr> <td>3-1</td> <td>3-2</td> <td>3-3</td></tr></table>
表格标签
table(双标签)
行标签
tr(双标签)
列标签
td(双标签)
border
：用来设置表格的边框宽度
跨列：
<td colspan="3">1-1</td>
跨行：
<td rowspan="2">2-1</td>
注：跨行、列只能在首个位置进行修改，要在td标签中设置colspan或rowspan。
对上述代码进行修改如下：
<table border="1px"> <tr ><!-- 跨列--> <td colspan="3">1-1</td> </tr> <tr><!-- 跨行--> <td rowspan="2">2-1</td> <td>2-2</td> <td>2-3</td> </tr> <tr> <td >3-2</td> <td>3-3</td> </tr></table>
在第一行跨三列，那么第一行中只有了一列，故代码如下：
<tr > <td colspan="3">1-1</td></tr>
将第一行与第二行的第一列合并，此时可以认为第三行只有两列，故第二行与第三行代码如下：
<tr> <td rowspan="2">2-1</td> <td>2-2</td> <td>2-3</td></tr><tr> <td >3-2</td> <td>3-3</td></tr>
表单标签
表单：
form
表单
action
提交的位置，可以是网页和请求处理的地址
method
提交方式
get
在提交网页的url中可以看到
post
安全，传输大文件
输入框 input type=“ ” ：
input
输入框
value
默认值
maxlength
可以输入的最大长度
size
框的长度
required
表示该框必须输入值
单选标签：
单选标签
type="radio"
checked
默认选项，自动选好，如不对自行修改
value
单选框的值
name
表示组，同组内才能单选
多选标签：其他同单选标签相同
多选
type=“checkbox”
下拉框：
下拉框
select(双标签)
option
每个不同选择
value
每个选项的值
selected
下拉框的默认选项
<form action="图像标签.html" method="get"> <p>名字：<input type="text " name="username" value="hello" maxlength="4" ></p> <p>密码：<input type="password" name="pwd" placeholder="请输入密码" required></p> <p> 性别： <input type="radio" value="boy" name="sex" >男 <input type="radio" value="girl" name="sex" >女 </p> <p> 爱好： <input type="checkbox" value="sleep" name="hobby">睡觉 <input type="checkbox" value="game" name="hobby" checked>游戏 <input type="checkbox" value="chat" name="hobby">聊天 <input type="checkbox" value="code" name="hobby">敲代码 </p> <p> 下拉框： <select name="国家" id=""> <option value="china">中国</option> <option value="usa">美国</option> <option value="eth" selected>瑞士</option> </select></p></form>
下面是表单的一些其他元素，原理相同不再做一一解释。
<!--文本域textarea：--> <p> 反馈： <textarea name="反馈" id="" cols="30" rows="2"></textarea> </p> <p>邮件： <input type="email" name="email"> </p> <p>网站： <input type="url" name="url"> </p> <p>数字： <input type="number" name="number" max="100" min="0" step="1"> </p> <p>音量： <input type="range" name="range" max="100" min="0" step="2"> </p> <p>搜索框： <input type="search" name="search"> </p>
这是我写的第一篇文章，也是2021年的最后一篇。
第一次写文章多有不熟练之处，耗费时间较长，但依然不能确保没有错误。我会不断努力进步哒，希望与诸君共同成长。
如有问题请联系我进行修改，感谢您的宝贵建议吖~
在这里子钦提前祝福大家新年快乐~
我们2022虎年见~
点一下你会更好看耶
