此图为静态截图效果 一、学前必备 1.网页的理解 为他人提供某些服务。不损害他人利益的，符合国家规定的网页服务。 2.文件扩展名 提问：如何使得文件的扩展名显示出来？...在浏览器中访问网页，在本质上其实就是访问一个文件。 每个服务器上的网站服务，默认情况下把index为文件名的文件作为一张网页的首页。...margin-right表示标签距离右方多少像素值 margin-bottom表示标签距离下方多少像素值 margin表示上右下左的顺序写距离 容器的内边距 padding-top表示标签内部距离上方多少像素值...padding-left表示标签内部距离左边多少像素值 padding-right表示标签内部距离右方多少像素值 padding-bottom表示标签内部距离下方多少像素值 padding表示标签内部距离上右下左的顺序写距离...中的符号对应方式，同样的，符号.表示class 一般情况下，我们规定这个标签用来存放网页所有结构： 网页内部内容结构 六、JS入门 js是javascript
就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。...分析这个网页由哪些HTML组成： （1）“勇气”是网页内容文章的标题，就是标题标签，它在网页上的代码写成勇气。 （2）“三年级时…我也没勇气参加。”...是网页中文章的段落，是段落标签。它在网页上的代码写成 三年级时...我也没勇气参加。... （3）网页上那张小女生的图片，由img标签来完成的，它在网页上的代码写成 1.4 标签语法 1.标签由英文尖括号括起来，如就是一个标签。...4.标签举例： （1） （2） （3） 5.标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：里嵌套，那么</
IE7及以下版本不支持这个属性。 更多meta的作用可在对前端有一定了解后自行探索 ☔div标签 div标签用于将文档划分为独立的、不同的部分，从而构成一个完整的网页。...S10全球总决赛冠军 拜登当选新一任美国总统 2020天猫双11成交额4982亿 ul列表前默认有实心圆点符号，可以通过修改type属性来改变这个符号... 打开冰箱门 将大象放进冰箱 关上冰箱门 ol列表前默认有数字符号，可以通过修改type属性来改变这个符号（同上，更推荐使用...css来改变）： 被那迎面而来的温热香风吹在脸庞上，萧炎有着瞬间的失神，狠狠的甩了甩头，将心中的旖念压下，手掌拍了拍面前几乎和自己同样身高的少女的小脑袋，无奈的道：“你就不能让我说出来，也好满足一下我的虚荣心么？”
重点看一下value=‘text’，这种属性值可以通过JavaScript来改变，三行代码就能解决这个问题，如下图所示： ?...第一行是要输入的日期，第二行是JavaScript代码，“documen.getElementById”是通过HTML的“id”定位元素，通过改变该元素的“value”实现值的变化。...效果演示如下： /3 场景二：动态网页自动下拉/ 一些复杂的动态网页需要下拉才能把元素显示完全，例如腾讯视频主页，如下图所示： ?...如果需要自动爬取这类动态网页，我们同样可以执行JavasScript的方法来实现，用5行代码就可以连续滑动网页，将动态网页元素全部展示出来，代码如下图所示： ?...欢迎大家积极尝试，消耗在家的无聊时间。本文涉及的代码都上传到了github地址上，后台回复“selenium”这个单词即可获取代码。
所有这些用来改变内容外观的东西称之为表现。 3. JavaScript是用来实现网页上的特效。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片的轮换）。...可以这个理解，有动画的，有交互的一般都是用JavaScript来实现。 4. 标签之间是可以嵌套的。 Html文件的基本结构 ......--注释文字--> 标签的用途 语义化。就是明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。...加入单行代码 加入多行代码 是没有前后顺序地列表 有顺序 相当于一个容器 确定逻辑部分： 逻辑部分：页面上相关联的一组元素，如网页中的独立栏目板块...如何你在label标签内点击文本，就会自动触发此控件。就是说，如果用户选中该label标签时，浏览器会自动将焦点转到相关的表单控件上。
整个网页的风格就可以改变，维护起来更加方便。...有哪些的隐藏内容的方法？ 使用display:none来隐藏所有内容 display:none可以让网页中所有内容不显示，如代码、文字、链接、图片、div层，是推荐的内容隐藏方式。...自适应是为了解决如何在不同大小的设备上呈现同样的网页（网页的主题和内容不改变） 响应式的概念覆盖了自适应，而且涵盖的内容更多。...自适应暴露的一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看内容太过拥挤。响应式正是针对这个问题衍生出的概念。...改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint）， 只会触发复合（compositions）(复合是什么，我也不懂，没听说过，有知道的朋友可以在留言区告诉我
一个程序猿和普通电脑用户，当他们浏览到一个效果炫酷的网页的时候，他们的反应是不太相同的： 普通用户会“我靠”一声，随即拿起手中的鼠标，到处点来点去，欣赏网页的精彩内容和炫酷效果； 而程序猿的反应，在“我靠...编写一个HTML页面的过程，在我看来，就像是在一张大纸片上按照我们的设想去叠放小纸片的过程。纸片与纸片之间的摆放关系，有上下级的关系、也有兄弟同级的关系，比如用以下这个例子来理解： ?...，顺序摆放3张分别带有文字的橙色纸片。...location 更进一步，我们还能通过这个得到的Location对象，对当前页面进行刷新、跳转到别的网页等操作。...('div'); //通过ID来获取一个DOM节点 document.getElementById('cat001'); 有些API还是缺失的，比如通过标签的属性名和属性值，通过标签的class等方式来获取
h1{color:red;} span{color:red;} 层叠 层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的...我要变成内联元素 内联元素特点： 1、和其他元素都在一行上； 2、元素的高度、宽度及顶部和底部边距不可设置； 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。...也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。...流动布局模型具有2个比较典型的特征： 第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。...但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。 如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。
填充也可分为上、右、下、左(顺时针)。如下代码： div{padding:20px 10px 15px 30px;} 顺序一定不要搞混。...，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。...:red;} 2、RGB颜色 这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。...我们来看个例子就是设置 div 这个块状元素水平居中： html代码： 我是定宽块状元素，哈哈，我要水平居中显示。...举例如下： html代码： 我是第一行文本 我是第二行文本
大家好，又见面了，我是你们的朋友全栈君。 AngularJS简介 AngularJS是一个JavaScript矿建，他是一个JavaSscript编写的库。...可以通过标签添加到HTML页面。 AngularJS是通过指令扩展了HTML，且通过表达式绑定数据到HTML。...AngularJS属性以ng-开头，但是您可以使用data-ng-来让网页对HTML5有效。 什么是AngularJS?...创建自定义的指令 你可以使用 .directive 函数来添加自定义的指令。 要调用自定义指令，HTML 元素上需要添加自定义指令名。...Scope 是一个对象，有可用的方法和属性。 Scope 可应用在视图和控制器上。 AngularJS 应用组成如下： View(视图), 即 HTML。
HTML决定了网页的框架结构——有几间房间、作什么用途、里面摆放什么东西，CSS决定了网页的样式——房间是如何装潢的（如墙壁是什么颜色的），JavaScript则决定了网页上的用户交互和数据处理——用遥控器遥控电视...HTML是一种网页标记语言。它主要是利用标签来告诉浏览器，标签之间的东西是什么——是标题、段落、图片还是链接等。...我们可以通过链接外部css文档，或者将样式写在HTML文档的标签中，抑或在HTML标签中内嵌属性style=""来实现对样式的定义。...举个例子，我们要让这个段落的背景变成灰色，就可以用以下三种方法实现 记住：网页上的所有东西都盛放在框中 开发者工具 Chrome开发者工具是对前端开发最有用的神器； Firefox也可以。...div层的框所包围 前端开发的流程 有了工具和方法，那网页设计稿的实现具体是怎样操作的呢？
你可能需要检查图像是否全部加载完毕： $('img').load(function () { console.log('image load successful'); }); 你也可以用ID或类替换标签来检查某个特定的图像是否被加载...5、悬停切换类 假设你希望当用户将鼠标悬停在可点击的元素上时，它会改变颜色。...6、禁用输入字段 有时候，你可能想要禁用表格的提交按钮或它的某一项文字输入直到用户执行了特定操作（例如，勾选“我已阅读相关条款”复选框）。...修复的时候要小心这个问题。 12、通过文本查找元素 通过使用jQuery中的contains() 选择器，你可以找到元素内容的文本。...、在改变Visibility时触发 当用户不再关注某个tab，或重新聚焦原来的那个tab上时，触发JavaScript： $(document).on('visibilitychange', function
Selenium 是一个用于 Web 应用程序测试的工具。Selenium 测试直接运行在浏览器中，就像真正的用户在操作一样，是爬复杂动态网页的必备工具。...重点看一下 value=‘text’，这种属性值可以通过 JavaScript 来改变，三行代码就能解决这个问题，如下图所示： ?...第一行是要输入的日期，第二行是 JavaScript 代码，“documen.getElementById”是通过 HTML 的“id”定位元素，通过改变该元素的“value”实现值的变化。...效果演示如下： 场景二：动态网页自动下拉 一些复杂的动态网页需要下拉才能把元素显示完全，例如腾讯视频主页，如下图所示： ?...如果需要自动爬取这类动态网页，我们同样可以执行 JavasScript 的方法来实现，用 5 行代码就可以连续滑动网页，将动态网页元素全部展示出来，代码如下图所示： ?
``，从而找到剧情内容所在的位置，可以发现没有动态加载，且全部都在一个div标签里，非常便于爬取。...第2步，解析页面 bs4解析文本 可以定位到章节所在的位置在/html/body/div[6]/div[1]/div[1]/div/div/div[1]/p标签中，而所有P标签的内容非常整齐，都在class...所以可以使用bs4库的BeautifulSoup库，使用get_text()方法定位获取该div标签下全部P 标签的文本内容。...'}).get_text() 第3步，自动化爬取 伪装浏览器响应头 这里，因为数据量小，所以不需要使用fake_useragent库生成实时改变的响应头来伪装浏览器，可以直接晚上找一个user-agent...然后，直接使用requests库的get()方法传入当前页面的链接和响应头，即可获取整个网页html内容。为了避免不必需要的错误，可以给这个html网页限定为通用的utf-8格式编码。
就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。... 7-6 文字排版--删除线 如果想在网页上设置删除线怎么办，这个样式在电商网站上常会见到： ?...了不起的盖茨比 注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。 单词间距设置： 如果我想设置英文单词之间的间距呢？可以使用 word-spacing 来实现。...我要变成内联元素 内联元素特点： 1、和其他元素都在一行上； 2、元素的高度、宽度及顶部和底部边距不可设置； 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。...但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。 如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。
其实，学习HTML的重点不在于我们掌握了多少标签，而是在于掌握标签的语义以及如何编写一个语义结构良好的页面。...也就是按照 h1、h2、h3、...的顺序依次排列下来，而不是中间拉掉谁。 3.不要用h1~h6来定义样式 h1~h6是有默认样式。...4.不要用div来代替h1~h6 从语义上讲，页面中的标题应该使用h1~h6标签，不要使用 div 来代替。...div 是无语义的标签，若用 div 来代替h1~h6，后期维护会很困难，而且对 SEO 的影响较大，因为这样会让这个页面丢失大量权重。...那为什么我用无序列表呢？ 这是因为，有序列表前的数字外观是固定的，而用无序列表可以通过CSS进行样式改变。
所有这些用来改变内容外观的东西称之为表现。 JavaScript是用来实现网页上的动态效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。 ?...标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：里嵌套，那么必须放在的前面。如下图所示。 4....标签和标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。 2. 标签的在浏览器中的默认样式线条比较粗，颜色为灰色。可以通过css来改变水平线的样式。... 标签 在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个标签中，这个标签的作用就相当于一个容器。 1. div和span类似，都没有特殊的语义。... 标签 使用标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。
看透网页布局的本质 网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？ 牛奶是怎样运输，让消费者购买的呢？...前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？ CSS的定位机制有3种：普通流（标准流）、浮动和定位。...普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。...4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。...- 保护有用的浏览器默认样式而不是完全去掉它们 - 一般化的样式：为大部分HTML元素提供 - 修复浏览器自身的bug并保证各浏览器的一致性 - 优化CSS可用性：用一些小技巧 - 解释代码：用注释和详细的文档来
我和Chris曾就这个话题多次交换意见，最终我们彼此的观点都有所改变，接受了一些过去无法接受的意见。我曾经在公开的、私下的各种场合直言不讳地表示过，目前的HTML验证状况对我来说纯粹是浮云。...从技术上说，尽管 *不是HTML规范中的一个标签，* 在语法上也是正确的，所以语法验证唯一的作用就是确保编写出合法的HTML代码。 标签嵌套验证 - 检查标签是否正确地按照打开的先后顺序关闭。...比如一个 标签没有被正确关闭的话，在这项检查中就会报错。 3. DTD定义验证 - 检查你的代码是否遵循了指定的DTD的定义。...只有同时满足所有浏览器的要求，你的代码才能始终正常工作。由于每个浏览器在其语法分析器中各自以不同方式来实现纠错功能，因此对于不规范的代码，我们无法预计浏览器会如何呈现它。...如果我自己能对自己编写的不规范代码负责，那我就不需要担心什么HTML验证——我真正关注的只是让这个网页正确呈现。 我的观点 我很少会就某个争论的问题公开表态，这恰好是其中之一，希望你喜欢。
常见的浏览器内核比较 Trident：这种浏览器内核是 IE 浏览器用的内核，因为在早期 IE 占有大量的市场份额，所以这种内核比较流行，以前有很多 网页也是根据这个内核的标准来编写的，但是实际上这个内核对真正的网页标准支持不是很好...需要注意的是，预解析并不改变 DOM 树，它将这个工作留给主解析 过程，自己只解析外部资源的引用，比如外部脚本、样式表及图片。 21. CSS 如何阻塞文档解析？...回答： 我认为 html 语义化主要指的是我们应该使用合适的标签来划分网页内容的结构。html 的本质作用其实就是定义网页文档的结构， 一个语义化的文档，能够使页面的结构更加清晰，易于理解。...回答： 实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信，因此我们可以找一个中介者， 让标签页和中介者进行通信，然后让这个中介者来进行消息的转发。...我的理解 二维码登录网页的基本原理是，用户进入登录网页后，服务器生成一个 uid 来标识一个用户。
领取专属 10元无门槛券
手把手带您无忧上云
