1月11日，今天是第八届APP创意大赛复赛的日子，下午时间都在线上参加比赛，所以写博客的时间就少了很多，发的时间也就比较晚，请大家见谅。不过痛苦大学生会持续更新学习打卡进度的！
- 标签语义
学习标签的技巧就是要记住标签的语义。简单理解就是指标签的含义，即这个标签是用来干嘛的。（感觉和记英语单词差不多）
所以，根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更加清晰。
有无语义标签的区别
- 标题标签<h1>-<h6>(重要)
为了使网页更具有语义化，我们会经常在页面中使用标题标签。
HTML提供了六个等级的网页标题，即<h1>-<h6>。一级标题......
<h1>这是一级标题</h1>h是head的缩写，意思是头部、标题。
要写在<body>里
标签语义：作为标题使用，并且依据重要性递减。（说明这些文字做标题或者这些文字很重要。）
特点：
加了标题的文字会变得加粗，字号也会依次变大。1>2>3......
一个标题独占一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我用vscode写的第一个网页</title>
</head>
<body>
<h1>这是我的一级标题</h1>
我真的爱写代码0.0
</body>
</html>
快速排版的快捷键是shift+Alt+f(保存后直接刷新网页就能显示出来)
- 段落标签和换行标签（重要）
段落标签
在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。
在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。
注意：代码里不管打多少空格，都只显示了一个，回车给文字分段在网页中并不能显示分段。
<p>这是一个段落标签，一段文字就写在这里面</p>p是单词paragraph的缩写，意为段落。
标签语义：可以把HTML文档分割为若干段落。
特点：
文本在一个段落中会根据浏览器窗口的大小自动换行（即是随着改变浏览器窗口的大小，每行文字的数目会发生变化）。
段落和段落之间保有空隙。
换行标签
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。
如果希望某段文本强制显示换行，就需要使用换行标签<br/>
（它不需要结束标签，只需要在br后面加上/）
<br/>br是单词break的缩写，意为打断、换行。
特点：
<br/>是个单标签。
<br/>标签只是简单地开始新的一行，是打断。跟段落不一样，段落之间会插入一些垂直的间距。
它仅仅是另起一行显示，段落间没有较大的空隙（跟段落标签不一样）
- 文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更重要。
语义 | 标签（推荐使用前者，语义更加强烈） | 说明 |
加粗 | <strong></strong>或者<b></b> | strong强壮的/bold加粗 |
倾斜 | <em></em>或者<i></i> | emphasize强调/incline倾斜 |
删除线 | <del></del>或者<s></s> | delete删除/strikethrough删除线 |
下划线 | <ins></ins>或者<u></u> | insert插入/underline下划线 |
<strong>加粗</strong>
<em>倾斜</em>
<del>删除线</del>
<ins>下划线</ins>把它们组合起来练习一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我用vscode写的第一个网页</title>
</head>
<body>
<h1>这是我的一级标题</h1>
我真的爱写代码0.0
<h2><strong><em><del><ins>文本格式化标签</ins></del></em></strong></h2>
</body>
</html>效果图如下：
- <div>和<span>标签
<div>和<span>是没有语义的，它们就是一个盒子，原来装内容的。（盒子：用来写图片或者内容的）
div是division的缩写，表示分割、分区。
span意为范围、跨度、跨距。
<div>这是头部</div>
<span>今日价格</span>特点：
都是用来布局的
<div>标签用来布局，但是现在一行只能放一个<div>，后面就没办法写了。大盒子
<span>标签用来布局，一行可以放多个<span>。小盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我用vscode写的第一个网页</title>
</head>
<body>
<div>大盒子独占一行</div>123
<div>大盒子独占一行</div>123
<span>小盒子一行可以放多个</span>
<span>小盒子一行可以放多个</span>
<span>小盒子一行可以放多个</span>456
<span>小盒子一行可以放多个</span>456
<span>小盒子一行可以放多个</span>456
</body>
</html>效果如下：
- 图像标签
在HTML标签中，<img>标签（单标签）用于定义HTML页面中的图像。
img是单词image的缩写，意为图像。
<img src="图像URL">src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
属性：属于这个图像标签的特性。
注意：图片要和网页放在同一位置。
“”内写图片文件名jpg也要写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>真爱粉集结</title>
</head>
<body>
<h1>kunkun勇敢飞，ikun永相随</h1>
<img src="小黑子.jpg">
</body>
</html>
图片标签的其它属性
属性 | 属性值 | 说明 |
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本。如果图片显示不出来就显示这段文字 |
title | 文本 | 提示文本。鼠标放在图像上显示的文字 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度，""里面写像素 |
border | 像素 | 设置图像的边框粗细（一般通过css设定，不会用属性来设置） |
注意：
一般width和height只修改一个，另一个会等比例变化，防止图片被压瘪失真。
<img src="这个图片找不到不存在.jpg" alt="图片不存在，这是替换文本">
<img src="这个图片存在.jpg" alt="图片不存在“ title="提示文本" width="500">注意：
1.图像标签可以拥有多个属性，必须写在标签名的后面。（img后面）
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3.属性采取键值对的格式，即key="value"的格式，属性="属性值"。
1942
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
