Html+CSS相关知识

Html+CSS相关知识

HTML+CSS

HTML

前端开发简介

根据 W3C（万维网联盟） 标准，一个网页主要由三部分组 成：结构、表现还有行为。

万维网联盟定义了网页中的HTML、CSS、DOM、 HTTP、XML等标准。

  • HTML 结构：用于描述页面的结构。
  • CSS 表现：用于控制页面中元素的样式。
  • JavaScript 行为：用于响应用户操作。

HTML 是什么

  • HTML（Hypertext Markup Language） 超文本标记语言。
  • 所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。

一个最基本的HTML页面：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<h1>网页正文</h1>
</body>
</html>

标签

  • HTML中的标记指的就是标签。HTML使用标记标签来描述网页。

  • 结构：

    <标签名>标签内容</标签名>
<标签名 />

元素

  • 将一个完整的标签称为元素。

  • 子元素、父元素。

    <h1>一级标题</h1>
上边的h1我们就称为元素
<p>我是一个<em>段落</em></p>
p也是一个元素，em是p的子元素，p是
em的父元素。

属性

  • 可以为 HTML 标签设置属性。属性为 HTML 元素提供附加信息。

  • 属性需要设置在开始标签或自结束标签中。

  • 属性总是以名称/值对的形式出现。有些属性可以是任意值，有些则必须是指定值。

    <h1 title="我是一个标题">标题</h1>
<img src="" alt="" />

常见属性

  • id

    id 属性作为标签的唯一标识，在同一个网页中不能 出现相同的 id 属性值。

  • class

    class 属性用来为标签分组，拥有相同 class 属性的 标签我们认为就是一组，可以出现相同的 class 属性，可以为一个元素指定多个 class。

  • title

    title 属性用来指定标签的标题，指定 title 以后，鼠 标移入到元素上方时，会出现提示文字。

注释

  • HTML 注释中的内容不会在网页中显示。

  • 格式

    <!-- 注释内容 -->

  • 注释不能嵌套！

HTML 的发展

  • 1993年6月：HTML第一个版本发布。
  • 1995年11月：HTML2.0
  • 1997年1月：HTML3.2（W3C推荐）
  • 1999年12月：HTML4.01（W3C推荐）
  • 2000年底：XHTML1.0（W3C推荐）
  • 2014年10月：HTML5（ W3C 推荐）。

doctype

HTML 总共有那么多的版本，而且这其中至少有三个版本在广泛使用，那么浏览器怎 么知道我们在使用哪个版本呢?

为了让浏览器知道我们使用的 HTML 版本我们还需要在网页的最上边添加一个 doctype 声明，来告诉浏览器网页的版本。

<!DOCTYPE html> html5 版本的声明。

编码问题

  • 编码：中国两个字在计算机的底层保存的可能要 转换为10100101这种二进制码，这一过程 称为编码。
  • 解码：计算机在读取文件时需要将10100101在转 换为中国给我们显示这一过程称为解码。

字符集

中国两个字到底是10100101 还是01011010，到底由谁说了算？我们还需要一个东西称为字符集，

  • 字符集规定了如何将文本转换为二进制编码。
  • 常见的字符集：ASKII、ISO8859-1、GBK、 GB2312、UTF-8。

乱码

当编码和解码使用不同字符集时便会出现乱码问题。

  • 解决：统一两者（编码、解码）使用的字符集。
  • 为了页面有更好的使用性，我们一般 使用 utf-8。

常用标签

html 元素标签名都是小写。

块级元素：自动换行，可设置宽高。

  • div,h1-h6,p,pre,ul,ol,li,form,table,label等

行内元素：无法自动换行，无法设置宽高。

  • a,img,span，i（斜体）,em（强调）,sub(下标)，sup（上标）等

行块级元素：无法自动换行，可设置宽高。

  • (button,input，textarea,select), img等

meta

作用：

  • 标签可提供有关页面的元信息，比如 针对搜索引擎和更新频度的描述和关键词。
  • 标签位于文档的头部，不包含任何内 容。 标签的属性定义了与文档相关联 的名称/值对。
