html常用标签 – 源码巴士

<!doctype html>
<html>
            <head>
            <meta charset="utf-8">
            <title>         </title>
            <style type="text/css">

            </style>
            </head>
                            <body>
                            </body>
</html>

一.常用的标签

1.标题标签
在这里插入图片描述

2.段落标签
<p></p> 段落标签，表示一个自然段，会独占一行。

3.换行标签

<br></br>
使用时使元素换行

4.水平线标签

<hr></hr>

5.引用图片标签

<img  scr="1.gif" />

属性：
src：设置一个外部图片的路径
alt：可以用来设置在图片不能显示时的描述
width: 修改图片的宽度
height：修改图片的高度，这两个改变时都是同时修改，不该比例。只有当两个都同时指定时才不按比例。

<img scr="1.gif" alt="这是一个弱智" height=“300px” />

6.注释标签

<!--
-->

7.meta标签
7.1:使用meta标签可以用来设置网页的关键字

<meta name="keywords" content="HTML5，xxx，xx">

7.2还可以用来指定网页的描述，搜索引擎在检索页面时，会同时检索页面中的关键词和描述。

<meta name="description" content="发布h5，js前端相关的信息">

7.3请求重定向

<meta http-equiv="refresh" content="秒数；url=目标路径" />

在这里插入图片描述
8.超链接元素

<a></a>

href:指向链接跳转的目标地址，可以写一个相对路径也可以写以一个完整的地址

target:设定在哪里打开链接

       可选值：_self(默认值，在本页面打开)        _blank（别的页面打开）

我是一个超链接

另外的用法：
<a href="#xx"></a>
<p id="xx"></p> 那么#会自动跳转到p的位置
<a href="#"></a> 会自动跳转到顶部
9.文本框标签

<input type="text" />

二：相对路径和绝对路径

绝对路径：就是你的文件或目录在硬盘上的真正的路径例如“bg.jpg”这个图片是存放在硬盘的“E:\img”目录下，那么 “bg.jpg”这个图片的绝对路径就是“E:\img\bg.jpg"
相对路径：顾名思义，相对路径就是相对于当前文件的路径。网页中一般表示路径都用这个方法，例如在“s1.html” 文件里引用了“bg.jpg”图片，由于“bg.jpg”图片相对于“s1.html”来说，是在同一个目录下的，那么要在“s1.html”文件里使用以下代码后，只要这两个文件的相对位置没有变(也就是说还是在同一个目录内)，那么无论上传到Web服务器的哪个位置，在浏览器里都能正确地显示图片。再举一个例子，假设“s1.html”文件所在目录为“E:\html”下面，而“bg.jpg”图片所在目录为“E:\html\img”，那么“bg.jpg”图片相对于“s1.html”文件来说，是在其所在目录的“img”子目录里，则引用图片的路径应该为：img/bg.jpg 。
另外如果图片在s1.html的上面文件里，可以用../来返回上一级文件夹

三.css大概

1.内联样式
指的是在标签里面直接添加样式，不推荐使用，类型如下：

<p style="color=xx;front=20px;"></p>

一般使用的是

<head>
p{
coror=red;
front-size=20px;
}
</head>

2.css的注释

/*
*/

3.块级元素和行内元素(内联元素)
3.1:块级元素就是会独占一行的元素，无论它的元素有多少，就像之前所学的<p></p>一样，最纯粹的块元素就是<div></div>,除此之外还有<h></h>

3.2：行内元素就是只占自身大小的元素，常见的有<a></a> <img/> <span></span>
3.3：可以通过display来将两者进行转换display:block可以将元素设计成块元素，display：inline可以将元素设计成内联元素，display：block-inline将元素改变成行内块元素，即既可以设置宽高又不会独占一行
块元素主要用来做页面的布局，内联主要用来选中文本设置样式

4.overflow标签
当子元素溢出父元素时可以设置这个标签
在这里插入图片描述
5.浮动的设置

通过float元素设置元素的浮动，再经过float：left和float：right来设置元素的浮动方向
浮动的元素不会覆盖文字，可以通过这个来设置文字包围
清除浮动用clear：left/right/top/bottom，或者直接clear：both清除两侧浮动，用这种方法可以来解决高度塌陷的问题

解决高度塌陷的最佳方法

在这里插入图片描述
6.定位
通过position属性来设置元素的定位
-可选择
static: 默认值，不开启定位
relative：开启元素的相对定位（相对于其自身的定位）
absolute：开启元素的绝对定位
fixed：开启元素的固定定位（绝对定位的一种）

开启定位后，可以通过上下左右来设置元素的偏移量

绝对定位是相当于他最近的开启了定位的祖先元素进行定位，如果所有祖先都没开启定位，则会相当于浏览器窗口进行定位。

开启绝对定位后会改变元素的性质，使得内联元素变成块元素，块元素的宽度和高度默认都被内容撑开。

固定定位的绝大部分性质和绝对定位一致，唯一的不同是其永远都是相对于浏览器窗口进行定位，并且不会随着滚动条的拖动而变化。

四.选择器

1.id选择器
通过元素的id元素选择唯一一个元素
通常形式是

#id属性值{
}

2.类选择器
和id差不多，但是可以设置多个class，同时选择多个元素

.class{
}

3.通配选择器

*{
}

4.并集选择器
可以同时选中多个选择器对应的元素，之间用逗号隔开

#p，p，h1{
}

5.交集选择器
在这里插入图片描述
6.后代选择器与子元素选择器

7.伪类选择器伪类选择器：
：link -没访问过的链接
：visited -访问过的链接
由于涉及到了用户的隐私问题，所以visited只能设置字体的颜色
：hover -鼠标滑过的链接
：active -超链接被点击的状态
文本框（input）获取焦点（focus）：

input：focus{

}

为标签被鼠标选中的内容提供样式：

可以使用：：selection

p::selection{

}

五.盒子模型

盒子模型由内容区，内边距，边框，外边距构成
在这里插入图片描述
边框

边框由border标签来决定，分别从border-corol: border-style: border-width:决定边框的颜色，形式，宽度
而大部分浏览器边框的颜色和宽度都由默认值，而样式的默认值是none，现在可以通过border：来直接设置这三个样式并且这三个没有顺序要求
border一般同时指定四个边，想要单独指定样式可以通过border-top这样的形式指定

内边距

指的是盒子内容区和盒子边框直接的距离，内边距由padding决定，一般有四个方向的内边距，分别由top，bottom，right，left
用子元素填充父元素时知会填充内容区的内容，所以可以通过改变内边距的大小来清楚观察
内边距的大小会影响盒子可见框的大小

外边距

外边距就是当前盒子和别的盒子的距离，用的是margin表示
一般设置为居中时为margin：0 auto；
一般在编写时会默认设置浏览器外边距和内边距为0

*{
       margin: 0;
       padding: 0;
     }

注意：内联元素不能设置width和height，能设置水平方向的外边距，不能设置垂直方向的外边距，内边距和边框都能设置，但只有水平内边距能影响页面布局

原文链接：https://blog.csdn.net/flirt_/article/details/122888992