Html+CSS学习笔记

最新推荐文章于 2024-09-27 20:13:19 发布

原创最新推荐文章于 2024-09-27 20:13:19 发布 · 1.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

本文详细介绍了前端开发的基础组成：HTML、CSS和JavaScript，涵盖了文档类型声明、字符集设定、内联与外部样式表的应用、块与内联元素的区别、各种CSS选择器的使用技巧、常见HTML标签的功能及应用场景等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端的基本组成：

结构 html
表现 css
行为 JS

文档说明

声明文档的类型，是Html4 还是 xhtml 还是H5

<!DOCTYPE html/>H5的文档说明

字符集

声明一个网页的编码的格式。

<meta charset="utf-8" />//声明这个html文件的编码格式为UTF-8

有关于空格

html中，字符之间再多的空格，浏览器也会当成一个空格，同样，换行也一样。也会当成一个空格。

实体

不能直接使用<> 等特殊字符，需要使用一些特殊的符号，这些特殊符号成为实体，（转义字符）
实体以&开头，;结尾参考

内联样式

就是把样式写到标签里面的style里面。内联样式只对当前标签起作用。

内部样式表

将css属性写在head里面的style里面写样式。

外部样式表

将样式独立分开写到一个独立的css文件中，在head里面导进去，就可以使用这些属性。

<link rel="stylesheet" type="text/css" href ="style.css"/>

块元素和内联元素

块元素：块元素会独占一行，常见的块元素：div h1 p
内联元素（行内元素）:只会占用自身大小。常见的内联元素：span a img iframe，（span 专门用来选中文字，来设置样式）
块元素一般要用来布局，内联元素一般为元素设置样式。一般用块元素包含内联元素，内联元素一般不会包含块元素
特殊1：a可以包含任意的元素，包括块元素，除了a本身以外。
特殊2： p元素不能包含其他任意的块元素。

css选择器

元素选择器：p{} 选中所有的p元素
id选择器：#id{} 一个页面中有且仅有一个。
类选择器：.{} 一个页面中可以有多个（一个元素里面可以有多个class，多个class之间用空格隔开）
选择器分组，选择器1，选择器2{}，满足选择器1和满足选择器2的元素全部都会选中（或关系）
通配选择器：*{}选中所有元素
复合选择器，选择器1选择器2{}（多个选择器直接挨在一起，表示既要满足选择器1又要满则选择器2，复合选择器一般是类选择器和元素选择器组成，一般不会包含ID选择器，因为id已经可以确定唯一性了。前面的组选择器是或关系，这个是且的关系）
后代选择器表示选择元素里面的元素，元素之间用空格隔开

div span{} 表示选中div里面的span元素
#divid span{} 表示选中id为divid里面的span元素
#divid p span{} 表示选中id为divid里面的p元素里面的span元素

子元素选择器表示选择直接子元素，其他子元素都不要

div > span 表示选中div里面的直接的span元素，不要孙元素

伪类选择器：专门用来表示元素的特殊的状态，例如超链接是否访问过、文本框是否获取焦点等。。。

:link 普通的链接，也就是没访问过的链接
:visited 表示访问过的链接,只能设置字体的颜色，其他属性不起作用，例如不能设置字体的大小等。
:hover 表示鼠标在上面的时候
:activity 被激活的时候，也就是正在点击的时候。
    hover 和 activity 不仅可以给a标签起作用，还可以给其他的标枪使用
:focus 获取焦点的时候。例如：input输入框的获取焦点的时候。
::selection 选中，也就是鼠标选中页面上的内容的时候（火狐里面需要::-moz-selection）moz只支持火狐浏览器，

伪元素选择器：表示元素中特殊的位置。

:first-letter 表示首字母
:first-line 表示第一行
:before 表示标签之后，内容之前的部分
:after 表示标签之前，内容之后
    before和after要结合content使用。p:before{content:"我是前面"} 表示在P标签的前面加上content这段文本

属性选择器：可以根据元素中是否有某个属性，或者具有某个属性值，例如：title属性，表示鼠标移动到元素上的时候，元素的属性提示就会出来。

