html和css的所有标签页,HTML和CSS常用标签和基本使用

1.HTML常用标签

1.标签分类

块元素 (行元素)

内联元素 (行内元素)

块元素的特点:

单个块元素在浏览器中默认独占一行

两个块元素不能够在一行显示, 他们会自动换成两行显示

块元素可以设置宽高等属性.

内联元素:

多个内联元素可以在一行显示

内联元素不能够设置宽高, 设置了也没有用, 不会显示出效果

内联元素的宽高由他们本身的内容多少来支撑, 内容多,宽高自动增加.

2.常用块元素标签

1. 标题标签

​ 表示文档的标题, 除了具有块元素基本特征之外, 还含有默认的外边距和字体大小

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

2.段落标签:

​ 表示文档中的一个文字段落, 除了具有块元素基本特征, 还含有默认的外边距

3. 通用块容器标签 div

​ 表示文档中一块内容, 具 有块元素基本特性, 没有其他默认样式

3.常用内联元素标签

1.超链接标签 a

​ 链接到另外一个网页, 具有内联元素基本特征, 默认文字蓝色, 有下划线

​跳转地址

说明:

a 标签的 href 属性可以添加 # 号, 这个是缺省链接地址:

text-decoration:none; (取消下划线)

不确定地址时, 我们可以临时使用 # 来占位,确定后替换即可

如果想要跳转到当前页面的最上方时, 可以使用 #

a 标签有 target 属性

如果不设置该属性, 在当前页面打开新页面

如果设置该属性, 则会在新窗口中打开新页面

2.通用内联容器标签 span具有内联元素基本特性, 没有其他默认样式

我们一般在文字段落的中间部分强调某一部分的时候调用span,添加样式,从而改变强调的部分的样式:

例如: 这是一段文字,其中李总需要强调,所以我们可以使用span来完成强调的操作.

这是一个段落文字, 段落文字中有特殊标志或者样式的文字

3. 图片标签 img在网页中插入图片, 具有内联元素基本特性, 但是它支持宽高设置

说明:

src属性主要是添加要展示的图片地址

alt属性的作用:

图片加载失败时, 显示的提示信息

搜索引擎在收录图片时, 根据这个属性值来收录图片

制作无障碍网页, 方便盲人的读屏软件读取.

4.特殊标签

空格: 在html中, 空格一般会用: 表示

回车: 在html中回车换行一般用
表示

小于号( < ): 在html中一般用<表示

大于号( > ): 在html中一般用>表示

删除标签: del 或者 ( s )

倾斜标签: em 或者 ( i )

下划线标签: ins 或者 ( u )

5.总结:

HTML 整体是由标签组成的, 各个标签的功能很多都是重复的

同学们学习标签用法的时候多多练习即可

标签整体分为: 块级标签 和 行内标签

块级标签可以设置宽高值, 独占一行

行内标签自动设置宽高值, 一行内可以有多个

一般来说, 块级元素可以包含行内元素,行内元素不能包含块级元素.

特殊情况, 需要记住:p 标签不能嵌套 div

a 标签用于跳转(超链接) [跳转网页, 跳转页面, 跳转文件等]

标题标签用于设置标题, 共有6级

div就是一个无色透明的容器,看不见,摸不到

img标签主要用于设置图片

p 标签就是paragraph(段落) 通常用于包裹段落

span是一个行内元素通常用于p标签内部,个别文字设置时使用.

6.标签语义化

带语义的标签:

h1 ---- h6: 表示标题

p: 表示段落

img : 表示图片

a: 表示链接

不带语义 的标签:

div: 表示一个容器

span: 表示行内的一块内容

2.CSS基本用法

1.CSS引入方法

1.内联式:通过标签的 style 属性, 在标签上直接写样式.

这是个div标签

2. 嵌入式:通过 style 标签, 在网页上创建嵌入的样式表.

div {

width: 100px;

height: 100px;

background: red;

}

3.外联式:

2.CSS选择器

