1 ，HTML的简单理解（超文本标记语言HyperText Markup Language）
基本语法：
1, <标签 属性=“属性值”>被标记的内容
2, <标签 属性=“属性值” /> 如图片，自己就是内容
标签标记后，用属性来微调，补充
常见标签前缀含义：
网页url顶上的标题</p>
<p><!-- 块级元素（Block Elements）前缀 --></p>
<p><div> <!-- 通用分区，块级容器 --></p>
<p><p> <!-- 段落 --></p>
<p><h1> <!-- 一级标题 --></p>
<p><section> <!-- 章节 --></p>
<p><article> <!-- 文章 --></p>
<p><header> <!-- 页头 --></p>
<p><footer> <!-- 页脚 --></p>
<p><nav> <!-- 导航 --></p>
<p><aside> <!-- 侧边栏 --></p>
<p><!-- 行内元素（Inline Elements）前缀 --></p>
<p><span> <!-- 通用行内容器 --></p>
<p><a> <!-- 超链接 --></p>
<p><i> <!-- 斜体文本 --></p>
<p><b> <!-- 粗体文本 --></p>
<p><em> <!-- 强调文本 --></p>
<p><strong> <!-- 重要文本 --></p>
<p><!-- 多媒体元素前缀 --></p>
<p><img> <!-- 图片 --></p>
<p><video> <!-- 视频 --></p>
<p><audio> <!-- 音频 --></p>
<p><!-- 列表元素前缀 --></p>
<p><ul> <!-- 无序列表 --></p>
<p><ol> <!-- 有序列表 --></p>
<p><li> <!-- 列表项 --></p>
<p><!-- 表单元素前缀 --></p>
<p><form> <!-- 表单容器 --></p>
<p><input> <!-- 输入框 --></p>
<p><select> <!-- 下拉选择框 --></p>
<p><button> <!-- 按钮 --></p>
<p><textarea> <!-- 多行文本框 --></p>
<p><table>用于创建表格</p>
<p><table> <!-- 定义表格 --></p>
<p><tr> <!-- 定义行 --></p>
<p><td> <!-- 定义单元格 --></p>
<p><th> <!-- 定义表头单元格 --></p>
<p><thead> <!-- 定义表格头部 --></p>
<p><tbody> <!-- 定义表格主体 --></p>
<p><tfoot></p>
<p>元素类型及特点：</p>
<p><!-- 1. 块级元素 - 独占一行 --></p>
<p><div class="container"></p>
<p>占据整行的块级元素</p>
<p></div></p>
<p><!-- 2. 行内元素 - 在行内显示 --></p>
<p><span class="text">行内文本</span></p>
<p><!-- 3. 行内块元素 - 在行内显示但可设置宽高 --></p>
<p><img src="image.jpg" alt="图片"></p>
<p>src = source，一般存路径</p>
<p>常见属性示例</p>
<p><!-- 通用属性 --></p>
<p><div id="unique-id" <!-- id 唯一标识符 --></p>
<p>class="style-class" <!-- CSS类名 --></p>
<p>style="color: red;" <!-- 内联样式 --></p>
<p>data-custom="value"> <!-- 自定义数据属性 --></p>
<p></div></p>
<p><!-- 链接属性 --></p>
<p><a href="url" <!-- 链接地址 --></p>
<p>target="_blank" <!-- 打开方式 --></p>
<p>rel="noopener"> <!-- 关系属性 --></p>
<p></a></p>
<p><!-- 图片属性 --></p>
<p><img src="image.jpg" <!-- 图片源 --></p>
<p>alt="描述文本" <!-- 替代文本 --></p>
<p>width="100" <!-- 宽度 --></p>
<p>height="100"> <!-- 高度 --></p>
<p>2，CSS简单理解（层叠样式表 Cascading Style Sheets）</p>
<p>主要用来定义页面内容展示效果的一门语言</p>
<p>HTML：页面骨架，素颜</p>
<p>CSS：页面效果美化，美妆+滤镜</p>
<p>1. css语法规则（三种方式）:</p>
<p>1. 通过style属性来编写样式</p>
<p><div style="width:100px;"></p>
<p>2. 通过style标签，然后使用选择器的形式来编写样式</p>
<p><style></p>
<p>span（可以有选择器在这）{</p>
<p>color: pink;</p>
<p>}</p>
<p></style></p>
<p>3. 在css文件中编写样式，通过link引入该文件</p>
<p><link rel="stylesheet" href="文件名"></p>
<p>2. css选择器(重点)</p>
<p>CSS选择器本身的作用是：</p>
<p>在HTML文档中定位和选中特定的元素将样式规则应用到被选中的元素上当浏览器加载HTML文档时，会解析所有的CSS规则（无论是通过<link>引入的外部CSS文件，还是<style>标签内的CSS）浏览器会建立一个CSS规则树然后将这些规则匹配到DOM树上的相应元素这个过程是持续的，不仅仅发生在link时刻当DOM结构发生变化时（如JavaScript动态添加元素），浏览器会重新进行匹配</p>
<p>CSS特点：</p>
<p>在原版匹配是从右往左，bs4实现了这个，但是在lxml里，css底层是要转换成xpath，因此还是xpath而不是原版css，尽管如此，但是CSS还是被优化成了从右往左，用了ancestor等操作</p>
<p>在一定结构里会远优于正向匹配的xpath，但是不如逆向匹配的xpath</p>
<p>主要用法总览</p>
<p>1. id选择器 #</p>
<p>2. 标签选择器 标签</p>
<p>3. 类选择器 .</p>
<p>4. 选择器分组 , （接近c++的拼接，用于隔离选择器，一次性提取多个）</p>
<p>5. 后代选择器 空格</p>
<p>6. 子选择器 ></p>
<p>7. 相邻选择器 + ，~ 所有兄弟（>,+,~可以忽视空格的问题，使用时有空格不会视空格为子选择）多选择器 ‘，’可以 h1, h2 ,h3</p>
<p>8. 属性选择器 [属性=值] 或者 [属性]</p>
<p>9.伪选择器 选择满足特殊条件的所有元素</p>
<p>10,通配符 * 可以匹配所有</p>
<p>11，属性提取 ：：，用来提取当前位置的属性，如::text， 或者::attr(class) ，但不允许一次提取多个</p>
<p>"select 和select_one都是用于查找子树的，而不是查找从头开始的一段，而是找出符合你输入格式的一段关系子树"</p>
<p>'#' 符号表示选择具有特定 ID 属性值的元素。</p>
<p>'index' 是元素的 ID 属性值。</p>
<p>'#index' 表示选择 ID 为 'index' 的元素。</p>
<p>':nth-child(1)':</p>
<p>'x:nth-child(n)' 是一个伪类选择器,用于选择标签为x（取值范围）并且作为它父元素的第n个子元素（取值条件）。</p>
<p>'(1)' 表示选择第一个子元素。</p>
<p>'div:nth-child(1)' 表示选择作为其父元素的第一个子元素的 <div> 元素。</p>
<p>常用的 CSS 选择器方法:</p>
<p>元素选择器:通过标签名选择元素,例如 div、p、a 等。</p>
<p>类选择器:通过类名选择元素,使用 . 表示,例如 .score、 .info 等。</p>
<p>ID 选择器:通过元素的 ID 属性选择元素,使用 # 表示,例如 #index。</p>
<p>属性选择器:通过元素的属性选择元素,使用 [] 表示,例如 可以没有=[href]、[class="name"] 等。</p>
<p>后代选择器:通过空格分隔,选择某个元素的后代元素,例如 div p、 #index .el-card 等。，用空格表示只要是后代就行，不分层级</p>
<p>子元素选择器:通过 > 分隔,选择某个元素的直接子元素,例如 div > p、div:nth-child(4) > span 等。</p>
<p>伪类选择器:通过伪类选择元素,例如 :first-child、 :last-child、 :nth-child(n) 等。</p>
<p>组合选择器:通过组合多个选择器来选择元素,例如 div.info、 #index > div.el-card 等。</p>
<p>选择器分组，用了一次性提取多个选择， # 同时提取多个文本 texts = response.css('.title::text, .price::text').getall()</p>
<p>3,XML</p>
<p>XML (eXtensible Markup Language，可扩展标记语言)：</p>
<p>特点与对比html：</p>
<p>是一种标记语言，但更像是一种数据格式可自定义标签严格的语法规则主要用于存储和传输数据必须有根元素HTML (HyperText Markup Language，超文本标记语言)：</p>
<p>特点：</p>
<p>是用于创建网页的标准标记语言预定义的标签相对宽松的语法规则主要用于展示数据<html>作为根元素</p>
</p></div>
<div class="tags">
</div>
<div class="clearfix">
<ul class="pager">
<li class="previous">
<a href="/a30ddb3bb55022ea/cbd0f211920818a0.html">海贼王：绿牛真的是木木果实？尾田终于说出答案，原来萨博克制他</a>
</li>
<a href="/8ef05c4c139ab470/b4edccb8663e91f6.html">优化DNS解析和拆分域名并让网站打开速度更快的技巧有哪些</a>
</ul>
</div>
<div class="clear"></div> </div>
<div class="sidebar">
</div>
<div class="clear"></div>
</div>
</div>
<div class="flinks">
<h4><strong>友情链接</strong>
</h4>
<ul class="links">
<script> var _mtj = _mtj || []; (function () { var mtj = document.createElement("script"); mtj.src = "https://node91.aizhantj.com:21233/tjjs/?k=c1aj82uodhz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mtj, s); })(); </script>
</ul>
</div>
<div class="footer">
<p>Copyright © 2022 2018年俄罗斯世界杯_2020世界杯 - dsgqbg.com All Rights Reserved.
</p>
</div>
</body>
</html>