一.编程语言大纲

服务器后端编程语言：Java、Nodejs、C++、Go、Python等

客户端开发编程语言：

Android端：Java、kotlin
iPhone端：OC、Swift
iPad端：
网页开发：HTML、CSS、JavaScript
Win：C#
mac os端：OC、Swift

二.开发工具选择

[webstorm]、[sublime Text]、[visual studio code]、[atom]、[HBuilder]、[Intellij IDEA]、[Dreamweaver]等

特点：智能提示、高亮识别、语法检测、集成环境、开发效率高

1. webstorm：优点集成开发工具，包罗万象；缺点：重（占用系统资源多）收费

2. VSCode：优点轻（相当于一个编辑器）免费；缺点需要安装一些插件来辅助开发

用到的插件：
- 中文插件：Chinese
- 颜色主题：atom one dark
- 文件夹图标：VScode Great lcons
- 在浏览器中打开网页：open in browser、live sever（自动刷新浏览器）
- 自动重命名标签：auto rename tag
软件的配置：
- 自动保存：文件->自动保存
- 字体大小：文件->首选项->设置控制字体大小（font size）
- 自动换行：设置->editor：word wrap改成on
- 空格渲染方式：render whitespace改成all
- 代码缩进方式：tab size由4个字符改成2个

3. 推荐安装的软件

Chrome浏览器：开发必备浏览器
VScode编辑器：开发推荐编辑器（编写代码）
XMind：思维导图笔记软件
Typora：markdown笔记软件

三.浏览器的作用

网页的组成部分：HTML+CSS+JavaScript

浏览器最核心的部分是：“浏览器内核”

浏览器最核心的部分是渲染引擎（Rendering Engine）一般称为“浏览器内核”

负责解析网页语法，并渲染（显示）网页

常见浏览器内核有：

trident（三叉戟）：IE、360安全浏览器、搜狗高速浏览器、百度浏览器、UC浏览器
gecko（壁虎）：Mozilla Firefox
presto（急板乐曲）：blink（眨眼）：Opera
webkit：safari、360极速浏览器、搜狗高速浏览器、移动端浏览器
webkit->blink：Google Chrome，edge

不同的浏览器内核有不同的解析、渲染规则，所以同一网页在不同内核的浏览器中的渲染效果也可能不同

HTML元素

一.概要(html基础)

超文本标记语言（hypertext markup language，简称HTML）是一种用于创建网页的标记语言

html元素列表: https://developer.mozilla.org/zh-CN/docs/Web/HTML/element

vscode快速html结构: [!回车]

标签元素可分为: 单标签元素/双标签元素

双标签元素:html/body/head/h2/p/a等

单标签元素:br/img/hr/meta/input等

元素中也可以拥有属性:<p class="editor-note">我是一个段落</p> class作为属性

1. 元素属性的分类

有些属性是公共的,每个元素都可以设置

比如:class/id/title

有些属性是元素特有的,不是每一个元素都可以设置

比如meta属性的charset属性/img元素的alt属性等

2. 元素的嵌套关系

<body>
  <p class="editor-note">我是一个段落</p>

  <ul>
    <!--快速复制上一行alt+shift+向下箭头-->
    <li>
      <div>
        <span>aaa</span>
        <span>bbb</span>
      </div>
    </li>
    <li></li>
  </ul>
</body>

3. 注释的语法

ctrl+/ 快速写注释快捷键

    <!-- 注释内容 -->

二.HTML常见的元素

1. HTML结构分析

HTML最上方第一行[<!DOCTYPE html>]文本我们称之为文档类型声明,用于声明文档类型

HTML文档声明，告诉浏览器当前页面是HTML5页面
让浏览器用HTML5的标准去解析识别内容；
必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题

lang属性=设置的语言["en"表示英文;"zh-CN"表示简体中文]

1.1 haed元素

HTML haed元素 规定文档相关的配置信息[也称为元数据],包括文档的标题,引用的样式和脚本等; 可以理解为对整个页面的配置

常见设置的2个元素:[title]标题; [meta]元素-charset属性设置网页的字符编码 一般为[utf-8];<meta charset="UTF-8">

1.2 body元素

html元素列表: https://developer.mozilla.org/zh-CN/docs/Web/HTML/element

常见的元素(90%的时间都在写这几个)

p元素/h元素
img元素/a元素/iframe元素
div元素/span元素

其他元素:

ul/ol/li元素
button元素/input元素
table/thead/tbody/thead/th/tr/td

HTML5新增元素: 后面讲解

2. h1-h6/p元素

h1-h6 = 标题元素
p = 段落元素

  <h1>这是一级标题</h1>
  <h2>这是二级标题</h2>
  <h3>这是三级标题</h3>
  <h4>这是四级标题</h4>
  <h5>这是五级标题</h5>
  <h6>这是六级标题</h6>
  <p>这是一个段落</p>  
<br> = 段落换号符

3. img/a/iframe元素

3.1 img元素:两个属性(src="图片的地址" alt="1.资源加载不成功时以文本显示;2.给屏幕阅读器使用")

<img src="https://123.ka81.cn/2024pic/202403111526001.jpg" alt="秀人网模特">

3.2 a元素(超链接):两个常见属性

href="指定要打开的url地址;也可以是本地地址"
target="_self(默认值,当前窗口打开); _blank(在新窗口打开)"

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

a元素本页面的锚点链接:

在跳转到的元素上添加id
定义a元素,并且a元素的href属性指向id

  <a href="#time01">跳转到一级标题</a>
  <a href="#time02">跳转到二级标题</a>
  <a href="#time03">跳转到三级标题</a>

  <h1 id="time01">这是一级标题</h1>
  <h2 id="time02">这是二级标题</h2>
  <h3 id="time03">这是三级标题</h3>

a元素与img元素结合使用: a元素中嵌套img元素即可实现

  <a href="https://www.baidu.com/" target="_blank">
    <img width="330" src="https://123.ka81.cn/2024pic/202403111526001.jpg" alt="秀人网模特">
  </a>

a标签指向其他协议地址: mailto

  <a href="mailto:123@qq.com">发邮件给123@qq.com</a>

iframe元素: 在一个网页中嵌套其他网页

  <iframe src="https://www.taobao.com/" width="800" height="600" frameborder="0"></iframe>
  
  <!-- frameborder值0和1;开启或不开启 -->

a元素target的其他值: 需要和iframe结合使用(嵌套关系下使用)
_parent:在父窗口打开
_top:在顶层窗口中打开

4. div/span元素

(特殊的;无所用无所不用)

div/span区别:div和span元素都是"纯粹的"容器, 也可以把它们理解成"盒子",它们都是用来包裹内容的

div元素: 多个div元素包裹的内容会在不同的行显示

一般作为其他元素的父容器,把其他元素包住,代表一个整体
用于把网页分成多个独立的部分

span元素:多个span元素包裹的内容会显示在同一行

默认情况下根普通文本几乎没区别
用于区分特殊文本和普通文本,比如用来显示一些关键字

5. 不常见元素

strong元素: 内容加粗

i元素: 内容斜体(开发中偶尔会用它来做字体图标)

code元素:用于显示代码(偶尔会使用用来显示等宽字体)

br元素:用于换行

html元素列表: https://developer.mozilla.org/zh-CN/docs/Web/HTML/element

6. HTML全局属性

全局数量列表: https://developer.mozilla.org/zh-CN/docs/Web/HTML/global_attributes

6.1 常见属性:

id: 定义唯一标识符(ID),该标识符在整个文档中必须是唯一的. 其目的是在链接(使用片段标识符), 脚本或样式(css)时标识元素

class: 一个以空格分隔的元素的类名(classes)列表, 它允许css和JavaScript通过类选择器或者DOM方法来选择和访问特定的元素

style: 给元素添加内联样式CSS

title: 包含表示与其所属元素相关信息的文本. 这些信息通常可以作为提醒呈现给用户,但不是必须的

三.额外知识点补充

1. 字符实体:

定义: 段落文本中有特别的字符会影响浏览器的解析, 此时就要用字符实体包括该内容

html实体是一段以连字号(&)开头,以分号(;)结尾的文本

2. URL的规则和URI的区别

URL代表是统一资源定位符(Uniform Resource Locator). URL 无非就是一个给定的独特资源在 Web 上的地址。理论上说，每个有效的 URL 都指向一个唯一的资源。这个资源可以是一个 HTML 页面，一个 CSS 文档，一幅图像，等等。

URL标准格式:

[协议类型]://[服务器地址]:[端口号]/[文件路径][文件名]?[查询]#[片段ID]

和uri区别

uniform resource identifier 统一资源标志符,用于标识web技术使用的逻辑和物理资源