meta的用法
• 设置页面的字符集
– <meta charset="utf-8">
• 设置网页的描述
– <meta name="description" content="">
• 设置网页的关键字
– <meta name="keywords" content="">
• 请求的重定向
– <meta http-equiv="refresh" content="5;url=地址"/>

html

作用： – 标签用于告诉浏览器这个文档中包含 的信息是用HTML编写的。

用法：

  • 所有的网页的内容都需要编写到 html 标签中， 一个页面中 html 标签只能有一个。
  • html 标签中有两个子标签 head 和 body 。

head

作用： – 标签用来表示网页的元数据，head 中 包含了浏览器和搜索引擎使用的其他不可见信 息。

用法：

  • head 标签作为 html 标签的子元素的出现，一 个网页中只能有一个 head。

title

作用：

  • title 标签表示网页的标题，一般会在网页的标题栏上显示。
  • title 标签中的文字，是页面优化的最重要因素。在搜索引擎的搜索时最先看到的、最醒目的内容。

用法：

  • 建议将title标签紧贴着head标签编写，这样搜索 引擎可以快速检索到标题标签。
  • 网站中的多个页面的 title 也不应该重复，这样不利 于搜索隐藏检索。

body

作用：

  • 标签用来设置网页的主体，所有在页 面中能看到的内容都应该编写到 body 标签中。

用法：

  • body标签作为 html 的子标签使用。

h1~h6

作用：

  • h1~h6 都是网页中的标题标签，用来表示网页 中的一个标题，不同的是，从h1~h6重要性越 来越低。
  • 标题标签相当于正文的标题，通常认为重要性 仅次于页面的 title。 – 一般标题标签我们只会使用到 h3，h3以后的标 题标签对于搜索引擎就没有什么意义了。
  • 一个页面中只会使用一个 h1 标签。

p

作用：

  • 标签表示网页中的一个段落。
  • 一般浏览器会在段落的前和后各加上一个换行， 也就是段落会在页面中自成一行。

br

作用 :

  • 标签表示一个换行标签，使用 br 标签可 以使 br 标签后的内容另起一行。

hr

作用：

  • 标签是水平线标签，使用 hr 标签可以在 页面中打印一条水平线，水平线可以将页面分 成上下两个部分。

img

作用：

  • – < img />标签是图片标签，可以用来向页面中 引入一张外部的图片。
  • 属性：
    • – src 指向一个外部的图片的路径。
    • – alt 图片的描述

a

作用：

  • – 标签是超链接标签，通过a标签，可以快 速跳转到其他页面。
  • 属性：
    • – href 指向一个链接地址 。href="javascript:void(0)" 取消跳转。
    • – target 设置打开目标页面的位置，可选值：_blank 新窗口、 _self 当前窗口。

实体

实体符号

  • 小于号： <
  • 大于号： >
  • 空格：  
  • 和符号： &
  • 版权：©
  • 引号： "
  • 注册商标： ®
  • 商标： ™

开发工具

  • 文本编辑器（Notepad、sublimeText）
  • IDE

CSS 层叠样式表

简介：

表现：通过样式表可以对网页进行装饰。

  • 所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的。

  • 而 css 就可以分别为网页的各个层次设置样式。

基本语法：

CSS 的样式表由一个一个的样式构成，一个样式又由选择器和声明块构成。

语法：

  • 选择器 {样式名:样式值；样式名:样式值 ; }

  • p {color:red ; font-size:12px;}

行内样式：

  • 可以直接将样式写到标签内部的style属性中，这种样式不用填写选择器，直接编写声明即可。

     <p style="color: red;font-size: 30px"></p>

  • 这种方式编写简单，定位准确。但是由于直接将 css 代码写到了 html 标签的内部，导致结构与表现耦合，同时导致样式不能够复用，所以这种方式我们不使用。

内部样式表：

  • 可以直接将样式写到 style 标签中。

    <style>
p{color:red; font-size: 30px;}
</style>

  • 这样使 css 独立于 html 代码，而且可以同时为多个元素设置样式，这是我们使用的比较多的一种方式。

  • 但是这种方式，样式只能在一个页面中使用，不能在多个页面中重复使用。

外部样式表：

  • 可以将所有的样式保存到一个外部的 css 文件中，然后通过标签将样式表引入
    到文件中。
