HTML & CSS
HTML
<h2>标题</h2>Hyper Text Markup Language（超文本标记语言）
定义网页里面有什么，w3c（万维网联盟）组织定义的语言标准，用于描述页面结构的语言
CSS
Cascading Style Sheets（层叠样式表）
定义网页里面的内容长什么样子，w3c（万维网联盟）组织定义的语言标准，控制页面元素的样式以及位置
执行HTML & CSS
graph TD;
HTML & CSS --> 浏览器 --> 页面;浏览器：
- shell：外壳
- core：内核（js执行引擎、渲染引擎、网络引擎…）
- Chrome【推荐】：WebKit –> Blink
- Safari：WebKit
- Firfox：Gecko
- IE：Trident
- Opera：Presto / Blink
编辑器
- vscode【推荐】
- pycharm
- webstorm
注释
<!-- 导航栏开始 -->
导航栏相关代码
<!-- 导航栏结束 -->
<!-- 菜单栏开始 -->
菜单栏相关代码
<!-- 菜单栏结束 -->element（元素）
<h1>hello world</h1>
<a href="https://www.baidu.com">百度一下</a>起始标签：
结束标签：
元素内容：百度一下
元素属性：href=”https://www.baidu.com”
属性分类
- 局部属性：某一些元素特有的属性
- 全局属性：所有元素都可以用的属性
空元素
<meta charset="UTF-8">
<hr>元素嵌套
<div>
<h1></h1>
</div>注：元素不能相互嵌套
概念：父元素、子元素、兄弟元素、祖先元素、后代元素
标准文档结构
文档声明
<!DOCTYPE html>根元素
<html lang="zh-cmn-Hans"></html>lang属性：全局属性
zh 中文
cmn 普通话
Hans 简体汉字（Hant 繁体）
文档标题
<title>Document</title>文档元数据
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">语义化概念
元素不应该决定样式，甚至不应该决定是否显示。
选择什么元素，取决于内容的含义，而不是显示效果。
- 裸奔时好看
- 搜索引擎优化（SEO）
- 方便浏览器解析
基本元素
h1~h6
标题
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>p
段落
空白折叠：源代码里连续的空白字符（换行、空格、制表），显示的时候会被折叠成一个空格
HTML Entity
HTML实体：&单词;
- 空格：
- 版权：
© - 小于：
< - 大于：
> - &：
&
br
换行符
pre
预定义格式文本【无语义】：在pre元素里面的内容，不会出现空白折叠
code
标记一段计算机代码
<code>
<pre>
def outer(func):
def wrapper(*args, **kwargs):
result = func(*args, **kwargs)
return result
return wrapper
</pre>
</code>a
href属性
- 普通链接
<a href="https://www.baidu.com">百度一下</a> - 锚链接
<a href="#selection1">第1章</a> <a href="#selection2">第2章</a> <a href="#selection3">第3章</a> <a href="#">回到顶部</a> <a href="锚链接.html#selection5">锚链接的第5章</a> - 功能链接
- 发送邮件
<a href="mailto:1303544500@qq.com">点击发送邮件</a>- 拨打电话
<a href="tel:+10086">点击给我打电话</a>- 执行js代码
<a href="javascript:alert('hello')">弹出hello</a>
target属性
- _self：当前标签页打开
- _blank：新标签页打开
img
src属性：source的缩写（资源）
- 站内资源
- 站外资源
alt属性：当图片资源失效的时候，在页面上展示该属性值
<a href="https://z.mafengwo.cn/jd/12703.html">
<img usemap="#scmap" src="./img/四川旅游路线.png" alt="只是一张四川旅游地图">
</a>map
<map name="scmap">
<area shape="rect" coords="70,140,170,195" href="https://www.mafengwo.cn/gonglve/ziyouxing/416210.html" target="_blank">
<area shape="circle" coords="200,850,25" href="https://www.mafengwo.cn/gonglve/ziyouxing/406934.html" target="_blank">
<area shape="poly" coords="468,803,466,768,512,724,564,774,564,800" href="https://www.mafengwo.cn/i/23504548.html" target="_blank">
</map>figure
<figure>
<a href="https://z.mafengwo.cn/jd/12703.html">
<img usemap="#scmap" src="./img/四川旅游路线.png" alt="只是一张四川旅游地图">
</a>
<figcaption>
四川旅游攻略
</figcaption>
</figure>列表元素
- 有序列表
<h1>西红柿炒鸡蛋</h1> <ol reversed> <li>西红柿洗净，切成小块；鸡蛋打散备用。</li> <li>热锅凉油，将鸡蛋液煎至金黄色捞出沥干备用。</li> <li>将锅中余油留少许，放入葱姜蒜末爆香。</li> <li>加入西红柿翻炒至断生。</li> <li>加入少许盐、白糖调味，继续翻炒至快出汁时加入鸡蛋，快速搅拌均匀即可起锅。</li> </ol>reversed属性：倒序
- 无序列表
<h1>我找女朋友的标准</h1> <ul> <li>女的</li> <li>活的</li> </ul> - 定义列表
<h1>定义列表</h1> <dl> <dt>标题1</dt> <dd>描述1...</dd> <dt>标题2</dt> <dd>描述2...</dd> <dt>标题3</dt> <dd>描述3...</dd> </dl>
容器元素
- div：无语义
- header：页头/文章头部
- footer：页脚/文章尾部
- nav：导航链接
- main：文档主要内容
- article：整篇文章
- section：章节
- aside：附加信息（侧边栏）
元素包含关系
显示时独占一行的元素，称为块级元素。而不换行的元素，称为行内元素（行级元素）。
块级元素可以包含行内元素，行内元素不可以包含块级元素，a元素除外在HTML5里面，w3c弃用了这种说法。
元素的包含关系，由元素的内容类别决定
- 容器元素可以包含任意元素
- a元素基本可以包含任意元素
- 固定包含关系（al>li, dl>dt+dd….）
- 习惯+查文档
css规则
h1{
color: yellow;
background-color: red;
text-align: center;
font-size: 3em;
}选择器
- 元素选择器
- id选择器
- 类选择器
声明块
css书写位置
- 内部样式表（写在style元素里面）
- 内联样式表（写在元素的style属性里面）
- 外部样式表【推荐】（写在独立的css文件里面）
==可以解决样式重复的问题==
==有利于浏览器缓存，提高页面的响应速度==
==结构和样式分离，有利于阅读和维护==
基础样式声明
- color：元素内部文字颜色
预设值：red, blue, green…
色值（三原色）
- rgb(255,255,255)
-
ffffff
- background-color：元素背景颜色
- font-size：元素内部文字大小
- px：像素
- em：相对父元素的字体大小
==如果元素没有声明字体大小，则使用父元素的字体大小，如果没有父元素（html），则使用基准字号。==
- font-weight：文字粗细
strong元素：重要的内容
- font-family：字体
非衬线字体：字体边缘没有修饰的字体
- font-style：字体样式（常用于设置字体倾斜）
i元素：技术术语、外文短语或是小说中人物的思想活动等，常用于表示图标(icon)
em元素：强调的内容
- letter-spacing：文字间隙
- text-align：元素内部文本水平对齐方式
- text-indent：首行缩进
- text-decoration：文本加线
a元素
del元素：删除/废弃的内容
ins元素：新插入到文档的内容
- height：高
- width：宽
- line-height：文本行高，文字在行高内垂直居中
选择器
- 元素选择器
- id选择器
- 类选择器
- 通配符选择器（*选中所有元素）
- 属性选择器（根据属性名和属性值选择元素）
- 伪类选择器（选中某些元素的某种状态）
- link：超链接未访问过的状态
- visited：超链接访问过的状态
- hover：鼠标悬停状态
- active：激活状态（鼠标按下状态）
==爱恨法则：love hate==
- 伪元素选择器
- before
- after
组合选择器
- 交集选择器
- 并集选择器（逗号）
- 后代选择器（空格）
- 子元素选择器（>）
- 相邻兄弟选择器（+）
- 通用兄弟选择器（~）
层叠（权重计算）
解决声明冲突（浏览器解决）
一、比较重要性
重要性从高到低：
- !important样式
- 普通样式
- 浏览器默认样式
==重置样式表，如：reset.css, normalize.css…==
二、比较特殊性
选择器选中的范围越窄，就越特殊
通过选择器计算出一个四位数（0 0 0 0），四位数越大，特殊性越高
千位：内联样式记1，否则记0
百位：等于选择器中所有id选择器的数量
十位：等于选择器中所有类选择器、属性选择器以及伪类选择器的数量和
个位：等于选择器中所有元素选择器和伪元素选择器的数量和
三、比较源次序
代码书写靠后的胜出