前端学习一、HTML篇
一、网页声明
<!DOCTYPE html>
是html5标准网页声明，全称为Document Type HyperText Mark-up Language，意思为文档种类为超
文本标记性语言或超文本链接标示语言，支持html5标准的主流浏览器都认识这个声明。表示网页采用html5，声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 不是 HTML标签。它为浏览器提供一项信息(声明)，即 HTML 是用什么版本编写的。
二、语言类型
<html lang="en">
在HTML中，<html>标签用于定义整个页面的根元素，而lang="en"属性则指定了文档的主要语言是英语。这里的en代表英语（English），但并不意味着页面中只能使用英语，中文等其他语言同样可以使用，只是在浏览器中不会触发翻译功能。
此外，lang属性还可以指定其他语言，例如zh-CN代表简体中文。这个属性主要用于告诉浏览器页面的主要语言，以便浏览器可以正确地处理语言相关的格式化，如日期、时间、数字等。
三、字符集
<meta charset="UTF-8">
是一个HTML标签属性，用于指定网页的字符编码为UTF-8。
在HTML中，<meta charset="UTF-8">是一个元数据标签，用于告诉浏览器该网页使用的字符编码是UTF-8。UTF-8是一种广泛使用的字符编码，能够表示世界上几乎所有的字符，包括中文、日文、韩文等。使用UTF-8编码可以确保网页在不同语言环境下的正确显示，避免乱码问题。
具体来说，<meta charset="UTF-8">的作用如下：
- 指定字符编码：通过声明字符编码为UTF-8，浏览器知道如何正确解析页面上的文本内容。
- 避免乱码：如果不指定正确的字符编码，浏览器可能会使用默认编码来解析页面内容，导致中文等字符显示为乱码。
- 支持多语言：UTF-8编码支持世界上大多数语言的字符，因此在国际化的网页开发中非常重要。
四、标签
标签分为双标签和单标签，标题标签<h1></h1> 就是一个双标签，图像标签<img>就是一个单标签。
1、标题标签
一级标题<h1></h1>
<h1>这是个一级标签</h1>
二级标题<h2></h2>
<h2>这是个二级标签</h2>
三级标题<h3></h3>
<h3>这是个三级标签</h3>
四级标题<h4></h4>
<h4>这是个四级标签</h4>
五级标题<h5></h5>
<h5>这是个五级标签</h5>
六级标题<h6></h6>
<h6>这是个六级标签</h6>
2、段落标签
<p></p>
<p>这是一个段落标签</p>
3、强制换行标签（单标签）
<br>或者<br />
<br>强制换行标签，是一个单标签
4、加粗标签
<strong></strong>或者<b></b>，建议使用前者，更强烈。
<strong>加粗标签</strong>
<b>这个也是加粗标签，但是没有strong强烈</b>
5、倾斜标签
<em></em>或者<i></i>，建议使用前者，更强烈。
<em>倾斜标签</em>
<i>这个也是倾斜标签，但是没有em强烈</i>
6、删除标签
<del></del>或者<s></s>，建议使用前者，更强烈。
<del>删除标签</del>
<s>这个也是删除标签，但是没有del强烈</s>
7、下划线标签
<ins></ins>或者<u></u>，建议使用前者，更强烈。
<ins>下划线标签</ins><br />
<u>这个也是下划线标签，但是没有ins强烈</u><br />
8、图片标签（单标签）
<img>
属性：
- src-- 引入图片
- alt-- 替换文本，当图片显示不出来的时候可以用文字提示
- title-- 提示文本，当鼠标放在图片上的时候可以显示文字
- width-- 给图像设定宽度
- height-- 给图像设定高度
- border-- 给图像设定边框
<h4>图像标签的使用</h4>
<img src="img0.jpg ">
<br>
<h4>alt--替换文本，当图片显示不出来的时候可以用文字提示</h4>
<img src="im.jpg" alt="这是一片郁金香花海">
<br>
<h4>title--提示文本，当鼠标放在图片上的时候可以显示文字</h4>
<img src="img0.jpg" alt="这是一片郁金香花海" title="这张图片很美">
<br>
<h4>width--给图像设定宽度：</h4>
<img src="img0.jpg" alt="这是一片郁金香花海" title="这张图片很美" width="500">
<br>
<h4>height--给图像设定高度：</h4>
<img src="img0.jpg" alt="这是一片郁金香花海" title="这张图片很美" height="400">
<p style="color: red;">高度和宽度只需设定一个，另一个会等比缩放</p>
<br>
<h4>border--给图像设定边框：</h4>
<img src="img0.jpg" alt="这是一片郁金香花海" title="这张图片很美" width="500" border = "15">
文件路径：
- 同级路径，与html在同一文件夹下的图片
- 下一级路径，在与html网页的文件夹的上一级文件夹下的图片
- 上一级路径，在与html网页的文件夹的下一级文件夹下的图片
- 绝对路径，直接从磁盘开始输入的路径或百度上的某个图片路径
<img src="img.jpg">同级路径<br>
<img src="images/img.jpg">下一级路径<br>
<img src="../img.jpg">上一级路径<br>
<img src="https://image.baidu.com">绝对路径 C:\web\img\logo.jpg<br>
9、锚链接(超链接)标签
<a></a>
属性：
- href-- 最重要的属性，它指定链接的目标。
- target-- _blank，新窗口打开页面。默认为_self，在当前窗口打开页面。
target 打开窗口的方式。默认的值是_self 是在当前窗口打开页面，_blank 是新窗口打开页面。<br>
<h1>1.外部链接--外部网站的地址</h1>
<a href="http://www.qq.com" target="_blank">腾讯</a> <br>
<h1>2.内部链接</h1>
<a href="vscode.html" target="_blank">vscode</a>
<h1>3.空链接:#</h1>
<a href="#">这是一个空链接</a>
<h1>4.下载链接：地址链接的是文件 .exe 或者 zip 等</h1>
<a href="img.jpg.zip">点击下载压缩包</a>
<h1>5.网页元素的链接</h1>
<a href="http://www.baidu.com" target="_blank"><img src="img.jpg" alt="空"></a>
<h1>6.锚点链接：点击后跳转至该页面当前某一位置</h1>
<a href="#AAA">你好！</a>
<h1>sssssss</h1>
<h1>sssssss</h1>
<h1 id="AAA">你好！你好！你好！</h1>
<h1>sssssss</h1>
<h1>sssssss</h1>
10、div标签
<div></div>
HTML中的div标签是一个块级元素，用于创建可包含其他元素的块或区域。 它具有创建容器、分组内容、应用样式、创建布局和提供语义的用法。例如，可以使用div标签创建标题和正文的容器。
div标签的主要用途包括：
- 组织内容：将相关内容分组，便于管理和维护。
- 应用样式：通过div标签和CSS（层叠样式表），可以对页面布局和外观进行控制。
- 提供语义：虽然div本身没有语义，但通过合理的使用id或class属性，可以增强页面的语义化，有助于提高网站的可访问性和SEO优化。
<div>div标签用来布局，一行只能放一个，一个独占一行（大盒子）</div>
<div>AAAAA</div>
<div>BBBBB</div>
<div>CCCCC</div>
11、span标签
<span></span>
HTML的span标签是一个行内标签，用于组合文档中的行内元素。它没有固定的格式表现，需要通过应用样式来产生视觉上的变化。
span标签主要用于将文档中的文本或其他行内元素进行分组，以便统一应用样式。它支持HTML的全局属性，但本身无法提供视觉上的更改，需要通过类或id属性应用样式来实现特定的视觉效果。
<span>用来布局，一行可以放多个span标签（小盒子）</span><br>
<span>AAAAA</span>
<span>BBBBB</span>
<span>CCCCC</span>
12、表格标签
<table></table>
属性：
- align-- left、center、right 规定表格相对周围元素的对齐方式
- border-- 规定表格单元是否拥有边框，默认无
- cellpadding-- 像素值 规定单元边沿与其内容之间的空白，默认为1
- cellspacing-- 像素值 规定单元格之间的空白，默认为2
- width-- 像素值或百分比 规定表格的宽度
- rowspan-- 上下单元格合并 跨行合并 ————最上侧单元格为目标单元格，写合并代码
- colspan-- 左右单元格合并 跨列合并 ————最左侧单元格为目标单元格，写合并代码
<table align="center" cellspacing="0" cellpadding="8" border="1" width="500" height="249">
<!-- th是表头单元格 -->
<thead>
<tr> <th>序号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr>
</thead>
<tbody>
<tr> <td>111</td> <td>aaaa</td> <td>mmmm</td> <td>12</td> </tr>
<tr> <td>222</td> <td>bbbb</td> <td>ffff</td> <td>14</td> </tr>
<tr> <td>333</td> <td>cccc</td> <td>mmmm</td> <td>13</td> </tr>
<tr> <td>444</td> <td>dddd</td> <td>mmmm</td> <td>12</td> </tr>
<tr> <td>555</td> <td>eeee</td> <td>ffff</td> <td>12</td> </tr>
</tbody>
</table>
<!--
合并单元格三部曲：
1、先确定跨行还是跨列合并
2、找到目标单元格，写上合并方式=合并的单元格数量。eg: <td colspan="2"></td>
3、删除多余的单元格
a row 一行
a column 一列
-->
<table border="1" cellspacing="0" width="500" height="249">
<tr>
<td></td>
<!-- 跨列合并俩单元格 -->
<td colspan="2"></td>
<!-- <td></td> -->
</tr>
<tr>
<!-- 跨行合并俩单元格 -->
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<!-- <td></td> -->
<td></td>
<td></td>
</tr>
</table>
13、列表标签
无序列表
<h1>无序列表</h1>
<!-- 注意：
1、无序列表的各个列表项之间没有顺序级别之分，是并列的
2、<ul></ul> 中只能嵌套 <li></li> ，直接在<ul></ul>标签中输入其他标签或文字的做法是不被允许的
3、<li>与</li>之间相当于一个容器，可以容纳所有元素
4、无序列表会自带样式属性，但在实际使用时一般使用CSS来设置
-->
<h4>你的选项？</h4>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
有序列表
<h1>有序列表</h1>
<h4>粉丝排行榜</h4>
<ol>
<li>a 11</li>
<li>b 22</li>
<li>c 12</li>
</ol>
自定义列表
<h1>自定义列表</h1>
<!-- 注意：
dl（definition list）是自定义列表的容器。
dt（definition term）表示定义项，即列表中的术语或概念。
dd（definition description）则用于提供定义项的描述或解释，即对术语或概念的详细说明。
-->
<dl>
<dt>名词1</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
<dd>名词解释3</dd>
<dt>名词2</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
<dd>名词解释3</dd>
</dl>
14、表单标签
表单控件
- input-- 输入表单元素
- select-- 下拉表单元素
- textarea-- 文本域元素
- label-- 增加表单触发面积，增强用户体验
input标签的type属性
- button-- 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）。
- checkbox-- 定义复选框。
- file-- 定义输入字段和“浏览”按钮，供文件上传。
- hidden-- 定义隐藏的输入字段。
- image-- 定义图像形式的提交按钮。
- password-- 定义密码字段，该字段中的字符被掩码。
- radio-- 定义单选按钮。
- reset-- 定义重置按钮，重置按钮会清除表单中的所有数据。
- submit-- 定义提交按钮，提交按钮会把表单数据发送到服务器。
- 10.text-- 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符。
<!-- form 表单域 -->
<form action="xxx.php" method="get" name="name1">
<!-- input 输入表单元素 -->
<!-- text文本框，用户可以在里面输入任何文字 -->
<!-- maxlength规定输入字段中的字符的最大长度 -->
<!-- value规定表单中默认显示的文字 -->
<input type="text" name="username" value="请输入用户名" maxlength="6">
<br>
<!-- password密码框，用户看不见输入的密码 -->
<input type="password" name="pwd">
<br>
<!-- radio 单选按钮 可以实现多选一 -->
<!-- name 是表单元素名称 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
<!-- checked 单选按钮和复选框可以设置checked属性，当页面打开的时候就可以默认选中这个按钮 -->
性别：男 <input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女">
<br>
<!-- checkbox 复选框 可以实现多选 -->
爱好：吃饭<input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby" value="吃饭">打豆豆<input type="checkbox" name="hobby" value="打豆豆">
<br>
<!-- submit 点击了提交按钮，可以把表单域form 里面的表单元素里面的值提交给后台服务器 -->
<input type="submit" value="免费注册">
<br>
<!-- reset 重置按钮可以还原表单元素初始的默认状态 -->
<input type="reset" value="重新填写">
<br>
<!-- file 文件域 使用场景 上传文件使用的 -->
上传头像： <input type="file">
<br>
<!-- button 普通按钮 后期结合JS 搭配使用 -->
按钮：<input type="button" value="点击">
<br>
<br><br><br><br><br><br><br>
<!-- label 当你点击里面的字的时候可以自动选择某个文本框或者选项 lable标签for里的值与input里的id值一样 -->
<label for="text">用户名：</label>
<input type="text" id="text">
<br>
<label for="choose">aaa</label>
<input type="radio" name="choose" id="choose">
<label for="choose1">bbb</label>
<input type="radio" name="choose" id="choose1">
<label for="choose2">ccc</label>
<input type="radio" name="choose" id="choose2">
<br>
<!-- select 下拉表单元素 selected="selected" 默认选项 -->
籍贯：
<select>
<option>上海</option>
<option>北京</option>
<option selected="selected">安徽</option>
<option>四川</option>
<option>重庆</option>
<option>天津</option>
</select>
<br>
<label for="select">籍贯：</label>
<select id = "select">
<option>上海</option>
<option>北京</option>
<option selected="selected">安徽</option>
<option>四川</option>
<option>重庆</option>
<option>天津</option>
<option>山东</option>
<option>河南</option>
<option>河北</option>
<option>台湾</option>
<option>香港</option>
<option>黑龙江</option>
<option>辽宁</option>
<option>吉林</option>
<option>内蒙古</option>
<option>西藏</option>
<option>山西</option>
<option>陕西</option>
</select>
<br>
<!-- textarea 文本域 元素 不需要记住【cols每行能显示几个字符 、 rows行】一般都是用css去实现文本域的大小 -->
今日反馈：
<textarea cols="50" rows="5">这个反馈留言是用textarea做的</textarea>
</form>
15、注释与特殊字符
<h1>
注释的使用方法：快捷键 ctrl + /
<!--需要注释掉的文字-->
</h1>
<!-- 《这是一段字》静静地吃两口就吃多少饭iu色染发鸡蛋炒饭和v刘海？？？？ -->
<a href="https://blog.csdn.net/jack_rose_me/article/details/124603494">特殊字符一览表</a>
<h4>空 格 符</h4>
<h4>大于></h4>
<h4>小于<</h4>
上一篇： HTML-CSS
下一篇： php指的是什么 P