0基础学前端------DAY2

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标签关系

一共有两种关系：包含与并列。
包含关系：

并列关系：

HTML基本结构标签

2.1 基本结构

基本结构如下：

    
        
    
    
        主体内容
    

外侧为根标签，是最大标签；为文档头部； 为网页标题； 主体内容 为文档的主体。

2.2 常用快捷键（实用！！！）

1.快速复制一行 ：shift+alt+上/下箭头
2.选定多个相同单词：ctrl+d
3.添加多个光标：视频中给的没有反应，我这里用的是alt+鼠标
4.全局替换相同单词：ctrl+h+选择全部替换
5.快速定位到某一行：ctrl+g
6.选择某个区块：shift+alt+鼠标拖动
7.注释多行代码：已自行定义为ctrl+shift+/

网页开发工具

文档类型声明。作用是告诉浏览器使用哪种HTML版本来显示网页。

UTF-8为万国码，基本包含了全世界所有国家需要用到的字符。

HTML 常用标签

4.1标签语义

标签语义即该标签的作用。根据标签的语义在合适的地方给一个最为合理的标签，可以让页面结构更加清楚。

4.2标题标签（重要）

标题标签为

-----

,h=head表示头部的意思。
标签语义：作为标签使用，并且依据重要性递减。
六个级别标签使用口诀如下：

    
    
    


    
标题标签
    
标题一共六级选，
    
文字加粗一行显。
    
由大到小依次减，
    
从重到轻随之变。
    
语法规范书写后，
    
具体效果刷新见。

运行后我们会看到这样的结果：

特点：
1)加了标题的文字会加粗，自豪也会依次变大。
2)一个标题独占一行。

4.3段落和换行标签

（1）段落标签
在HTML中，

用于定义段落，它可以将整个网页分为若干段落，p=paragraph。
标签语义：可以把HTML文档分割成若干段落。
特点：
1)文本在一个段落中会根据浏览器窗口大小自动换行。
2)段落和段落之间保有空隙。
（2）换行标签
如果希望某段文本强制换行显示，就需要使用换行标签
，br=break。
标签语义：强制换行。
特点：
1)
是个单标签。
2)
只是简单开始新的一行，不同于段落，段落之间会插入一些垂直的间距。
课堂案例练习：
代码展示：

    
    
    


    
昨天14时前后，
“康妮”以强台风级别登陆台湾省台东县成功镇沿海，华东一带进入台风雨影响最严重的时段。监测显示，昨日8时至今日6时，台湾岛大部、福建东北部、浙江北部和东部、上海、江苏东南部等地部分地区出现暴雨或大暴雨，台湾岛东部及福建宁德、浙江温州和台州等局地特大暴雨。
    
登陆后的“康妮”穿过台湾岛、进入台湾海峡后，虽然强度减弱，但其环流今天还将会继续给浙江、上海、江苏等地带来强风雨天气。明天，随着“康妮”远离，华东沿海风雨将陆续结束；而在北方，受强冷空气影响，西北地区东部、华北北部、东北地区等地将迎来一次雨雪过程。

结果展示：

4.4 文本格式化标签

有时需要为文字设置粗体、斜体、下划线等效果，这时需要使用这类标签。

语义	标签
加粗	或
倾斜	或
删除线	或
下划线	或

使用时更加推荐标签前者，因为语义会更加强烈。
下面我们给出可参考代码：

    
    
    


    我是加粗的文字
    我是加粗的文字
    我是倾斜的文字
    我是倾斜的文字
    我是删除线s
    我是删除线
    我是下划线
    我是下划线

效果如下：

4.5

和标签

这两个标签没有语义，可以将其理解为一个装内容的盒子。
特点：
1）

标签用来布局，但现在一行只能放一个

。[类似大盒子]
2）标签用来布局，一行可以放多个。[类似小盒子]
参考代码：

    
    
    


    
我是一个标签我一个人单独占一行
123
    
我是一个标签我一个人单独占一行
123
    百度
    新浪
    搜狐

效果：

4.6 图像标签与路径

1.图像标签

 //src为必须属性，必须存在

图像属性标签总结：

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本
title	文本	提示文本
width	像素	宽
height	像素	高
border	像素	图像边框粗细

图像标签注意点：
1)图像标签可以拥有多个属性，必须写在标签名的后面。
2)属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3）属性采取键值对格式，即key=“value”。

2.路径
（1）目录文件夹和根目录
目录文件夹：就是普通文件夹，只不过存放了我们做页面所需要的相关素材。
根目录：打卡目录文件夹的第一层就是根目录。
（2）Vscode中打开目录文件夹
由于页面中图片非常多，所以会存到文件夹中，这时再查找图像就需要关注路径。
路径分为相对路径和绝对路径。
1 相对路径：图片相对于HTML页面的位置

同一级
下一级	/
上一级	…/

2 绝对路径
目录下的绝对位置，通常从盘符开始的路径。
例如，“D:\web\img\logo.gif"或完整网络地址"http://www.itcast.cn/images/logo.gif”。
完整网络地址获取：右键该图片-》复制图片链接-》得到地址

其余内容可见合集中的后续文章哦~