0基础学前端------DAY1（续）
视频参考：B站Pink老师
HTML
学习目标：
1.能够说出标签的书写注意规范。
2.能够写出HTML骨架标签。
3.能够写出超链接标签。
4.能够写出图片标签并说出alt和title的区别。
5.能够说出相对路径的三种形式。
1 HTML基础
1.1 HTML语法规范
1.HTML标签是由尖括号包围的关键词，例如。
2.HTML标签通常是成对出现的，例如，我们成为双标签。标签中第一个为开始标签，第二个为结束标签。
3.有些特殊的标签必须是单个标签，例如
,我们称为单标签。
1.2 HTML标签关系
一共有两种关系：包含与并列。
包含关系：
<head>
<title></title>
</head>
并列关系：
<head></head>
<body></body>
HTML基本结构标签
2.1 基本结构
基本结构如下：
<html>
<head>
<title>我的第一个界面</title>
</head>
<body>
主体内容
</body>
</html>
外侧
<html></html>
为根标签，是最大标签；
<head></head>
为文档头部；
<title>我的第一个界面</title>
为网页标题；
<body>主体内容 </body>
为文档的主体。
2.2 常用快捷键（实用！！！）
1.快速复制一行 ：shift+alt+上/下箭头
2.选定多个相同单词：ctrl+d
3.添加多个光标：视频中给的没有反应，我这里用的是alt+鼠标
4.全局替换相同单词：ctrl+h+选择全部替换
5.快速定位到某一行：ctrl+g
6.选择某个区块：shift+alt+鼠标拖动
7.注释多行代码：已自行定义为ctrl+shift+/
网页开发工具
文档类型声明。作用是告诉浏览器使用哪种HTML版本来显示网页。
<!DOCTYPE html>
UTF-8为万国码，基本包含了全世界所有国家需要用到的字符。
<meta charset="UTF-8">
HTML 常用标签
4.1标签语义
标签语义即该标签的作用。根据标签的语义在合适的地方给一个最为合理的标签，可以让页面结构更加清楚。
4.2标题标签（重要）
标题标签为
<h1>-----<h6>
,h=head表示头部的意思。
标签语义：作为标签使用，并且依据重要性递减。
六个级别标签使用口诀如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>标题标签</h1>
<h1>标题一共六级选，</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>
</body>
</html>
运行后我们会看到这样的结果：
特点：
1)加了标题的文字会加粗，自豪也会依次变大。
2)一个标题独占一行。
4.3段落和换行标签
（1）段落标签
在HTML中，
<p></p>
用于定义段落，它可以将整个网页分为若干段落，p=paragraph。
标签语义：可以把HTML文档分割成若干段落。
特点：
1)文本在一个段落中会根据浏览器窗口大小自动换行。
2)段落和段落之间保有空隙。
（2）换行标签
如果希望某段文本强制换行显示，就需要使用换行标签
<br />
，br=break。
标签语义：强制换行。
特点：
1)
<br />
是个单标签。
2)
<br />
只是简单开始新的一行，不同于段落，段落之间会插入一些垂直的间距。
课堂案例练习：
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>昨天14时前后，<br />“康妮”以强台风级别登陆台湾省台东县成功镇沿海，华东一带进入台风雨影响最严重的时段。监测显示，昨日8时至今日6时，台湾岛大部、福建东北部、浙江北部和东部、上海、江苏东南部等地部分地区出现暴雨或大暴雨，台湾岛东部及福建宁德、浙江温州和台州等局地特大暴雨。</p>
<p>登陆后的“康妮”穿过台湾岛、进入台湾海峡后，虽然强度减弱，但其环流今天还将会继续给浙江、上海、江苏等地带来强风雨天气。明天，随着“康妮”远离，华东沿海风雨将陆续结束；而在北方，受强冷空气影响，西北地区东部、华北北部、东北地区等地将迎来一次雨雪过程。</p>
</body>
</html>
结果展示：
4.4 文本格式化标签
有时需要为文字设置粗体、斜体、下划线等效果，这时需要使用这类标签。
语义标签加粗
<strong></strong>或<b></b>
倾斜
<em></em>或<i></i>
删除线
<del></del>或<s></s>
下划线
<ins></ins>或<u></u>
使用时更加推荐标签前者，因为语义会更加强烈。
下面我们给出可参考代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本格式化标签</title>
</head>
<body>
我是<strong>加粗</strong>的文字
我是<b>加粗</b>的文字
我是<em>倾斜</em>的文字
我是<i>倾斜</i>的文字
我是<del>删除线</del>s
我是<s>删除线</s>
我是<ins>下划线</ins>
我是<u>下划线</u>
</body>
</html>
效果如下：
4.5
<div>
和
<span>
标签
这两个标签没有语义，可以将其理解为一个装内容的盒子。
特点：
1）
<div>
标签用来布局，但现在一行只能放一个
<div>
。[类似大盒子]
2）
<span>
标签用来布局，一行可以放多个
<span>
。[类似小盒子]
参考代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>我是一个标签我一个人单独占一行</div>123
<div>我是一个标签我一个人单独占一行</div>123
<span>百度</span>
<span>新浪</span>
<span>搜狐</span>
</body>
</html>
效果：
4.6 图像标签与路径
1.图像标签
<img src="图像URL"> //src为必须属性，必须存在
图像属性标签总结：
属性属性值说明src图片路径必须属性alt文本替换文本title文本提示文本width像素宽height像素高border像素图像边框粗细
图像标签注意点：
1)图像标签可以拥有多个属性，必须写在标签名的后面。
2)属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3）属性采取键值对格式，即key=“value”。
2.路径
（1）目录文件夹和根目录
目录文件夹：就是普通文件夹，只不过存放了我们做页面所需要的相关素材。
根目录：打卡目录文件夹的第一层就是根目录。
（2）Vscode中打开目录文件夹
由于页面中图片非常多，所以会存到文件夹中，这时再查找图像就需要关注路径。
路径分为相对路径和绝对路径。
1 相对路径：图片相对于HTML页面的位置
同一级
<img src="baidu.gif"/>
下一级/
<img src="images/baidu.gif"/>
上一级…/
<img src="../baidu.gif/">
2 绝对路径
目录下的绝对位置，通常从盘符开始的路径。
例如，“D:\web\img\logo.gif"或完整网络地址"http://www.itcast.cn/images/logo.gif”。
完整网络地址获取：右键该图片-》复制图片链接-》得到地址
其余内容可见合集中的后续文章哦~
版权归原作者 学代码的小前端 所有， 如有侵权，请联系我们删除。