HTML与CSS基础教程：布局、样式与标签详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_56781779/article/details/124217762

文章目录

浮动

<audio src="" controls>音频标签</audio>
<video src="" controls>视频标签</video>
 <!---form标签创建表单-->

        <!--添加表单元素-->
        <!--单行文本框/默认text-->
        <!--placeholder没输入时里面的字，提示信息-->
        <!--name属性-->
        <!--label标签：for属性配合表单元素的id属性一起使用，当点击文字时，可以让光标选中对应的表单元素-->

 <!--仅输入数字-->
        <!--使用min设置最小值 max设置最大值 -->
        <input type="number" name="age" min="12" max="30">

 <!--日期框-->
        
        <input type="datetime-local" name="date">

内联框架

<!-- 在窗口内嵌一个子集窗口   src引入一个新的界面-->
<iframe name="内联名字" src="默认.html"></iframe>
    
<!--target打开窗口的位置 _self 当前窗口打开
                      _blant 新窗口打开
                      iframe的名字 在指定窗口打开
                      _parent  在上一级窗口打开
                      _top   在顶级窗口打开--> 
<a href="窗口.html" target="workFrame">窗口</a>

css（级联样式表）

引入css

内联样式、行间样式、内嵌样式

外部样式

<!-- rel引入的类型 -->
<link href="css/out.css" rel="stylesheet" />

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sz4VriTv-1650103539884)(C:\Users\qq\AppData\Roaming\Typora\typora-user-images\1650080482492.png)]$

选择器

通配标签类 id

行内样式优先级最高

文本

color：字体颜色
● font-size：字体大小
● font-family：字体
● text-align：文本对齐
● text-decoration:line-through：定义穿过文本下的一条线
● text-decoration:underline：定义文本下的一条线 (none 去掉下划线)
● text-decoration:none：定义标准的文本
● font-style: italic;斜体文本
● font-weight:字体粗细
● line-height:设置行高
● letter-spacing可以指定字符间距一般是中文字符英文单词用word-spacing
● text-indent用来设置首行缩进（2em 两个单位的字体缩进）

背景

● background-color背景颜色
● background-image背景图片

都可以设置图片

● background-repeat背景重复
● background-size背景尺寸
● background- position 背景位置

CSS 列表属性可以放置、改变列表项标志，或者将图像作为列表项标志。
● list-style-image 将图象设置为列表项标志。前面改为指定图片
● list-style-position 设置列表中列表项标志的位置。
● list-style-type 设置列表项标志的类型。改变前面标志
● list-style 简写属性。

CSS伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状
态的标签设置样式时，就可以使用伪类。
● 伪类的语法：

:visited访问过

:hover伪类表示鼠标移入的状态
:active表示的是被点击的状态
:focus向拥有键盘输入焦点的标签添加样式。（输入框）

● 定义透明效果的属性是 opacity。
opacity 属性设置标签的不透明级别值为1。
规定不透明度：从 0.0 （完全透明）到 1.0（完全不透明）

块级,行级,行级块标签

块级标签：无论内容多少都会独自占一行（可以设置长宽）

例如 p h1 ul ol hr/等

行级标签：只占自身大小的标签，不会占一行（不能设置长宽）

例如font b i a

行级块标签：只占自身大小，可以设置长宽

例如 input/ img

● 通过display样式可以修改标签的类型。
可选值：
block ：设置标签为块标签
inline ：设置标签为行级标签
inline-block ：设置标签为行级块标签
none ：隐藏标签（标签将在页面中完全消失）

div标签
div是块级标签，可以放置任何标签。
div没有任何附加功能，给了什么属性就能变成什么样。
div主要的作用是被用来布局网页。
span标签
span是行级标签
span 没有任何附加功能，给了什么属性就能变成什么样。
span标签被用来选中文档中的文字。

盒子模型

–内容区(content)

–内边距(padding)

–边框(border)

–外边距(margin)

● 内容区指的是盒子中放置内容的区域，也就是标签中的文本内容，子标
签都是存在于内容区中的。
● 如果没有为标签设置内边距和边框，则内容区大小默认和盒子大小是一
致的。
● 通过width和height两个属性可以设置内容区的大小而不是整个盒子的大
小。
● width和height属性只适用于块标签(包含行级块)。

设置宽高设置的是内容区

内边距设置 padding：上右下左

边框设置 border：粗细颜色类型

类型：dotted （点线） dashed （虚线） solid （实线） double （双线） groove
（槽线）

border-radius设置四个角为圆角边框
border-top-left-radius设置左上为圆角边框

外边距

外边距是标签边框与周围标签相距的空间。使用margin属性可以设置
外边距。用法和padding类似，同样也提供了四个方向的。

外边距不会影响盒子的整体大小，但是会影响盒子的位置，会影响盒子
的实际控制范围。

垂直设置为auto时值为0，所以水平居中也可以简写为 margin: 0 auto

清楚浏览器默认样式

margin: 0;

padding: 0;

}

• 所谓浮动指的是使标签脱离原来的文档流，在父标签中浮动起来。
浮动使用float属性。
可选值：
none ：不浮动
left ：向左浮动
right ：向右浮动
● 块级标签和行级标签都可以浮动，当一个行级标签浮动以后将会自动变为一个块级标
签。当一个块级标签浮动以后，宽度会默认是内容的宽度，所以当漂浮一个块级标签
时我们都会为其指定一个宽度。

** 当一个标签浮动以后，其下方的标签会上移**
● 浮动会使标签完全脱离文档流，也就是不再在文档中在占用位置标签浮
动以后即完全脱离文档流，这时不会再影响父标签的高度。也就是浮动
标签不会撑开父标签。

clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不
发生变化。