标签
结构：头 、 体
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
页面标签
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>页面标题</title>
</head>
<body>
<h1>标题标签</h1>
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>
<p>段落标签</p>
<!-- 换行-->
<br />
我是<strong>加粗</strong>的文字
我是<b>加粗</b>的文字
我是<em>倾斜</em>的文字
我是<i>倾斜</i>的文字
我是<del>删除线</del>
我是<s>删除线</s>
我是<ins>下划线</ins>
我是<u>下划线</u>
<div>我是一个div标签我一个人单独占一行</div>
<div>我是一个div标签我一个人单独占一行</div>
<span>百度</span>
<span>新浪</span>
<span>搜狐</span>
<br/>
<img src="https://imgccl.oss-cn-shenzhen.aliyuncs.com/typora/20220522155207.png" alt="替换文本 图像显示不出来的时候用文字替换" title="图像标签" border="5" width="640" height="560">
<h4>超链接</h4>
<h4>1.外部链接</h4>
<a href="http://www.qq.com" target="_blank"> 腾讯</a>
target 打开窗口的方式 默认的值是 _self 当前窗口打开页面 _blank 新窗口打开页面
<a href="http://www.itcast.cn" target="_blank">传智播客</a>
<h4>2.内部链接: 网站内部页面之间的相互链接</h4>
<a href="../gongsijianjie.html" target="_blank">公司简介</a>
<h4>3.空链接:#</h4>
<a href="#">公司地址</a>
<h4>4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
<a href="https://imgccl.oss-cn-shenzhen.aliyuncs.com/typora/20220522155207.png">下载文件</a>
<h4>5.网页元素的链接</h4>
<a href="http://www.baidu.com"> <img src="https://imgccl.oss-cn-shenzhen.aliyuncs.com/typora/20220522155207.png" width="640" height="560"/></a>
</body>
</html>
表格标签
CSS
复合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复合选择器</title>
<style>
/*后代选择器*/
ol li{
color: pink;
}
ul li a{
color: brown;
}
.nav li a{
color: khaki;
}
/*子元素选择器*/
.nac>a{
color: olivedrab;
}
/*并集选择器*/
h1,
strong,
.pig li{
color: #1c036c;
}
/*链接伪类选择器*/
/* 1.未访问的链接 a:link 把没有点击过的(访问过的)链接选出来 */
a:link{
color: lawngreen;
text-decoration: none;
}
/*2. a:visited 选择点击过的(访问过的)链接 */
a:visited{
color: orange;
}
/*3. a:hover 选择鼠标经过的那个链接 */
a:hover{
color: skyblue;
}
/* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
a:active{
color: green;
}
</style>
</head>
<body>
<ol>
<li>后代选择器</li>
</ol>
<ul>
<li>无后代选择器</li>
<li><a>后代选择器</a></li>
</ul>
<ul class="nav">
<li><a>后代选择器</a></li>
</ul>
<div class="nac">
<a href="#">子元素选择器</a>
<p>
<a href="#">孙元素</a>
</p>
</div>
<h1>并集选择器</h1>
<strong>并集选择器</strong>
<ul class="pig">
<li>并集选择器</li>
<li>并集选择器</li>
</ul>
<a href="#">链接选择器</a>
<a href="http://www.xxxxxxxx.com">未知的网站</a>
</body>
</html>
focus选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*把获得光标的input表单元素选取出来*/
input:focus{
background-color: pink;
color: red;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
</html>
显示模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示模式</title>
<style>
/*块级元素*/
div {
height: 200px;
background-color: pink;
/* 把 div 块级元素转换为行内元素 */
display: inline;
}
/*行级元素*/
span{
width: 100px;
height: 100px;
background-color: hotpink;
display: inline-block;
}
a{
width: 100px;
height: 100px;
background-color: #2319dc;
display: block;
}
input{
width: 249px;
height: 35px;
}
strong{
width: 150px;
height: 50px;
background-color: pink;
/* 把行内元素 strong 转换为 块级元素 */
display: block;
}
</style>
</head>
<body>
<div>块级元素</div>
<div>块级元素</div>
中间
<P>
<div>
块级元素
</div>
</P>
<span>行级元素</span> <span>行级元素</span>
<strong>行级元素</strong>
<span>行级元素</span>
<a href="http://www.baidu.com">
a
<a href="#">b</a>
</a>
<input type="text">
<input type="text">
</body>
</html>
背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景</title>
<style>
div {
width: 300px;
height: 300px;
/* background-color: transparent; 透明的 清澈的 */
/*background-color: red;*/
/*背景颜色*/
background-color: pink;
/*背景图片*/
background-image: url("https://imgccl.oss-cn-shenzhen.aliyuncs.com/typora/image-20220608224625755.png");
/* 1.背景图片不平铺 */
background-repeat: no-repeat;
/* 2.默认的情况下,背景图片是平铺的 */
/* background-repeat: repeat; */
/* 3. 沿着x轴平铺 */
/* background-repeat: repeat-x; */
/* 4. 沿着Y轴平铺 */
/*background-repeat: repeat-y;*/
/* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */
/* background-position: 方位名词; */
/* background-position: center top; */
/* background-position: right center; */
/* 如果是方位名词 right center 和 center right 效果是等价的 跟顺序没有关系 */
/* background-position: center right; */
/* 此时 水平一定是靠右侧对齐 第二个参数省略 y 轴是 垂直居中显示的 */
/* background-position: right; */
/* 此时 第一个参数一定是 top y轴 顶部对齐 第二个参数省略x 轴是 水平居中显示的 */
/*background-position: top;*/
/* 20px 50px; x轴一定是 20 y轴一定是 50 */
/* background-position: 20px 50px;*/
/*background-position: 50px 20px;*/
/*background-position: 20px;*/
/* 20px center 一定是x 为 20 y 是 center 等价于 background-position: 20px */
/* background-position: 20px center; */
/* 水平是居中对齐 垂直是 20 */
background-position: center 20px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