p[title] 表示具有title属性的p元素
p[title = abc] 表示具有title属性，并且属性值必须是abc的p元素
p[title ^= 'ab'] 表示具有title属性，并且属性值必须是以ab开头的属性的p标签。
p[title $= 'c'] 表示具有title属性，并且属性值必须是以c结尾的p标签。
p[title *= 'c'] 表示具有title属性，并且属性值必须要有c 的P标签

其他子类选择器：

:first-child 第一个直接子元素
p:first-child 表示所有的直接P元素中的第一个
body > p:first-child 表示body里面的直接子元素中的第一个p元素
:last-child 和first-child就差不多了，
:nth-child 表示第几个元素 当传even的时候表示偶数，odd表示奇数
p:nth-child(2){} 表示选中直接子元素的p当中的第二个元素；

:fist-of-type
:last-of-type
:nth-of-type
    这三个和前面三个差不多，只不过前面三个必须要是第一个，而这三个前面还可以有其他子元素，前面三个表示元素前面不能有其他子元素

兄弟选择器

span + p 表示选中span之后的第一个p元素，span和p之间不能有其他元素
span - p 和 + 一样，一前一后
span ~ p 表示span后的所有的p元素，其中span 和 p之间可以有其他元素，也可以没有

否定选择器：也就是选中全部，不要某一个，和选中相反。选中的所有元素中剔除某个元素

p:not(.cls){} 表示选择除了class为cls的p标签以外所有的p标签，

选择器的优先级

使用不同的选择器选中同一个元素的时候，选择器有一定的优先级；
id选择器的优先级大于类选择器，类选择器的优先级大于元素选择器
选择器的优先级：
    内联样式：1000 （指的是style写在标签里面）
    id选择器：100
    类和伪类：10
    元素选择器：1
    通配选择器：0
    继承的样式：没有优先级 （继承表示父元素的属性）
选择器中有多个选择器的时候，多个选择器的优先级相加，谁的大就谁优先
（但是要注意的是：10个类选择器最多也就优先级为90，不可能超过100）
（选择器的优先级一样，谁在样式的后面，谁生效）
（在样式的后面写!important在属性值的后面，分号的前面的时候，优先级最高）

伪类选择器的优先级：伪类选择器的优先级是一样的。但放置的位置不一样会有不一样的效果（伪类选择器的顺序应该是link visited hover active)

src:指定图片的地址；alt:图片描述，在图片没有的时候显示,搜索图片检索的时候，需要用到alt
width 和 height 只指定一个的时候，图片会按比例放大或者缩小。
图片适用原则：效果一致。使用小的，效果不一致，使用好的。
img 也是一个自结束标签

meta

可以使用这个标签来设置网页的关键字，描述，请求的重定向等。
name:名字 keywords，description等。
content:内容，里面的内容可以用逗号分隔。
<meta http-equiv="refresh" content="5;url=www.baidu.com"> 5秒后打开baidu

iframe

内联框架，
src，指定框架的页面

超链接，href 属性指定目标跳转的 url
target  指定打开链接的位置。_self 自身，_black 打开一个新的窗口。也可以是iframe
a元素可以包含任意元素。除了它本身，也就是不能自我包含

center

居中，里面的内容都居中

块元素，会独占一行，无论内容多少都会独占一行
块元素有：P h1 h2 h3 等
div和其他块元素的区别，它是一个纯粹的块元素，主要的作用是对页面进行布局。

span

span是内联元素，行内元素，只占自身大小的元素，不会占用一行。
常见的内联元素，a img iframe
span 也没有任何语义，span专门用来选中元素，来进行设置样式。

em 和 strong

两个都是强调，em一般用于一段文字的某一部分，而strong表示整段的。

i 和 b

i 表示斜体 b 表示加粗

small 和 big

small 小 big 大 这两个标签常用于一段文字中，某个部分大一点或小一点

cite

表示引用或参考 多用于书名歌名等用书名号引起来的

q 和 quoteblock

两个都是引用 q用于短引用，会自动的加上双引号，quoteblock 表示块引用，会独立成一块显示

sup 和 sub

一个表示上标，一个表示下标，上标例如数学中次方的显示，下标一般用于化学符号的显示，例如水是H2O 2就用下标显示

删除，会自动的给标签里面的文字添加删除线

插入，会自动的给标签里面的内容添加下划线

预格式标签，也就是会保留代码里面的格式，不会因为多个空格压缩成一个空格等。代码里面文字是怎么样就怎么样

code

