这些天没更笔记是做了一个MyBatis增删改查的案例
接下来准备考一个C1工程师证 接下来几天会发一些C1有关的笔记把 大家有兴趣可以看看
vscode下载地址：https://code.visualstudio.com
html项目结构为：
一些标签信息
<title>我们终将不会被现实打败</title>标签页的标题
<meta> 标签 实际上是引入网页相关的描述及配置信息
<meta charset ="UTF-8"> 字符集解析所用到的就是UTF-8
<meta name="keywords" content="C1,笔记，阿星在努力"> 关键词引入：有利于网络爬虫对网页进行检索，如果有对应的话 就会提供给对应的读者
<meta name="description" content="关于C1学习的一些笔记"> 告诉别人这个网站是干嘛的 对网站的一些描述
<meta name="author" content="阿星在努力">告诉别人作者的名字
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 页面会被等比例压缩 因为手机上和电脑上的网页长款不一致 所以就会出现这个问题 initial-scale=1.0这行代码元素初始化比例为1.0
width 视口宽度
height 视口高度
initial-scale 视口缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放
link标签 引入外部资源
href 链接文件的路径
rel 当前文档与链接文档的关系 文件的类型
stylesheet CSS样式表
icon 小图标
type 码表文件类型
例如：外部引入
<link rel="stylesheet" href="css/now.css">
style 内部样式表
<style>
body{
color: green;
}
</style>
script 引入JS文件
<script src="js/now.js"></script>
第二种方式
<script>
alert("好好加油")
</script>
示例：
<!DOCTYPE html>
<!--使用html5的标准进行文档解析-->
<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>
<!-- <link rel="stylesheet" href="css/now.css"> -->
<style>
body{
color: green;
}
</style>
<!-- 第一张使用方式 -->
<script src="js/now.js"></script>
<!-- 第二种使用方式 -->
<script>
alert("好好加油")
</script>
</head>
<body>
<!--正文-->
hello html
</body>
</html>css代码：
body{
color: red;
}
JS代码：
alert("welcome to 阿星笔记")
body里的三种标签 大致可以分为三种
块标签 行标签 行块标签
块标签：
<div></div>本身没有任何语义的 可以用作任何 就是你想让他是什么就可以使什么 自上向下进行排列的
不给宽的的话就是占满父级的 就是body标签 就是我们所能够看到的整个宽度 不给高度的话 就是内容撑开婊标签
总结:独占一行,默认宽度占满父级,高度为0,子集内容撑开高度
h1~h6
<h1>阿星在努力 (大标题)</h1>大标题 一个页面只允许用一次
<h2>C4Java认证 (副标题)</h2>副标题 不要超过8个
<h3>当前在学习web</h3> 小标题不受限制
h1 h2 h3是具备搜索权重的 也就是他们中的关键词会被搜索到
段落标签 P
<p>代表一个段落</p>
ul ol li标签
ul无序列表
<ul>
<li>久旱逢甘霖</li>
<li>他乡遇故知</li>
<li>洞房花烛夜</li>
<li>金榜题名时</li>
</ul>
ol有序列表
<ol>
<li>久旱逢甘霖一滴</li>
<li>他乡遇故知前妻</li>
<li>洞房花烛夜跑路</li>
<li>金榜题名时重名</li>
</ol>
使用时一样的 但是效果不同
<!-- H5新增标签 -->
<article>
<nav>这里是导航栏</nav>
<header>这里时头部信息</header>
<aside>这里是侧边栏</aside>
<section>区域的意思</section>
<footer>这里是底部信息</footer>
</article>
如何实现这些标签呢 需要css的知识的支撑 后句会学
代码：
<!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>
<style>
div{
width: 1000px;
height: 50px;
color: brown;
background-color: black;
}
</style>
</head>
<body>
<div>千里之行始于足下</div>
<!-- 标题标签 -->
<h1>阿星在努力 (大标题)</h1>
<!-- 不要超过8个 -->
<h2>C1认证 (副标题)</h2>
<h2>C4Java认证 (副标题)</h2>
<!-- 小标题 -->
<h3>当前在学习web</h3>
<!-- h1 h2 h3是具备搜索权重的 -->
<h4>c1认证</h4>
<h5>c4Java认证</h5>
<h6>c5全栈认证</h6>
<!-- 段落标签 -->
<p>代表一个段落</p>
<!-- 列表 -->
<ul>
<li>久旱逢甘霖</li>
<li>他乡遇故知</li>
<li>洞房花烛夜</li>
<li>金榜题名时</li>
</ul>
<ol>
<li>久旱逢甘霖一滴</li>
<li>他乡遇故知前妻</li>
<li>洞房花烛夜跑路</li>
<li>金榜题名时重名</li>
</ol>
<!-- H5新增标签 -->
<article>
<nav>这里是导航栏</nav>
<header>这里时头部信息</header>
<aside>这里是侧边栏</aside>
<section>区域的意思</section>
<footer>这里是底部信息</footer>
</article>
</body>
</html>
2156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
