1.HTML基本
结构
<html>
<head>...</head>
<body>...</body>
</html>
1.首先这里的 <html></html>
称为根标签,所有的网页标签都在<html></html>中。
2.<head>
标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>
、<script>
、 <style>
、<link>
、 <meta>
等标签。
3.<body>
和</body>
标签之间的内容是网页的主要内容,如<h1>
、<p>
、<a>
、<img>
等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。
这里简单介绍一下几个常用的HTML标签<h1>,<p>,<a>,<img>,<pre>
<h1>
该标签是一级标题,有一级标题就有二级标题,三级标题等,要更换几级标题只需要把h1中的数字改为相应的几级标题,例如二级标题就是h2,不同等级的标题字号不同,一级标题的字号最大。
<p>
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p>,以及一个结束标签 </p>。
<a>
<a href=“指定要跳转的目标界面的链接”>需要展示给用户看见的内容</a>
HTML 链接是通过 <a> 标签进行定义的。
在 href 属性中指定链接的地址。
通过该标签可以将页面转到相应的页面
<a href="Signln.html" target="_blank">登录</a>
<!-- 这里的target="_blank"是让页面从另外一个页面打开跳转的页面-->
<img>
<img src="图片的url">
需要使用该属性指定图片的URL地址,即图像文件的路径和文件名
该标签是HTML的图片标签,通过这个标签,设计者可以在页面中加入各种各样的图片,使得页面更加美观,增加用户的体验
<li><a href="#"><img src="images/banner2.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner3.jpg"></a></li>
<li><a href="#"><img src="images/banner4.jpg"></a></li>
<pre>
pre标签的定义,<
pre>
标签用来定义预格式化的文本,被包围在pre标签中的文本通常会保留空格和换行符, 而文本也会呈现出等宽字体,同样,pre标签的一个常见的应用便是用来保存计算机中的源代码文本。
<pre>
关雎
佚名 〔先秦〕
关关雎鸠,在河之洲。窈窕淑女,君子好逑。
参差荇菜,左右流之。窈窕淑女,寤寐求之。
求之不得,寤寐思服。悠哉悠哉,辗转反侧。
参差荇菜,左右采之。窈窕淑女,琴瑟友之。
参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。
</pre>
4.什么是css?css有什么作用?
css:cascading style sheets
层叠 样式 表
作用:美化页面,修饰标签
css可以通过外部链接,与内嵌的方式来修饰页面。
外部链接通过link标签:
<link rel="stylesheet" href="style.css">
内部样式:
p{
color:purple;
background-color: pink;
}
这里的样式是写在页面中的。
css具有的样式特性
1.继承性
文本样式和字体样式的继承
绝大多数文本字体样式,可以被继承
a标签不会继承字体颜色
2.堆叠性
为一个标签定义多个样式规则
如果样式属性不冲突,都会作用到这个标签上
3.优先级
默认优先级
高 内联样式
中 内部样式,外部样式-------就近原则
低 浏览器默认样式
f12关于优先级的显示
默认情况下,f12中样式是按照默认优先级顺序从上往下显示
4.调整优先级
设置最高优先级 !important,比内联都高
写在某一个值与分号之间,!important与值之间有空格
color: red !important ;
注意,内联样式不允许设置!important,语义要求
基础选择器
通用选择器
{样式声明} (匹配所有元素,但是的效率非常低,不建议使用)
* {
margin: 0;
padding: 0;
}
元素选择器
标签关键字{样式声明;}
body {
background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgstore.cdn.sogou.com%2Fapp%2Fa%2F100540002%2F398203.jpg&refer=http%3A%2F%2Fimgstore.cdn.sogou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654773064&t=a61c2c060cd2eb30155eb374869ad1df") no-repeat fixed;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.ID选择器
<元素 id=“id值”>#id值{样式声明}
id在一个页面中不能重复,所有id选择器只被一个元素应用
#user {
float: left;
line-height: 42px;
margin-left: 30px;
font-size: 14px;
color: #666666;
}
类选择器
使用.定义样式,哪个元素想用,用class都能调用
<元素 class=“类名”>
/*banner区域banner是类名*/
.banner {
height: 675px;
}
伪类选择器
匹配元素在某一个状态时的样式
只适用于a标签的伪类
①未被访问:link a:link{color:red}
②已被访问:visited a:visited{color:green}
所有元素都能用的伪类
:hover 鼠标悬停的状态
:active 激活状态
:focus 元素获取焦点时的状态(input button)
input:focus {
background-color: wheat;
}
.subnav ul li a:hover {
color: #00a4ff;
}
简单介绍几个css属性
1.background-color:这个属性可以用来设置背景颜色
2.height:设置所选标签的高度
3.fond-size:设置字体大小
4.color:设置字体颜色
5.float:设置是否浮动
更多请自行了解。