没啥意义，只是表示这是代码

列表标签
- ul li 组成的无序列表
- ol有序列表
- 定义列表 dl dt dd

ul 表示一个列表
    type ='disc' 实心圆点 默认
    type = quote 实心的正方形
    type = circle 空心的圆
    一般都不要type 一般用css去除掉，list-
li 表示列表里面的一个列表项
ol有序列表，区别是，有序列表前面多了序号123
ol的type 可以指定类型。
    type = 1 a A i、I（罗马数字）

定义列表 dl  dt dd
dl 是定义一个定义列表
dt 表示被定义的内容
dd 对我们定义内容的描述

ul dl ol 之间可以相互嵌套

Html 布局

长度单位
- px 像素
- % 百分比，表示占父元素的百分之多少。好处是父元素的改变的时候，子元素的大小也会改变
- em 和百分比类似，它是相对于当前元素的字体大小来计算的
  1em = 1 font-size
颜色

特殊的颜色可以直接写，例如，red green等，，，
rgb
background-color：rgb(161,187,209);
background-color：rgb(1%,18%,20%);表示255乘以百分比
background-color：#e43d2a;
字体颜色：直接只用color

字体

字体大小，浏览器默认的字体大小是16px
font-size，设置字体的大小。其实设置的并不是文字本身的大小，而是文字占有的大小。
font-family，设置字体的样式。font-family：微软雅黑;宋体，等等

当采用某种字体，当前浏览器有，就使用指定的字体，没有就显示默认的字体。
该样式可以指定多种字体，也就是可以接收多个参数，每个参数之间用逗号分开。
当采用多个字体的时候，浏览器会优先使用前面的，没有就下一个，一直没有就默认咯。
查看计算机中有什么字体，在C盘window里面的font文件夹里面
字体的分类
    sans-serif 非衬线字体
    minisoace 等宽字体
    curisive 草书字体
    fantasy 虚幻字体
        衬线和非衬线的区别是：衬线字体笔画头尾字体大小不一，非衬线字体，字体笔画的头尾大小一致。
        等宽字体，表示每个字体的宽度占的位置都一样。

font-style 字体样式

normal 正常
italic 斜体
oblique 倾斜 italic 和 oblique在大部分浏览器上是一样的 ，一般不会用oblique
inherit 继承父元素的字体样式      
font-weight 用来设置字体的加粗
normal 正常
bold 粗体
bolder 更粗
lighter 更细
还可以接收数字，100-900的整百的数值，但大部分浏览器并不支持，也就是100-500都一样的

font-variant，以用来设置小型大写字母

normal 正常
small-caps 小型的大写字母（所有的字母以大写的形式存在，但字母的大小比正常的大写字母要小）

font 样式，可以设置font-XXX的属性，可以设置5个相关的样式，将不同的属性用空格分开

例如 font：italic small-caps bold 60px ‘微软雅黑";
这些属性的顺序可以随意调换。也可以不写。
字体大小和样式，必须存在，且大小在倒数第二个位置，样式在最后一个。
5个属性合并在一起写的话，性能会比较好。

常见的布局属性

line-height 行高

line-height = 30px；表示行高为30px；
line-height = 150%；表示行高为字体大小的百分之150；
line-height = 1；表示一倍行高，跟100%是一样的效果
line-height 和 height 的大小一致的话，可实现字体在父元素中居中
行高属性，还可以跟在字体的属性后面。例如 font：30px/50px；表示字体大小为30px，行高是50；

text-trnsform

可以用来设置文本的大小写，这个属性对英文起作用，因为中文是没有大小写之分的
none 默认值
capitalize 单词首字母大写，所有的单词的首字母都大写，通过空格来识别单词
uppercase 所有的字母都大写
lowercase 所有的字母都小写

text-decoration 给文本添加装饰效果

none 默认值，没效果
underline 在文本添加一条下划线
overline 文本顶端添加一条线
line-through 添加一条删除线
a 标签的默认值是underlinne 需要去除超链接的下划线，去掉只需要设置为none就可以了

letter-spacing 设置字符之间的距离

none
10px 表示每个字符之间的间距是10px；对中英文都有效果

word-spacing 设置单词之间的间距

和 letter-spacing 一样，
这个属性，对英文有效果，对中文，很奇怪，每个词之间不会起作用，只会在遇到空格的时候起作用

