前端知识补充：了解HTML
一、前言
最近一直在跟班上有关Python的直播课，然后最近讲到了关于前端的一些知识，不是很深，就是一些常用的知识，怎么说呢，前端的知识我感觉很多，超级多的东西要记，什么行内标签，块级标签等等，我觉得上课讲的东西很杂，所有就想着抽个时间自己来总结一下，最近学的前端知识。学会总结，学习才会更有动力，哈哈哈😄😄😄
目前，我们学的就是一些HTML，CSS还有JavaScript的一些基础知识，我准备挨着一个一个的来总结一下，可能会比较慢，因为最近比较忙，在忙着做大创还有参加学校微信小程序设计比赛，所以慢慢来，总结到位一点就行😁😁
本人也不是什么专业学前端的，所以总结内容难免会有一些瑕疵或者错误，还请大家谅解并帮我指正，谢谢！🥰🥰
二、HTML
一说到HTML，我们就会立马联想到了网页的制作语言，它就是网页构建的基础和框架，HTML、CSS、JavaScript这三者的关系，打比方就是，把一个成熟的网址比作一个人，那么HTML就是人的骨架，CSS就是人的肌肤和衣服，JavaScript就是赋予这个人能行走，吃饭等等一系列的交互动作，三者相辅相成，共同组建成一个完整成熟的网站。
正规的来说，HTML，称超文本语言，用来描述网页的一种语言，定义网页的结构，可以包含图片，音乐等非文字元素。网页文件扩展名是：xxx.html。
大致就介绍这么多，ok，接下来我们正式进入HTML学习。
注意：作者学习的HTML版本为HTML5！，请大家注意版本区别。
语言：HTML5
编译器：PyCharm 2021.3.2
-
HTML注释
<!-- 单行注释--> <!-- 多行注释1 多行注释2 多行注释3 -->可以看出HTML的单行注释和多行注释是一样的
-
HTML文档结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>HTML部分 说明 声名为HTML5文档 是文档开始和结束的标记，是html页面的根元素 定义了html文档的开头部分 此标签内是网页的主体内容 声明网页编码格式 -
HTML文档打开方式
- 在PyCharm编译器内部，集成了自动调用浏览器的功能，用该编译器打开html文件之后之间点击右上角对应的浏览器图标即可打开（前提是你电脑上安装了对应的浏览器，否则无法打开）
如果你的编译器右上角没有这些按钮或者没有你安装的浏览器图标的话，需要先设置一下。
点击：文件–>设置–>工具–>Web浏览器和预览，然后勾选你安装或者你需要的浏览器，就可以了。
-
找到文件所在的文章，然后右击选择打开方式，然后选择你想要的浏览器打开即可
-
HTML中标签的分类
-
HTML中head内常用标签
<head> <meta charset="UTF-8"> <title>Title</title> <!-- 网页标题 --> <style></style> <!-- 内部书写CSS代码 --> <link rel="stylesheet" href=""> <!-- 引用外部CSS文件 --> <script></script> <!-- 内部书写JavaScript代码 --> <script src=""></script> <!-- 引用外部JavaScript文件 --> </head>其中标签中共有两个属性，分别是http-equiv属性和name属性
-
name属性：主要用来描述网页，与之对应的属性值为content。content中的内容主要是便于引擎机器人查找信息和分类信息使用。
<meta name='keyword' content='关键词1 关键词2 ...'当你在浏览器搜索时，只需要输入了keyword后面指定的关键词就可以被用户搜索到。
<meta name='description' content='网页的描述'>:网页的描述性信息 -
http-equiv属性：提供了content属性的信息/值得HTTP头，可用于模拟一个HTTP响应头。
<meta http-equiv="refresh" content="2;url=https://www.baidu.com/">：意思是2秒后跳转到对应的网址
-
-
HTML中body内常用标签
基本标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> </head> <body> <h1>hello world</h1> <h2>hello world</h2> <h3>hello world</h3> <h4>hello world</h4> <h5>hello world</h5> <h6>hello world</h6> <!-- h1~h6标题标签 --> <b>hello world</b> <!-- 加粗 --> <i>hello world</i> <!-- 斜体 --> <br> <!-- 换行 --> <u>hello world</u> <!-- 下划线 --> <s>hello world</s> <!-- 删除线 --> <hr> <!-- 水平分割线 --> <p>hello world</p> <!-- 段落 --> </body> </html>它运行的效果如下：
常用标签
-
div：块级标签
块级标签可以修改长宽，可以嵌套任意块级标签和行内标签，div标签用于构造网页初期页面布局，它是一块区域，也就意味着设计网页时用div可以提前规划所有区域。
它的效果如下：
-
span：行内标签
行内标签不可以修改长宽，行内标签只能嵌套行内标签，span标签也是用于构造网页初期页面布局，普通文本用它来规划。
它的效果如下：
div和span标签测试代码我也放在下面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>div
<div>div1</div>
<p>p1</p>
<h1>h1</h1>
<div>111
<p>222
<span>333</span>
</p>
</div>
</div>
<span>span
<span>span1</span>
</span>
<p>p
<div>div</div>
<p>ppp</p>
</p>
</body>
</html>
在浏览器调出控制台的方法是：打开你自己测试的网页然后按下键盘的F12键或者在页面上右击选择检查就可以打开浏览器控制台啦。
3. img：图片标签
图片标签的标签格式如下：
<img src="" alt="">
它有几个常用属性：src属性、alt属性、title属性以及width属性和height属性
| 属性名 | 说明 |
|---|---|
| src | 设置图片的url路径（本地或者网上的路径都可以） |
| alt | 为图片定义一串预备的可替换的文本，当浏览器无法加载图片时，将图片替换成预先设置好的描述性文本信息 |
| title | 设置当鼠标悬浮到图片上之后，自动展示设置的提示性信息 |
| width | 设置图片的宽度，默认单位为像素 |
| height | 设置图片的高度，默认单位为像素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="https://cdn.cnbj1.api.mi-img.com/mi-mall/0ab8e5096ac6f08bd632e4d5a15d1792.jpg?w=632&h=340" alt="手机">
<img src="../images/头像.jpg" alt="" title="头像" height="200px">
</body>
</html>
它运行的效果如下：
> 注意：图片高度和宽度当你只修改一个属性的时候，
另一个也会等比例的缩放，如果同时修改两个属性，
但是没考虑到图片的比例问题时，图片就会失真！
-
a：链接标签
HTML使用标签来设置超文本链接。
默认情况下，链接将以以下形式出现在浏览器中：
- 一个未访问过的链接显示为蓝色字体并带有下划线
- 访问过的链接显示为紫色并带有下划线
- 点击链接时，链接显示为红色并带有下划线
a标签有三个常用属性：
-
href属性
填入url或者其他标签的id值，点击即可跳转到对应的标签位置
<a href="https://www.baidu.com/">访问百度首页</a>它运行的效果如下：
2. target属性
| 填入值 | 说明 |
|---|---|
| _self | 是默认值，表示点击链接之后再当前页面完成跳转 |
| _blank | 表示再新建页面完成跳转 |
- id属性
属性可用于创建一个HTML文档书签，也就相当于锚点功能，意思是点击一个文本标题，页面会自动跳转到标题对应的内容区域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="" id="d1">顶部</a>
<div style="height: 100px;background-color: skyblue"></div>
<a href="" id="d2">中间</a>
<div style="height: 100px;background-color: lightgoldenrodyellow"></div>
<a href="#d1">底部</a>
<a href="#d2">回到中间</a>
</body>
</html>
它运行的效果如下：
> 注意：标签的id值类似于每个人的身份证号一样，
在同一个HTML页面内id值不能重复！
-
列表标签
-
无序列表
<ul type=""> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul>它运行的效果如下：
-
其中ul标签内可以加入type属性，type属性内有几个值，它们的效果分别是：
| 填入的值 | 说明 |
|---|---|
| disc | 默认值，显示为实心圆 |
| circle | 显示为空心圆 |
| square | 显示为实心方块 |
| none | 显示为无任何样式 |
- 有序列表
<ol type="" start="">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ol>
它运行的效果如下：
其中ol标签内可以加入type属性，type属性内有几个值，它们的效果分别是：
| 填入的值 | 说明 |
|---|---|
| 1 | 默认值，显示数字序列 |
| A | 显示大写字母序列 |
| a | 显示小写字母序列 |
| Ⅰ | 显示大写罗马数字序列 |
| i | 显示小写罗马数字序列 |
如果加入start属性，则表示从第几个数开始创建有序列表
- 标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
<dt>标题3</dt>
<dd>内容3</dd>
</dl>
它运行的效果如下：
-
表格标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <thead> <tr> <th>用户名</th> <th>密码</th> </tr> <!--一个tr表示一行--> </thead> <!--字段信息--> <tbody> <tr> <td>北天</td> <td>bei_tian</td> </tr> <tr> <td colspan="2">北天</td> <td rowspan="2">bei_tian</td> </tr> <tr> <td >北天</td> <td>bei_tian</td> </tr> </tbody> <!--数据信息--> </table> </body> </html>它运行的效果如下：
| 填入的值 | 说明 |
|---|---|
| table border=“1” | 添加外边框 |
| td colspan=“2” | 水平方向占多列 |
| td rowspan=“2” | 垂直方向站多行 |
目前HTML表格设计已经几乎不使用这类表格标签了，现在改用CSS来实现。
-
表单标签
HTML表单用于收集用户的输入信息，表单标签表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
<form action=""></form>在form标签内书写的获取用户的数据都会被form标签提交到后端。
表单标签内的输入元素
-
text元素
<form action=""> <label>用户名: <input type="text" placeholder="用户名"> </label> </form>它运行的效果如下：
-
注意：在大多数浏览器中，文本域的默认宽度是20个字符。
- password元素
<form action="">
<label for="d1">密码:</label>
<input type='password' id="d1" placeholder="密码">
</form>
它运行的效果如下：
密码字段字符不会显示出来，会用*来代替显示。
- date元素
<form action="">
<input type="date">
</form>
它运行的效果如下：
- radio元素
<form action="">
<p>性别:
<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女
</p>
</form>
它运行的效果如下：
- checkbox元素
<form action="">
<p>兴趣:
<input type="checkbox" checked>唱
<input type="checkbox">跳
<input type="checkbox">rap
</p>
</form>
它运行的效果如下：
复选框可以选取一个或者多个。
- submit元素
<form action="">
<input type="submit" value="注册">
</form>
它运行的效果如下：
赋予submit元素的标签每次点击按钮之后就会把信息提交到后端服务器上并刷新一下页面清除所填信息
- button元素
<form action="">
<input type="button" value="提交">
</form>
它运行的效果如下：
它只是一个按钮，没有任何作用，如果赋予它作用需要后续JavaScript来实现。
- file元素
<form action="">
<input type="file">
</form>
它运行的效果如下：
三、最后我想说
这次博客我断断续续的总结了好一会，还熬了一个中午没睡午觉，然后最头疼的是我习惯用Typora这个软件来写笔记博客，然后每次在上面写的很好看的笔记之后再导入到CSDN中就会出现各种问题，很头疼，想了想准备后面自己搭建一个博客算了。这段时间会比较忙所以下次更新的时间也不太确定。
大概就说这么多啦，本次总结的HTML内容比较基础没有什么深入的知识，如果想要继续深入学习的话就可以上网查阅各种前端知识，我们下期再见🥰🥰🥰
扫一扫
2368
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