<link rel="stylesheet" type="text/css" href="style.css">
  • 这种方式将样式表放入到了页面的外部，可以在多个页面中引入，同时浏览器加载文件时可以使用缓存，这是我们开发中使用的最多的方式。

选择器

选择器（selector）作用：会告诉浏览器网页上的哪些元素需要设置什么样的样式。

元素选择器

  • 元素选择器（标签选择器），可以根据标签的名字来从页面中选取指定的元素。

  • 语法

标签名 {}
//例如：
p {}

类选择器(使用最多)

  • 类选择器，可以根据元素的 class 属性值选取元素。

  • 语法：

.className { }
//比如 .hello 会选中页面所有class属性为 hello 的元素。

ID选择器

  • ID 选择器，可以根据元素的 id 属性值选取元素。

  • 语法：

#id { }
//比如 #box 会选中页面中 id 属性值为 box 的元素，
//和 class 属性不同，id 属性是不能重复的。

复合选择器

  • 复合选择器，可以同时使用多个选择器，这样可以选择同时满足多个选择器的元素。

  • 语法：

选择器1选择器2 {}
//例如 div.box1 会选中页面中具有 box1 这个 class 的 div 元素

群组选择器

  • 群组选择器，可以同时使用多个选择器，多个选择器将被同时应用指定的样式。

  • 语法：

选择器1,选择器2,选择器3 { }
//比如 p,.hello,#box {} 会同时选中页面中p元素，class 为 hello 的元素，
// id 为 box 的元素

通用选择器

  • 通用选择器，可以同时选中页面中的所有元素。

  • 语法：

*{ }

后代选择器

族谱：


标签之间的关系：

  • 祖先元素– 直接或间接包含后代元素的元素。

  • 后代元素– 直接或间接被祖先元素包含的元素。

  • 父元素– 直接包含子元素的元素。

  • 子元素– 直接被父元素包含的元素。

  • 兄弟元素– 拥有相同父元素的元素。

  • 后代选择器可以根据标签的关系，为处在元素内部的代元素设置样式。

  • 语法：

祖先元素 后代元素 后代元素 { }
//比如 p strong {} 会选中页面中所有的 p 元素内的 strong 元素

伪类和伪元素

有时候，你需要选择本身没有标签，但是仍然易于识别的网页部位，比如段落首行或鼠标滑过的连接。CSS为他们提供一些选择器：伪类和伪元素。

给链接定义样式

有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4种不同的状态。

  • 正常链接
a:link {}
  • 访问过的链接
a:visited{}//（只能定义字体颜色）
  • 鼠标滑过的链接
a:hover{}
  • 正在点击的链接
a:active{}

其他

  • 获取焦点
:focus{}
  • 指定元素前
:before{}
  • 指定元素后
:after{}
  • 选中的元素
::selection{}

其他选择器

以下内容可能会引起不适，谨慎观看

给段落定义样式：

  • 首字母

  • 首行

属性选择器：

属性选择器可以挑选带有特殊属性的标签。

语法：

[属性名]
[属性名="属性值"]
[属性名~="属性值"]
[属性名|="属性值"]
[属性名^="属性值"]
[属性名$="属性值"]
[属性名*="属性值"]

子元素选择器：

  • 子元素选择器可以给另一个元素的子元素设置样式。

  • 语法：

父元素 > 子元素{}
//比如 body > h1 将选择 body 子标签中的所有 h1 标签。

其他子元素选择器：

  • :first-child– 选择第一个子标签

  • :last-child– 选择最后一个子标签

  • :nth-child-选择指定位置的子元素

  • :first-of-type– 选择指定类型的子元素

  • :last-of-type– 选择指定类型的子元素

  • :nth-of-type– 选择指定类型的子元素

兄弟选择器：

  • 除了根据祖先父子关系，还可以根据兄弟关系查找元素。

  • 语法：

兄弟元素 + 兄弟元素{}//查找后边一个兄弟元素
兄弟元素 ~ 兄弟元素{}//查找后边所有的兄弟元素

否定伪类：

  • 否定伪类可以帮助我们选择不是其他东西的某件东西。

  • 语法;

:not(选择器){}
//比如 p:not(.hello) 表示选择所有的 p 元素但是 class 为 hello 的除外

