HTML常用标签和CSS牢记

1  网页中可以包含 3 中语言：

HTML：负责网页展示的内容
CSS：负责网页的展示效果
Javascript：负责和用户进行交互

2  使用 css 要记住引入

<!-- 两个属性之间必须有空格进行隔开 -->
<link rel="stylesheet" href="css/index.css">

css 设置样式效果是作用在标签上的，
我们需要针对标签设置展示效果
针对外层标签设置的效果，内层标签也会生效

/* 颜色可以直接使用单词表示 */
/* 通常使用 # + 16 进制数字表示颜色 */
/*
ffffff 划分为 3 部分，每部分有两个数字 00 - ff （0 - 255）
r（red）前两位
g（green）中间两位
b（blue）后两位
*/

3  为标签或者其他的块进行起名字区分

为一个标签起一个名字，有两种方式：
class 属性：起的名字可以和其它标签名字相同   class用 . 来对其进行样式编辑
id 属性：起的名字尽量保持独一无二   id用 # 来对其进行样式编辑

例如:

 

<p class="email">
2332197414@qq.com
</p>

.email:BEFORE {
content: "邮箱：";
}

 

<p id="phone">
13838388277
</p>

#phone:BEFORE {
content: "电话：";
}

4  

/* 对图片的大小进行设置，会进行等比例的缩放 */
/* 可以设置具体数值，也可以设置百分比 */
width: 40%;

5  

<script type="text/javascript">
// JS 中的注释格式
// 这个标签内部可以写一些 JS 代码，和用户进行交互

// 找到网页中 id="button" 的标签
var button = document.getElementById("button");

// 当点击 button 标签的时候，执行一个方法
button.onclick = function() {

// 弹出提示框，展示一段信息
alert("欢迎来学习");
}

 

/* 当鼠标移动到 class="content" 标签上的时候，会触发这个 css 效果 */
.content:HOVER {

/* 设置旋转动画，20deg 旋转的角度 */
transform: rotate(20deg);

/* 开启动画， 2s 动画时间，ease-in：执行方式 */
transition: transform 2s ease-in;
}

</script>