HTML
超文本标记语言
属性：可以通过属性来设置标签，可以在开始标签中添加属性，一个标签可以设置多个属性，之间用 空格隔开
声明网页的版本：<！DOCTYPE html> 不写可能导致网页无法显示
标签
1.注释标签：<!-- -->
2.标题标签：<h1></h1>-<h6></h6>从大到小
3.段落标签：<p></p>
4.换行标签：<br/>
5.水平线标签：<hr/>
6.图片标签：<img/>
-----图片标签中的属性：
- src：图片的路径
- alt：图片不能显示时的描述信息
- width：宽度
- height：高度
- …/返回上一级目录
7.超链接标签：<a></a>
-----超链接标签中的属性
- href：从一个页面跳转的另一个页面，如果没确定可以用"#"代替
- target:跳转的界面-_self：在当前窗口(默认) _blank：在新的窗口
8.版权标签：<p>© CopyRight By xxxx网 </p>
9.内联框架：<frame>
10.居中标签：<center></center>
CSS
Cascading Style Sheet 层叠样式表
是一组样式设置规则，用于控制页面的外观样式
1.为什么使用CSS
- 实现内容与样式的分离，便于团队开发
- 样式复用，便于网站的后期维护
- 页面的精确控制，让页面更精美
2.CSS语法
<html>
<head>
<meat charset = "utf-8">
<title></title>
</head>
<body>
<style>
选择器{
属性名：属性值；
属性名：属性值；
}
</style>
</body>
</html>
将声明块中的样式应用到选择器的元素上面
也可以将样式表编写到外部css文件中，然后通过link标签将外部css文件导入到当前页面，使结构与表现分离，利用浏览器的缓存，加快用户访问的速度
<link rel = "stylesheet" type = "text/css" href = "xxx.css"/>
3.块元素与内联元素
3.1块元素
<div>我是块元素</div>
- 块元素独占一行，用来进行页面布局
<p>、<h1-h6>都是块元素
3.2内联元素
<span>我是内联元素</span>
- 内联元素只占自身大小
<a>是内联元素
块元素可以包裹内联元素，但是内联元素不能包裹块元素<a>元素可以包含任何元素，除了它自身
<p>元素也不能包含它自身。
4.常用的选择器
元素选择器：选择页面中的指定元素
/*为页面中的p元素设置背景为黄色*/
<style>
p{
background-color:yellow;
}
</style>
id选择器：通过id属性选择唯一的元素(不可重复)
<style>
#id{
background-color:yellow;
}
</style>
类选择器：为元素设置class属性(可重复)
<style>
.p2{
background:yellow;
}
</style>
分组选择器:同时选中多个选择器对应的元素
<style>
元素1，元素2，元素n{
background:yellow;
}
</style>
通配选择器：选择页面中的所有元素
<style>
*{
background:yellow;
}
</style>
复合选择器：同时满足多个选择器 元素
<style>
span.p2{
background:yellow;
}
</style>
后代元素选择器：为父元素中的子元素设置属性
子元素选择器:为指定父元素的指定子元素设置属性
<style>
/*
为div中的span设置一个颜色
*/
#d1 span{
color: aquamarine;
}
/*
选中id为d1的div中的p元素中的span元素
*/
#d1 p span{
font-size: 100px;
}
/*
为div的子元素span设置一个背景元素
*/
div > span {
background-color: blue;
}
</style>
伪类选择器：通过不同状态来显示不同样式
<style>
/*
link表示没有访问时的颜色
*/
a:link{
color: blueviolet;
}
/*
visited：表示访问过的字体颜色，只能设置字体颜色，涉及到隐私
*/
a:visited{
color: red;
}
/*
hover：表示鼠标停留时的颜色
*/
a:hover{
color: chartreuse;
}
/*
active:表示鼠标点击时的颜色
*/
a:active{
background-color: brown;
}
/*
hover / active 也可以为其他元素设置
*/
/*
focus:文本框获取焦点以后，修改背景颜色
*/
input:focus{
background-color: darkgreen;
}
/*
selection：为p标签选中的内容使用样式
*/
p::selection{
background-color: blue;
}
/*
::first-letter：为p标签的第一个字符使用样式
*/
p::first-letter{
color: blueviolet;
}
/*
::first-line：为p标签的第一行使用样式
*/
p::first-line{
background-color: wheat;
}
/*
::before在元素内容的最前面添加内容，需要配合content属性使用
*/
p::before{
content: "我会出现在最前面";
color: blue;
}
/*
::after在元素内容的最后面添加内容，需要配合content属性使用
*/
p::after{
content: "我会出现在段落的最后面";
color: blue;
}
</style>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
