前端学习第一天--编程软件vscode使用、HTML标签

vscode软件基本操作

第一步：下载vscode，官网下载即可，不会的可以搜索下载教程。
第二步：下载插件
打开vscode，在最左侧最下面找到四个方块图标

点击进来之后直接在搜索框内输入名称，选择对应插件进行下载：
简体中文Chinese

为了能在浏览器看见效果open in browser

后面会用到 live server

第三步：新建文件夹
直接在电脑D盘或者其他硬盘新建一个文件夹，可命名为前端。

第四步：在vscode内打开文件夹。
文件–>打开文件夹

第五步：新建一个index.html文件
在刚刚的文件夹内部
要注意结构，注意分层，后期会建很多个文件夹以及文件，乱的话影响后续观看。

1代表新建文件，2代表新建文件夹，也可以右键，选择新建文件夹或者新建文件

***注意：新建文件夹时不需要后缀，新建文件时要后缀.html。

基本代码快速显示

英文状态下打出感叹号，再按tab键
会自动生成必要代码。
先打英文感叹号，如下再按Tab键

一些基本操作：``

1、注释：Ctrl+？
多行注释：选中多行，再Ctrl+？
注释的内容只有开发人员能看到
2、注意要先Ctrl+s，再右键点击open in browser，就可以在浏览器显示效果
3、关于保存
如果是小圆圈，说明没保存，保存会变成叉号，如图所示

认识HTML基本代码

<!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>Document</title>
</head>
<body></body>
</html>

逐行解释如下：

<!-- HTML是一种超文本标记语言，注意，不是编程语言。 --><!DOCTYPE html>
<!-- //文档声明：这是一个HTML文档 -->
<!-- 尖括号内的内容被称为标签，大部分成对出现，后面比前面多了/。 --><html lang="en">
<!-- /页面语言是英语，language=english,供浏览器识别 --><head><!-- 头部，存放元数据，不会显示在浏览器上，是一些针对网页的设置项。 --><meta charset="UTF-8"><!-- meta表示设置  后面表示编码是utf-8,可解决中文乱码问题 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 用来兼容旧版本浏览器 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 移动端适配，手机平板才会适用 --><title>Document</title><!-- title:页面标题 --></head><body><!-- body内的内容直接显示在页面上。 --><!-- 内容一定要写在标签内， --><!-- 注释：Ctrl+？，注释的内容只有开发人员能看到 --><!-- 注意要先Ctrl+s，否则点击open in browser也不会在浏览器显示。 --></body></html>

需要注意的一些细节：

接下来就正式进入HTML的学习了，首先学习一些标签：

HTML标签

啥叫标签？
写在尖括号内的，看见尖括号就是标签。
标签是干啥的？
浏览器识别用的，标签就是你在给浏览器下命令，让浏览器按照相应的标签进行显示

标题标签

<!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>Document</title>
</head><body>我是一行普通的文字<h1>我是大标题</h1><h2>我是二级标签</h2><h3>我是三级标签</h3><h4>我是四级标签</h4><h5>我是五级标签</h5><h6>我是六级标签</h6><!-- 标题标签自带加粗效果，且会沾满一行，意思是，不管在其后面写什么，都会自动换行。 -->Ctrl+z 撤回</body></html>

字体修饰标签
换行符br

如果没加换行符，哪怕写的时候分行了，显示在浏览器上也是一行

加了,浏览器会识别出来，就会分行显示

其他的字体修饰标签：

效果如下：

案例练习
利用刚刚学习的字体修饰标签

<!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>人间至味</h1><big><strong>风雨犹祝，<del>山海同欢</del>，<sup>是承天地之佑。</sup><br><u>星移斗转</u>，沧海桑田，烟火人间依旧。</strong></big>
</body></html>

图片标签
第一步：建文件夹用来放图片，把图片拖到image文件夹内。接着，用代码让图片在浏览器显示出来。

例图：

<!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>Document</title>
</head><body><img src="./image/baidu.gif" alt="">  //图片标签img
</body></html>

图片标签的一些属性：
alt 加载失败时的提示文字。
width height 宽高
src 路径，即图片存放的位置
title 鼠标放到图片上会显示的文字，需要鼠标静止不动一下

重点强调路径，分为绝对和相对，尤其是相对路径：
绝对路径：
存放在电脑上的，比如C盘，换了电脑可能就查不到。不建议使用
相对路径：
在文件夹内部的，需要看图片文件夹和html文件的关系
./ image文件夹和HTML位于同级

…/ image位于02字体标签内，要先出来一级找到02字体标签

…/…/上上级

超链接标签

href是将要跳转去的链接
a之间填写显示的文字，链接是直接加在文字上的

常用属性：target
target="_blank" 新建标签页打开

target="_self" 在当前标签页打开

链接练习：
实现4个页面间的跳转，点击哪个字母就去到哪个页面

方法：首先，建4个HTML文件，写入4个a标签，标签内依次写上四个页面的a链接，
再单独加上一行文字：这里是XX页面

<!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>Document</title>
</head><body><h1>这里是A页面</h1><a href="A.html">A</a><a href="B.html">B</a><a href="C.html">C</a><a href="D.html">D</a></body></html>

怎么实现点击图片跳转链接的功能呢：

列表
有序列表
Ol为整个列表，li表示每一个项
这是最基本的ol列表

可以利用type属性来改变序号的样式：
有5种样式
1代表数字，A代表大写字母，a代表小写字母，I代表罗马数字，i代表小写罗马数字

效果如下：

无序列表
默认带圆点。

同样可以利用type更改样式
disc（小圆点，默认），circle圆，square方块

自定义列表

可在列表内加一些样式

列表练习：

所需图片：

<!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>Document</title>
</head><body><strong> <big>热歌榜</big> </strong> <img src="./img/play.png" alt=""><ul type="none"><strong> <li>01 <img src="./img/06.jpg">桥边姑娘 </li><li>02 <img src="./img/06.jpg">桥边姑娘</li><li>03 <img src="./img/06.jpg">桥边姑娘</li></strong></ul><dl><b><dt><strong>热歌榜<img src="./img/play.png" alt=""> </strong></dt><dd>01 <img src="./img/06.jpg">桥边姑娘</dd><dd>02 <img src="./img/06.jpg">桥边姑娘</dd><dd>03 <img src="./img/06.jpg">桥边姑娘</dd></b></dl>
</body></html>

表格
第一步：创建一个表格
三层，最外层是table，中间层是tr，表示行，最内层是td，表示列。

Table内的属性：
border为边框，不写border表示没有，啥也看不见。一般写1。
Width height要定义宽高，否则的话会很小。

写上宽高以及边框后

Caption：表格标题
写上标题以及填充部分

Align=“center” 水平居中
写在哪哪里实现，tr或td都可

Th表头效果，自带加粗效果。
注意：th要写在tr内

Cellspacing 表格之间的空隙，不用加单位。一般情况下，把cellspacing设为0

Cellpadding:内容与表格之间的距离，不用加单位

合并单元格：（重点）
合并行：rowspan（跨行合并），上合并下，写在需要合并的最上面，把下面的删掉。
即删除的是不同tr内的td

合并列：colspan（跨列合并），左合并右，把右边的删掉，即删除的是同一个tr内的td

练习:
课程表制作
主要是练习行列合并。
最下面一行的边框是因为浏览器兼容的问题，暂时不考虑解决。

<!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>Document</title>
</head><body><table width="600" height="350" border="1" cellspacing="0"><tr align="center"><th></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th></tr><tr align="center"><td rowspan="2">上午</td><td>123</td><td>456</td><td>789</td><td>000</td><td>145</td><td>789</td></tr><tr align="center"><td>124</td><td>688</td><td>786</td><td>542</td><td>235</td><td>789</td></tr><tr align="center"><td colspan="7">午休</td></tr><tr align="center"><td rowspan="2">下午</td><td>124</td><td>688</td><td>786</td><td>542</td><td>235</td><td>789</td></tr><tr align="center"><td>124</td><td>688</td><td>786</td><td>542</td><td>235</td><td>789</td></tr></table>
</body></html>