前言

码神也是开学快一个周了，好长时间没有更新了，由于刚来院长让我去打蓝桥杯，感觉也算是一个机会吧，但是前端弄了一半多，还是比较喜欢的，所以说想把前端弄完再重新回到高中刷算法的时光，今天借着大学生心理课的时间来更新一下Html和CSS，感谢大佬们，给我的鼓励！我定不负你们的期望，由于时间问题，话不多说，我们开车吧！

网页的结构

网页的结构，应该算是比较简单的，虽然我没有写过一个正经的网页，目前主流的网页结构是由Html，CSS，js（JavaSprint）写的，大致的结构如下：

HTML

相信大家对HTML都并不陌生，在我映像里初中的时候老师写的第一个网页就是用HTML写的，如今过去好多年了，我也用HTML写网页了，哈哈。
其实吧，通过这几个周的自学下来，我感觉如果不从事前端开发，工作，能认识HTML中的关键字就行了，俗话说的：术业有专攻嘛！

所以说我帮大家整理了，大致有如下的：

常用标签

1.题目： <h1 ——h6>
用英语来记忆的话就是，单词——head，意思是头部的，有几个特点是

标题默认加粗，字号变大
标题一般独自占一行

//用代码来看一下就是这样的
<h1>用代码来看一下就是这样的</h1>

2.段落和换行
由于一般我们不可能一句话，就写完，或者说完，所以又引入了，段落标签，p ,/p不要误会啊，我可不是光会放屁的，这是英语中paragraph是缩写，意思是段落，作用就是：给HTML文档分段
特点就是：

可以根据浏览器的窗口大小，自动换行
段落和段落之间保持一定的空隙

俩个盒子

有朋友可能要说了，怎么是个盒子？实际上这是我自己瞎写的，哈哈，这俩个盒子是HTML中的《div》《/div》，《span》《/span》标签。
用英文来解释的话是，div——division，表示分割分区，span意思是跨度，跨距
有一点的区别

div在h5中一行只能放一个，又称为大盒子
span可以放多个，所以可以称为小盒子

CSS

我不知道你们有没有见过化妆之前和化妆之后的女生，反正我没有见过，不过这可能真的是一个看颜值的时代，我们班就有一个，因为化妆之后比较哈皮的女生，因为这个当上了我们班的负责人，可以说是班助代理人吧，这当然也可能是我至今单身的原因了，唉，不说了，一会又要流泪了。

可以说css就是化妆品，而html是女生，相信我说到这里**屏幕前的彦祖，**已经知道css是社么了吧，没错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>Document</title><style>.red {width: 100px;height: 100px;background-color: red;}.pink {width: 100px;height: 100px;background-color: pink;}.green {width: 100px;height: 100px;background-color: green;}</style>
</head><body><div class="red"></div><div class="green"></div><div class="pink"></div><!-- <div></div>就是一个盒子 -->
</body></html>

style中的都叫选择器，而在body中调用，class=”red“，我们又讲其称为，调用选择器，.red，为选择器声明
其中选择器又分为，许多种，由于这篇文章并不是html和css全解所以我就不在赘述了，有需要的朋友们可以看一下head frist html css这本书我感觉讲的不错，挺适合入门学习的。

标签选择器

这个就是，用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><style>p {color: pink;}</style>
</head><body><p>gaizao</p><p>jj</p>
</body></html>

id选择器

不知道为什么就是控制不住的想写，，如果说按照名字和身份证来看id和class的话，我感觉就很可以，就比如说我叫码神，你也叫码神，那么我们就重名了，但是我的id：秋名山码神，而你是：华山码神，这样我们就区分开了，所以说id和class的区别就是

id定义一次只能调用一次，而class定义一次可以调用多次

用代码实现就是

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>09-id选择器</title><style>#identity1{color: red;}#identity2{color: green;}#identity3{color: blue;}#identity4{color: yellow;}</style>
</head>
<body>
<p id="identity1">迟到毁一生</p>
<p id="identity2">早退穷三代</p>
<p id="identity3">按时上下班</p>
<p id="identity4">必成高富帅</p>
</body>
</html>

通配符

有没有让我所有的类，都进行改变的？答案是有。通配符，*就可以实现

 <style>/* 样式点定义 */*{color: red;}</style>

总结：

字体

比较多，学了几个周，给我的感觉就是比较多，记得东西不能说少，
先看吧，

color：颜色
text-align：对齐
text-indent：文本缩进
text-decoration: 文本修饰
line-height：行间距
decoration规定添加到文本的修饰
none没有
underline下划线
overline上画线
line-through删除线

最后

由于这只是我自己的一篇简单的看法文章，所以有许多没有讲到的地方，如果想要系统的学习，还是希望大家去看我上面推荐的书或者去W3school网站中系统的学习，开学的时光感觉没有以前的冲劲了，但是我还会努力的，希望你们和我一样一起加油，提升自己的技术，将来赚大钱，进大厂！

前端三件套——我看HTML及CSS相关推荐

前端三件套（二）：CSS
目录标题一.认识CSS 1.什么是CSS 2.CSS发展史 3.快速入门二.导入CSS的四种方式三.选择器 1.基本选择器(重要) 2.层次选择器 3.结构伪类选择器(了解即可) 4.属性选择器 ...
javaWeb学习笔记1—前端三件套 HTML CSS JavaScript
学习视频地址 javaWeb学习笔记-前端三件套 HTML CSS JavaScript 1.字体标签 2. 字符实体 3.标题标签 4.超链接 5.列表标签 6. img标签路径 7.表格 8.i ...
web前端面试题整理(vue、uni-app、前端三件套、web基础)
Vue 对mvvm的理解 mvvm分为model.view.viewmodel三者 model代表数据模型 view代表视图 viewmodel代表连接视图和模型,实现了vue数据的双向绑定 view ...
利用python和前端三件套来一场线上烟花秀
目录 python烟花秀效果展示: 全部代码如下: 前端三件套(JS.CSS.HTML)的烟花秀 HTML部分:定义网页内容 CSS部分:描述网页布局 JS部分:控制网页行为 End ✨✨✨✨✨✨✨ ...
前端性能优化知识，包括css和js
作者:野次链接:http://www.zhihu.com/question/33032042/answer/95948831 来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...
为什么 Web 前端开发不抛弃 HTML 和 CSS，用纯 JavaScript 开发？
从分析介绍来看,题主的主要工作内容是还是从事游戏方向的工作,前端里面的游戏开发大部分应用在canvas绘图里面,应用前端里面的html结构和css样式是比较低:那么咱们就需要从多角度考虑考虑为什么we ...
❤520情人节陪她一起看流星雨~html+css+javascript制作流星雨3D相册(含音乐)
❉ 520情人节陪她一起看流星雨~html+css+javascript流星雨3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹 ...
光速学会前端三件套之html
光速学会前端三件套-html 我们首先需要明白的是没有什么东西是简单容易得到的,光速学会不代表不劳而获,多加练习才是最大的捷径,所以希望兄弟们要多加练习.(前端的东西有很多,我们只需要过一遍,不用刻意 ...
前端三件套之JS速成
目录什么是JS JS的编码方式内部样式外部样式行内样式一:JS的数据类型及定义二:JS的输入与输出 1) 输入 2) 输出三:运算操作符 1)基础操作符 2)比较运算符 3)逻辑运算符 ...

前端三件套——我看HTML及CSS

前言