HTML和CSS总结
HTML和CSS总结[*]
[*]HTML总结
[*]
[*]1、简介
[*]2、实操
[*]
[*]2.1 整体架构
[*]2.2 标题体验
[*]2.3 图片路径
[*]CSS总结
[*]
[*]1、简介
[*]2、实操
[*]
[*]2.1 初步体验
[*]2.2 盒子模型
[*]2.3 float浮动
[*]参考链接
HTML总结
1、简介
HTML是超文本编辑语言，而非编程语言，创建的HTML文件可以很直观的渲染到浏览器上展现出来。我们经常说的web主要有三方面构成：结构、表现和行为，实际上就分别对应我们所学的前端三剑客：结构写入HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。
2、实操
2.1 整体架构
通常，我们打开一个html文件，首先输入英文感叹号‘!’，就会出现如下整体框架：
https://img-blog.csdnimg.cn/1f516ec537a846c5a09d37deeba3e438.png
2.2 标题体验
HTML提供了从大到小六级标题：
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr> 效果如下：
https://img-blog.csdnimg.cn/8de0d5e48ef74043a63fa0c77b964266.png
2.3 图片路径
图片路径主要是注意src属性和alt属性的用法，以及图片文件路径的绝对路径和相对路径问题，最好放在项目文件里面的路径是最好的，而非通过本机D盘等路径，换台电脑可能就无法显示了。
https://img-blog.csdnimg.cn/0a4c69f42a1046f59707bc86d48febe6.png
效果如下：
https://img-blog.csdnimg.cn/9ef20620ec4b467fb58dda8a23429abd.png
换一个路径：
https://img-blog.csdnimg.cn/83627ba97eb345bcb6111c277fdca3f4.png
显示效果依旧如此：
https://img-blog.csdnimg.cn/a96e022f54544d9b986896c2e4432503.png
CSS总结
1、简介
CSS就是一个在一个仅有骨架的HTML上起到一个美化的功能，让我们HTML页面变得更加好看。
2、实操
2.1 初步体验
没有CSS时的网页是平平无奇的，如下：
https://img-blog.csdnimg.cn/d9a1cdd2197841ecbeeb2922548b3821.png
当添加了CSS之后，并且在指定路径下添加，具体操作为：
https://img-blog.csdnimg.cn/96720c1812334329ba666de89a2d5f48.png
最后的效果展示，那不得了了，神奇的事情发生了：
https://img-blog.csdnimg.cn/b1cde66f738a4b8687438e424f730f7b.png
具体代码：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5</title>
<link rel="stylesheet" href="./css/html5.css">
</head>
<body>
<header>
<h1>头部</h1>
<h2>子标题</h2>
<h4>震撼HTML5</h4>
</header>
<nav>
<h3>导航</h3>
<a target="_blank" href="http://www.google.com">Google</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.dapenti.com" target="_blank">打喷嚏</a>
</nav>
<section>
<article>
<header>
<h1>文章头部</h1>
</header>
<ul type="square">
<li>当一个人只为维持生计而思维的时候，他的思想就难以高尚。 ——卢梭</li>
<li>衣不如新，人不如旧</li>
<li>井蛙不可语天，夏虫不可语冰</li>
<li>有党性，没人性</li>
</ul>
<footer>
<h2>
文章底部
</h2>
</footer>
</article>
<article>
<header>
<h1>文章头部</h1>
</header>
<ol>
<li>不想解决人民提出的问题，老想解决提出问题的人民。</li>
<li>要不是美领馆按pm2.5标准向外公布空气检测结果，我们肯定还生活在“现在播报新闻，冬季来临，全国大部地区全天有大雾，空气质量良”的世界里。</li>
<li>某男问大师：“大师，我女朋友虽有优点，但缺点让我难以忍受，怎样才能让她只有优点没有缺点呢？”大师笑答：“方法很简单，不过若要我教你，你得先下山为我找一张只有正面没反面的纸回来。” 该男略一沉吟下山而去，很快又上山来，递给大师一张“人民日报” 。大师看后，从此遁入空门，不再过问世事。</li>
<li>人民对领导人情感的强烈程度，往往与领导人的牛逼程度无关，而是与人民的傻逼程度及国家的封闭程度成正比！</li>
</ol>
<footer>
<h2>
文章底部
</h2>
</footer>
</article>
</section>
<aside>
<h3>边条</h3>
<pre>
agony 痛苦 爱过你
pregnant怀孕 扑来个男的
ambulance 救护车俺不能死
ponderous 肥胖的胖的要死
pest 害虫 拍死它
ambition雄心 俺必胜
bale 灾祸 背噢
admire 羡慕 额的妈呀
</pre>
</aside>
<footer>
<h2>底部</h2>
</footer>
</body>
</html> CSS代码：
body{
background-color: #cccccc;
font-family: "Microsoft Yahei","SimHei";
margin: 0 auto;
max-width: 900px;
border: solid #FFFFFF;
}
header{
background: #F47D31;
display: block;
color: #FFFFFF;
text-align: center;
}
header h2{
margin: 0;
}
h1{
font-size: 72px;
margin: 0;
}
h2{
font-size: 24px;
margin: 0;
text-align: center;
/*color: #F47D31;*/
}
h3{
font-size: 18px;
margin: 0;
text-align: center;
color: #F47D31;
}
h4{
color: #F47D31;
background-color: #FFFFFF;
-webkit-box-shadow:2px 2px 20px #888;
-webkit-transform:rotate(-45deg);
-moz-box-shadow: 2px 2px 20px #888;
-moz-transform:rotate(-45deg);
position: absolute;
padding: 0 150px;
top: 50px;
left: -120px;
text-align: center;
}
nav{
display: block;
width:25%;
float:left;
}
nav a:link, nav a:visited{
display:block;
color: #F47D31;
border-bottom: 3px solid #FFFFFF;
padding: 10px;
text-decoration: none;
font-weight: bold;
margin: 5px;
}
nav a:hover{
color: white;
background-color: #F47D31;
}
nav h3{
margin: 15px;
color: white;
}
#container{
background-color: #888888;
}
section{
display: block;
width: 50%;
float:left;
}
article{
background: #eee;
display: block;
margin: 10px;
padding: 10px;
/*
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
*/
border-radius: 10px;
/*-webkit-box-shadow:2px 2px 20px #888;*/
/*-webkit-transform:rotate(-10deg);*/
/*-moz-box-shadow:2px 2px 20px #888;*/
/*-moz-transform:rotate(-10deg);*/
transform:rotate(-10deg);
box-shadow: 2px 2px 20px #888;
}
article header{
border-radius: 10px;
padding: 5px;
}
article footer{
border-radius: 10px;
padding: 5px;
}
article h1{
font-size: 18px;
}
aside {
display: block;
width: 25%;
float: left;
}
aside h3{
margin: 15px;
color: white;
}
aside p{
margin: 15px;
color: white;
font-weight: bold;
font-style: italic;
}
footer{
clear:both;
display: block;
background: #F47D31;
color: #FFFFFF;
text-align: center;
padding: 15px;
}
footer h2{
font-size: 14px;
color: white;
} 2.2 盒子模型
初步感受盒子模型中的padding和margin的区别，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
</head>
<body>
<h2>盒子模型演示</h2>
<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>
这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。 效果如下：
https://img-blog.csdnimg.cn/265d1d963d9e48fa8a4369d7c8f8c064.png
如果我们去掉padding一行：
https://img-blog.csdnimg.cn/5ab58685818045c293e5ef5d88345092.png
效果为：
https://img-blog.csdnimg.cn/542f1446923747429bf7a6cffbe07e6d.png
可以看出，去掉padding一行，灰色部分长宽都缩小了25px。
如果我们去掉margin一行，显示效果：
https://img-blog.csdnimg.cn/c666657510e1482cbb7f2c6d3c440750.png
可以看出，里浏览器页面的25px距离没有了。
由上可以看出，padding的变化决定了盒子内边距的变化，而margin的变化是对比浏览器而决定它的边距变化。
2.3 float浮动
浮动，简单来说就是让我们的元素按照我们希望的排列顺序进行排列，例如图片的任你喜欢的方式排放。
//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>
<link rel="stylesheet" href="./css/html5.css">
</head>
<body>
<img class="fly" src="https://blog.csdn.net/./images/big.jpg" alt="">
<img class="fly" src="https://blog.csdn.net/./images/big.jpg" alt="">
<img class="fly" src="https://blog.csdn.net/./images/big.jpg" alt="">
</body>
</html> 当没有进行浮动时的效果：
https://img-blog.csdnimg.cn/d1e229e7a1734918ab67a14ce495b059.png
添加浮动语句后：
https://img-blog.csdnimg.cn/48638919d2ac482bbad3299f56906511.png
https://img-blog.csdnimg.cn/a2a8757fff6e4f3eaed709a5dd94060a.png
实现了右浮动。
参考链接
参考文档
来源：https://blog.csdn.net/m0_46275263/article/details/125299345
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]