```sql
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在HTML中给段落定义样式</title>
<style type = "text/css">
p:first-letter
{
background: red;
font-size: 30px;
}
.a2 , first-line:first-line
{
background-color: blue;
font-size: 66px;
}
em:first-line
{
background-color: deepskyblue;
font-size: 66px;
}
p:before
{
content"welcome 我会出现在元素的最前面";
}
</style>
</head>
<body>
<p>我是p标签我是一个段落标签</p>
<a href = "#">我是一个a标签我用来创建超链接</a><!
<p class ="a2">我也是一个p标签sed ’s/^\( *\)\1\(.*\)/\1\2\1/g’ 难受 难受 难受
一步步解析: sed ’s/^\( *\)\1\(.*\)/\1\2\1/g’ ==》 是类似于 替换 sed 's/旧的东西 /新的东西 /g'的东西
旧的: ^\( *\)\1\(.*\) 新的: \1\2\1/在这里的点是一个占位符 \( *\)这个东西就是一个正则表达式它的*表示的是占位符 表示空格出现0次到多次
规则\(xxx\)里面的东西做成一个区域,他的内容可以用\1来代替\(xxx\)==>该东西就是一个区域其他的内容可以用\1来进行代替
</p>
<em>我是em我是一个小的段落的标签: seq 20 生成20个数 从一到20 | 管道传递 xargs -i 一次次的传递 bash -c 将代码一次次的执行 “”双引号里面的东西看为一个整体
echo {} | 返回来的东西在屏幕上 替换将行头的东西替换成20-1 到第n次就是20-n 每次在屏幕上回车将a呈现在屏幕上 | 管道 bc 计算器的指令进行计算操作
| awk ’{system(\"seq \"\$1);}’ | $1就是awk中第一列的东西, 所以awk执行了一次,就是seq 5,也就是要生成的空格的数目(讲的大概就是生成的空格)
xargs -i echo ’ ’传递来的东西但是传递来的空格有很多所以我们又用到了 echo ‘空格‘(就是将传递来的单元格显示出来一行的意思)| 管道 tr ’\n’ ’ ’;多行变一行
seq {} | xargs -i echo a | 前面的东西传递过来 xargs -i 一次次的传递 回车将a显示在屏幕上 tr ’\n’ ’ ’;多行变一行 echo " | sed ’s/^\( *\)\1\(.*\)/\1\2\1/g’
第三小步 对它进行均分
</em>
<!--在php中的before标签和after标签 before表示在元素的最前面
after表示在元素的最后面
在一般的情况下before标签一般会和content样式一起使用通过content向before或after的位置添加一些内容
-->
<p>我是一个小的段落标签</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我们现在来讲关于选择器的知识</title>
<style type="text/css">
#p1{
background-color: aquamarine;
font-size:30px;
}
#p2{
color:#7FFFD4;
}
.c3{
color:yellow;
}
#a1 ,.a2 {
font-size: 30px;
}
*{
color:burlywood;
}
div > span {
background-color: yellow;
}
input :focus {
color: yellow;
}
a:link{
color: black;
}
a:hover{
color: darkred;
}
a:active{
background-color: blue;
}
a:visited{
color: deeppink;
}
</style>
</head>
<body>
在选择器中我们有id 和 class 。。
首先我们来讲id 他的格式是 #id {}
class是 .class{} 选择器和声明块与id选择器不同的是class选择器可以重复拥有相同属性值的元素而id选择器只能定义一个不可重复
<p id="p1">我是一个p标签我来给你们演示一下id</p>
<p id ="p2">明月几时有,把酒问青天</p>
<a class ="c3" href ="
<em class = "c3">我是一个小的段落标签</em><br />
<hr class = "c3"/>
<img src = "picture/捕获2.PNG" width ="60px" class = "c3"/>
<!
我们说它是一组元素
语法 选择器 1,选择器2, 选择器n {
声明块
}
<p id = "a1">whgherwghewnrwrejghowag</p>
<p class ="a2">hghoeerohit</p>
:作用可以同时选中满足多个选择器的元素
语法: 语法 选择器 1,选择器2, 选择器n {
声明块
}
<!
在css中我们使用内联框架可以引入一个外部的页面
在css中我们使用iframe来创建一个内联框架
src 指向一个外部页面的路径可以使用相对路径
width 为内联框架设置一个宽度 height为内联框架设置一个高度
name 可以为内联框架指定一个name属性
<iframe src ="css.html" width ="90px" height ="90px" name ="myself"></iframe>
<embed src =""></embed>
<!
子元素被父元素包含的元素
祖先元素直接或间接包含后代元素的元素父元素也是祖先元素
后代元素被父元素或被祖先元素包含的元素
<div>我是个块元素
<span>我是一个span元素我是div元素的子元素div是我的父元素和祖先元素
</span>
<p><span>我是span是p中的span</span></p>
</div>
<pan>我是body中的span元素</pan>
<!
作者:offline
时间:2020-05-17
描述:
给css中的链接定义样式
4中:
正常的连接 a:link
访问过的连接 a :visited(只能定义颜色)
鼠标滑过的连接 a:hover
正在点击的连接 a: active
其他:
获取焦点 :focus
指定的元素前: before
指定的元素后: after
选中的元素 ::selection
<a href="http://www.baidu.com">baidu</a>
<!
可以使用::selection伪类
但是注意在火狐中这个伪类要采用另一种方式进行编写
给HTML中的段落定义样式
first : letter首字母
first : line 首行
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type = "text/css">
span{
background-color: red;
font-style: oblique;
font-weight: 900;
}
p{
font-variant: small-caps;
}
</style>
</head>
<body>
<p style = "font-size: 30px;font-family: serif;">我是衬线字体</p>
<p style = "font-size: 30px;font-family: sans-serif;">我是非衬线字体</p>
<p style = "font-size: 30px;font-family: monospace;">我是等宽字体</p>
<p style = "font-size: 30px;font-family: cursive;">我是草书字体</p>
<p style = "font-size: 30px;font-family:fantasy;">我是虚幻字体</p>
<!
作者:offline
时间:2020-05-24
描述:在css中设置文字的斜体使用 font-style来设置文字的斜体
可选值:
normal 默认值 文字正常显示
italic 文字以斜体显示
oblique 文字以倾斜的效果显示
大部分的浏览器都不会对倾斜和斜体做取反也就是设置italic和oblique他们的效果是一样的
但是一般我们会用italic
<!
作者:offline
时间:2020-05-24
描述:在css中我们可以使用font-weight来设置文本的加粗效果
可选值 :
font-weight : normal默认值正常
bold文字加粗显示
该样式可以指定100-900间的9个值
200可能比100粗 。。。。。。
在css中可以使用font-variant来设置小型的大写字母
可选值:
normal :很正常
small-caps :文本以小型的大写字母显示
all-small-cap:所有的文本以小型的大写字母显示
小型大大写字母也是大写字母就是比往常的大写的字母小一些
<p>我是一个p标签ppppppppppppppppppppppaaaaaaaaaaaaaaaaaaaa</p>
<span>你好我是一个文字的标签</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在css中的单位</title>
<style type = "text/css">
font-size: 200%;
}
.e1{
font-size: 3em;
}
background-color: rgb(100,20,50);
}
</style>
</head>
<body>
<!
作者:offline
时间:2020-05-24
描述:在css中的单位 px主要表现的是像素我们的图片是由像素构成的包括我们的显示器
主要讲的是分辨率分辨率越高显示的颜色效果就越好我们看的就越清楚
在css中我们也可以使用%来表示一个大小百分比是相对于父元素来所得入果父元素的使用大小是16px
那么100%就是16px
em在css中em也是相对于百分比来所得1em相对于是100% 2em相对于是200%
他们都是长度单位
%的详解 :
使用%的好处是当父元素的属性值发生变化时子元素也会按照比例发生变化
我们在创建一个页面时经常使用到%
em和百分比相似他是相对于当前元素的字体大小来计算的
1em = 1font-size
使用em时当字体大小发生变化时em也会随之改变
当设置字体相关的样式时经常使用到em
<span id = "i1">
我是span我是一个给字体设置样式的标签
<p>我是一个p标签我是span的子元素</p>
</span>
<p class = "e1">
<em >我是一段内容中的重点</em>
</p>
<!
作者:offline
时间:2020-05-24
描述:在css中的颜色单位
在css中可以使用颜色的单词来表示不同的色调
red
green
blue
三种颜色
也可以使用rgb来表示不同的颜色
所谓的rgb就是通过三元色混合组成的各种颜色
我们使用rgb的颜色的格式是
rgb(红色的浓度 ,绿色的浓度,蓝色的浓度);
颜色的值表示的是1-255将 255最大 0表示什么都没有
<div id = "d1">我是一个块元素我单独占一行的大小</div>
<!
作者:offline
时间:2020-05-24
描述:接下来我们学习字体的分类在css中
serif(衬线字体)
sans-serif(非衬线字体)
monospace(等宽字体)
cursive(草书字体)
fantasy(虚幻字体)
<p style = "font-size: 30px;font-family: serif;">我是衬线字体</p>
<p style = "font-size: 30px;font-family: sans-serif;">我是非衬线字体</p>
<p style = "font-size: 30px;font-family: monospace;">我是等宽字体</p>
<p style = "font-size: 30px;font-family: cursive;">我是草书字体</p>
<p style = "font-size: 30px;font-family:fantasy;">我是虚幻字体</p>
</body>
</html>
<!doctype html><!
<html>
<head>
<meta charset = "utf-8" /><!
<title>我是一个网页的题目</title>
background-color : blue;
}
</head\>
<body>
<!
<p color="red">我是一个学生今天开始复习csscss请多多指教因此我为你的字体添加了一个颜色</p><br />
<hr />
<a href = "http://www.baidu.com">点我</a>
<!
<img src = "picture/捕获3.PNG" alt = "我是一张截图我是hadoop的截图" width ="90px" height ="90px"></img>
<em>我是一个小的段落</em>
<a id = buttom = "我是一个按钮" color = "red">我是一个小小的提示段落</a><br />
</body>
</html>
<!doctype html>
<html>
<head>
<title>好我们正式来复习css</title>
<meta charset = "utf-8" />
<p>我们还可以将样式编写到head中的style的标签里</p>
<style type = "text/css">
p{
color:red;
font-size : larger;
}
</style>
</head>
<body>
<p>css层叠样式用来为网页创建样式表通过样式可以对网页进行修饰所谓的层叠讲的就是将网页想成是一层一层的结构层次高得会覆盖层次低的</p>
<p>css可以为网页的各个层次设置样式</p>
<!
<p>我们可以将css的样式编写到元素的style属性中将元素编写到style属性中我们称为内联样式</p>
<p style ="font-size: 60px; color:dodgerblue">明月几时有,把酒问青天</p>
<p>内联样式属于结构和表现耦合不推荐使用</p>
</body>
<body>
<!
</body>
<body>
<p>来我们来讲一个divcss中的块状元素所谓的块元素就是独占一行的元素</p>
<div style = "background-color:red; width:66px;height:66px">我是一个块元素</div>
<div style= "background-color: dodgerblue;">我是一个块元素我在将css样写在style元素中的就是内联样式</div>
<div style ="background-color: greenyellow;">div这个标签就是一个单纯的块元素它不会为里面的元素添加任何的默认的样式我们多用div标签对网页进行布局</div>
</body>
<body>
接下来我们来讲一个行内元素所谓的行内元素是指仅仅占用自身大小的元素(或讲的是内联元素)
常见的内联元素有 a 和 img元素 span 和 iframe
<span style = "color:deeppink;font-size: 50px;">我是span我是一个行内元素我仅仅占自身的大小</span>
<iframe>hihi</iframe><!
<span href = "#">我是一个span元素span元素没有任何的语义主要用来选中文字然后为文字设置样式</span>
<!
而不会使用内联元素去包含块元素
a元素可以包含任何的元素除了它本身 p元素不可以包含其他的任何的块元素
在HTML中块元素主要用来对页面进行布局内联元素主要用来为文本设置样式
</body>
<body>
<!
<p id = "p1">不知天上宫阙,今夕是何年</p>
<p id = "p2">我欲乘风归去,又恐琼楼玉宇</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p:before
{
content:"我会出现在整个段落的最前面";
}
p:after
{
content:"我会出现在段落的最后面";
}
p[title = "hello"]
{
background-color: red;
}
</style>
</head>
<body>
<p>我是一个p标签</p>
<!
当鼠标移入到元素上时元素上的title属性的值将会作为提示文字显示
<p title = "hello">我是一个title属性</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type ="text/css">
p:first-child
{
background-color: red;
}
p:last-child
{
background-color: yellow;
}
p:nth-child(odd)
{
background-color: blue;
}
</style>
</head>
<body>
<p>我是第一个段落标签</p>
<p>我是第二个段落标签</p>
<p>我是第三个段落标签</p>
<p>我是第四个段落标签</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style type="text/css">
span + p
{
background-color: chartreuse;
}
span ~ p
{
background-color: yellow;
}
</style>
</head>
<body>
<!
作用 : 可以选中一个元素后面紧紧挨着的指定元素指的是兄弟元素
语法:前一个 + 后一个
<!
语法 前一个 ~ 后边所有
<p>我是第一个p标签</p>
<p>我是第一个p标签</p>
<p>我是第2个p标签</p>
<p>我是第3个p标签</p>
<p>我是第4个p标签</p>
<p>我是第5个p标签</p>
<p>我是第6个p标签</p>
<p>我是第7个p标签</p>
<span>我是一个span标签</span>
<p>我是第8个p标签</p>
<p>我是第9个p标签</p>
<p>我是第10个p标签</p>
<p>我是第11个p标签</p>
<p>我是第12个p标签</p>
<p>我是第13个p标签</p>
<p>我是第14个p标签</p>
<p>我是第15个p标签</p>
<p>我是第16个p标签</p>
<p>我是第18个p标签</p>
<p>我是第19个p标签</p>
<p>我是第20个p标签</p>
<!
作用 : 从已经选中的元素中剔除某些元素
语法::not(选择器)
在:not选择器可以从已选中的元素中剔除某些元素
<!
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在css中的样式的继承</title>
<style type ="text/css">
.c{
font-size: 20px;
background-color: green;
}
background-color: yellow;
}
background-color: red;
}
background-color: blue;
}
*{
font-size: 20px;
}
background-color: chocolate;
}
a:link{
background-color: navajowhite;
}
a:focus{
}
a:active{
color: cyan;
}
a:hover{
background-color: slateblue;
}
a:visited{
color: deepskyblue;
}
em:focus{
background-color: hotpink;
}
em:before{
content:"我爱linux我爱脚本自动化";
}
em:after{
content: "fjjkjodkok";
}
em:selection(3){
background-color:
}
</style>
</head>
<body>
<!
就像后代可以继承祖先的遗产一样css中的后代元素也可以继承祖先元素的样式、
利用继承可以将一些基本的样式的设置设置给祖先元素这样后代元素就会自动继承祖先元素中的样式
<p>我是一个p标签我是一个段落标签</p>
<span>我是一个span标签我没有任何的意思我就是用来选定文字并且给文字设置样式</span>
<p>我是第二个p的标签</p>
<p style = "color: red;">我是一个设置了样式的p标签但是我设置的是内联样式的标签不推荐使用该方式来标签的样式</p><br />
<a href = "#">我是一个a标签我用来设置超链接</a>
<em>我是一个em标签我是一个小的段落标签</em>
<h4>我是一个段落的标题在HTML和css中我们共设于6级的标题分别从 h1 -h6级的标题</h4>
<h5>
我是一个5级的标题值css中他的标签要么成对出现要么自结束
在css中我们还可以给网页引进图片引进图片的标签是 img 他是一自结束的标签在css中还有行内元素
行内是仅仅占自身大小的元素值css中还有设置图片路径的样式 src引进一个外部图片的路径 alt对引进的图片进行描述
如果我们在引进图片时不写他的描述那么搜索引擎在检索时就不会对图片进行收录在css中的hr
标签他是设置一个分割线的意思就是在网页上显示出一条下滑线
</h5>
<hr />
<h5>
在css中的选择器 id选择器在一个网页的一个元素中只能有一个
是它的描述class选择器可以重复选择相同属性的元素
</h5>
<!
<p class ="c">明月几时有,把酒问青天</p>
<p class = "c">不知天上宫阙,今夕是何年</p>
<p class = "c">我欲乘风归去,又恐琼楼玉宇</p>
<hr />
<p id ="c1">明月几时有,把酒问青天</p>
<p id = "c2">不知天上宫阙,今夕是何年</p>
<p id = "c3">我欲乘风归去,又恐琼楼玉宇</p>
<hr />
<span id = "a1">我是span我是一个文字的设置标签</span>
<span id = "a2">我是span我是一个文字的设置标签</span>
<span id = "a3">我是span我是一个文字的设置标签</span>
<span id = "a4">我是span我是一个文字的设置标签</span>
<span class = "c2">我是span我是一个文字的设置标签</span>
<span class = "c2">我是span我是一个文字的设置标签</span>
<span class = "c2">我是span我是一个文字的设置标签</span>
<hr />
<a href = "www.baidu.com">百度</a>
<hr />
<a href = "www.souhu.com">搜狐</a>
<hr />
<a href = "www.tenxun.com">腾讯</a><!
<hr />
<!
<em>我是一个小的段落标签</em>
<em>我也是一个小的段落标签</em>
<em>linux里面的指令有 cd 进入目录的命令 ls 显示当前文件 -l以长文件的形式显示
-i在显示的文件的前面加一个索引 -a 显示当前目录的所有的文件包括以点开头的文件
cd..返回上一级目录的命令 cd ~当前用户的家目录 cd- 显示上一级目录 pwd显示当前的文件的路径
jps 查看当前的进程中所有的有关于java的运行的文件 ll 显示长文件 awl linux中的单元格操作
tr 一一替换命令 sed 's/旧的东西/新的要替换的东西/g' 替换文件的命令 seq生成数的命令
echo 命令将第一个echo后面的东西返回来 cat 显示文件到屏幕 grep 搜索命令 find 也是显示文件的命令
在linux中有三种模式 一种是普通的模式 一种是命令行的模式 还有一种忘了 在linux中使用 set nu来设置行号
在linux中我们使用set nonu来取消行号的设置 在 在linux中的*表示任意长度的任意字符 ? 表示任意的一个字符
在linux中的文件的从定向的问题 > 输出从定向将文件的执行的结果返回的指定的文件夹 >> 附加输出从定向在文件的末尾追加写入
< 输入从定向是将文件的标准输入从定向到一个指定的文件 mkdir 创建目录的文件 tough 是创建目录的文件
附加输出从定向 >> 是将文件的错误的输出从定向的指定的文件 cp 拷贝文件的命令
mkdir -p 递归创建文件的命令 tr ' ''\n'换行 tr '\n'''多行变一行删除文件的命令 rm -rf 删除文件的命令 -r 一个完整的目录
f 就是不询问直接删除
</em>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>接下来我们来学习一下css中的子元素对父元素的继承</title>
<style type = "text/css">
span{
background-color: blue;
font-size: 20px;
width: 20px;
height: 20px;
}
p
color: red;
}
font-size: 20px;
}
.c1{
background-color: green;
}
</style>
</head>
<body>
<span>
<p>
我是span中的p标签我是他的子元素
<em>
我是p标签中的标签我是他的子元素span是我的祖先元素
</em>
<div>
我是一个块元素我会独占一行我是em的兄弟元素同时我是span的子元素
</div>
</p>
</span>
<!
<div style = "background-color: green; width: 60px; height : 90px">欢迎来到块元素的世界</div>
<!
作者:offline
时间:2020-05-21
描述:
那么接下来我们就来讲一讲关于样式间的优先级的问题
在我们给网页中的元素设置样式时当我们给网页中的元素设置
对相同相同的样式时采用相同样式的那么就会有冲突
所以我们就要区分元素样式的优先级
内联1000 >id100 >类和伪类 10> 元素1 > 通配0
继承的样式没有优先级
当网页中包含多种相同选择器时需要将多种选择器的优先级相加然后在进行比较在选择器的优先级计算不超过他最大的
数量级如果选择器的优先级一样则选择靠后的样式
在css中并集选择器的优先级是单独计算的:
div p
在css中提供了一个机制获得一个最高的优先级在样式的最后添加一个 !important
则此时样式就会获得一个最高的优先级将会优于所有的样式甚至是内联样式但是 在开发中尽量避免使用!important
<p id = "p2">我是一个p标签我是一个段落标签</p>
<p id = "p1">我也是一个p标签我也是一个段落标签</p>
<em class = "c1">我是一个em标签我是一个小的段落标签</em>
<a href = "#",id = "a1">我是一个超链接标签</a>
<!
:link 鼠标滑过是正常的结果
: hover 鼠标滑的样子
:visited 被观看过的超链接
: active 即是鼠标被点击时的样式
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>en和strong</title>
<style type = "text/css">
</style>
</head>
<body>
<!
em标签用来表示一段内容中的着重点
strong用来表示一段内容的重要性
这两个标签可以单独使用也可以一起使用
em标签显示的内容是斜体 strong显示为粗体
<sapn>
进入命令行模式 w 保存 q 退出命令 ifconfig 命令用来查看网络的相关配置
关闭系统的命令 shutdown shutdown -n now立刻关闭系统 shutdoen -h now立刻重启系统
man 命令查看帮助文档
reboot重启命令
chmod命令改变文件的权限
显示当前所在目录:pwd
删除空的目录 命令 rmdir
移动文件的命令是 mv
获取文件的路径名和目录名 basename , dirname
在显示文件的时候顺便输出行号 nl
一页一页的显示档案的内容 more
查看头几行的命令 head 查看尾部几行的命令 tail
以二进制的放置读取档案内容:od
观察文件的类型 file命令
有关防火墙的相关命令
查看防火墙的状况 service iptables status
临时关闭防火墙 service iptables stop
永久关闭防火墙 chkconfig iptables off
重新开启防火墙 service iptables restart
将永久关闭的防火墙重启 chkconfig iptables on
</sapn>
<em>临时关闭防火墙 service iptables stop</em>
<strong>临时关闭防火墙 service iptables stop</strong>
<!
表示插入一个内容ins标签中的内容会自动添加下划线
<p>明月几时<ins>有</ins></p>
<!
<pre>
echo "hello word";
</pre>
<!
作者:offline
时间:2020-05-24
描述:
接下来我们进入有序列表和无序列表的学习
在css中我们使用ul标签来创建一个无序列表
使用li标签在列表中创建也一个列表项
在css中我们创建无序列表的同时还可以通过type属性来修改无序列表中的项目符号
可选值:
disc 默认值 一个实心的圆点
square 一个实心的方块
circle 实心的圆
注意默认的项目符号我们一般都不使用
如果需要使用项目符号则采用li设置背景图片的方式来进行设置
<ul>
<li type ="square">唐僧</li>
<li>孙悟空</li>
<li>沙和尚</li>
<li>猪八戒</li>
<li>小白龙</li>
</ul>
<!
作者:offline
时间:2020-05-24
描述:在css中ul标签和li标签都是块元素就是独占一行的元素
<!
作者:offline
时间:2020-05-24
描述:接下来我们来讲css中的有序列表
在css中的有序列表ol标签来进行创建创建列表的向依然是 li
在有序的列表中使用有序序号来作为项目符号
在有序列表中我们也可以使用type属性来指定序号的类型
a/A 使用小写或大写字母作为序号
i/I 采用小写或大写的罗马是指作为序号
在css中有序列表中的标签也是块元素
<ol>
<li type = "a">结构</li>
<li type = "A">表现</li>
<li type = "i">行为</li>
<li type = "I">rmdir</li>
<li>cd</li>
</ol>
<!
作者:offline
时间:2020-05-24
描述:列表间的相互嵌套在有序的列表中我们可以放进一个无序的列表
在无序的列表中我们可以放进一个有序列表
<ul>
<li>cd</li>
<li>mkdir</li>
<ol>
<li>ls</li>
<li>shuf</li>
</ol>
</ul>
<!
作者:offline
时间:2020-05-24
描述:定义列表用来对一些词汇或内容进行定义
使用dl来创建一个定义列表
在定义列表dl中有两个子标签
dt 和 dd
dt :表示被定义的内容
dd : 表示被定义的描述
<dl>
<dt>cd</dt>
<dd>穿梭于linux的个目录之间进入返回遛一遛cd ~返回上层</dd>
</dl>
<dl>
<dt>武大郎</dt>
<dd>炊饼卖的666外加头上一点绿</dd>
</dl>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset= "utf-8"/>
<title>
我是网页的主题
</title>
<!
</head>
<body>
在HTML的世界中网页的题目共分为6个
<h1>我是一级标题</h1>
<h2>我是2级标题</h2>
<h3>我是3级标题</h3>
<h4>我是4级的标题</h4>
<h5>我是5级的标题</h5>
<p>我是一个p标签我是个段落标签</p>
<!
属性: 可以通过过为标签添加属性来处理标签中的内容我们可以再开始的标签中添加属性
属性在开始的标签中的形式是一种名字对的形式的结构 属性名 = 属性值
在HTML中我们还将一个完整的标签称为元素同时又父元素 子元素 祖先元素的称呼
<p>我是一个段落标签<em>我是em标签我还p标签的子标签</em></p>
<em>我是一个我小的段落标签</em>
<!
向标签中添加属性
<p color = "red">我是一个段落</p>
<br />我是一个自结束标签我的功能是换行
<img/><!
<img src = "引入的外部图片 " alt = "对引入的东西进行描述"/>
<!
alt用来设置在图片不显时对图片的描述搜索引擎通过对alt属性来识别不同的图片
如果不写alt则搜索引擎不会读图片进行收录
width 用来设置图片的宽度
height 用来设置图片的高度
src主要是用来引入一个外部图片的路径 目前我们使用的是相对路径相对路径是相对于当前资源的所在的目录
<ing src = "苍井空打电话" alt = "我是一个图片" width = 300px height = "300px" />
<img src= "picture/捕获3.PNG" alt= "我是一个截图" width = "66px" height = "66px"/ >
<!
<meta name ="author" content="aqua" />
<hr /><!
<!
在HTML中代码要么是完整的 要么成对出现 要么是自结束 在HTML中他的标签可以嵌套但是不能交叉嵌套
<font color = aqua>nihaowosfid</font>
<!
<a href ="#">我是一个超链接</a><!
<!
<a id = "bottom" href = "http://www.baidu.com">我是一个按钮</a>
<embed src = "被嵌入的动画片" alr ="我是一个被切入的动画标签">我是一个动画切入的标签</embed>
</body>
</html>
<!DOCTYUPE HTML>
<HTML>
<head>
<title>我是一个网页的标题</title>
在HTML中文件的内容一般不会显示在浏览器上在head中的内容是可以用来帮助浏览器解析代码解析网页
</head>
<body>
<img /><!
<br/><!
<hr/><!
<p>我是一个p标签我是一个段落标签</p>
<em>我是一个小的段落标签</em>
</body>
<a>在HTML中的a标签用来设置一个超链接</a>
在html中指定一个超链接使用 href属性
<a href = "http://www.souhu.com">在HTML中使用href来指定一个超链接</a>
<p>在HTML中我们使用
<p>我是一个段落标签在HTML中我们可以使用一个id属性来设置一个...在HTML中我们使用id属性来作为标签的唯一的标识在一个网页中仅仅能则能有一个的id标签</p>
在HTML中我们是不区分大小写的 在HTML中我们是无论标签 或者是注释标签可以嵌套但是不能交叉嵌套注释是不可以进行嵌套的
</HTML>