爬虫系列:
实操续:HTML基本结构,以及数据来源,网页获取
上次写了一篇爬虫HTML的文章,很多小伙伴和我说,看完文章还是不太懂。
我想了想,只讲了数据在哪获取,不讲数据怎么产生的,是有点不好理解。
今天就来,带大家一起把整个前端知识进行一次梳理。
前端基础知识
HTML基础
·HTML:超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
1.HTML基本标签/结构
<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
<a href='#'>我是链接。</a>
<img src='http://m.imeitou.com/uploads/allimg/2017092012/xtdpb1iua1f.png' />
</body>
</html>
2.关联标签
·表格
到这里,才开始接触HTML层级关系,td必须写在tr里面才可以
<html>
<body>
<table style="border:1px solid red;">
<tbody>
<tr>
<td style="border:1px solid red;" >
第一行第一列
</td>
<td style="border:1px solid red;">
第一行第二列
</td>
</tr>
<tr>
<td style="border:1px solid red;">
第二行第一列
</td>
<td style="border:1px solid red;">
第二行第二列
</td>
</tr>
</tbody>
</table>
</body>
</html>
·列表
·略,表格层级关系弄懂了,这个也很容易理解。
3.form表单
·form表单是HTML(不依靠js)做服务器做交互的!!!
·基本格式:
<form action="form_action.asp" method="get">
<!-- action 访问/提交的网页
Method 提交方法
-->
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="提交" />
</form>
·input 标签,vlue为默认值,name为提交名称, type为类型
有以下几种:
button
checkbox
file
hidden
image
password
radio
reset
submit
text
css样式
·CSS 指层叠样式表 (Cascading Style Sheets)
·样式定义如何显示 HTML 元素。
1.样式表引用
·外部引用
使用link标签,建议写在头部里面
·内部引用
使用style标签,写在头部标签里面
·内敛引用
在标签内部,使用style属性。
2.样式表
·常用的
上面简单演示了边框效果,内容太多,就不进行展开演示了。
·a标签链接
这里就偏向于css3标准了,非前端工作,了解一下就可以了。
·3.边框类
这个模块,用来解决页面布局和变形的问题。
··调试方法
F12开发者模式里面,查看每个边距值,在进行调整。
这里我们可以很清楚的看到,它没有指定长度。
3.选择器
·选择器的作用是把引用的样式表和标签关联起来。
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<style>
span{
background:blue;
}
#id1{
color:red;
}
.class1{
color:green;
}
</style>
</head>
<body>
<div id='id1'>
id选择器
<span>
span标签
</span>
</div>
<br>
<div class='class1'>
class选择器
<span>
span标签
</span>
</div>
</body>
</html>
第一个span是元素选择器
背景色变成蓝色了
第二个id选择器,字体颜色变成红色了。
CSS中用“#”号表示
HTML中用id取值
对应上就可以了
第三个class选择器
CSS中用“.”号表示
HTML中用class取值
新手掌握这3中已经够用了,想成为前端大牛,需要自己不断尝试。
JavaScript
JavaScript 能够动态改变 HTML 内容。
效果演示:
知识点整理:
基础语法
·和大多数编程语言类似。
var i=0;
var str="";
var arr=[];
var obj={};
if (prompt("请输入")==1){
alert(1);
}
DOM
·获取dom
三种获取方式
·操作dom
可以改变样式,添加节点,等等
·绑定事件
可以在HTML标签添加function调用,
也可以在dom对象中绑定
var container=document.getElementById(“container”).οnclick=function(){}
前面效果图源码。
<div id="div-input">
<button onclick=change()>
变色
</button>
<button onclick=add()>
添加
</button>
<button onclick=rom()>
删除
</button>
</div>
<div id="container">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<script>
function change(){
var container=document.getElementById("container");
if(container.style.color=='blue'){
container.style.color='green';
}else{
container.style.color='blue';
}
}
function add(){
var container=document.getElementById("container");
var p = document.createElement('p');
p.innerHTML="p";
container.appendChild(p);
}
function rom(){
var container=document.getElementsByTagName("p");
container[container.length-1].remove();
}
</script>
框架
jQuery库为Web脚本编程提供了通用的抽象层,使得它几乎适用于任何编程的情形。由天它容易扩展而且不断有新插件面世增强它的功能,所以这里无法涵盖它所有可能的用途和功能。
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
结语
对于每个人来说,完成指定工作内容,不需要你什么都会、同时,你对自己工作方向没有一个清晰的规划,和具体的了解,一路下来,磕磕碰碰会很多。
好在路途中,新鲜有趣的东西也不少,加油!