1.标签选择器标签选择器, 此种选择器影响范围大, 一般用来做一些通用设置, 或用在层级选择器中.通用格式:

​

标签名 {

属性名: 值;

...

}

例如:div {

color: red;

}

​

p {

font-size: 18px;

}一旦使用标签选择器,则当前页面上的所有该标签全部都有该样式. 这一点需要注意

2.类选择器通过类名来选择元素, 一个类可应用于多个元素, 一个元素上也可以使用多个类, 应用灵活, 可复用, 是css中应用最多的一种选择器常见格式:

​

.类名 {

属性名: 值;

...

}

举例:CSS部分:

.blue {

color: blue;

}

.header {

font-size: 19px;

}

​

HTML部分:

这是个div标签

这个是个h3标签

p标签部分

3.层级选择器:主要应用在标签嵌套的结构中,层级选择器, 是结合上面两种选择器来写的选择器, 它可与标签选择器结合使用,减少命名,同时也可以通过层级, 限制样式的作用范围

例如:CSS部分:

.con {

width: 100px;

height: 100px;

}

.con span {

color: red;

}

.con .pink {

color: pink;

}

​

HTML部分:

这里是span标签的内容

这里是div中的div标签,我是粉色

层级选择器: 按照标签的层级来匹配对应的标签

4. id选择器通过 id 名来选择元素，元素的 id 名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id 名一般给程序使用，所以不推荐使用id作为选择器。使用格式:

​

#id名 {

属性名: 值

}

举例：CSS部分:

#box{

color:red

}

​

​

HTML部分:

这是第一个段落标签

这是第二个段落标签

这是第三个段落标签

5. 伪类选择器常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。CSS部分:

.box1 {

width:100px;

height:100px;

background:gold;

}

.box1:hover {

width:300px;

}

​

HTML部分:

别看村子不咋大呀， 有山有水有树林， 邻里相亲多和睦， 老少爷们也合群

​

​

补充:

#input:focus {

outline: none;

border: 2px solid red;

}

​ a:link {color: red} /* 未访问时的状态 */a:visited {color: orange} /* 已访问过的状态 */a:hover {color: pink} /* 鼠标移动到链接上时的状态 */a:active {color: yellow} /* 鼠标按下去时的状态 */

6.总结:

CSS 选择器的主要目的是: 获取 HTML 元素, 获取到后给当前元素添加样式.

CSS 选择器的种类非常多, 一般我们用不上, 把常用的学会即可.

标签选择器尽量少用, 覆盖面巨大. 不利于我们样式的单独调整.

class 类选择器是经常使用的选择器. 可以多多练习

层级选择器 一般配合类选择器或者其他的选择器一起使用. 常用来获取大容器里面没有明确定义类名的元素

id 选择器偶尔使用, 使用它往往就是利用他的唯一性. 获取单个某个标签使用.

伪类选择器是需要设置特殊阶段的效果时, 添加的选择器, 知道即可

4. CSS属性入门

布局常用属性样式:属性作用举例

width设置元素(标签)的宽度width: 200px;

height设置元素(标签)的高度height: 200px;

background设置元素背景色或者背景图片(详看下面)background: pink;

border设置元素四周的边框border: 1px solid pink;

border-top设置元素顶部边框border-top: 1px solid pink;

border-left设置元素左边边框border-left: 1px solid pink;

border-right设置元素右边边框border-right: 1px solid pink;

border-bottom设置元素底部边框border-bottom: 1px solid pink;

padding设置内边距(同时设置四个边,也可以分开设置)padding: 20px;

margin设置外边距(同时设置四个边,也可以分开设置)margin: 20px;

float设置元素浮动,浮动可以让块元素在一行排列float:left(左浮动) float: right(右浮动)

补充说明:

background-color 背景颜色

background-image 背景图片

background-repeat 背景重复

我们可以对上面的代码进行合并书写:

background: url(bgimg.gif) no-repeat 5px 5px;

补充: