页面HTML标签与css样式

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>

需要使用该属性指定图片的URL地址，即图像文件的路径和文件名

该标签是HTML的图片标签，通过这个标签，设计者可以在页面中加入各种各样的图片，使得页面更加美观，增加用户的体验

            <li><a href="#"><img src="data:images/banner2.jpg"></a></li><li><a href="#"><img src="data:images/banner1.jpg"></a></li><li><a href="#"><img src="data:images/banner3.jpg"></a></li><li><a href="#"><img src="data: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：设置是否浮动

更多请自行了解。