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选择器的数量
十位:等于选择器中所有类选择器、属性选择器以及伪类选择器的数量和
个位:等于选择器中所有元素选择器和伪元素选择器的数量和
三、比较源次序
代码书写靠后的胜出