内联框架:
超链接:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>超链接<title>
</head>
<body>
<h1>我是demo12</h1>
<a href="http://www.baidu.com">我是一个超链接</a>
</body>
</html>
CSS的编写位置:
<!DOCTYPE html>
<html>
<head>
<meta charest="utf-8" />
<title>CSS</title>
<style type="text/css">
p{
color:red;
font-size:40px;
</style>
</head>
<body>
<p style="color:red;font-size:40px;">111111111111</p>
<p>11111111111</p>
<p>111111111111</p>
<p>111111111111111</p>
<p>1111111111111111111111111</p>
</body>
</html>
CSS语法:
<!DOCTYPE html>
<html>
<head>
<meta charest="utf-8" />
<title>CSS语法</title>
<style type="text/css">
/*
选择器 声明块
*/
p{
color:red;
font-size:40px;
</style>
</head>
<body>
<p>哈答复客户的发放 是饭卡上的发生flask会发生
</p>
</body>
</html>
开发工具:
TAB:可以补全代码
ctrl+回车:不在行尾也可以新建一行
ctrl+shlft+B:复制一行
ctrl+shlft+k:删除一行
CTRL+alt+上(下):多行编辑
块和内联:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charest="utf-8" />
<title>块和内联</title>
</style>
</head>
<body>
<div style="background-color: red; width: 200px;">
我是一个div
</div>
<div style="background-color: yellow; width: 200px;">
我是一个div
</div>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
</html>
常用选择器:
<!DOCTYPE html>
<html>
<head>
<meta charest="utf-8" />
<title>元素选择器</title>
<style type="text/css">
p{
color: red;
}
</style>
</head>
<body>
<h1>好诗</h1>
<p>1234567</p>
<p>2345678</p>
<p>3456789</p>
<p>4567890</p>
<p>5678901</p>
<p>6789012</p>
</body>
</html>
子_后代元素选择器:
<!DOCTYPE html>
<html lnag="en">
<head>
<meta charest="utf-8" />
<title>子元素和后代元素选择器</title>
<style type="text/css">
span{
color:green;
}
</style>
</head>
<body>
<div>
<span>我是div标签的span</span>
<p><span>我是p标签的span<span></p>
</div>
<span>我是body标签中的span</span>
</body>
</html>
伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charest="utf-8" />
<title>伪类选择器</title>
<style type="text/css">
a{
color: red;
}
</style>
</head>
<body>
<a href="http://www.baidy.com">访问过的连接</a>
<br /><br />
<a href="http://www.baidu123456.com">没访问过的连接</a>
</body>
</html>
伪元素