继承

  • 在 CSS 中祖先元素的样式，同样也会被子元素继承。

  • 继承是指应用在一个标签上的那些CSS样式会同时被应用到其
    内嵌标签上。

  • 并不是所有样式都会被继承？？？

选择器的权重

如果一个元素同时满足了多个选择器，哪个样式生效?

选择器的权重

不同的选择器有不同的权重值

  • 内联样式：权重是 1000

  • id选择器：权重是 100

  • 类、属性、伪类选择器：权重是 10

  • 元素选择器：权重是 1

  • 通配符：权重是 0

计算权重需要将一个样式的全部选择器相加，比如上边的body h1的权重是20，h1的权重是10，所以第一个选择器设置的样式会优先显示。

文本标签

文本标签：标识网页中的不同内容。

em 和 strong

  • em 标签用于表示一段内容中的着重点。
  • strong 标签用于表示一个内容的重要性。
  • 通常 em 显示为斜体，而 strong 显示为粗体。

i 和 b

  • i 标签会使文字变成斜体。
  • b 标签会使文字变成粗体。

small

  • small 标签表示细则一类的旁注，通常包括 免责声明、注意事项、法律限制、版权信息等。
  • 浏览器在显示 small 标签时会显示一个比父元素小的字号。

cite

  • 使用 cite 标签可以指明对某内容的引用或参 考。例如，戏剧、文章或图书的标题，歌 曲、电影、照片或雕塑的名称等。
  • 显示为斜体。

《七龙珠》讲的是召唤神龙的故事。

blockquote 和 q

  • blockquote 和 q 表示标记引用的文本。
  • blockquote 用于长引用，q 用于短引用。

sub 和 sup

  • sup 和 sub 用于定义上标和下标。

ins 和 del

  • ins 表示插入的内容，显示时通常会加上下 划线。
  • del 表示删除的内容，显示时通常会加上删 除线。

code 和 pre

  • 如果你的内容包含代码示例或文件名，就 可以使用 code 元素。
  • pre 元素表示的是预格式化文本，可以使用 pre 包住 code 来表示一段代码。
function a(){}

有序列表 ol li

  • 使用 ol 和 li 来创建一个有序列表。

无序列表 ul li

  • 使用 ul 和 li 来创建一个无序列表。

定义列表 dl dd dt

  • 使用dl、dd、dt来创建一个定义列表。

样式

单位

  • px
如果我们将一个图片放大的话，我们会发现一个图片,是有一个一个的小色块构成的，这一个小色块就是一
个像素，也就是1px，对于不同的显示器来说一个像素的大小是不同的。
  • 百分比
也可以使用一个百分数来表示一个大小，百分比是相对于父元素来说的，如果父元素使用的大小是 16px，则100%就是16px，200%就是32px。
  • em
em 和百分比类似，也是相对于父元素说的，1em 就相当于100%，2em 相当于200%，1.5em 相当于150%。

颜色

在 CSS 中可以直接使用颜色的关键字来代表 一种颜色。

十六进制颜色

  • 用的最多的颜色是十六进制符号。一个颜色值， 比如：#6600FF 实际上包含了三组十六进制的 数字。每 2 位数字分表代表 RGB（红绿蓝） 颜色的浓度。
  • 如果每一组数中的两个数字都相同，就可以把十六进制的数字缩短为只有 3 个字符，如将 #6600FF缩短为#60F。

RGB值

  • 颜色也可以使用 RGB 值来表示。
  • 可以使用 0~255 的数值，也可以使 用 0%~100% 的百分比数。
RGB(100%,0%,0%)
RGB(0,255,0)//也是指红绿蓝的浓度

RGBA

  • RGBA表示一个颜色和 RGB类似，只不过比 RGB多了一个A（alpha）来表示透明度。
RGBA(255,100,5,0.5)//透明度范围 0-1，1表示完全不透明。

文字大小

  • font-size 用来指定文字的大小。
  • font-family 用来指定文字的字体。
1、一般来说只有用户计算机中安装了我们指定的字体时，它才会显示，否则该属性是没有意义的。
2、如指定了三种字体，那么到底使用的是哪个呢？浏览器会优先使用第一个，如果没有找到则使用第二个，以此类推。

字体

  • font-style 用来指定文本的斜体。
  • font-weight 用来指定文本的粗体。
  • font-variant 属性可以将字母类型设置为小 型大写。在该样式中，字母看起来像是稍 微缩小了尺寸的大写字母。

行间距

  • line-height 用于设置行高，行高越大则行 间距越大。

大写化

  • text-transform 样式用于将元素中的字母全 都变成大小

文本的修饰

  • text-decoration 属性，用来给文本添加各 种修饰。通过它可以为文本的上方、下方 或者中间添加线条。

字母间距和单词间距

  • letter-spacing 用来设置字符之间的间距
  • word-spacing 用来设置单词之间的间距

对齐文本

  • text-align 用于设置文本的对齐方式。
 可选值：
– left：左对齐
– right：右对齐
– justify：两边对齐
– center：居中对齐

首行缩进

  • text-indent 用来设置首行缩进。
  • 该样式需要指定一个长度，并且只对第一 行生效。

盒子模型

在网页中一切皆是盒子。

  • CSS 处理网页时，它认为每个元素都包含在一 个不可见的盒子里。
  • 为什么要想象成盒子呢？因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。
  • 我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。

盒子模型
盒子模型

content 内容区

  • 内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。
  • 如果没有为元素设置内边距和边框，则内容区大小 默认和盒子大小是一致的。
  • 通过 width 和 height 两个属性可以设置内容区的大 小。
  • width 和 height 属性只适用于块元素。

padding 内边距

  • 内边距指的就是元素内容区与边框以内 的空间。
  • 默认情况下 width 和 height 不包含 padding 的大小。
  • 使用 padding 属性来设置元素的内边距。
• padding:10px 20px 30px;
– 分别指定上、左右、下四个方向的内边距
• padding:10px 20px;
– 分别指定上下、左右四个方向的内边距
• padding:10px;
– 同时指定上左右下四个方向的内边距
• 同时在 css 中还提供了padding-top、padding-right、paddingright、padding-bottom 分别用来指定四个方向的内边距。

border 边框

  • 可以在元素周围创建边框，边框是元素可见框的最外部。
  • 可以使用 border 属性来设置盒子的边框。
  • 和 padding 一样，默认width和height 不包括边框的宽度。

margin 外边距

  • 外边距是元素边框与周围元素相距的空间。
  • 使用 margin 属性可以设置外边距。
  • 当将左右外边距设置为 auto 时，浏览器会将左右外边距设置为相等，所以这行代码 margin:0 auto 可以使元素居中。
  • 我们不能为行内元素设置 width、height、 margin-top 和 margin-bottom。
  • display：我们可以通过修改 display 来修改元素的性质。
可选值：
– block：设置元素为块元素
– inline：设置元素为行内元素
– inline-block：设置元素为行内块元素
– none：隐藏元素（元素将在页面中完全消失）
- flex: 弹性布局（推荐使用）
  • visibility ：visibility属性主要用于元素是否可见。和 display 不同，使用 visibility 隐藏一个元 素，隐藏后其在文档中所占的位置会依然 保持，不会被其他元素覆盖。
  • overflow：当相关标签里面的内容超出了样式的宽度 和高度是，就会发生一些奇怪的事情，浏览器会让内容溢出盒子
可以通过 overflow 来控制内容溢出的情况,不如实现内容超出时以省略号显示。
可选值：
– visible：默认值
– scroll：添加滚动条
– auto：根据需要添加滚动条
– hidden：隐藏超出盒子的内容

注意：使用了 flex 弹性布局后，就可以减少使用

  • float 浮动、position 定位（相对定位、绝对定位）。
  • z-index ：当元素开启定位时，可以使用该属性，定义元素在页面显示的层级。

表格

表单

- <from> 标签
- <input> 标签 ，type 属性：
    – text：文本框
    – password：密码框
    – submit：提交按钮
    – radio：单选按钮
    – checkbox：多选框
    – reset ：重置按钮
- select、option 标签
    • select用于创建一个下拉列表。
    • option表示下拉列表中的列表项。
    • optgroup用于为列表项分组。
等等。。。
posted @ 2022-01-22 15:09  星命定轨  阅读(41)  评论(0)  编辑  收藏  举报