text-align 对其方式

left 默认左对其
right 右对齐
center 居中对齐
justify 两端对齐

text-indent 首行缩进，只对第一行起作用。

20px 表示首行缩进20个像素。
2em 表示缩进两个字的大小。
可以是负数，表示缩进去了，隐藏了

width height 宽高

只是内容区域的大小，不包括border，padding等。

border 边框

border-width 边框大小
    接收1个值的时候， top right bottom left 都一样
    接收2个参数的时候，表示上下，左右
    接收3个参数的时候，表示 上 左右，下
    接收4个参数的时候，表示 上右下左
上面这中规律适合于下面这两种属性
    border-width 还可以单独设置。
    border-left 20px,表示，左边的边框的大小为20px。

border-color 边框颜色
border-style 边框样式
    solid 实线
    dotted 点状边框
    dashed 表示虚线边框
    double 双实线  
    其他值不常用

大部分浏览器的边框的宽和颜色都有默认值的，如果没有宽和颜色，那么默认都是0
如果设置了宽没设置颜色，那么颜色就会使用默认值，
只设置了颜色没有设置宽，那么就会使用默认的宽

border的简写，border ： 30px red solid；

padding 内边距

会影响我们元素的盒子的大小

margin 外边距

如果将 left 和 right 的两个值设置为auto的话，会自动的在这个元素的父元素中居中。
margin：0 auto；居中
垂直方向的外边距重合的时候，会取他们的最大值，而不是求和
如果父元素和子元素的外边距相邻，则会把子元素的外边距设置给父元素。（也就是父元素的第一个子元素的外边距会给父元素）

内联元素不能设置width和height（可以设置水平方向的padding，垂直方向的可以设置，但不影响布局）
display

inline 可以将一个元素当作内联元素显示，也就是行内元素
block 可以将一个元素设置块元素显示
inline-block 将一个元素转换成行内元素，可以将一个元素既有行内元素的特点，也有快元素的特点，既可以设置宽高，也不会独占一行
none 此元素不会被显示，隐藏元素

visibility

可以用来显示和隐藏元素
visible 显示 默认是显示的
hidden 隐藏，是占位隐藏，也就是没了，但依旧占着茅坑

overflow 定义溢出的内容怎么样显示

visible 默认，不会对溢出的内容进行处理
hidden 隐藏
scroll 滑动，不论内容是否溢出，都会加上水平的和垂直的滚动条
auto 内容会被修剪。会根据需要是否加上滚动条

float 浮动

默认是none，在文档流中，垂直摆放；left 向左浮动；right 向右浮动，
元素脱离文档流的时候，下边的元素会自动的向上移动
元素浮动后，会尽量想页面的左上或者右上浮动，知道遇到父元素或者其他兄弟浮动元素。
如果浮动元素上边是一个没有浮动的块元素。则浮动元素不会超过块元素，浮动的元素不会超多他上边的兄弟元素，最多最多一边齐。
浮动的元素不会盖住文字，文字会自动环绕在文字的周围。可以用来设置文字环绕的效果
如果div的width不设置的话，会自动的占满一行，但如果设置了浮动，那么，宽会被内容撑开。高也一样。

BFC 和 hasLayout

文档流中，父元素的高度默认是被子元素撑开的，如果给子元素设置了float，那么父元素的高度就沦陷了。

BFC（block formatting context）IE6（包括6）以下的浏览器不支持
    父元素的垂直外边距不会和子元素重叠
    开启bfc的元素不会被浮动元素重叠
    开启BFC的元素可以包含浮动的子元素
开启bfc的方式
    设置元素浮动（设置父元素的浮动）
    设置元素的绝对定位
        使用这2种方式，可以撑开父元素，但会导致父元素的宽度丢失，而且使用这种方式会导致下边的元素上移
    设置元素为 display：inline-block
        可以解决问题，但还是宽度还是丢失。
    将元素的overflow设置为非visible，例如设置为auto或者hidden

IE6以下是不支持BFC的，但还有一个属性，hasLayout属性，也是一个隐含的属性。
开启hasLayout的方式
    设置zoom属性，这个属性表示放大N倍，zoom:1;表示放大1倍，也就是不变。
        这种方式只支持IE，且是在IE8以下，其他浏览器都不支持。