1.页面跳转
相对路径内创建一个html后缀文件.将其作为网页引用.然后再创建一个跳转html文件.如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="斗破苍穹.html">玄幻小说</a>
</body>
</html>
2.标签
1.列表标签
ul 无序列表
属性type:disc(默认)square(实心方形)circle(空心圆)
one(不显示样式)
<!--设置不显示任何样式-->
<ul type="none">
<li>手机</li>
<li>电脑</li>
<li>其他电器</li>
</ul>
<!--设置显示实心方块-->
<ul type="square">
<li>旧电脑</li>
<li>旧家具</li>
<li>旧手机</li>
</ul>
<!--设置显示空心圆-->
<ul type="circle">
<li>旧电脑</li>
<li>旧家具</li>
<li>旧手机</li>
</ul>
<!--默认显示实心圆 disc-->
<ul>
<li>旧电脑</li>
<li>旧家具</li>
<li>旧手机</li>
</ul>
ol 有序列表
属性type:1(默认)a(小写字母)A(大写字母)I(罗马数字)
属性start:开始位置
<!--默认显示1,2,3序号,可以指定开始的值-->
<ol>
<li>长头发</li>
<li>旧家电</li>
<li>破剪刀</li>
</ol>
<!--设置根据a,b,c显示,可以指定开始的值-->
<ol type="a" start="2">
<li>长头发</li>
<li>旧家电</li>
<li>破剪刀</li>
</ol>
<!--设置根据A,B,C显示,可以指定开始的值-->
<ol type="A" start="26">
<li>长头发</li>
<li>旧家电</li>
<li>破剪刀</li>
</ol>
<!--设置根据罗马数字,可以指定开始的值-->
<ol type="I">
<li>长头发</li>
<li>旧家电</li>
<li>破剪刀</li>
</ol>
dl 定义列表
<dl>
<dt>title</dt> <!--dt表示标题-->
<dd>alex</dd> <!--dd表示内容-->
<dd>wusir</dd>
<dd>太白</dd>
<dt>title</dt>
<dd>alex</dd>
<dd>wusir</dd>
<dd>太白</dd>
</dl>
2.排版标签
p : 段落标签,会自动在段落上下加上空白来分开段落
p标签是一个文本级标签,内部不可以再嵌套块级元素
div:什么样式都没有的块级标签-- 用的最多
hr:单闭合标签,显示一条分割线
center:居中
3.表格标签
标准表格:thead tbody的内容
tr表示每一行
th表示thead中的每一个元素
td表示tbody中的每一个元素
不写thead只写tbody 就没有表头样式
4.表单标签
form : 表单标签
action : 提交到的地址,把表单中的数据提交到对应的地址上
input :
type种类:text,password,radio,checkbox,submit
namevalue :把数据提交到后台的,提交的是input标签的name值和value值
对于选择框 : checked属性表示默认选中
readonly :对于输入框的禁止修改 可以提交
disabled :对于所有元素不能修改 也不能提交
button :
input的submit类型和button放在form表单中都表示提交
input的其他type:
reset hidden button file date
注意: 如果是file类型的input标签需要修改表单的enctype类型Multipart/form-data
lable:
for属性,点击lable中的内容,让for标示的id对应的元素获得焦点
文本框:
select选择框:
multiple:设置多选框
size:选择框显示大小
option选项:
selected:默认选中
3.css样式
1.样式的引入
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入方式二:内接引入-->
<!--<style>-->
<!--div{-->
<!--color: blue;-->
<!--}-->
<!--</style>-->
<!--引入方式三: 外接样式-链接式 :link导入一个连接 重点重点重点*****-->
<!--<link rel="stylesheet" href="index.css">-->
<!--引入方式四: 外接样式-导入式 :style导入一个@import url('路径')-->
<!--<style>-->
<!--@import url("index.css");-->
<!--</style>-->
</head>
<body>
<!--引入方式一 :行内引入-->
<!--<div style="color:red">wahaha</div>-->
<body>
2.最简单的基本样式
<style>
div{
color: red;
200px;
height: 200px;
background-color: yellow;
/*background-color: yellow;* 注释css样式/
}
</style>
3.选择器
1.基本选择器
标签类id通用选择器:
标签名直接选择标签,#选择id, .表示class,*表示所有标签
<style>
span{
color:green
}
div{
color: #c4db69
}
a{
color: red;
}
</style>
1.样式的继承 : 子元素会继承父元素的样式(但是a标签除外)
2.要想对a标签进行样式设置,必须直接找到a标签的位置,对a单独设置
3.样式之间的重叠部分是有优先级的,继承下来的样式的优先级为0(最低)
#div1{
color: cornflowerblue;
}
.sp{
color: orangered;
}
通用选择器:所有的标签都会被选中
*{
color: yellow;
}
2.高级选择器
后代子代
后代选择器:找的是子孙
子代选择器:只找子代
后代选择器:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div span{
color: tomato;
}
</style>
</head>
<body>
<div>
我是div标签的content
<span>西红柿色1</span>
<p>
在div-p标签中
<span>西红柿色2</span>
</p>
</div>
<span>我只是一个单纯的span标签</span>
</body>
子代选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div>span{
color: tomato;
}
</style>
</head>
<body>
<div>
我是div标签的content
<span>西红柿色1</span>
<p>
在div-p标签中
<span>西红柿色2</span>
</p>
</div>
<span>我只是一个单纯的span标签</span>
</body>
毗邻+弟弟~
<style>
span+a{
color: tomato;
}
</style>
<div>
<a>我是a0标签</a>
<span>span标签</span>
<a>我是a1标签</a> <!--变色-->
<a>我是a2标签</a>
</div>
<style>
span~a{
color: tomato;
}
</style>
<div>
<a>我是a0标签</a>
<span>span标签</span>
<a>我是a1标签</a> <!--变色-->
<a>我是a2标签</a> <!--变色-->
</div>
属性选择器 [属性]/[属性='值']
<style>
/*a[href]{*/
/*color: green;*/
/*}*/
/*a[href='http://www.taobao.com']{*/
/*color: lightpink;*/
/*}*/
input[type='text']{
background-color: lightblue;
}
</style>
<body>
<div>
<a href="http://www.taobao.com">我是a0标签</a>
<span>span标签</span>
<a href="http://www.jd.com">我是a1标签</a>
<a href="http://www.mi.com">我是a2标签</a>
<a>没有href属性</a>
</div>
<input type="text">
<input type="password">
</body>
并集,交集
<style>
ul,ol,span{
background-color: gainsboro;
}
</style>
<body>
<ul>
<li>u-first</li>
</ul>
<ol>
<li>o-first</li>
</ol>
</body>
交集选择器
<style>
div.box1.box2{
background-color: red;
200px;
height: 200px;
}
</style>
<body>
<div class="box1 box2">box1box2</div>
<div class="box1">box1</div>
<div>aaa</div>
<span class="box1">span标签</span>
</body>
伪类选择器
a : link visited active
input: focus
通用: hover
<style>
a:link{
color:tomato;
}
a:visited{
color: gray;
}
a:active{
color: green;
}
input:focus{
background-color: aquamarine;
}
div{
100px;
height: 100px;
background-color: lightgray;
}
div:hover{
background-color: pink;
}
</style>
<body>
<a href="http://www.jd.com">京东</a>
<a href="http://www.xiaohuar.com">校花</a>
<input type="text">
<div></div>
</body>
伪元素选择器
first-letter
before
after : *****
<style>
p:first-letter{
color: green;
}
p:before{
content: '**';
/*color: pink;*/
}
p:after{
content: '.....';
color: lightblue;
}
</style>
<body>
<div>春江水暖鸭先知</div>
</body>