嗨！大家好，我是子钦。目前读大二的菜菜，在不断摸索中......
今天是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 | 表示组，同组内才能单选 |
多选标签：其他同单选标签相同
下拉框：
| 下拉框 | 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虎年见~
9324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
