第一章：网页介绍
1.网页结构
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页结构title>
head>
<body>
body>
html>
2.网页的基本语法介绍
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本结构和基本标签title>
head>
<body>
<h1>计算机科学与技术学院h1>
body>
html>
3.基本语法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本语法title>
head>
<body>
<h1>html的语法h1><br>
<input type="password">
<br>
<input type="text" name="usename">
<hr>
<input type="radio" checked="checked">
body>
html>
4.元素间的关系
元素间的关系
5.常用标签
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用的标签title>
head>
<body>
<h1>一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
<h4>四级标题h4>
<h5>五级标题h5>
<h6>六级标题h6>
<p>我是一个段落p>
<br>
<hr>
a<v
b>p
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用标签2title>
head>
<body>
<ol>
<li>计算机科学与技术li>
<li>软件工程li>
ol>
<hr>
<ul>
<li>计算机科学与技术li>
<li>软件工程li>
<li>网络工程li>
ul>
<hr>
<dl>
<dt>计算机科学与技术学院dt>
<dd>培养计算机科学dd>
dl>
body>
html>
6.语义化标签
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>语义化标签title>
head>
<body>
<header>头部·内容header>
<main>主要内容main>
<footer>底部内容footer>
<article>表示文档中独立的区块article>
<nav>导航nav>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签title>
head>
<body>
<pre>
金卡的家伙肯定会拉客户的
今年的开始的健康我会尽快的
的思考的建行卡我回到家温哥华
华为手机的国际化为广大好几万规范化的服务各行业
大三来考就打开了时间后端口号为数据库
pre>
<pre>
a>29
b<90
a==90
pre>
<code>
alert("你好")
code>
body>
html>
7.图片标签
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<img src="./img/2.png" alt="梅西">
body>
html>
8.图片格式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
body>
html>
9.路径问题
使用路径通常有两种：
1，绝对路径
2.相对路径
--相对路径 用来引入我们自己项目内的图片
相对路径需要使用 ./ ../开头
./表示当前目录 ./可以省略不写
../ 表示当前目录的上一级目录
10.超链接
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接title>
head>
<body>
<a href="www.baidu.com" target="_blank">超链接a>
<hr>
<p>护法度数空间hi对符号会计师的疯狂加金额开始就打开p>
<p id="p1">聚划算读书的进度计划发生分时尽快回复p>
<a href="#">回到顶部a>
<a href="#p1">回到p1a>
body>
html>
11.内联框架
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架title>
head>
<body>
<iframe src="./8.图片标签.html" frameborder="0" width="300" height="300">iframe>
<hr>
body>
html>
12.元素嵌套规则
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的嵌套规则title>
head>
<body>
<main>main>
<nav>nav>
<section>section>
<hr>
<div>
<span>我是spanspan>
<button>点我button>
div>
body>
html>
替换元素
img iframe
第二章：CSS介绍
1.css概述
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css介绍title>
<style>
#root{
color: red;
font-size: 40px;
}
h2{
}
style>
head>
<body>
<p style="background-color: #FCBF49; color: rgb(128,278,212);font-size: 120px">计算机科学与技术学院p>
<h2>计算机科学与技术学院h2>
<hr>
<h1 id="root">计算机科学与技术学院 欢迎你！h1>
body>
html>
内部样式表 只能在当前页面中生效 无法在不同的页面中使用
因此使用外部样式：
外部样式表 将css样式编写到外部文件中
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css基本语法title>
<link rel="stylesheet" href="./CSSstyle/1.css">
head>
<body>
<p>计算机科学与技术学院p>
<hr>
<p>计算机科学与技术学院p>
body>
html>
p{
color: rebeccapurple;
font-size: 20px;
background-color: #EAE2B7;
}
2.css语法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css语法title>
<style>
p{
color: orange;
font-size: 20px;
}
div{
background-color: #EAE2B7;
}
style>
head>
<body>
<div style="font-size: 21px;color: #EAE2B7">
你好计算机科学技术学院
div>
<p>计算机科学与技术学院p>
body>
html>
3.基本选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器title>
<style>
p{
color: red;
font-size: 100px;
}
#h{
color: tomato;
}
#l{
color: #2c3e50;
}
.pot{
color: orange;
font-size: 120px;
}
*{
background-color: #D62828;
}
style>
head>
<body>
<p>
计算机科学与技术学院
p>
<hr>
<h1 id="h">计算机科学与技术学院h1>
<hr>
<span id="l">计算机科学与技术span>
<hr>
<div class="pot">计算机科学与技术学院div>
body>
html>
4.属性选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器title>
<style>
[title]{
color: #D62828;
}
[title=hello]{
color: fuchsia;
}
style>
head>
<body>
<h1 title="hello">计算机科学与技术学院h1>
<hr>
<div title="CS">
计算机科学与技术学院
div>
<hr>
<span title="job">计算机科学与技术学院span>
<hr>
<h2>计算机科学与技术学院h2>
body>
html>
5.分组和关系选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分组和关系选择器title>
<style>
p,div,h3{
color: #D62828;
}
div> span{
color: #D62828;
font-size: 12px;
}
.box1 span{
color: #D62828;
}
h1+button{
font-size: 80px;
color: yellowgreen;
}
style>
head>
<body>
<p>计算机科学与技术学院p>
<h1>
<button>计算机button>
计算机科学与技术学院h1>
<hr>
<span>计算机科学与技术学院span>
<hr>
<h3 class="box1">
<span>我是spanspan>
计算机科学与技术学院h3>
<hr>
<div>
<span>计算机科学与技术学院span>
div>
<hr>
body>
html>
6.伪类元素选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类元素选择器title>
<style>
a:visited{
color: orange;
}
a:link{
color: olive;
}
a:hover{
color: #FCBF49;
}
style>
head>
<body>
<a href="www.baidu.com" >访问过的a>
<hr>
<a href="www.baidu.com" class="">未访问过的a>
body>
html>
7.结构伪类
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类title>
<style>
#app{
background-color: #FCBF49;
font-size: 50px;
color: #D62828;
height: 300px;
width: 300px;
border: 2px;
}
html{
background-color: #222222;
}
li:first-child{
color: #D62828;
}
li:first-of-type{
color: #FCBF49;
}
li:nth-child(1){
color: orange;
}
li:nth-last-child(1){
color: #D62828;
}
style>
head>
<body>
<div id="app">
计算机科学有技术
div>
<hr>
<div class="box1">div>
<hr>
<div class="box2">
<ul>
<li>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
ul>
div>
<span>span>
body>
html>
8.否定伪类
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>否定伪类title>
<style>
p:not(.p1){
color: #D62828;
}
style>
head>
<body>
<p>计算机科学与技术p>
<p class="p1">计算机科学与技术 软件工程p>
<p>网络工程p>
body>
html>
9.伪元素
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素title>
<style>
div::before{
content: "hello";
color: #D62828;
}
div::after{
content: "你好";
color: #FCBF49;
}
p::first-letter{
font-size: 30px;
}
p::first-line{
}
p::selection{
color: #FCBF49;
}
style>
head>
<body>
<div>
计算机科学与技术
div>
<hr>
<p>结合实际的股份三公经费给大家上来看的发掘和开发和电视机括号看得见回复吃亏是福加括号
预防让他一人分同一人题二与发育发育体验服体验
雇佣更丰富的
p>
body>
html>
10.样式的继承
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式的继承title>
<style>
div{
color: #FCBF49;
}
style>
head>
<body>
<div>
我是div
<p>
<span>你好span>
我是div
p>
div>
body>
html>
11.选择器的权重
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的权重title>
<style>
div{
color: red;
}
.box1{
color: #222222;
}
#box1{
color: #EAE2B7;
}
style>
head>
<body>
<div id="box1" class="box1">计算机科学与技术div>
body>
html>
12.a的伪类
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a的伪类title>
<style>
a:link{
color: red;
}
a:visited{
color: #194B49;
}
a:hover{
color: #FCBF49;
}
a:active{
color: #194B49;
}
style>
head>
<body>
<a href="www.baidu.com">访问过的a>
<hr>
<a href="www.baidu.com">为访问过的a>
body>
html>
13.长度单位
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>长度单位title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: rgb(123,3344,221);
}
.box2{
width: 50%;
height: 30%;
background-color: #FCBF49;
}
.box3{
width: 1em;
height: 1em;
background-color: yellowgreen;
}
.box4{
width: 1rem;
height: 2rem;
background-color: salmon;
}
style>
head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">div>
div>
div>
<hr>
<div class="box4">div>
body>
html>
14.RGB值
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RGB值title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #FCBF49;
}
.box2{
width: 100px;
height: 100px;
background-color: rgb(12,255,2);
}
style>
head>
<body>
<div class="box1">div>
<hr>
<div class="box2">div>
body>
html>
15.rgba与hsl值
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>颜色单位title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: hsla(200,4%,50%.5);
}
style>
head>
<body>
<div class="box1">
a ..一个 <br>
abandon ..放弃 <br>
bale ...能力 <br>
div>
body>
html>
16.十六进制单位
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>十六进制单位title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #00ffee;
}
style>
head>
<body>
<div class="box1">
abandon 放弃
able 有能力的
aboard 上船
div>
body>
html>
第三章：盒子模型
1.盒子模型介绍
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #194B49;
border-width: 10px;
border-color: red;
border-style: solid;
}
style>
head>
<body>
<div class="box1">
abandon 放弃
<hr>
able 有能力的 <br>
border 边框 <br>
abandon 放弃 <br>
aboard 上船 <br>
div>
body>
html>
2.边框
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: fuchsia;
border: 10px red solid;
}
style>
head>
<body>
<div class="box1">
div>
body>
html>
3.内边框
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内边框title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #EAE2B7;
border: 12px salmon double;
padding-top: 100px;
padding-right: 100px;
padding-bottom: 100px;
padding-left: 100px;
}
.inner{
width: 100%;
height: 100%;
background-color: deeppink;
}
style>
head>
<body>
<div class="box1">
abandon 放弃 <br>
<div class="inner">
div>
div>
body>
html>
4.可见框计算
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>可见框大小计算title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #FCBF49;
border: red 4px solid;
padding: 20px ;
box-sizing: content-box;
}
style>
head>
<body>
<div class="box1">
div>
body>
html>
5.盒子外边距
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #194B49;
margin-top: 200px;
margin-left: 100px;
}
.box2{
width: 200px;
height: 200px;
background-color: #00ffee;
margin: 100px 90px 100px 80px;
}
style>
head>
<body>
<div class="box1">
div>
<div class="box2">div>
body>
html>
6.外边距折叠
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距折叠title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #EAE2B7;
margin-bottom: 100px;
}
.box2{
width: 200px;
height: 200px;
background-color: #00ffee;
margin-top: 100px;
}
.box4{
width: 300px;
height: 300px;
background-color: #FCBF49;
padding-top: 100px;
}
.box5{
width:40px ;
height: 50px;
background-color: #194B49;
}
style>
head>
<body>
<hr>
<div class="box4">
<div class="box5">
div>
div>
<hr>
<div class="box1">div>
<div class="box2">div>
body>
html>
7.水平居中
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平居中title>
<style>
.box1{
width: 800px;
height: 400px;
border: 10px red solid;
}
.box2{
width: 20px;
height: 200px;
background-color: #FCBF49;
margin-left: auto;
margin-right: auto;
margin: 0 auto;
}
style>
head>
<body>
<div class="box1">
<div class="box2">div>
div>
body>
html>
8.行内元素
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内元素的盒模型title>
<style>
span{
background-color: #FCBF49;
padding:100px 20px;
border: #FCBF49 solid ;
}
style>
head>
<body>
<span>spanspan>
body>
html>
9.overflow
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflowtitle>
<style>
.box1{
width: 200%;
height: 200px;
background-color: #bfa;
overflow: scroll;
}
.box3{
width: 200px;
height: 400px;
background-color: tomato;
}
style>
head>
<body>
<div class="box1">
<div class="box3">
div>
div>
<div class="box2">div>
body>
html>
10.display和visibility
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
span{
display: inline-block;
width: 200px;
height: 200px;
background-color: #FCBF49;
visibility: hidden;
}
style>
head>
<body>
<span>我是计算机科学与技术span>
<div>计算机div>
body>
html>
第49节课
