目录
一些会运用到的知识：
新闻图示
代码如下：
Css：中文翻译是层叠样式表（html的化妆师）
1.Css的语法
2.内部样式表：
3.选择器
4.Css的属性
新闻图示
代码如图所示
这是一个自己学习看视频后运用的学习笔记
1.图片插入标签：
<img src=”图片地址（图片路径）”width=“图片的宽度”height=“图片的高度”>
注意点：src必须要有，路径必须写对，图片必须在我们的站点里
如果宽高只写一个，是等比例的缩放，如果都写除非你是给定的等比例的值，不然图片就会变形。
2.如何快速复制代码
将代码选中Ctrl+shift+r
3.超链接标签
<a href=”地址”target=“_blank”></a> 默认出来是蓝色文字有一个下划线
target=“_blank”作用：超链接在新的窗口打开 如果不写默认是在当前页面打开超链接
空连接<a href=”#”></a>（不确定地址时使用）
4.无序列表与有序列表
无序<ul>
<li></li>
</ul> 无序列表显示出来的是黑点，有序列表显示的是数字
有序<ol>
<li></li>
</ol>
新闻图示 
<!Doctype html>
<html>
<head>
<meta charset=" utf-8">
<title>标题</title>
<style>
#header {
background-color: white;
padding: -100px;
}
#nav {
background-color: white;
height: 300px;
width: 400px;
float: left;
}
#nav2 {
width: 310px;
height: 300px;
float: left;
}
#mav {
width: 300px;
height: 400px;
float: left;
}
</style>
</head>
<body>
<div>
<div id="header">
<h2 style="color: rgb(87, 87, 194);font-size:30px;">北京新闻
<sub>
<font size="5" color="#cecece">LOCAL NEWS</font>
<img src="a.PNG" width="20" height="20" />
</sub>
</h2>
</div>
</div>
<div>
<div id="nav">
<ul>
<li><b>疫情之后的首场重大国际活动为什么是它?</b></li>
<li>“太热太重了”，开学“第一课”小朋友体验消防员...</li>
<li>北京植物园3.2公顷海棠结果，公园提醒：可观可...</li>
<li>顺义这小区楼门上，竟盘踞着马蜂窝！</li>
<li>北京服务业扩大开放升级4.0版，有哪些冲突？商...</li>
<li>街头没车押金不退！但是，小黄车却仍在押金扣费......</li>
<li>“丹宸永固——紫禁城简称六百年"展亮相故宫博物院</li>
<li>北京将建设全区首个高级别自动驾驶示范区</li>
</ul>
</div>
<div>
<div id="nav2">
<h3>新闻图片</h3>
<img src="pic.jpg">
<p>“非必要不出校”是否有必要？吴尊友回应</p>
</div>
<div id="mav">
<h3>新闻资讯</h3>
<ul>
<li>北京婴幼儿健康素养核心知识“八知八会”</li>
<li>北京升级版电子眼10天抓拍开车看手机和不</li>
<li>延庆九眼楼 万里长城中最大空心敌台盛装</li>
<li>密云区荣获北京市青少年鑫桥杯“中华魂”主题教</li>
<li>2022年冬奥会北京赛区10个场馆年内完工 年...</li>
<li>北京旅游必去的三大景点</li>
<li>丰台小v蜂再添新成员</li>
</ul>
</div>
</div>
</div>
</body>
</html>
<!-- ctrl + k + 0 --折叠>
<!-- ctrl + k + c --添加注释>
<!-- ctrl + k + u --删除注释>
对于这段代码有一些不足：1.北京新闻和文本距离太远
2.文本的字没在一条线上，对不齐。希望以后可以改进。
Css的语法由选择器和声明组成，其中声明又包括属性和属性值
选择器{属性：属性值；}
注意点：属性和属性值用冒号连接分号结束，一个选择器可以有多个属性，不分先后顺序
放在head与head之间用style去包裹
<style>
Css的语法
</style>
标签选择器
语法：Html的标签{属性：属性值；}
作用：针对这个标签进行化妆，只要body里边存在的这个标签都会生效
注意：body里边必须存在这个标签
class选择器（类选择器）
语法：.class名称{属性：属性值；}
作用：用来区分标签（一个页面中如果存在多个这样的标签，每一个都不一样的显示效果可以用类名来区分）
注意：起名时最好不要使用中文，不要以数字开头，可以使用数字、字母、下划线的组合，最好不要使用关键字（html的标签），起名时最好结构化语义化：例如头部top head
Body的标签里面想要给谁使用这个名字就在对应的标签里面写<h1 class=”clas名称”></h1>
伪类选择器
鼠标悬停效果 选择器：hover{属性：属性值；}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style>
div {width: 500px;}
h2{
width: 200px;
height: 50px;
background-color: #808080;
font-size: 25px;
color: #ffffff;
text-align: center;
line-height: 50px;
}
p{
font-size: 20px;
text-indent: 2em;
}
span{
color: #ff0000;
}
</style>
</head>
<body>
<div>
<h2> 千峰简介</h2>
<p>
<b>北京千锋互联科技有限公司（简称千锋）</b>
成立于2011年1月。公司总部位于北京，目前已在
<span>深圳、上海、郑州、广州、大连、武汉、成都、西安、杭州、青岛、重庆、长沙、哈尔滨、南京、太原</span>
建立分公司。
</p>
<p>千锋旗下现有<b>教育培训、人才服务、项目研发、创业孵化</b> 等业务。 教育培训业务主要为大学生、企业提供技术培训服务；人才服务业务主要为企业提供优秀的互联网研发人才；
项目研发业务主要为企业提供APP解决方案及APP项目研发； 创业孵化业务为有创业梦想的学员设立，为其提供创业辅导及天使投资等服务。
</p>
<p>千锋秉承着<span> “用良心做教育”</span> 的理念踏踏实实的做事， <span>创办7年，现已成为业内口碑好、规模大、教学强的移动互联网研发培训机构。</span> 目前累计与国内
<b>超过8200多家</b> IT相关企业建立人才输送合作，与 <b>562所大学</b>
建立实训就业合作，每年为中国IT企业输送上万名移动开发工程师。计划未来5年内实现年营收过10亿，为中国教育行业贡献一份力量。
</p>
</div>
</body>
</html>代码太长的话，我们也可以写一个css样式通过link标签放在head中，如下图所示。
