<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学习总结-首页</title>
<link rel="stylesheet" href="./css/index.css">
<style>
h1 {
text-align: center;
color: red;
font-size: 40px;
}
h2 {
color: seagreen;
font-size: 30px;
}
h3 {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<h1 id="box"></h1>
<h1>学习总结</h1>
<div class="center">
<a href="#text1">绝对路径和相对路径</a>
<a href="#text2">相关元素</a>
<a href="#text3">元素分类</a>
<a href="#text4">常见css属性</a>
<a href="#text5">css选择器</a>
<a href="#text6">注意事项</a>
</div>
<h2 id="text1">绝对路径和相对路径</h2>
<h3>绝对路径</h3>
<ul>
<li>协议：//域名/目录</li>
<li>a访问站外资源只能使用绝对路径</li>
<li>b访问站内资源可以省略协议和域名但是/不能省</li>
</ul>
<img src="./img/图片1.png" >
<img src="./img/图片2.png" >
<h3>相对路径</h3>
<ul>
<li> 相对路径是相对于当前的资源，只能用于访问站内资源</li>
<li> ./表示当前资源所在的目录，必须作为相对路径的开始，可省略</li>
<li> ../回到上一级</li>
<li> 同一级直接/</li>
</ul>
<img src="./img/图片3.png" >
<h3>示例</h3>
<img src="./img/图片27.png" >
<h2 id="text2">相关元素</h2>
<h3>文本元素</h3>
<ol>
<li> h1~h6 1级到6级标签；</li>
<li>P 段落；</li>
<li>blockquote 整段的引用；</li>
<li>cite 对参考文献的引用</li>
<li>q小段文本的引用</li>
<li>abbr对缩写词的引用</li>
<li> strong重要的文本</li>
<li>em强调的文本</li>
<li>b应突出显示的文本</li>
<li>i应区别对待的文本</li>
<li>div元素
无法明确表示该区域内容的含义
它是一个非常常见的元素
它没有任何的语义
它仅仅表示一个容器，用于包含其他元素
在网站布局时，它通常用于表示页面的区域</li>
</ol>
<img src="./img/图片4.png" >
<h3>语义化结构元素</h3>
<img src="./img/图片5.png" >
<img src="./img/图片6.png" >
<h3>无语义元素</h3>
<img src="./img/图片7.png" >
<h3>其他元素</h3>
<img src="./img/图片8.png" >
<h3>列表</h3>
<ul>
<li> ol 定义有序列表</li>
<li> li 定义列表中的项目,自带一个点。</li>
<li> ul 定义无序列表</li>
<li> 加入li就有点,list-style：none 消除原点</li>
<li> 只有ol或者只有li时相对于div，单独用达不到效果</li>
</ul>
<img src="./img/图片9.png" >
<img src="./img/图片10.png" >
<h3>实体字符</h3>
<div> 在HTML中，有些字符会被浏览器特殊处理
如：<、>会被浏览器认为是标记符号，不会显示到页面
空白字符会被浏览器折叠为一个空格
实体字符可用于显示HTML中具有特殊含义的字符</div>
<img src="./img/图片11.png" >
<h2 id="text3">元素分类</h2>
<img src="./img/图片12.png" >
<h3>块级元素</h3>
<p>相关属性：display：block；</p>
<img src="./img/图片13.png" >
<h3>行内元素</h3>
<p>相关属性：display：inline；
宽高不能控制</p>
<img src="./img/图片14.png" >
<h3>行内块级元素</h3>
<ul>
<li> 相关属性：display：inline-block；</li>
<li>基线对齐：基线在底部；</li>
<li>Vertical-align：top顶部对齐</li>
</ul>
<img src="./img/图片15.png" >
<h3>示例</h3>
<img src="./img/图片16.png" >
<h2 id="text4">常见css属性</h2>
<img src="./img/图片17.png" >
<img src="./img/图片18.png" >
<img src="./img/图片19.png" >
<h2 id="text5">css选择器</h2>
<img src="./img/图片20.png" >
<h3>属性选择器</h3>
<p> a[ ]</p>
<h3>伪类选择器</h3>
<ul>
<li> link：未被访问的超链接，只能用于超链接</li>
<li>visited：已经被访问过的链接，只能用于超链接</li>
<li> hover：鼠标悬停在元素上时的样子</li>
<li>active：点击超链接时的样式，只能用于超链接</li>
<strong>注： 顺序不能乱</strong>
</ul>
<img src="./img/图片21.png" >
<h3>伪元素选择器</h3>
<dl> 七种常见选择器的组合：
<dt> div>p：</dt>
<dd> 选择div标签的直接子元素（父子关系）</dd>
<dt>div p：</dt>
<dd>选择div标签里面所有的p标签</dd>
<dt> div，p：</dt>
<dd>选择页面中所有的div和p标签</dd>
<dt> div+p：</dt>
<dd>选择div标签后面的唯一一个紧靠着的兄弟元素p标签</dd>
<dt> div~p：</dt>
<dd>选择div标签后面的所有是p标签的兄弟元素</dd>
<dt> P：nth-child（2）：</dt>
<dd>首先找到页面中的p标签，再找到p标签的父元素，父元素里面的第二个子元素，如果是p标签就用css样式，否则就不使用。</dd>
<dt> P：nth-of-type（2）：</dt>
<dd>首先找到页面中的p标签，再找到p标签的父元素，将父元素里面的所有子元素p标签找出来，排名第二个的</dd>
</dl>
<img src="./img/图片24.png" >
<img src="./img/图片25.png" >
<h2 id="text6"> 注意事项</h2>
<ol>
<li>设置p标签的宽度来换行</li>
<li>右键，箭头，可以通过按键盘上的上下测试px的大小，然后再去编码处修改</li>
<li> 右键，格式化规划</li>
</ol>
<a href="#box">返回顶部</a>
</body>
</html>