HTML基础学习
Posted 3 ERROR（s）
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML基础学习相关的知识，希望对你有一定的参考价值。
文章目录
一、什么是html？
- HTML是一门语言，所有的网页都是用HTML编写的
- 超文本：超越了文本限制，除了文字信息，还可以定义图片，音频，视频。
- 标记语言：由标签构成的语言
- HTML运行在浏览器上，由浏览器进行解析
- W3C标准：网页由三部分组成
1.结构：HTML
2.表现：CSS
3.行为：javascript
二、HTML结构标签
| 标签 | 描述 |
|---|---|
| < HTML> | 定义HTML文档 |
| < head> | 定义关于文档的信息 |
| < title> | 定义文档标题 |
| < body> | 定义文档主体 |
示例：
效果图
三、HTML基础标签
| 标签 | 描述 |
|---|---|
| <h1>- <h6> | 定义标题大小 |
| < font> | 定义文本的字体，大小，颜色 |
| < b> | 定义粗体文本 |
| < i > | 定义斜体文本 |
| < u > | 定义文本下滑线 |
| < center> | 定义文本居中 |
| < p > | 定义段落 |
| < br > | 定义折行 |
| < hr > | 定义水平线 |
html表示颜色：
- 1.英文单词：red，pink，yellow
- 2.rgb(值1，值2，值3) ： 值的取值范围：0~255 例如 rgb(255,0,0)就是红色;
- 3.#值1值2值3 ： 值的取值范围：00~ff 例如#ff0000 就是红色
| 标签 | 显示结果 | 描述 |
|---|---|---|
| < | < | 小于号或者显示标记 |
| > | > | 大于号或者显示标记 |
| & | & | 可用于显示其他特殊字符 |
| " | " | 引号 |
| ® | ® | 已经注册 |
| © | © | 版权 |
| ™ | ™ | 商标 |
| | 不断行的空白 |
比如这里我要输出& ，如果我直接输入&就会被转义为&；所以这里我就必须先把&进行转义，所以这里我的输出为&amp;
我输出上面这句话的时候格式是这样的：
这里我就不解释了，大家慢慢套娃吧！
四、图片，音频，视频标签
| 标签 | 描述 |
|---|---|
| <img> | 定义图片 |
| <audio> | 定义音频i |
| < video> | 定义视频 |
- img:定义图片
- src：规定图片的URL(统一资源定位符)
- height：定义图片的高度
- width：定义图像的宽度
- audio：定义音频，支持MP3,WAV,OGG格式
- src：规定音频的URL
- controls:显示播放控件
- video：定义视频，支持MP4,WebM,OGG格式
- src：规定视频的URL
- controls:显示播放控件
五、超链接标签
| 标签 | 描述 |
|---|---|
| <a> | 定义超链接，用于链接到另一个资源 |
- href：指定访问资源的URL
- target：指定打开资源的方式
- _self:默认值，在当前页面打开
- _blank:在空白页面打开
这里看到CSDN在百度上的超链接 target 是_blank 也就是新打开一个空白页面，这也符合我们的使用情况。
六、列表标签
| 标签 | 描述 |
|---|---|
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表 |
| <li> | 定义列表项 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--有序标签 order list-->
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
</ol>
<!--无序标签 unorder list-->
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
</ul>
</body>
</html>
七、表格标签
| 标签 | 描述 |
|---|---|
| <table> | 定义表格 |
| <tr> | 定义行 |
| <td> | 定义单元格 |
| <th> | 定义表头单元格 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
border：给表格加上边框
cellspacing：单元格之间空白
align="center":居中
-->
<table border="1" cellspacing="0" width="500">
<tr align="center">
<th>序号</th>
<th>品牌logo</th>
<th>品牌名称</th>
<th>企业地址</th>
</tr>
<tr align="center">
<td>001</td>
<td>松鼠</td>
<td>三只松鼠</td>
<td>中国</td>
</tr>
<tr align="center">
<td>002</td>
<td>小米</td>
<td>小米科技</td>
<td>中国</td>
</tr>
<tr align="center">
<td>003</td>
<td>龙哥</td>
<td>字节跳动</td>
<td>西安</td>
</tr>
</table>
</body>
</html>
八、表单标签
表单标签就是我们日常注册登陆的页面，用于采集数据，比如：
| 标签 | 描述 |
|---|---|
| <form> | 定义表单 |
| <input> | 定义表单项，通过type属性控制 |
| <label> | 给表单项定义标注 |
| <select> | 定义下拉列表 |
| <option> | 定义下拉列表的列表项 |
| <textarea> | 定义文本域 |
from定义表单的时候有两个关键属性
-
action：规定当提交表单的时候向哪里提交数据，URL
- 表单项数据想要被提交，必须加上name属性
-
method：规定发送数据的方式
- get：直接把数据附在表单的URL之后，大小有限制(4kb)
- post：浏览器把数据放到http请求消息体中，大小没有限制
get示例：
get 直接把数据附在表单的URL之后
post示例：
在开发者工具中抓取这个请求，发现这个数据放到了http请求体中
表单项标签
- <input> 表单项，通过type属性控制输入形式
- <select>定义下拉菜单，<option> 定义下拉列表
- <textarea> 文本域
<label> 标签用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<label for="1">用户名:</label>
<input type="text" name="username" id="1"><br>
<label for="2">密码：</label>
<input type="password" name="password" id="2"><br>
</form>
</body>
</html>
使用<label>的时候需要定义一个id和表单项对应，当我点击 用户名这几个字的时候，就可以对表单项进行输入了
<radio> 标签用法
当代码为这样的时候，我们发现我可以同时选择男女，这显然不合理
性别：<input type="radio" > 男
<input type="radio" >女
于是我们需要加入name属性，让他们具有互斥性！
性别：<input type="radio" name="gender"> 男
<input type="radio" name="gender" >女
此时性别一次只能选择一个了，但是问题到这里结束了吗？
我们打开开发者工具，查看一下提交的数据
性别为男时提交的数据:
性别为女时提交的数据：
我们发现这里不管是男是女，我们提交的数据都是on，那我们后台如何分析男女呢？很明显这是个bug
所以我们必须加入一个value 属性 ，用来区分我们提交的数据
性别：<input type="radio" name="gender" value="nan"> 男
<input type="radio" name="gender" value="nv">女
再次测试：
完美！
<checkbox> 标签用法
爱好： <input type="checkbox" name="hobby" value="readbook" id="看书"> <label for="看书" >看书</label>
<input type="checkbox" name="hobby" value="eat" id="吃饭"> <label for="吃饭" >看书</label>
<input type="checkbox" name="hobby" value="sleep"id="睡觉"> <label for="睡觉" >睡觉</label>
根据刚才学到的知识，我们需要定义name属性用来提交数据，定义了value属性用来区分返回的参数，最后还使用了label标签标注了表单项，直接运行，结果正常。
剩下的标签都比较简单，我就不在详述，以下是整个html的完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<label for="1">用户名:</label>
<input type="text" name="username" id="1"><br>
<label for="2">密码：</label>
<input type="password" name="password" id="2"><br>
性别：<input type="radio" name="gender" value="nan"> 男
<input type="radio" name="gender" value="nv">女
<br>
爱好： <input type="checkbox" name="hobby" value="readbook" id="看书"> <label for="看书" >看书</label>
<input type="checkbox" name="hobby" value="eat" id="吃饭"> <label for="吃饭" >看书</label>
<input type="checkbox" name="hobby" value="sleep"id="睡觉"> <label for="睡觉" >睡觉</label>
<br>
头像：<input type="file">
<br>
城市：<select>
<option>北京</option>
<option>上海</option>
<option>西安</option>
</select><br>
个人描述：<textarea></textarea><br>
<input type="submit" value="注册">
<input type="reset" value="重置">
<br>
</form>
</body>
</html>
效果图：
以上是关于HTML基础学习的主要内容，如果未能解决你的问题，请参考以下文章
乂学教育-松鼠AI获KDD国际图深度学习研讨会最佳论文 & 最佳学生论文
DELM回归预测基于matlab松鼠算法改进深度学习极限学习机SSA-DELM数据回归预测含Matlab源码 1904期
DELM回归预测基于matlab松鼠算法改进深度学习极限学习机SSA-DELM数据回归预测含Matlab源码 1904期