Uniform Resource Locator 统一资源定位符,俗称网络地址 相当于网络中的门牌号

3. 元素语义化

元素语义化: 用正确的元素做正确的事情

4. SEO优化

搜索引擎优化(Search Engine Optimization) 是通过了解搜索引擎的运作规则来调整网站,以提高网站在有关搜索引擎内排名的方式

百科: https://baike.baidu.com/item/%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E%E4%BC%98%E5%8C%96/3132?fromtitle=SEO&fromid=102990

5. 字符编码

最常见的编码是(UTF-8)

其他编码: https://www.runoob.com/w3cnote/charset-encoding.html

CSS样式

一.概要(CSS基础)

1. 认识css

CSS (Cascading Style Sheets，层叠样式表）是为网页添加样式的代码

2. 编写css样式

如何将CSS样式应用到元素上?

内联样式

内联样式表存在于HTML元素的style属性之中

  <div style="color: red; font-size: 30px;">我是div元素</div>
  <h1 style="font-size: 50px;">我是一级标题</h1>

内部样式表

内部样式表存在于HTML页面的head元素的尾部添加style 通过选择器定位某元素

<head>
  <style>
    /* 通过元素选择 */
    div {
      color: red;
      font-size: 30px;
      background-color: orange;
    }
    /* 通过class选择 */
    .h1-one {
      color: aqua;
    }
  </style>
</head>
<body>
  
  <div>我是div元素</div>
  <h1 class="h1-one">我是一级标题</h1>
  
</body>

外部样式表

外部样式表是将css编写在一个独立的文件中[后缀为css],并且通过元素引入[写在head尾部]进来

扩展: 在css文件夹中创建名为index.css的文件,在中通过@import url(样式路径);引入其他css文件; 后在html引入此文件即可实现css的全部引用

3. css注释

/* 注释文本 */ vscode可通过快捷键[ctrl+/]快速注释

4. 常见的css属性

官方文档:https://www.w3.org/TR/?tag=css

查询css属性的可用性(哪些浏览器支持的属性):https://caniuse.com/

CSS样式规则顺序coderwhy

CSS常见属性分类coderwhy

最基础最常用的css属性:
font-size: (文字大小)
color: (前景色/文字颜色)
background-color: (背景色)
width: (宽度)
height: (高度)

  <style>
    .title {
      font-size: 24px;
      color: red;
      background-color: rgb(43, 40, 40);

      width: 200px;
      height: 200px;
    }
  </style>

-- 额外知识补充

1. link元素

link元素是外部资源链接元素,规范了文档与外部资源的关系

link元素通常写在head元素中

最常用的链接是样式表CSS

此外也可以被用来创建站点图标(比如"favicon"图标)

  <link rel="引入类型" href="地址">

link元素常见的属性:

href: 此属性指定被链接资源的URL. URL可以是绝对的,也可以是相对的
rel: 指定链接类型, 常见的链接类型: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/rel
- icon: 站点图标;
- stylesheet: css样式

2. 计算机进制

计算机通常采用二进制/八进制/十六进制; 通常计算机底层逻辑只有0和1组成

通俗理解: 当数字达到某个值时,进一位(比如从1位变成2位)

理解一下十进制(人们通常采用10进制): 当数字到9的时候到10,用1位已经表示不了了,那么就进一位变成2位

3. CSS颜色表示方法

90种表达色彩的单词指南: 英语学习 - 90 种表达色彩的单词指南 | 贝立兹 (berlitz.com)

RGB颜色:

RGB是一种色彩空间，通过R（red，红色）、G（green，绿色）、B（blue，蓝色）三原色来组成了不同的颜色；也就是通过调整这三个颜色不同的比例，可以组合成其他的颜色；
RGB各个原色的取值范围是0~255；

RGB表示方法:
RGB颜色可以通过以#为前缀的十六进制字符和函数（rgb()、rgba()）标记表示
方式一：十六进制符号：#RRGGBB[AA]
R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）；A是可选的。
比如，#ff0000等价于#ff0000ff；
方式二：十六进制符号：#RGB[A]
R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）；
三位数符号（#RGB）是六位数形式（#RRGGBB）的减缩版。
比如，#f09和#ff0099表示同一颜色。
四位数符号（#RGBA）是八位数形式（#RRGGBBAA）的减缩版。
比如，#0f38和#00ff3388表示相同颜色。
方式三：函数符： rgb[a]--R, G, B[, A] ---不常用
R（红）、G（绿）、B （蓝）可以是（数字），或者（百分比），255相当于100%。
A（alpha）可以是0到1之间的数字，或者百分比，数字1相当于100%（完全不透明）。

4. Chrome调试工具

打开Chrome调试工具:

方式一：右键– 检查
方式二：快捷键– F12

其他技巧:

快捷键：ctrl+ 可以调整页面或者调试工具的字体大小
可以通过删除某些元素来查看网页结构;
可以通过增删css来调试网页样式

5. 浏览器渲染流程

二.CSS文本的属性

1.text-decoration[装饰]

text-decoration: 用于设置文字的装饰线

1.1 text-decoration常见取值:

none: 无任何装饰线
- 可以去除a元素默认的下划线
underline: 下划线
overline: 上划线
line-through: 删除线

2.text-transform[变换]

text-transform: 用于设置文字的大小写转换

2.1 text-transform 常见取值:

capitalize: 将每个单词的首字母变为大写
uppercase: 将每个单词的所有字母大写
lowercase: 将每个单词的所有字母小写
none: 没有任何影响

[实际开发中用JavaScript代码转化的更多]

3.text-indent[缩进]

text-indent: 用于设置第一行内容的缩进

"[em]单位==相对于字体的大小"

text-indent: 2em  ==首行缩进2字符

4.text-align(重要)[对齐]

text-align: 设置文本的对其方式 / 定义行内内容(例如文字)如何相对它的块父元素对其;

4.1 常见的值:

left: 左对其
right: 右对其
center: 正中间对齐
justify: 两端对其

5.word/letter-spacing[单词/字母间距]

word-spacing/letter-spacing: 用于调整单词/字母间距

三.CSS字体的属性

1.font-size[尺寸]

font-size: 决定文字的大小

1.1 常见的设置

具体数值+单位
- 比如100px
- 也可以使用em单位(不推荐): 1em代表100%,2em代表200%
百分比
- 基于父元素的font-size计算,比如50%等于父元素font-size的一半

2.font-family[字体]

font-family: 用于设置文字的字体名称

可以设置1个或多个字体名称
浏览器会选择第一个该计算机中有安装的字体
或者是通过[@font-face] 指定的可以直接下载的字体

3.font-weight[加粗]

font-weight: 用于设置文字的粗细

常见的取值:

100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 : 每一个数字表示一个重量(粗细程度)
normal: 等于400 (默认值)
bold: 等于700

4.line-height[行高]

line-height: 用于设置文本的行高

注意区分height 和 line-height 的区别

height: 元素的整体行高
line-height: 元素中每一行文字所占据的高度

应用实例: 假设div中只有一行文字, 如何让这行文字在div内部上下居中

让line-height等同于height

5.其他不常用的

5.1 font-variant[变形]

font-variant: 可以影响小写字母的显示形式

可以设置的值:

normal: 常规显示
small-caps: 将小写字母替换为缩小过的大写字母

5.2 font-style[样式]

font-style: 用于设置文字的常规/斜体显示

常见取值:

normal: 常规显示
italic(斜体): 用字体的斜体显示(通常会有专门的字体)
oblique(倾斜): 文本倾斜显示(仅仅是让文字倾斜)

6.font缩写属性

当需要设置字体多个属性时, 可以缩写font: 跟上对应值 ; 简化书写流程

font是一个缩写属性:

font 属性可以用来作为font-style, font-variant, font-weight, font-size, line-height 和font-family 属性的简写;
格式: font-style font-variant font-weight font-size/line-height font-family

书写规则:

font-style、font-variant、font-weight可以随意调换顺序，也可以省略
/line-height可以省略，如果不省略，必须跟在font-size后面
font-size、font-family不可以调换顺序，不可以省略

四.CSS常见选择器

--其他选择器

通用选择器:

[*]通配符 ; 将所有的元素全部选中 * {css属性}

注: 默认在没有设置任何样式的情况下, 浏览器会默认给HTML元素增加一些css属性; 这时我们想取消这些属性, 可以在样式内设置通配属性取消这些默认值; 例:
* {
    margin: 0;
    padding: 0;
}
或---
body, p, div, h2, span {
    margin: 0;
    padding: 0;
}

[重要]简单选择器: 前面学习过

元素选择器(type selectors), 使用[元素的名称]
类选择器(class selectors), 使用[.类名]
id选择器(id selectors), 使用[#id]
- 强调: 在同一个HTML文档中, id不要重复, 应该是唯一的
- id值如果由多个单词组成, 单词之间可以用中划线- / 下划线_连接, 也可以使用驼峰标识
- 最好不要用标签名作为id值

1.属性选择器-了解

通过元素中的属性名 进行选择: 使用方式"[属性名/属性名="值"]" --例

  <style>
    [title] {
      color: red;
    }
    /* 或是使用具体的值 */
    [title="h2"] {
      background-color: blue;
    }
  </style>
</head>
<body>
  
  <div>我是div元素</div>
  <div  title="div">我也是div元素</div>
  <p>我是p元素</p>
  <h2 title="h2">我是h2元素</h2>

</body>

2.后代选择器

后代选择器一: 所有的后代(包括直接或间接的后代)

选择器直接以空格分隔 .属性值元素

后代选择器二: 直接子代选择器(必须是直接子代)

选择器之间以 > 分隔 .属性值 > 元素

3.兄弟选择器

兄弟选择器选择的 不包括自己

兄弟选择器一: 相邻兄弟选择器

使用符号[+]连接 .属性值 + 元素或属性名

兄弟选择器二: 全兄弟选择器

使用符号[~]连接 .属性值 ~ 元素或属性名

4.选择器组

4.1 选择器组-交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)

在开发者通常是为了精准的选择某一元素

  <style>
    div.one {
      color: red;
    }
  </style>
</head>
<body>
  
  <div>我是div元素</div>
  <div class="one">我也是div元素</div>
  <p>我是p元素</p>
  <h2 class="two">我是h2元素</h2>

</body>

4.2 选择器组-并集选择器: 符合任意一个选择器条件即可(选择器直接以[,]分隔)

在开发中通常为了给多个元素设置相同的样式

  <style>
    .one, .two {
      color: red;
    }
  </style>
</head>
<body>
  
  <div>我是div元素</div>
  <div class="one">我也是div元素</div>
  <p>我是p元素</p>
  <h2 class="two">我是h2元素</h2>

</body>

5.伪类选择器

伪类选择器（简称：伪类）通过冒号来定义; 它定义了元素的状态; 如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。

常见的伪类有:

动态伪类
- :link / :visites / :hover / :active / :focus
目标伪类
- :target
语言伪类
- :lang()
元素状态伪类
- :enabled / :disabled / :checked
结构伪类
- :nth-child() / :nth-last-child() / :nth-of-type() / :nth-last-of-type()
- :first-child / :last-child / :first-of-type / :last-of-type
- :root / :only-child / :only-of-type / :empty
否定伪类
- :not()

所有的伪类: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes
菜鸟教程: CSS 伪类 | 菜鸟教程 (runoob.com)

使用举例:

动态伪类
- a:link [未访问的链接]
- a:visited [已访问的链接]
- a:hover [鼠标挪动到链接上(重要)]
- a:active [激活的链接(鼠标在链接上长按未松开的状态)]
使用注意
- :hover必须放在:link和:visited后面才能完全生效
- :active必须放在:hover后面才能完全生效
- 建议编写顺序是: :link / :visited / :hover / :active
输了a元素, :hover / :active也能用在其他元素上
:focus指当前拥有输入焦点的元素(能接受键盘输入的)
- 文本输入框一聚焦后.背景就会变红色
应为链接a元素可以被键盘的tab键选中聚焦, 所以:focus也适用于a元素
动态伪类编写顺序建议为:
- :link 、 :visited 、 :focus 、 :hover 、 :active
直接给 a 元素设置样式，相当于给 a 元素的所有动态伪类都设置了
- 相当于 a:link 、 a:visited 、 a:hover 、 a:active 、 a:focus 的 color 都是 red

6.伪元素(重要)

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式; 一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后

常见的伪元素有:

::sirst-line
::first-letter
::before
::after

为了区分伪元素和伪类，建议伪元素使用 2 个冒号，比如 ::first line

::sirst-line: 可以针对首行文本设置属性

::first-letter: 可以针对首字母设置属性

例:

p::first-line 
{
    color:#ff0000;
    font-variant:small-caps;
}

::before: 向选定的元素前插入内容

::after: 向选定的元素后插入内容

::before 和 ::after 用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片

常通过 content 属性来为一个元素添加修饰性的内容。

位置不好看  --简单调整
position: relative; /* 相对定位 */
left: 5px;
top: 2px;

五.CSS属性的特性

1.CSS属性的继承

在默认情况下, 某元素的子代会继承父元素的
(有些CSS属性是不能被继承的)但可以强制继承; 定位继承的子代元素-属性写border: inherit 即可强制继承父元素CSS

CSS中的某些属性具有继承性

如果一个属性具备继承性 , 那么在该元素上设置后 , 它的后代元素都可以继承这个属性
当然 , 如果后代元素自己有设置该属性 , 那么优先使用后代元素自己的属性不管继承过来的属性权重多高

如何知道一个属性具有继承性呢?

常见的font-size/font-family/font-weigth/line-heigth/color/text-aligen 这些都具有继承性
这些不用刻意去记 , 用的多自然就记住了
另外可以查询文档
注意:继承过来的属性是计算值,而不是设置值

2.CSS属性的层叠

一个元素设置多个属性的情况下, 首先显示权重最大的值/相同权重情况下, 会被越后(梢)的样式覆盖

CSS的翻译是层叠样式表 , 什么是(层叠)呢?

对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置; 那么属性就会被一层层覆盖上去; 但是最终只有一个生效;

那么多个样式属性覆盖上去, 哪个会生效呢?

判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级
判断二: 先后顺序, 权重相同时后面(梢)设置的生效;

如何知道权重呢? 按照经验, 为了方便比较CSS属性的优先级, 可以给CSS属性所处的环境定义一个权重(权值):

!important: 10000(权重最大)
内联样式: 1000
id选择器: 100
类选择器/属性选择器/伪类: 10
元素选择器/伪元素: 1
通配符: 0(权重最小)

MDN解释表格:

3.CSS属性的类型

块级元素(独占一行): h元素/p/div元素
行内级元素(一行有多个): span/a/img/strong/i元素
display属性可更改元素的特性(跨级与行内级变换) 值为block/inline(跨级/行内级)

在前面我们会经常提到div是块级元素会独占一行 ,span是行内级元素会在同一行显示; 那么到底什么是块级元素, 什么是行内级元素呢?

HTML定义元素类型的思路:
- HTML 元素有很多 , 比如 h 元素 /p 元素 /div 元素 /span 元素 img 元素 /a 元素等等;
- 当我们把这个元素放到页面上时 , 这个元素到底占据页面中一行多大的空间呢? 为什么我们这里 只说一行 呢 ? 因为垂直方向的高度通常是内容决定的;
- 比如我们的h1元素的标题, 我们必然是希望它独占一行的, 其他内容不应该和我的标题放在一起;
- 比如我们的p元素的段落, 必然应该独占一行, 其它内容不应该和我的段落放在一起;
- 而类似于img/span/a元素, 通常是对内容的某一个细节的特别描述, 没有必要独占一行;
所有, 为了区分哪些元素可以独占一行, 哪些元素不需要独占一行, HTML将元素区分成了两类(本质上是通过CSS实现的(浏览器赋予的))
- 块级元素 (独占一行)
- 行内级元素 (多个行内级元素可以在同一行显示)

div/h1/p元素之所以是块级元素是因为浏览器默认设置了display属性而已

那么就可以通过display来更改元素的特性

CSS中display属性有4个常见值:
- block: 让元素显示为块级元素
- inline: 让元素显示为行内级元素
- inline-block: 让元素同时预备行内级/块级元素的特性
- none: 隐藏元素
- 事实上display还有其他的值,比如flex , 后面专门学习

4.display属性

块级元素可以设置宽度和高度; 行内级元素不可设置宽度和高度(img/input除外,它是行内可替换元素)
inline-block: 作为行内级元素显示 ; 可以随意设置宽高
对外来说, 它是行内级元素
对内来说, 它是块级元素

可以通过display来更改元素的特性 ; 4个常见值:

block: 让元素显示为块级元素
inline: 让元素显示为行内级元素
inline-block: 让元素同时预备行内级/块级元素的特性
none: 隐藏元素
事实上display还有其他的值,比如flex , 后面专门学习

[x] 编写HTML时的注意事项:
块级元素 | inline-block元素
- 一般情况下,可以包含其他任何元素(如块级元素/行内级元素/inline-block元素)
- 特殊情况, p元素不能包含其他块级元素的
行内级元素(如: a/span/strong等)
- 一般情况下, 只能包含行内级元素

5.元素的隐藏(display)

方法一: display设置为none
- 元素不显示, 并且不占据位置, 不站任何空间(和不存在一样)
方法二: visibility设置为hidden
- 设置为hidden, 虽然元素不可见, 但是会占据元素空间;
- 默认值为visible, 可见的
方法三: rgba设置颜色, 将a值设置为0
- rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素;
方法四: opacity设置透明度, 设置为0
- 设置整个元素的透明度, 会影响所有的子元素;

CSS样式不生效技巧:
选择器的优先级太低
选择器没选中对应的元素
CSS属性使用的形式不对
元素不支持此CSS属性, 比如span默认不支持width和height的
浏览器不支持此css属性, 比如旧版本的浏览器不支持一些css module3的某些属性
被同类型CSS属性覆盖, 比如font覆盖font-size
建议: 充分利用浏览器的开发者工具进行调试(增加/修改样式) 查错

6.overflow属性

如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为;

overflow: visible (默认) -->溢出的内容照样可见
overflow: hidden -->溢出的内容直接裁剪
overflow: scroll -->溢出的内容被裁剪, 但可以通过滚动条查看(会一直显示滚动条区域, 滚动条区域占用的空间属于width/height)
overflow: auto -->自动根据内容是否溢出决定是否提供滚动条

菜鸟文档: CSS overflow 属性 | 菜鸟教程 (runoob.com)

六.CSS的盒子模型

1.认识盒子模型

盒子有四个边, 所有margin(外边)/padding(内边)/border(边框)都包括top/right/bottom/left(上/右/下/左)四个边

2.内容width/heigth

HTML的内容是通过宽度和高度设置的:

宽度设置: width:
高度设置: height

注意: 对于行内级非替换元素来说, 设置宽高是无效的

另外还可以设置以下属性:

min-width: 最小宽度
max-width: 最大宽度

移动端适配是,可以设置最大/最小宽度

下面这两个属性不常用的:

min-height: 最小高度
max-height: 最大高度

3.内边距padding

内边距padding是设置内容至边框直接的间距;

包括四个值:

padding-top ：上内边距
padding-right ：右内边距
padding-bottom ：下内边距
padding-left ：左内边距

padding单独编写是一个缩写属性:

缩写属性是从0点钟开始顺时针转动360度, 也就是上右下左

padding并非四个值, 也可以是其他值:

4.边框/圆角border

边框相对于content/padding/margin来说特殊一些: 有三个值

具备宽度width
具备样式style
具备颜色color

边框宽度:

border-top-width / border-right-width / border-bottom-width / border-left-width
border-width 是上面的简写属性

边框颜色:

border-top-color/ border-right-color/ border-bottom-color/ border-left-color
border-color 是上面的简写属性

边框样式:

border-top-style/ border-right-style/ border-bottom-style/ border-left-style
border-style 是上面的简写属性

总简写属性: border 是宽度/颜色/样式的简写属性, 顺序随意(样式不能省)

边框样式设置值:

solid/dashed/dotted/double/insert/outset/groove/ridge

如果我们相对某一边同时设置宽度样式颜色 , 可以进行如下设置:

border-top
border-right
border-bottom
border-left

border: ：统一设置 4 个方向的边框

盒子圆角 border-radius: 常见的值:

数值: 通常用来设置小的圆角; 如比6px;
百分比: 通常用来设置一定的弧度或者圆形

border-radius 事实上是一个缩写属性:

将这四个属性 border-top-left-radius 、 border-top-right-radius 、 border-bottom-right-radius ，和 border-bottom-left-radius 简写为一个属性。
开发中比较少见一个个圆角设置

如果一个元素是正方形, 设置border-radius大于或等于50%时，就会变成一个圆

4.1.外轮廓: outline

特点: 不占用空间, 默认显示在border的外面

5.外边距margin

上下两个元素同时设置margin时会出现折叠现象(如设置30px,间距应该是60,折叠后还是30); 左右不会折叠.

margin属性用于设置盒子的外边距, 通常用于元素和元素之间的间距;

margin包括四个方向, 所以有如下的取值:

margin-top：上内边距
margin-right：右内边距
margin-bottom：下内边距
margin-left：左内边距

margin单独编写是一个缩写属性:

margin缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左

margin也并非必须是四个值, 也可以有其他值:

上下margin的传递:

margin-top传递: 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
margin-bottom传递: 如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素

如何防止出现传递问题?

给父元素设置padding-top\padding-bottom
给父元素设置border
触发BFC: 设置overflow为auto

@建议:

margin一般是用来设置兄弟元素之间的间距
padding一般是用来设置父子元素之间的间距

上下margin的折叠:

垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）

水平方向上的margin（margin-left、margin-right）永远不会折叠

折叠后最终值的计算规则:

两个值进行比较, 取较大的值

如何防止margin折叠?

只设置其中一个元素的margin

块级元素水平居中问题?

在一些需求中，需要元素在父元素中水平居中显示（父元素一般都是块级元素、inline-block）

行内级元素(包括inline-block元素)-->水平居中：在父元素中设置text-align: center

块级元素-->水平居中：margin: 0 auto

6.盒子/文字阴影

6.1.盒子阴影: box-shadow

box-shadow属性可以设置一个或者多个阴影

每个阴影用表示
多个阴影之间用逗号,隔开，从前到后叠加

的常见格式如下: 5px 5px 5px 5px color insert

第1个：offset-x, 水平方向的偏移，正数往右偏移
第2个：offset-y, 垂直方向的偏移，正数往下偏移
第3个：blur-radius, 模糊半径
第4个：spread-radius, 延伸半径
：阴影的颜色，如果没有设置，就跟随color属性的颜色
inset：外框阴影变成内框阴影

在线测试网站: https://html-css-js.com/css/generator/box-shadow/

6.2.文字阴影: text-shadow

text-shadow 用法类似于box-shadow ，用于给文字添加阴影效果

的常见格式如下:

相当于box-shadow, 它没有spread-radius(延伸半径)的值;

在线测试网站: https://html-css-js.com/css/generator/box-shadow/

7.box-sizing

box-sizing用来设置盒子模型中 盒子宽高的行为

包含值:

content-box(默认): 内边距+边框在盒子宽高之外
border-box: 内边距+边框在盒子宽高之内

--额外知识点:

1.行内非替换元素的注意事项:

以下属性对行内级非替换元素不起作用
- width、height、margin-top、margin-bottom
以下属性对行内级非替换元素的效果比较特殊
- padding(内边距)上下会撑起来, 但是不占空间
- border(边框)上下会撑起来, 但是不占空间
- margin(外边框)上下的margin是不生效的

邂逅前端开发

一.编程语言大纲

二.开发工具选择

三.浏览器的作用

HTML元素

一.概要(html基础)

1. 元素属性的分类

2. 元素的嵌套关系

3. 注释的语法

二.HTML常见的元素

1. HTML结构分析

1.1 haed元素

1.2 body元素

2. h1-h6/p元素

3. img/a/iframe元素

4. div/span元素

5. 不常见元素

6. HTML全局属性

6.1 常见属性:

三.额外知识点补充

1. 字符实体:

2. URL的规则和URI的区别

3. 元素语义化

4. SEO优化

5. 字符编码

CSS样式

一.概要(CSS基础)

1. 认识css

2. 编写css样式

3. css注释

4. 常见的css属性

-- 额外知识补充

1. link元素

2. 计算机进制

3. CSS颜色表示方法

4. Chrome调试工具

5. 浏览器渲染流程

二.CSS文本的属性

1.text-decoration[装饰]

2.text-transform[变换]

3.text-indent[缩进]

4.text-align(重要)[对齐]

5.word/letter-spacing[单词/字母间距]

三.CSS字体的属性

1.font-size[尺寸]

2.font-family[字体]

3.font-weight[加粗]

4.line-height[行高]

5.其他不常用的

6.font缩写属性

四.CSS常见选择器

--其他选择器

1.属性选择器-了解

2.后代选择器

3.兄弟选择器

4.选择器组

5.伪类选择器

6.伪元素(重要)

五.CSS属性的特性

1.CSS属性的继承

2.CSS属性的层叠

3.CSS属性的类型

4.display属性

5.元素的隐藏(display)

6.overflow属性

六.CSS的盒子模型

1.认识盒子模型

2.内容width/heigth

3.内边距padding

4.边框/圆角border

4.1.外轮廓: outline

5.外边距margin

6.盒子/文字阴影

6.1.盒子阴影: box-shadow

6.2.文字阴影: text-shadow

7.box-sizing

--额外知识点: