• 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用于为列表项分组。
等等。。。
  • 相关阅读:
    转：Asp.net Mvc4默认权限详细（上）
    UITableViewCell点击不能push解决方法
    Sublime Text3学习参考集
    Mac搭建学习PHP环境
    Xcode里如何修改类的名字
    Xib中设置控件的圆角、边框效果
    MarkDown的使用
    iOS UItextView监听输入特定字符跳转页面选择选项返回
    创建podspec文件，为自己的项目添加pod支持
    iOS单例模式
  • 原文地址：https://www.cnblogs.com/pengguozhen/p/15834060.html
Copyright © 2020-2023  润新知