首页 / 知识
HTML和CSS基础知识分享
2023-04-11 13:51:00
一、简介
HTML指的是超文本标记语言，使用标记标签来描述网页，标签是由尖括号和关键词组成，并且是成对出现，例如<html></html>。
二、一个完整的html网页
<!DOCTYPE html> ?<!-- 有助于浏览器中正确显示网页 -->
<html> ?<!-- html页面开始标签 -->
<head>
<meta charset="UTF-8"> ?<!-- UTF-8编码 ?-->
<title>周杰伦</title> <!-- 标签页显示的内容 -->
</head>
<body>
<img src="1.webp"> <!-- 插入一张图片 -->
<h1>《说好不哭》</h1>
<h3>词：方文山 ? 曲：周杰伦</h3>
<h3>演唱：周杰伦/五月天阿信<h3><!-- h1-h5不同大小字体 -->
<hr> <!-- 水平线 -->
没有了联络 ?后来的生活 ?我都是听别人说<br><!-- 换行标签 -->
说你怎么了 ?说你怎么过 ?放不下的人是我<br>
人多的时候 ?就待在角落 ?就怕别人问起我<br>
</body>
</html> <!-- html页面结束标签 -->
效果如下：
三、其他标签介绍
1、div和span标签
div是一个块级元素，它包含的元素会自动换行。
span是行内元素，在它的前后不会换行
<div style="color:#0000FF">你们怎么了 ?你低着头</div> ?护着我连抱怨都没有
<span style="color:#0000FF">电话开始躲 ?从不对我说</span> ?不习惯一个人生活
2、a标签，超链接
href：指定要跳转的地址
target：指定方式打开新地址，默认当前页面打开，_blank在新页面打开
<a href="" target="_blank">百度一下</a>
3、<img>标签，插入图片
本级目录
父级目录
也可以直接添加网络上的一张图片
<img src=""> <!-- 插入一张图片 -->
<img src=""> <!-- 插入一张图片 -->
<img src=""><!-- 插入一张图片 -->
四、CSS样式， 用于渲染HTML元素标签的样式
1、内联样式
span，将所有span标签内的文字都统一样式
<style type="text/css">
span{
background-color:#000000; <!-- 黑底 -->
color:#00FF00;<!-- 绿字 -->
}
</style>
<span>离开我以后 ?要我好好过 ?怕打扰想自由的我</span>
<span>都这个时候 ?你还在意着 ?别人是怎么怎么看我的</span>
<span>拼命解释着 ?不是我的错 ?是你要走</span>
id选择器，为一个样式起个别名，通过id引用
<style type="text/css">
#TS{
background-color:#000000; <!-- 黑底 -->
color:#FF00FF; ? ? ? ? ? ?<!-- 粉字 -->
}
</style>
<span>离开我以后 ?要我好好过 ?怕打扰想自由的我</span>
<span id="TS">都这个时候 ?你还在意着 ?别人是怎么怎么看我的</span>
<span>拼命解释着 ?不是我的错 ?是你要走</span>
类选择器，为一个样式起个别名，通过class引用
<style type="text/css">
#TS{
background-color:#000000;<!-- 黑底 -->
color:#FF00FF;<!-- 绿字 -->
}
。ST{
background-color:#000000;<!-- 黑底 -->
color:#00FFFF; ?<!-- 蓝字 -->
}
</style>
<span id="TS">离开我以后 ?要我好好过 ?怕打扰想自由的我</span>
<span id="TS">都这个时候 ?你还在意着 ?别人是怎么怎么看我的</span>
<span>拼命解释着 ?<span class="ST">不是我的错</span> ?是你要走</span>
2、外引样式
新建一个aiyou.css文件，内容为
#TS{
background-color:#000000;
color:#FF00FF;
}
。ST{
background-color:#000000;
color:#00FFFF;
}
在html源码中引用
<link rel="stylesheet" type="text/css" href="aiyou.css">
<span id="TS">离开我以后 ?要我好好过 ?怕打扰想自由的我</span>
<span id="TS">都这个时候 ?你还在意着 ?别人是怎么怎么看我的</span>
<span>拼命解释着 ?<span class="ST">不是我的错</span> ?是你要走</span>
|
最新内容
相关内容
python如何判断一个数是素数
python如何判断一个数是素数，数字，代码，培训，质数，素数，方法，个数，自然数，不是，思路，python如何判断一个数是素数的方法：一个大于1的自然数，除
python一个数的平方怎么表示
python一个数的平方怎么表示，培训，平方根，个数，函数，模块，表示，方法，表达式，实例，下面，用python进行数学计算，可以使用python内置的函数模块，下
python判断一个数是否为int
python判断一个数是否为int，培训，基础，变量，类型，函数，个数，整数，以上，不是，方法，在python中如何判断一个数是不是整数?其实python有两种查看
python如何求一个数的平方
python如何求一个数的平方，培训，平方根，个数，整数，函数，模块，方法，小数，表达式，数值，用python进行数学计算，可以使用python内置的函数模块，下面
python如何自定义一个函数
python如何自定义一个函数，代码，名称，培训，函数，圆括号，参数，定义，表达式，选择性，字符串，python函数是组织好的，可重复使用的，用来实现单一，或相
python判断一个字符串是否包含另一
python判断一个字符串是否包含另一个字符串，培训，字符串，以上，方法，更多，内容，python判断一个字符串是否包含另一个字符串，常用的有两种方python如何判断一个数是否是素数
python如何判断一个数是否是素数，代码，数字，培训，情况，质数，素数，自然数，不是，循环体，个数，先来看下什么是python质数：质数(Primenumber)，又称
python怎么判断某一对象是否为字典
python怎么判断某一对象是否为字典，培训，名称，代码，情况，类型，实例，元素，字典，函数，对象，我们经常需要在Python代码中确定某个实例是什么类型
python怎么求一个数的平方
python怎么求一个数的平方，培训，平方根，个数，函数，模块，方法，表达式，实例，下面，以上，用python进行数学计算，可以使用python内置的函数模块，下面
python判断字符是否为字母和数字
python判断字符是否为字母和数字，数字，培训，字母，字符串，字符，空格，方法，都会，分号，大小写，在使用python语言中的字符串方法时，可以使用它们判python一般用什么版本的
python一般用什么版本的，培训，发行，数据，基础，版本，初学者，目的，用户，大势所趋，由此可见，目前，根据数据显示，使用Python2.xd开发者站63.7%，而使
python类、模块、包的概念及区别
python类、模块、包的概念及区别，概念，数据，培训，模块，名字，环境，基础，文件，函数，定义，类类的概念在许多语言中出现，是面向对象编程的基础，很容