HTML&CSS
HTML
Hyper Text Markup Language (超文本标记语言)
<h2>标题</h2>定义网页里面有什么，w3c（万维网联盟）组织定义的语言标准，用于描述页面结构的语言
CSS
Cascading Style Sheets（层叠样式表）
定义网页里面的内容长什么样子，w3c（万维网联盟）组织定义的语言标准，控制页面元素的样式以及位置
执行HTML & CSS
HTMLCSS
浏览器
浏览器：
shell：外壳
core：内核（js执行引擎、渲染引擎、网络引擎...）
Chrom：Webkit --> Blink
Safari：Webkit
Firfox：Gecko
IE：Trident
OPera：Presto / Blink
编辑器
vscode
pycharm
webstorm
注释
<!--导航栏开始-->
导航栏相关代码
<!--导航拦结束-->
<!--菜单栏开始-->
菜单栏相关代码
<!--菜单栏结束-->
element（元素）
<h1>hello world</h1>
<a href="http://www.baidu.com">百度一下</a>起始标签：<a>
结束标签：</a>
元素内容：百度一下
元素属性：href="http://www.baidu.com"
属性分类
局部属性：某一些元素特有的属性
全局属性：所有元素都可以用的属性
空元素
<meta charset="UTF-8">
<hr> <!--水平线-->元素嵌套
<div>
<h1></h1>
</div>注：元素不能相互嵌套
概念：父元素、子元素、兄弟元素、祖先元素、后代元素
标准文档结构
文档申明
<!DOCTYPE html>根元素
<html lang="zn-cmn-Hans">
</html>lang属性：全局属性
zh 中文
cmn 普通话
Hans 简体汉字 （Hant 繁体）
语义化概念
元素不应决定样式，甚至不应该决定是否显示。
选择什么元素，取决于内容的含义，而不是显示效果。
裸奔时好看
搜索引擎优化（SEO）
方便浏览器解析
基本元素
h1~ h6
标题
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>p
段落
<p>hello world</p>空白折叠：源代码里连续的空白符（换行、空格、制表），显示的时候会被折叠成一个空格
HTML Entiy
HTML实体：&单词；
空格：
版权符号：
©小于：
<大于：
>&：
&
https://developer.mozilla.org/zh-CN/docs/Glossary/Entity
br
换行符
pre
预定义格式文本【无语义】：在pre元素里面的内容，不会出现空白折叠
code
标记一段计算机代码
<code>
<pre>
def outer(func):
def wrapper(*args,**kwargs):
result = func(*args,**kwargs)
return result
return wrapper
</pre>
</code>
显示时独占一行的元素，称为块级元素。而不换行的元素，成为行内元素。在HTML5里面，w3c弃用了这种说法。
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:1784886492@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: red;
text-align: center;
font-size: 3em;
}选择器
元素选择器
h1{ color: yellow; background: red; text-align: center; font-size: 3em; } <h1>css初体验</h1>id选择器
#stylesheet{ color: red; text-align: right; } <p id="stylesheet">Lorem ipsum dolor sit amet consectetur, adipisicing elit. In, voluptate?</p>类选择器
.blue{ color: blue; } <p class="blue">Pariatur exercitationem beatae provident ex quibusdam doloremque neque quo itaque?</p>
申明块
CSS书写位置
内部样式表（卸载style元素里面的）
内联样式表（卸载元素style属性里面）
外部样式表【推荐】（写在独立css文件里面）
可以解决样式重复的问题
有利于浏览器缓存，提高页面响应速度
结果和样式分离，有利于阅读和维护
基础样式声明
color：元素内部文字颜色
预设值：red,blue,black
色值（三原色）
rgb(255,255,255)
#ffffff
backgroud_color：元素背景颜色
font-size：元素内部文字大小
px：像素
em：相对父元素的大小
ps：如果元素没有声明字体大小，则使用父元素的字体大小，如果父元素没有声明字体大小，则使用基准字号。
font-weight：文字粗细 bold加粗
font-family：字体
strong
font-style：字体样式（通常设置字体倾斜）
i元素：通常用于表示图标（icon）
em：强调的内容
letter-spacing：文字间缝
text-align：元素内部文本对其方式
text-indent：首行缩进
text-decoration：文本加线
a元素
del：删除/废弃的内容
ins元素：新插入到文档的内容
height：高
width：宽
line-height：文本行度，文本在行高内垂直居中
选择器
元素选择器
id选择器
类选择器
通配符选择器（*选中所有元素）
属性选择器（根据属性名和属性值选择元素）
MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors
伪类选择器（选中某些元素的状态）
link：超链接为访问过的状态
:link{ color: green; }visited：超链接访问过的状态
:visited{ color: gray; }hover：鼠标悬停状态
:hover{ color: red; }active：激活状态（鼠标按下状态）
:active{ color: brown; }要按顺序写：link，visited，hover，active
爱恨法则：love hate
伪元素选择器
before
::before{ content: "#"; color: red; }after
::after{ content: "#"; color: red; }
组合选择器
交集选择器
p.abc{ color: red; } /* 选择p元素或者类元素abs */并集选择器（逗号）
h1,strong{ color: red; }后代选择器（空格）
main div p{ color: red; }子元素选择器（>隔开）
main>.red>p{ color: red; }相邻兄弟选择器（+）
[href*="baidu"]+a{ text-decoration: none; background-color: red; }通用兄弟选择器（~）
[href*="baidu"]~a{ text-decoration: none; background-color: red; }
层叠（权重计算）
解决声明冲突（浏览器解决）
一、比较重要性
重要性从高到底：
!important样式
普通样式
浏览器默认样式
重置样式表，如 ：reset.css，normalize.css
二、比较特殊性
选择器选中的范围更窄，就越特殊
通过选择器计算出一个四位数（0000），四位数越大，特殊性越高
千位：内联样式记1，否则记0
百位：等于选择器中所有id选择器的数量
十位：等于选择其中所有类选择器，属性 选择器以及伪类选择器的数量和
个位：等于选择器中所有元素选择器和伪元素选择器的数量和
三、比较源次序
代码书写靠后的胜出
继承
子元素会继承父元素的部分css属性。通常来说，和文字内容相关的属性都能被继承。
CSS属性值计算过程
浏览器要渲染一个元素的前提：该元素的所有css属性必须都要有值
确定声明值：样式表中没有冲突的声明，直接作为CSS属性值。
层叠：样式表中有冲突的声明，使用层叠规则确定CSS属性值。
继承：前两步结束，仍没有值的属性，如果可以继承，则继承父元素的值
inherit：强制（手动）继承
initial：初始值，默认值
使用默认值：前三步结束，仍然没有值的属性，使用默认值。
盒模型
每一个元素都会生成一个矩形区域，这个矩形区域就被认为是一个盒子（box），而盒模型就是用来描述这些盒子的方式。
盒子类型：
行盒（
行内元素）：display等于inline的元素，水平方向排列，不换行。块盒（
块级元素）：display等于black的元素，垂直方向排列，独占一行。
盒子组成：
内容（content），内容盒（content-box）
width，height
填充（padding）、内边距
padding-top，padding-bottom，padding-lift，padding-right
简写（速写）属性：padding（顺时针）
/* 应用于所有边 */ /* 上边下边 | 左边右边 */ /* 上边 | 左边右边 | 下边 */ /* 上边 | 右边 | 下边 | 左边 */ 内容区+填充区：填充盒（padding-box）
边框（border）
border-style，border-width，border-color，border-radius（css3 ）
border：宽度，样式，颜色
内容区+填充区+边框：边框盒（border-box）
外边距（margin）
margin-top，margin-bottom，margin-left，margin-right
盒模型扩展
修改宽高范围（box-sizing）
修改背景范围（background-clip）
溢出控制（overflow、text-overflow）
行盒
盒子跟着内容延伸，无法直接设置宽高，宽高是由内容决定。
内边距、边框、外边框：水平方向尺寸有效，垂直方向不占空间。