简单记录一下自己最近跟着B站的黑马学习前端的过程。目前先从最简单基础的HTML开始学习。
编译软件：VS Code，版本1.81.1
一 实现标题—排版 （HTML）
1.标题标签：
●<h1>......</h1> ( 从h1→h6一共6个，重要程度依次降低 )
●注意：HTML的标签都是预定义好的，不能自己随意的定义（不能自己定义一个h7）。
2.水平线标签：<hr>，可用来将内容分割开来
3.图片标签 : <img src = "..." width = "....." height = "......">
绝对路径：
●绝对磁盘路径 ：（D:/XXXX）
●绝对网络路径 ：（https://xxxxx）
●相对路径：相对于当前HTML文件的路径
./ ：当前目录，./ 是可以省略的
../ ： 上一级目录
以下为代码：
<!-- 文档类型声明 -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 字符集为UTF-8 -->
<meta charset="UTF-8">
<!-- 设置浏览器兼容性 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 浏览器最上方的那个标题，监视可以点击切换不同页面的那个 -->
<title>焦点访谈：新浪新闻</title>
</head>
<body>
<!-- 图片路径
绝对路径：
1.绝对磁盘路径 --C:\Users\znszn\Desktop\HTML\img\DuoRua1.jpg
2.绝对网络路径 ==https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
相对路径：
相对于当前HTML文件的路径
./ ：当前目录，./ 是可以省略的
../ ： 上一级目录
图片大小：
1.图片宽度width (px ， 像素； % ， 相对于父元素的百分比)
2.图片高度height (px ， 像素； % ， 相对于父元素的百分比)
Tips : 如果宽度和高度只修改一个的话另一个会自适应的等比例缩放 ，父元素指的是页面，不是原图！！
-->
<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png" >旅游看点>正文
<h1>贵州黄果树瀑布：清凉避暑醉游人</h1>
<!-- 水平分割线 -->
<hr>
2023年08月16日 20:24 新浪网 作者 新华社
<hr>
</body>
</html>二 实现标题—样式（CSS）
如果说HTML是网页的骨架，那CSS就是网页的皮肤，CSS负责网页的外观和布局。
CSS一共有三种引入方式：
1、行内样式：
<h1 style="color: red;">贵州黄果树瀑布：清凉避暑醉游人</h1>该种引入方式是直接在h1标签内设置样式。
2、内嵌样式：
<head>
<style>
h1 {
color: green;
}
</style>
</head>该种样式一般是在<head>...</head>标签里设置样式，可以设置任意标签的样式。
3、外联样式：
<link rel="stylesheet" href="CSS/news.css"> 
该种引入方式是定义一个CSS文件，然后在<head>...</head>标签里用<link>标签来引入。
扫一扫
1163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
